feat(projects): render preview in top screen, also prepare for markdown rendering

app/components/Projects/TopScreen/Background.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import BACKGROUND_IMAGE from "/assets/images/projects/top-screen/background.webp";
+
+const [backgroundImage] = useImages(BACKGROUND_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(backgroundImage!, 0, 0);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Projects/TopScreen/StatusBar.vue

@@ -0,0 +1,59 @@
+<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.translate(0, store.isIntro ? store.intro.statusBarY : 0);
+
+  //ctx.globalAlpha = store.isOutro ? store.outro.stage2Opacity : 1;
+  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>

app/components/Projects/TopScreen/TopScreen.vue

@@ -1,5 +1,103 @@
 <script setup lang="ts">
-defineOptions({
-  render: () => null,
+import Background from "./Background.vue";
+import StatusBar from "./StatusBar.vue";
+
+const store = useProjectsStore();
+
+useRender((ctx) => {
+  const project = store.projects[store.currentProject];
+  if (!project) return;
+
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+
+  const preview = store.projects[store.currentProject]?.preview;
+  if (!preview) return;
+  try {
+    const x = (256 - preview.width) / 2;
+    const y = (192 - preview.height) / 2 + 10;
+    ctx.translate(x, y);
+
+    ctx.fillStyle = "#a6a6a6";
+    ctx.fillRect(0, 0, preview.width + 2, preview.height + 2);
+    ctx.fillStyle = "#000000";
+    ctx.fillRect(-1, -1, preview.width + 2, preview.height + 2);
+
+    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
+    ctx.shadowBlur = 10;
+    ctx.shadowOffsetX = 2;
+    ctx.shadowOffsetY = 2;
+
+    ctx.drawImage(preview, 0, 0);
+  } catch {
+    // NOTE: this is needed because not all projects have previews yet
+  }
+  return;
+
+  /*
+   * NOTE: following code is markdown renderer
+
+  let penY = 20;
+  const SPACE_Y = 6;
+
+  for (const node of project.body) {
+    switch (node.type) {
+      case "h1": {
+        ctx.font = "10px NDS10";
+        penY += fillTextCentered(ctx, node.text, 0, penY, 256);
+        break;
+      }
+
+      case "p": {
+        ctx.font = "10px NDS10";
+        penY += fillTextWordWrapped(ctx, node.text, 10, penY, 236) - 6;
+        break;
+      }
+
+      case "img": {
+        const x = 10 + 236 / 2 - node.image.width / 2;
+
+        if (1) {
+          ctx.fillStyle = "#000000";
+          ctx.fillRect(
+            x - 2,
+            penY - 2,
+            node.image.width + 4,
+            node.image.height + 4,
+          );
+          ctx.fillStyle = "#ffffff";
+          ctx.fillRect(
+            x - 1,
+            penY - 1,
+            node.image.width + 2,
+            node.image.height + 2,
+          );
+        } else {
+          ctx.fillStyle = "#7d7d7d";
+          ctx.fillRect(
+            x - 1,
+            penY - 1,
+            node.image.width + 2,
+            node.image.height + 2,
+          );
+        }
+
+        ctx.drawImage(node.image, x, penY);
+        penY += node.image.height;
+        break;
+      }
+
+      default:
+        throw new Error("not implemented");
+    }
+    penY += SPACE_Y;
+    }
+    */
 });
 </script>
+
+<template>
+  <Background />
+
+  <StatusBar />
+</template>