refactor: restructure components and assets

app/app.vue

@@ -16,9 +16,9 @@ const showStats = ref(false);
     </div>
 
     <div>
-      <TopScreen>
+      <HomeTopScreen>
         <Stats v-if="showStats" />
-      </TopScreen>
+      </HomeTopScreen>
     </div>
     <div>
       <HomeBottomScreen>

app/assets/app.css

@@ -1,20 +1,13 @@
-@font-face {
-  font-family: "Nintendo DS BIOS";
-  src: url("/assets/Nintendo-DS-BIOS.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
-}
-
 @font-face {
   font-family: "NDS7";
-  src: url("/assets/nds-7px.ttf") format("truetype");
+  src: url("/assets/fonts/nds-7px.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
 }
 
 @font-face {
   font-family: "NDS9";
-  src: url("/assets/nds-9px.ttf") format("truetype");
+  src: url("/assets/fonts/nds-9px.ttf") format("truetype");
   font-weight: normal;
   font-style: normal;
 }

app/components/Home/BottomScreen/Background.vue

@@ -11,7 +11,7 @@ useRender((ctx) => {
 <template>
   <img
     ref="backgroundImage"
-    src="/assets/home-screen_bottom_background.png"
+    src="/assets/images/home/bottom-screen/background.png"
     hidden
   />
 </template>

app/components/Home/TopScreen/Background.vue

@@ -9,5 +9,9 @@ useRender((ctx) => {
 </script>
 
 <template>
-  <img ref="backgroundImage" src="/assets/background.png" hidden />
+  <img
+    ref="backgroundImage"
+    src="/assets/images/home/top-screen/background.png"
+    hidden
+  />
 </template>

app/components/Home/TopScreen/Calendar.vue

@@ -70,6 +70,14 @@ useRender((ctx) => {
 </script>
 
 <template>
-  <img ref="lastRowImage" src="/assets/calendar_last-row.png" hidden />
+  <img
-  <img ref="daySelectorImage" src="/assets/calendar_day-selector.png" hidden />
+    ref="lastRowImage"
+    src="/assets/images/home/top-screen/calendar/last-row.png"
+    hidden
+  />
+  <img
+    ref="daySelectorImage"
+    src="/assets/images/home/top-screen/calendar/day-selector.png"
+    hidden
+  />
 </template>

app/components/Home/TopScreen/StatusBar.vue

@@ -44,11 +44,19 @@ useRender((ctx) => {
 </script>
 
 <template>
-  <img ref="gbaDisplayImage" src="/assets/status-bar_gba-display.png" hidden />
   <img
-    ref="startupModeImage"
+    ref="gbaDisplayImage"
-    src="/assets/status-bar_startup-mode.png"
+    src="/assets/images/home/top-screen/status-bar/gba-display.png"
+    hidden
+  />
+  <img
+    ref="startupModeImage"
+    src="/assets/images/home/top-screen/status-bar/startup-mode.png"
+    hidden
+  />
+  <img
+    ref="batteryImage"
+    src="/assets/images/home/top-screen/status-bar/battery.png"
     hidden
   />
-  <img ref="batteryImage" src="/assets/status-bar_battery.png" hidden />
 </template>

app/components/Home/TopScreen/TopScreen.vue

@@ -0,0 +1,10 @@
+<template>
+  <Screen>
+    <HomeTopScreenBackground />
+    <HomeTopScreenCalendar />
+    <HomeTopScreenClock />
+    <HomeTopScreenStatusBar />
+
+    <slot />
+  </Screen>
+</template>

app/components/TopScreen/TopScreen.vue

@@ -1,10 +0,0 @@
-<template>
-  <Screen>
-    <TopScreenBackground />
-    <TopScreenCalendar />
-    <TopScreenClock />
-    <TopScreenStatusBar />
-
-    <slot />
-  </Screen>
-</template>