feat: top screen status bar

app/components/TopScreen/StatusBar.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const gbaDisplayImage = useTemplateRef("gbaDisplayImage");
+const startupModeImage = useTemplateRef("startupModeImage");
+const batteryImage = useTemplateRef("batteryImage");
+
+useRender((ctx) => {
+  if (!gbaDisplayImage.value || !startupModeImage.value || !batteryImage.value)
+    return;
+
+  const TEXT_Y = 11;
+
+  ctx.fillStyle = "#ffffff";
+  ctx.font = "7px NDS7";
+
+  // username
+  ctx.fillText("pihkaal", 3, TEXT_Y);
+
+  // time + date
+  const fillNumberCell = (value: number, cellX: number, offset: number) => {
+    const text = value.toFixed().padStart(2, "0");
+    const { actualBoundingBoxRight: width } = ctx.measureText(text);
+
+    const x = cellX * 16;
+    ctx.fillText(text, Math.floor(x + offset + (16 - width) / 2), TEXT_Y);
+  };
+
+  const now = new Date();
+
+  fillNumberCell(now.getHours(), 9, 1);
+  if (Math.floor(now.getMilliseconds() / 500) % 2 == 0) {
+    ctx.fillText(":", 159, TEXT_Y);
+  }
+  fillNumberCell(now.getMinutes(), 10, -1);
+
+  fillNumberCell(now.getDate(), 11, 1);
+  ctx.fillText("/", 190, TEXT_Y);
+  fillNumberCell(now.getMonth() + 1, 12, -1);
+
+  // icons
+  ctx.drawImage(gbaDisplayImage.value, 210, 2);
+  ctx.drawImage(startupModeImage.value, 226, 2);
+  ctx.drawImage(batteryImage.value, 242, 4);
+});
+</script>
+
+<template>
+  <img ref="gbaDisplayImage" src="/assets/status-bar_gba-display.png" hidden />
+  <img
+    ref="startupModeImage"
+    src="/assets/status-bar_startup-mode.png"
+    hidden
+  />
+  <img ref="batteryImage" src="/assets/status-bar_battery.png" hidden />
+</template>

app/components/TopScreen/TopScreen.vue

@@ -3,6 +3,7 @@
     <TopScreenBackground />
     <TopScreenCalendar />
     <TopScreenClock />
+    <TopScreenStatusBar />
 
     <slot />
   </Screen>