Add tictactoe segment

showbits-thermal-printer-ui/src/components/CSegment.vue

@@ -3,8 +3,9 @@ import { ref } from "vue";
 import CSegmentCalendar from "./CSegmentCalendar.vue";
 import CSegmentEgg from "./CSegmentEgg.vue";
 import CSegmentText from "./CSegmentText.vue";
+import CSegmentTictactoe from "./CSegmentTictactoe.vue";
 
-const mode = ref<"calendar" | "egg" | "text">();
+const mode = ref<"calendar" | "egg" | "text" | "tictactoe">();
 </script>
 
 <template>
@@ -13,6 +14,7 @@ const mode = ref<"calendar" | "egg" | "text">();
     <CSegmentCalendar v-if="mode === 'calendar'" />
     <CSegmentEgg v-if="mode === 'egg'" />
     <CSegmentText v-if="mode === 'text'" />
+    <CSegmentTictactoe v-if="mode === 'tictactoe'" />
     <hr v-if="mode !== undefined" />
     <section>
       <p>What do you want to print?</p>
@@ -22,7 +24,7 @@ const mode = ref<"calendar" | "egg" | "text">();
         <button @click="mode = 'text'">Chat Message</button>
         <button @click="mode = 'egg'">Easter Egg</button>
         <button @click="mode = 'text'">Text</button>
-        <button @click="mode = 'text'">Tic Tac Toe</button>
+        <button @click="mode = 'tictactoe'">Tic Tac Toe</button>
       </div>
     </section>
   </div>

showbits-thermal-printer-ui/src/components/CSegmentTictactoe.vue

@@ -0,0 +1,40 @@
+<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 feed = ref(true);
+
+function submit() {
+  const data = new URLSearchParams();
+  data.append("feed", String(feed.value));
+  void makeRequest("/api/tictactoe", data);
+}
+</script>
+
+<template>
+  <form ref="form" @submit.prevent="submit">
+    <h2>Tic Tac Toe</h2>
+    <svg viewBox="0 0 384 384">
+      <path
+        stroke="#000"
+        stroke-width="4"
+        d="M128,0V384 M256,0V384 M0,128H384 M0,256H384"
+      />
+    </svg>
+    <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;
+}
+</style>