feat(settings): screen setup

app/components/Settings/TopScreen/StatusBar.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import STATUS_BAR_IMAGE from "/assets/images/home/top-screen/status-bar/status-bar.webp";
+import GBA_DISPLAY_IMAGE from "/assets/images/home/top-screen/status-bar/gba-display.webp";
+import STARTUP_MODE_IMAGE from "/assets/images/home/top-screen/status-bar/startup-mode.webp";
+import BATTERY_IMAGE from "/assets/images/home/top-screen/status-bar/battery.webp";
+
+const [statusBarImage, gbaDisplayImage, startupModeImage, batteryImage] =
+  useImages(
+    STATUS_BAR_IMAGE,
+    GBA_DISPLAY_IMAGE,
+    STARTUP_MODE_IMAGE,
+    BATTERY_IMAGE,
+  );
+
+useRender((ctx) => {
+  const TEXT_Y = 11;
+
+  ctx.drawImage(statusBarImage!, 0, 0);
+
+  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!, 210, 2);
+  ctx.drawImage(startupModeImage!, 226, 2);
+  ctx.drawImage(batteryImage!, 242, 4);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>