feat: colorize the ui based on the app color

app/components/Common/Bars.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    yOffset?: number;
+    opacity?: number;
+    title?: string | undefined;
+  }>(),
+  {
+    yOffset: 0,
+    opacity: 1,
+    title: undefined,
+  },
+);
+
+const app = useAppStore();
+const { assets } = useAssets();
+
+const BAR_WIDTH = 256;
+const BAR_HEIGHT = 24;
+const TITLE_Y = 5;
+
+useRender((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,
+  );
+
+  if (props.title) {
+    ctx.fillStyle = "#000000";
+    ctx.font = "10px NDS10";
+    fillTextCentered(ctx, props.title, 0, TITLE_Y - props.yOffset, 256);
+  }
+
+  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,
+  );
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Common/ButtonSelector.vue

@@ -9,9 +9,11 @@ const props = withDefaults(
   },
 );
 
+const app = useAppStore();
 const { assets } = useAssets();
 
 const ANIMATION_SPEED = 0.25;
+const CORNER_SIZE = 11;
 
 let [currentX, currentY, currentWidth, currentHeight] = props.rect;
 
@@ -43,21 +45,67 @@ useRender((ctx) => {
 
   ctx.globalAlpha = props.opacity;
 
-  ctx.drawImage(assets.common.selectorCorner, x, y);
+  const spriteY = (app.color.row * 4 + app.color.col) * CORNER_SIZE;
 
+  // Top-left corner
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    x,
+    y,
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
+
+  // Top-right corner
   ctx.save();
   ctx.scale(-1, 1);
-  ctx.drawImage(assets.common.selectorCorner, -(x + w), y);
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    -(x + w),
+    y,
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 
+  // Bottom-left corner
   ctx.save();
   ctx.scale(1, -1);
-  ctx.drawImage(assets.common.selectorCorner, x, -(y + h));
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    x,
+    -(y + h),
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 
+  // Bottom-right corner
   ctx.save();
   ctx.scale(-1, -1);
-  ctx.drawImage(assets.common.selectorCorner, -(x + w), -(y + h));
+  ctx.drawImage(
+    assets.common.selectorCornersSheet,
+    0,
+    spriteY,
+    CORNER_SIZE,
+    CORNER_SIZE,
+    -(x + w),
+    -(y + h),
+    CORNER_SIZE,
+    CORNER_SIZE,
+  );
   ctx.restore();
 });