feat: render image in background

app/app.vue

@@ -1,3 +1,42 @@
+<!-- <template>
+  <div
+    :style="{
+      position: 'relative',
+      width: '256px',
+      transformOrigin: 'top left',
+    }"
+  >
+    <div
+      :style="{
+        boxSizing: 'border-box',
+        width: '256px',
+        height: '192px',
+      }"
+    >
+      <img src="/assets/background.png" />
+
+      <div
+        :style="{
+          position: 'absolute',
+          display: 'grid',
+          gap: '1px',
+          top: 'calc(4 * 16px)',
+          right: 'calc(1 * 16px + 1px)',
+          gridTemplateRows: 'repeat(5, 15px)',
+          gridTemplateColumns: 'repeat(7, 15px)',
+        }"
+      >
+        <div
+          v-for="i in 5 * 7"
+          :key="i"
+          :style="{ display: 'flex', flexDirection: 'column' }"
+        >
+          <span :style="{ fontSize: '12px' }">8</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template> -->
 <template>
   <Screen>
     <Background />

app/assets/app.css

@@ -0,0 +1,20 @@
+@font-face {
+  font-family: "Nintendo DS BIOS";
+  src: url("/assets/Nintendo-DS-BIOS.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: "Nintendo DS BIOS", monospace;
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: grayscale;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}

app/components/Background.vue

@@ -1,8 +1,13 @@
 <script lang="ts" setup>
+const backgroundImage = useTemplateRef("backgroundImage");
+
 useRender((ctx) => {
-  ctx.fillStyle = "green";
-  ctx.fillRect(0, 0, 100, 100);
+  if (!backgroundImage.value) return;
+
+  ctx.drawImage(backgroundImage.value, 0, 0);
 });
 </script>
 
-<template></template>
+<template>
+  <img ref="backgroundImage" src="/assets/background.png" hidden />
+</template>

nuxt.config.ts

@@ -2,4 +2,5 @@
 export default defineNuxtConfig({
   compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
+  css: ["~/assets/app.css"],
 });