From 009b19e404a9ba2dd30e086f563db953a741ac47 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Mon, 10 Nov 2025 14:24:20 +0100
Subject: [PATCH] feat: move top screen components to own folder, and implement
 calendar

---
 app/app.vue                                   | 53 ++++---------
 app/components/Screen.vue                     |  4 +
 app/components/Stats.vue                      |  4 +-
 app/components/{ => TopScreen}/Background.vue |  2 +-
 app/components/TopScreen/Calendar.vue         | 75 +++++++++++++++++++
 app/components/TopScreen/TopScreen.vue        |  8 ++
 6 files changed, 105 insertions(+), 41 deletions(-)
 rename app/components/{ => TopScreen}/Background.vue (91%)
 create mode 100644 app/components/TopScreen/Calendar.vue
 create mode 100644 app/components/TopScreen/TopScreen.vue

diff --git a/app/app.vue b/app/app.vue
index 74df694..0693ac1 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -1,45 +1,24 @@
-<!-- <template>
+<script setup lang="ts">
+const showStats = ref(false);
+</script>
+
+<template>
   <div
     :style="{
-      position: 'relative',
-      width: '256px',
-      transformOrigin: 'top left',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px',
     }"
   >
-    <div
-      :style="{
-        boxSizing: 'border-box',
-        width: '256px',
-        height: '192px',
-      }"
-    >
-      <img src="/assets/background.png" />
+    <div :style="{ display: 'flex', alignItems: 'center', gap: '4px' }">
+      <input id="statsCheckbox" type="checkbox" v-model="showStats" />
+      <label for="statsCheckbox">Stats</label>
+    </div>
 
-      <div
-        :style="{
-          position: 'absolute',
-          display: 'grid',
-          gap: '1px',
-          top: 'calc(4 * 16px)',
-          right: 'calc(1 * 16px + 1px)',
-          gridTemplateRows: 'repeat(5, 15px)',
-          gridTemplateColumns: 'repeat(7, 15px)',
-        }"
-      >
-        <div
-          v-for="i in 5 * 7"
-          :key="i"
-          :style="{ display: 'flex', flexDirection: 'column' }"
-        >
-          <span :style="{ fontSize: '12px' }">8</span>
-        </div>
-      </div>
+    <div>
+      <TopScreen>
+        <Stats v-if="showStats" />
+      </TopScreen>
     </div>
   </div>
-</template> -->
-<template>
-  <Screen>
-    <Background />
-    <Stats />
-  </Screen>
 </template>
diff --git a/app/components/Screen.vue b/app/components/Screen.vue
index 06bf8b8..202d722 100644
--- a/app/components/Screen.vue
+++ b/app/components/Screen.vue
@@ -36,7 +36,11 @@ const renderFrame = (timestamp: number) => {
   ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
   for (const callback of renderCallbacks) {
+    ctx.save();
+
     callback(ctx);
+
+    ctx.restore();
   }
 
   lastRealFrameTime = Date.now() - start;
diff --git a/app/components/Stats.vue b/app/components/Stats.vue
index def8f9b..e2bd688 100644
--- a/app/components/Stats.vue
+++ b/app/components/Stats.vue
@@ -31,7 +31,7 @@ useRender((ctx) => {
   const LINE_HEIGHT = 12;
 
   ctx.fillStyle = "red";
-  ctx.fillRect(props.x - 2, props.y, 140, LINE_COUNT * LINE_HEIGHT + 3);
+  ctx.fillRect(props.x - 2, props.y, 120, LINE_COUNT * LINE_HEIGHT + 3);
 
   let textY = props.y;
 
@@ -59,5 +59,3 @@ useRender((ctx) => {
   );
 });
 </script>
-
-<template></template>
diff --git a/app/components/Background.vue b/app/components/TopScreen/Background.vue
similarity index 91%
rename from app/components/Background.vue
rename to app/components/TopScreen/Background.vue
index dceff7a..4be4828 100644
--- a/app/components/Background.vue
+++ b/app/components/TopScreen/Background.vue
@@ -1,4 +1,4 @@
-<script lang="ts" setup>
+<script setup lang="ts">
 const backgroundImage = useTemplateRef("backgroundImage");
 
 useRender((ctx) => {
diff --git a/app/components/TopScreen/Calendar.vue b/app/components/TopScreen/Calendar.vue
new file mode 100644
index 0000000..fb7219f
--- /dev/null
+++ b/app/components/TopScreen/Calendar.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// NOTE: calendar background is handled by TopScreenBackground
+
+const lastRowImage = useTemplateRef("lastRowImage");
+const daySelectorImage = useTemplateRef("daySelectorImage");
+
+useRender((ctx) => {
+  if (!lastRowImage.value || !daySelectorImage.value) return;
+
+  ctx.fillStyle = "black";
+  ctx.font = "7px NDS7";
+
+  const CALENDAR_COLS = 7;
+  const CALENDAR_ROWS = 5;
+  const CALENDAR_LEFT = 128;
+  const CALENDAR_TOP = 64;
+
+  ctx.fillStyle = "#343434";
+
+  const now = new Date();
+  const year = now.getFullYear();
+  const month = now.getMonth();
+
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+  const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
+  if (extraRow) {
+    ctx.drawImage(lastRowImage.value, CALENDAR_LEFT - 3, CALENDAR_TOP + 79);
+  }
+
+  for (let col = 0; col < CALENDAR_ROWS + (extraRow ? 1 : 0); col += 1) {
+    for (let row = 0; row < CALENDAR_COLS; row += 1) {
+      const cellIndex = col * CALENDAR_COLS + row;
+      const day = cellIndex - firstDay + 1;
+
+      if (day > 0 && day <= daysInMonth) {
+        const dayText = day.toString();
+        const { actualBoundingBoxRight: width } = ctx.measureText(dayText);
+
+        const cellLeft = CALENDAR_LEFT + row * 16;
+        const cellTop = CALENDAR_TOP + col * 16;
+
+        if (now.getDate() === day) {
+          ctx.drawImage(daySelectorImage.value, cellLeft, cellTop);
+        }
+
+        ctx.fillText(
+          dayText,
+          cellLeft + Math.floor((15 - width) / 2),
+          cellTop + 11,
+        );
+      }
+    }
+  }
+
+  ctx.fillStyle = "black";
+  ctx.font = "9px NDS9";
+  ctx.letterSpacing = "2px";
+
+  const timeText = `${month}/${year}`;
+  const { actualBoundingBoxRight: width } = ctx.measureText(timeText);
+
+  ctx.fillText(
+    timeText,
+    CALENDAR_LEFT + Math.floor((111 - width) / 2),
+    CALENDAR_TOP - 20,
+  );
+});
+</script>
+
+<template>
+  <img ref="lastRowImage" src="/assets/calendar_last-row.png" hidden />
+  <img ref="daySelectorImage" src="/assets/calendar_day-selector.png" hidden />
+</template>
diff --git a/app/components/TopScreen/TopScreen.vue b/app/components/TopScreen/TopScreen.vue
new file mode 100644
index 0000000..c1415bf
--- /dev/null
+++ b/app/components/TopScreen/TopScreen.vue
@@ -0,0 +1,8 @@
+<template>
+  <Screen>
+    <TopScreenBackground />
+    <TopScreenCalendar />
+
+    <slot />
+  </Screen>
+</template>