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

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>