feat(settings/touchScreen/tapTap): implement

app/utils/canvas.ts

@@ -78,6 +78,41 @@ export const drawCheckbox = (
   }
 };
 
+export const fillCirclePixelated = (
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  radius: number,
+) => {
+  const r = Math.floor(radius);
+  for (let dy = -r; dy <= r; dy++) {
+    for (let dx = -r; dx <= r; dx++) {
+      if (dx * dx + dy * dy <= r * r) {
+        ctx.fillRect(Math.floor(cx) + dx, Math.floor(cy) + dy, 1, 1);
+      }
+    }
+  }
+};
+
+export const strokeCirclePixelated = (
+  ctx: CanvasRenderingContext2D,
+  cx: number,
+  cy: number,
+  radius: number,
+  thickness: number = 2,
+) => {
+  const outerR = Math.floor(radius);
+  const innerR = Math.floor(radius - thickness);
+  for (let dy = -outerR; dy <= outerR; dy++) {
+    for (let dx = -outerR; dx <= outerR; dx++) {
+      const distSq = dx * dx + dy * dy;
+      if (distSq <= outerR * outerR && distSq > innerR * innerR) {
+        ctx.fillRect(Math.floor(cx) + dx, Math.floor(cy) + dy, 1, 1);
+      }
+    }
+  }
+};
+
 export const fillTextWordWrapped = (
   ctx: CanvasRenderingContext2D,
   text: string,
@@ -120,3 +155,39 @@ export const fillTextWordWrapped = (
 
   return lineCount * height;
 };
+
+export const drawButton = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+) => {
+  const { assets } = useAssets((a) => a.images.common);
+
+  const LEFT_WIDTH = assets.buttonLeft.rect.width;
+  const RIGHT_WIDTH = assets.buttonRight.rect.width;
+  const BODY_WIDTH = assets.buttonBody.rect.width;
+
+  const bodySpace = width - LEFT_WIDTH - RIGHT_WIDTH;
+  const bodyCount = Math.ceil(bodySpace / BODY_WIDTH);
+
+  ctx.save();
+  ctx.translate(x, y);
+
+  assets.buttonLeft.draw(ctx, 0, 0);
+
+  for (let i = 0; i < bodyCount; i++) {
+    assets.buttonBody.draw(ctx, LEFT_WIDTH + i * BODY_WIDTH, 0);
+  }
+
+  assets.buttonRight.draw(ctx, width - RIGHT_WIDTH, 0);
+
+  ctx.textBaseline = "top";
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#494118";
+
+  fillTextHCentered(ctx, text, 1, 4, width);
+
+  ctx.restore();
+};