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

app/components/Common/Bars.vue

@@ -13,29 +13,17 @@ const props = withDefaults(
 );
 
 const { onRender } = useScreen();
-
-const app = useAppStore();
 const { assets } = useAssets();
 
-const BAR_WIDTH = 256;
-const BAR_HEIGHT = 24;
 const TITLE_Y = 5;
 
 onRender((ctx) => {
   ctx.globalAlpha = props.opacity;
 
   // top bar
-  ctx.drawImage(
-    assets.common.barsSheet,
-    0,
-    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
-    BAR_WIDTH,
-    BAR_HEIGHT,
-    0,
-    -props.yOffset,
-    BAR_WIDTH,
-    BAR_HEIGHT,
-  );
+  assets.images.common.barsSheet.draw(ctx, 0, -props.yOffset, {
+    colored: true,
+  });
 
   if (props.title) {
     ctx.fillStyle = "#000000";
@@ -46,17 +34,9 @@ onRender((ctx) => {
   ctx.scale(1, -1);
 
   // bottom bar
-  ctx.drawImage(
-    assets.common.barsSheet,
-    0,
-    (app.color.row * 4 + app.color.col) * BAR_HEIGHT,
-    BAR_WIDTH,
-    BAR_HEIGHT,
-    0,
-    -192 - props.yOffset,
-    BAR_WIDTH,
-    BAR_HEIGHT,
-  );
+  assets.images.common.barsSheet.draw(ctx, 0, -192 - props.yOffset, {
+    colored: true,
+  });
 }, 50);
 
 defineOptions({