From e4545c5a3386add807d393884e221289a46d7785 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Mon, 3 Mar 2025 15:43:11 +0100
Subject: [PATCH] Add egg segment

---
 .../src/components/CSegment.vue               |  6 +-
 .../src/components/CSegmentEgg.vue            | 78 +++++++++++++++++++
 showbits-thermal-printer/static/egg.html      | 50 ------------
 3 files changed, 82 insertions(+), 52 deletions(-)
 create mode 100644 showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
 delete mode 100644 showbits-thermal-printer/static/egg.html

diff --git a/showbits-thermal-printer-ui/src/components/CSegment.vue b/showbits-thermal-printer-ui/src/components/CSegment.vue
index 6049245..55caeac 100644
--- a/showbits-thermal-printer-ui/src/components/CSegment.vue
+++ b/showbits-thermal-printer-ui/src/components/CSegment.vue
@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CSegmentCalendar from "./CSegmentCalendar.vue";
+import CSegmentEgg from "./CSegmentEgg.vue";
 import CSegmentText from "./CSegmentText.vue";
 
-const mode = ref<"calendar" | "text">();
+const mode = ref<"calendar" | "egg" | "text">();
 </script>
 
 <template>
   <div class="outer">
     <button v-if="mode" class="close" @click="mode = undefined">X</button>
     <CSegmentCalendar v-if="mode === 'calendar'" />
+    <CSegmentEgg v-if="mode === 'egg'" />
     <CSegmentText v-if="mode === 'text'" />
     <hr v-if="mode !== undefined" />
     <section>
@@ -18,7 +20,7 @@ const mode = ref<"calendar" | "text">();
         <button @click="mode = 'calendar'">Calendar</button>
         <button @click="mode = 'text'">Cellular Automaton</button>
         <button @click="mode = 'text'">Chat Message</button>
-        <button @click="mode = 'text'">Easter Egg</button>
+        <button @click="mode = 'egg'">Easter Egg</button>
         <button @click="mode = 'text'">Text</button>
         <button @click="mode = 'text'">Tic Tac Toe</button>
       </div>
diff --git a/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
new file mode 100644
index 0000000..b5bf09b
--- /dev/null
+++ b/showbits-thermal-printer-ui/src/components/CSegmentEgg.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { useApiRequest } from "@/apiRequest";
+import { ref, useTemplateRef } from "vue";
+import CSegmentError from "./CSegmentError.vue";
+
+const { disabled, error, makeRequest } = useApiRequest();
+const form = useTemplateRef<HTMLFormElement>("form");
+
+const seed = ref<number | string>("");
+const mode = ref("random");
+const feed = ref(true);
+
+function submit() {
+  const data = new URLSearchParams();
+  if (typeof seed.value === "number") data.append("seed", seed.value.toFixed());
+  data.append("mode", mode.value);
+  data.append("feed", String(feed.value));
+  void makeRequest("/api/egg", data);
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="submit">
+    <h2>Easter Egg</h2>
+    <svg viewBox="-2 0 4 6">
+      <path
+        fill="#000"
+        d="M0,0 C1,0,2,2,2,3.5 S1,6,0,6 S-2,5,-2,3.5 S-1,0,0,0"
+      />
+    </svg>
+    <label>
+      Seed:
+      <input
+        v-model="seed"
+        type="number"
+        min="-9223372036854775808"
+        max="9223372036854775807"
+        step="1"
+        placeholder="random"
+      />
+    </label>
+    <label>
+      Mode:
+      <select v-model="mode">
+        <option value="random">Random</option>
+        <option value="good">Good</option>
+        <option value="bad">Bad</option>
+      </select>
+    </label>
+    <label><input v-model="feed" type="checkbox" :disabled /> Feed</label>
+    <button :disabled>Print</button>
+    <CSegmentError :message="error" />
+  </form>
+</template>
+
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+input[type="number"] {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+svg {
+  width: 50%;
+  margin: auto;
+}
+
+fieldset {
+  display: flex;
+  flex-direction: column;
+  border: none;
+}
+</style>
diff --git a/showbits-thermal-printer/static/egg.html b/showbits-thermal-printer/static/egg.html
deleted file mode 100644
index 3815de7..0000000
--- a/showbits-thermal-printer/static/egg.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Osterei</title>
-    <style>
-      body {
-        background-color: black;
-      }
-
-      button {
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        translate: -50% -50%;
-
-        padding: 10px;
-        border: none;
-        background-color: #0000;
-        cursor: pointer;
-      }
-
-      button svg {
-        width: calc(min(80vw, 80svh / 6 * 4));
-        height: calc(min(80svh, 80vw / 4 * 6));
-      }
-
-      button:hover path {
-        fill: #db9;
-      }
-
-      button:active path {
-        fill: #a75;
-      }
-    </style>
-  </head>
-  <body>
-    <form method="post">
-      <button>
-        <svg viewBox="-2 0 4 6">
-          <path
-            fill="#fff"
-            d="M0,0 C1,0,2,2,2,3.5 S1,6,0,6 S-2,5,-2,3.5 S-1,0,0,0"
-          />
-        </svg>
-      </button>
-    </form>
-  </body>
-</html>