From 100219103a10ffcd25200028a6c568b8b91f5ac1 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 11 Nov 2025 13:47:55 +0100
Subject: [PATCH] feat: top screen status bar

---
 app/assets/status-bar_battery.png      | Bin 0 -> 531 bytes
 app/assets/status-bar_gba-display.png  | Bin 0 -> 687 bytes
 app/assets/status-bar_startup-mode.png | Bin 0 -> 687 bytes
 app/components/TopScreen/StatusBar.vue |  54 +++++++++++++++++++++++++
 app/components/TopScreen/TopScreen.vue |   1 +
 5 files changed, 55 insertions(+)
 create mode 100644 app/assets/status-bar_battery.png
 create mode 100644 app/assets/status-bar_gba-display.png
 create mode 100644 app/assets/status-bar_startup-mode.png
 create mode 100644 app/components/TopScreen/StatusBar.vue

diff --git a/app/assets/status-bar_battery.png b/app/assets/status-bar_battery.png
new file mode 100644
index 0000000000000000000000000000000000000000..88432c1d61a46725810b3905c8568e148be39cba
GIT binary patch
literal 531
zcmeAS@N?(olHy`uVBq!ia0vp^JV4CO!N$PA=)HB$CLo8gILO_J@#aaLdLV}--O<;P
zfnj4m_n$;oAYUQbBgmJ5p-PQ`p`nF=;TKS-;RORjsR0ASs{{rHs~HRo;stYd1=;{5
zI14-?iy0X7ltGxWVyS%@P>{XE)7O>#B{w&Ztm)rw_Ju(EGCf@!LnI^_;}{qIV+1Ps
z55!>bAIvlO?g<kBOZ_jLwv3q(C<<2hqyIevhBA<PxCC4?g29Ml4MLoOkx`?~;y*{B
zAY2S&%#ErO3`}qlGzM;?fC~QujYCt9$psk?^b->cObXe4m>4px!C=AApB42Ft^wpo
fd;nxaV%t2X%{R1uB<s!m2~z9n>gTe~DWM4f8dz4&

literal 0
HcmV?d00001

diff --git a/app/assets/status-bar_gba-display.png b/app/assets/status-bar_gba-display.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c3e5766e8c8c8e3024c720a9c091f54dd220ada
GIT binary patch
literal 687
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s#=yXMZ?*ddAcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxH#d*8#nps6vltkdSUp`FLnI^_e=)NDV+1Ps
z55x>iAOZ&d!+HPzXM*Mb!xe(mfTe*lV1Ocn!hy&`NVtiWm6Z%23<EfIV3lAxe*8F0
zCzuBDSwJk9b3p79KnxbF5<pnw2a*9Q2YDBcL42$hfd$bm1DSvhEG;b|c7Y^79At;U
z6f;f-TMg!7wGO5bod){?<P4C>$iW6v*xud_@)TH}BsV{wY1zBGZ>BuRAWv66mvv4F
FO#mr(Wheju

literal 0
HcmV?d00001

diff --git a/app/assets/status-bar_startup-mode.png b/app/assets/status-bar_startup-mode.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d5d5c7503c16bedea4bf7a568b8854b22e87c26
GIT binary patch
literal 687
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s#=yXMZ?*ddAcwIy$lZzY=1HA;AcrO0(btiI
zVPik{pF~z5Um@8e$d`ekN{xY`p@o6r7f`6-1p`B=0RzLU1O^7H84L{K1#@-<+5jau
z3p^r=85s1GL71^(seKtxkiEpy*OmPxH#d)r#6th9sSFHEte!58Arg{|zZhBnF#?tR
z2Vw>$5b^&%n9cB?$<x!50W1d-f-3|o28qICz&gFWyg(9Q0F?OuA7}s=gV;dP|6o;6
z1t=7X!N@XLCBO~?83}SAjE0-NZQC}u32;HU2#^66M0PJ$i@<^)O9+AO+qZ+2z<mqy
zF$jP{02zSzK$ZVl&`o4yWCVK!MkC9^9Sjo$ISHf?o73QmK?*<^1Yio0#X#a0grWp;
RIu85;t8w*nS?83{1OUM{gogkC

literal 0
HcmV?d00001

diff --git a/app/components/TopScreen/StatusBar.vue b/app/components/TopScreen/StatusBar.vue
new file mode 100644
index 0000000..b3b08a7
--- /dev/null
+++ b/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>
diff --git a/app/components/TopScreen/TopScreen.vue b/app/components/TopScreen/TopScreen.vue
index 0bee18c..7b2be6d 100644
--- a/app/components/TopScreen/TopScreen.vue
+++ b/app/components/TopScreen/TopScreen.vue
@@ -3,6 +3,7 @@
     <TopScreenBackground />
     <TopScreenCalendar />
     <TopScreenClock />
+    <TopScreenStatusBar />
 
     <slot />
   </Screen>