feat(assets): use single texture atlas instead of loading all images individually

app/components/Home/BottomScreen/Background.vue

@@ -3,11 +3,12 @@ const { onRender } = useScreen();
 
 const store = useHomeStore();
 const app = useAppStore();
+
 const { assets } = useAssets();
 
 onRender((ctx) => {
   ctx.globalAlpha = app.booted ? 1 : store.intro.stage1Opacity;
-  ctx.drawImage(assets.home.bottomScreen.background, 0, 0);
+  assets.images.home.bottomScreen.background.draw(ctx, 0, 0);
 });
 
 defineOptions({

app/components/Home/BottomScreen/Button.vue

@@ -3,14 +3,16 @@ const props = defineProps<{
   x: number;
   y: number;
   opacity: number;
-  image: HTMLImageElement;
+  image: {
+    draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
+  };
 }>();
 
 const { onRender } = useScreen();
 
 onRender((ctx) => {
   ctx.globalAlpha = props.opacity;
-  ctx.drawImage(props.image, props.x, props.y);
+  props.image.draw(ctx, props.x, props.y);
 });
 
 defineOptions({

app/components/Home/BottomScreen/Buttons.vue

@@ -128,45 +128,45 @@ onRender((ctx) => {
     :x="33"
     :y="25 + getButtonOffset('projects')"
     :opacity="getOpacity('projects')"
-    :image="assets.home.bottomScreen.buttons.game"
+    :image="assets.images.home.bottomScreen.buttons.game"
   />
   <Button
     :x="32"
     :y="72 + getButtonOffset('contact')"
     :opacity="getOpacity('contact')"
-    :image="assets.home.bottomScreen.buttons.contact"
+    :image="assets.images.home.bottomScreen.buttons.contact"
   />
   <Button
     :x="128"
     :y="72 + getButtonOffset('gallery')"
     :opacity="getOpacity('gallery')"
-    :image="assets.home.bottomScreen.buttons.gallery"
+    :image="assets.images.home.bottomScreen.buttons.gallery"
   />
 
   <Button
     :x="33"
     :y="121"
     :opacity="getOpacity()"
-    :image="assets.home.bottomScreen.buttons.gamePak"
+    :image="assets.images.home.bottomScreen.buttons.gamePak"
   />
 
   <Button
     :x="10"
     :y="175 + getButtonOffset('theme')"
     :opacity="getOpacity('theme')"
-    :image="assets.home.bottomScreen.buttons.theme"
+    :image="assets.images.home.bottomScreen.buttons.theme"
   />
   <Button
     :x="117"
     :y="170 + getButtonOffset('settings')"
     :opacity="getOpacity('settings')"
-    :image="assets.home.bottomScreen.buttons.settings"
+    :image="assets.images.home.bottomScreen.buttons.settings"
   />
   <Button
     :x="235"
     :y="175 + getButtonOffset('alarm')"
     :opacity="getOpacity('alarm')"
-    :image="assets.home.bottomScreen.buttons.alarm"
+    :image="assets.images.home.bottomScreen.buttons.alarm"
   />
 
   <Selector :rect="selectorPosition" :opacity="getOpacity()" />