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

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),
     );
   }