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

app/components/Home/TopScreen/Calendar.vue

@@ -2,7 +2,6 @@
 const { onRender } = useScreen();
 
 // NOTE: calendar background is handled by TopScreenBackground
-const app = useAppStore();
 const store = useHomeStore();
 const { assets } = useAssets();
 
@@ -14,7 +13,6 @@ onRender((ctx) => {
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;
   const CALENDAR_TOP = 64;
-  const SELECTOR_SIZE = 13;
 
   ctx.fillStyle = "#343434";
 
@@ -30,16 +28,16 @@ onRender((ctx) => {
     : store.isOutro && store.outro.animateTop
       ? store.outro.stage1Opacity
       : 1;
-  ctx.drawImage(
-    assets.home.topScreen.calendar.calendar,
+  assets.images.home.topScreen.calendar.calendar.draw(
+    ctx,
     CALENDAR_LEFT - 3,
     CALENDAR_TOP - 33,
   );
 
   const extraRow = CALENDAR_COLS * CALENDAR_ROWS - daysInMonth - firstDay < 0;
   if (extraRow) {
-    ctx.drawImage(
-      assets.home.topScreen.calendar.lastRow,
+    assets.images.home.topScreen.calendar.lastRow.draw(
+      ctx,
       CALENDAR_LEFT - 3,
       CALENDAR_TOP + 79,
     );
@@ -63,16 +61,11 @@ onRender((ctx) => {
         const cellTop = CALENDAR_TOP + col * 16;
 
         if (now.getDate() === day) {
-          ctx.drawImage(
-            assets.home.topScreen.calendar.daySelectorsSheet,
-            0,
-            (app.color.row * 4 + app.color.col) * SELECTOR_SIZE,
-            SELECTOR_SIZE,
-            SELECTOR_SIZE,
+          assets.images.home.topScreen.calendar.daySelectorsSheet.draw(
+            ctx,
             cellLeft + 1,
             cellTop + 1,
-            SELECTOR_SIZE,
-            SELECTOR_SIZE,
+            { colored: true },
           );
         }