feat: colorize the ui based on the app color

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