Garmelon/showbits
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add egg segment

Browse source
This commit is contained in:
Joscha 2025-03-03 15:43:11 +01:00
parent db73dee8d7
commit e4545c5a33
3 changed files with 82 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

6
showbits-thermal-printer-ui/src/components/CSegment.vue
View file

@ -1,15 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import CSegmentCalendar from "./CSegmentCalendar.vue"; import CSegmentCalendar from "./CSegmentCalendar.vue";
import CSegmentEgg from "./CSegmentEgg.vue";
import CSegmentText from "./CSegmentText.vue"; import CSegmentText from "./CSegmentText.vue";
const mode = ref<"calendar" | "text">(); const mode = ref<"calendar" | "egg" | "text">();
</script> </script>
<template> <template>
<div class="outer"> <div class="outer">
<button v-if="mode" class="close" @click="mode = undefined">X</button> <button v-if="mode" class="close" @click="mode = undefined">X</button>
<CSegmentCalendar v-if="mode === 'calendar'" /> <CSegmentCalendar v-if="mode === 'calendar'" />
<CSegmentEgg v-if="mode === 'egg'" />
<CSegmentText v-if="mode === 'text'" /> <CSegmentText v-if="mode === 'text'" />
<hr v-if="mode !== undefined" /> <hr v-if="mode !== undefined" />
<section> <section>
@ -18,7 +20,7 @@ const mode = ref<"calendar" | "text">();
<button @click="mode = 'calendar'">Calendar</button> <button @click="mode = 'calendar'">Calendar</button>
<button @click="mode = 'text'">Cellular Automaton</button> <button @click="mode = 'text'">Cellular Automaton</button>
<button @click="mode = 'text'">Chat Message</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'">Text</button>
<button @click="mode = 'text'">Tic Tac Toe</button> <button @click="mode = 'text'">Tic Tac Toe</button>
</div> </div>

78
showbits-thermal-printer-ui/src/components/CSegmentEgg.vue Normal file
View file

@ -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>

50
showbits-thermal-printer/static/egg.html
View file

@ -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>