feat(assets): new assets loading system (currently only for images)

app/components/Projects/TopScreen/Project.vue

@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import BACKGROUND_IMAGE from "~/assets/images/projects/top-screen/background.webp";
-
 const store = useProjectsStore();
 
-const [backgroundImage, ...projectImages] = useImages(
-  BACKGROUND_IMAGE,
-  ...store.projects.map((project) => `/images/projects/${project.id}.webp`),
-);
+const { assets } = useAssets();
 
 const drawTextWithShadow = (
   ctx: CanvasRenderingContext2D,
@@ -60,7 +55,7 @@ const drawTextWithShadow2Lines = (
 };
 
 useRender((ctx) => {
-  ctx.drawImage(backgroundImage!, 0, 0);
+  ctx.drawImage(assets.projects.topScreen.background, 0, 0);
 
   ctx.textBaseline = "hanging";
   ctx.font = "16px Pokemon DP Pro";
@@ -69,7 +64,10 @@ useRender((ctx) => {
   if (!project) return;
 
   // image
-  const projectImage = projectImages[store.currentProject]!;
+  const projectImage =
+    assets.projects.pokemons[
+      project.id as keyof typeof assets.projects.pokemons
+    ];
   ctx.drawImage(
     projectImage,
     Math.floor(52 - projectImage.width / 2),