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

app/components/Projects/BottomScreen/Background.vue

@@ -4,7 +4,7 @@ const { onRender } = useScreen();
 const { assets } = useAssets();
 
 onRender((ctx) => {
-  ctx.drawImage(assets.projects.bottomScreen.background, 0, 0);
+  assets.images.projects.bottomScreen.background.draw(ctx, 0, 0);
 });
 defineOptions({
   render: () => null,

app/components/Projects/BottomScreen/Buttons.vue

@@ -11,23 +11,28 @@ const CLICK_RADIUS = 22;
 const BUTTONS = {
   prev: {
     position: [36, 100],
-    image: assets.projects.bottomScreen.prevPressed,
+    image: assets.images.projects.bottomScreen.prevPressed,
   },
   quit: {
     position: [88, 156],
-    image: assets.projects.bottomScreen.quitPressed,
+    image: assets.images.projects.bottomScreen.quitPressed,
   },
   link: {
     position: [168, 156],
-    image: assets.projects.bottomScreen.linkPressed,
+    image: assets.images.projects.bottomScreen.linkPressed,
   },
   next: {
     position: [220, 100],
-    image: assets.projects.bottomScreen.nextPressed,
+    image: assets.images.projects.bottomScreen.nextPressed,
   },
 } as const satisfies Record<
   string,
-  { position: Point; image: HTMLImageElement }
+  {
+    position: Point;
+    image: {
+      draw: (ctx: CanvasRenderingContext2D, x: number, y: number) => void;
+    };
+  }
 >;
 
 type ButtonType = keyof typeof BUTTONS;
@@ -115,15 +120,15 @@ onClick((x, y) => {
 onRender((ctx) => {
   // Draw disabled buttons
   if (store.currentProject === 0) {
-    ctx.drawImage(
-      assets.projects.bottomScreen.prevDisabled,
+    assets.images.projects.bottomScreen.prevDisabled.draw(
+      ctx,
       BUTTONS.prev.position[0] - 14,
       BUTTONS.prev.position[1] - 14,
     );
   }
   if (store.currentProject === store.projects.length - 1) {
-    ctx.drawImage(
-      assets.projects.bottomScreen.nextDisabled,
+    assets.images.projects.bottomScreen.nextDisabled.draw(
+      ctx,
       BUTTONS.next.position[0] - 14,
       BUTTONS.next.position[1] - 14,
     );
@@ -131,24 +136,24 @@ onRender((ctx) => {
 
   if (currentAnimation?.showButton) {
     const image = BUTTONS[currentAnimation.type].image;
-    ctx.drawImage(
-      image!,
+    image.draw(
+      ctx,
       currentAnimation.position[0] - 14,
       currentAnimation.position[1] - 14,
     );
   }
 
   if (currentAnimation?.showSmallCircle) {
-    ctx.drawImage(
-      assets.projects.bottomScreen.circleSmall,
+    assets.images.projects.bottomScreen.circleSmall.draw(
+      ctx,
       currentAnimation.position[0] - 28,
       currentAnimation.position[1] - 28,
     );
   }
 
   if (currentAnimation?.showBigCircle) {
-    ctx.drawImage(
-      assets.projects.bottomScreen.circleBig,
+    assets.images.projects.bottomScreen.circleBig.draw(
+      ctx,
       currentAnimation.position[0] - 44,
       currentAnimation.position[1] - 44,
     );

app/components/Projects/BottomScreen/LinkConfirmationPopup.vue

@@ -124,7 +124,7 @@ onRender((ctx) => {
   ctx.strokeRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
 
   // text
-  ctx.drawImage(assets.projects.bottomScreen.popupTextBackground, 2, 146);
+  assets.images.projects.bottomScreen.popupTextBackground.draw(ctx, 2, 146);
   ctx.font = "16px Pokemon DP Pro";
   ctx.textBaseline = "top";
   const displayedText = text.value.slice(
@@ -135,10 +135,14 @@ onRender((ctx) => {
 
   // choice box
   if (textProgress.value >= 1) {
-    ctx.drawImage(assets.projects.bottomScreen.popupChoiceBackground, 194, 98);
+    assets.images.projects.bottomScreen.popupChoiceBackground.draw(
+      ctx,
+      194,
+      98,
+    );
 
     const y = selectedOption === "yes" ? YES_Y : NO_Y;
-    ctx.drawImage(assets.projects.bottomScreen.popupSelector, 200, y);
+    assets.images.projects.bottomScreen.popupSelector.draw(ctx, 200, y);
 
     drawTextWithShadow(
       ctx,

app/components/Projects/TopScreen/Background.vue

@@ -4,7 +4,7 @@ const { onRender } = useScreen();
 const { assets } = useAssets();
 
 onRender((ctx) => {
-  ctx.drawImage(assets.projects.topScreen.background, 0, 0);
+  assets.images.projects.topScreen.background.draw(ctx, 0, 0);
 });
 
 defineOptions({

app/components/Projects/TopScreen/Project.vue

@@ -56,7 +56,7 @@ const drawTextWithShadow2Lines = (
 };
 
 onRender((ctx) => {
-  ctx.drawImage(assets.projects.topScreen.background, 0, 0);
+  assets.images.projects.topScreen.background.draw(ctx, 0, 0);
 
   ctx.textBaseline = "hanging";
   ctx.font = "16px Pokemon DP Pro";
@@ -80,19 +80,19 @@ onRender((ctx) => {
     const offsetFromCurrent = i - store.currentProject;
     // TODO: project.id should be typed from useAssets, shouldn't be just a string
     const thumbnailImage =
-      assets.projects.pokemons[
-        store.projects[i]!.id as keyof typeof assets.projects.pokemons
+      assets.images.projects.pokemons[
+        store.projects[i]!.id as keyof typeof assets.images.projects.pokemons
       ]!;
 
-    ctx.drawImage(
-      thumbnailImage,
+    thumbnailImage.draw(
+      ctx,
       Math.floor(
         thumbnailCenterX +
           offsetFromCurrent * thumbnailSpacing -
-          thumbnailImage.width / 2 +
+          thumbnailImage.rect.width / 2 +
           store.offsetX,
       ),
-      Math.floor(thumbnailCenterY - thumbnailImage.height / 2),
+      Math.floor(thumbnailCenterY - thumbnailImage.rect.height / 2),
     );
   }