feat: generic button navigation

app/components/Common/ButtonSelector.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    animationSpeed?: number;
+  }>(),
+  {
+    animationSpeed: 0.25,
+  },
+);
+
+const cornerImage = useTemplateRef("cornerImage");
+
+let currentX = props.x;
+let currentY = props.y;
+let currentWidth = props.width;
+let currentHeight = props.height;
+
+useRender((ctx) => {
+  if (!cornerImage.value) return;
+
+  const dx = props.x - currentX;
+  const dy = props.y - currentY;
+  const dw = props.width - currentWidth;
+  const dh = props.height - currentHeight;
+
+  if (
+    Math.abs(dx) < 0.5 &&
+    Math.abs(dy) < 0.5 &&
+    Math.abs(dw) < 0.5 &&
+    Math.abs(dh) < 0.5
+  ) {
+    currentX = props.x;
+    currentY = props.y;
+    currentWidth = props.width;
+    currentHeight = props.height;
+  } else {
+    currentX += dx * props.animationSpeed;
+    currentY += dy * props.animationSpeed;
+    currentWidth += dw * props.animationSpeed;
+    currentHeight += dh * props.animationSpeed;
+  }
+
+  const x = Math.floor(currentX);
+  const y = Math.floor(currentY);
+  const w = Math.floor(currentWidth);
+  const h = Math.floor(currentHeight);
+
+  ctx.drawImage(cornerImage.value, x, y);
+
+  ctx.save();
+  ctx.scale(-1, 1);
+  ctx.drawImage(cornerImage.value, -(x + w), y);
+  ctx.restore();
+
+  ctx.save();
+  ctx.scale(1, -1);
+  ctx.drawImage(cornerImage.value, x, -(y + h));
+  ctx.restore();
+
+  ctx.save();
+  ctx.scale(-1, -1);
+  ctx.drawImage(cornerImage.value, -(x + w), -(y + h));
+  ctx.restore();
+});
+</script>
+
+<template>
+  <img
+    ref="cornerImage"
+    src="/assets/images/home/bottom-screen/buttons/corner.png"
+    hidden
+  />
+</template>

app/composables/useButtonNavigation.ts

@@ -0,0 +1,121 @@
+export type ButtonConfig = [x: number, y: number, w: number, h: number];
+
+export const useButtonNavigation = <T extends Record<string, ButtonConfig>>({
+  buttons,
+  initialButton,
+  onButtonClick,
+  navigation,
+}: {
+  buttons: T;
+  initialButton: keyof T;
+  onButtonClick?: (buttonName: keyof T) => void;
+  navigation?: Record<
+    keyof T,
+    {
+      up?: keyof T;
+      down?: keyof T | "last";
+      left?: keyof T;
+      right?: keyof T;
+      horizontalMode?: "navigate" | "preview";
+    }
+  >;
+}) => {
+  const selectedButton = ref(initialButton);
+  const selectorPosition = computed(() => buttons[selectedButton.value]!);
+
+  const nextButton = ref<keyof T | undefined>();
+
+  useScreenClick((x: number, y: number) => {
+    for (const [buttonName, config] of Object.entries(buttons) as [
+      keyof T,
+      ButtonConfig,
+    ][]) {
+      const [sx, sy, sw, sh] = config;
+      if (x >= sx && x <= sx + sw && y >= sy && y <= sy + sh) {
+        if (selectedButton.value === buttonName) {
+          onButtonClick?.(buttonName);
+        } else {
+          selectedButton.value = buttonName;
+        }
+        break;
+      }
+    }
+  });
+
+  if (navigation) {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      const currentButton = selectedButton.value as keyof T;
+      const currentNav = navigation[currentButton];
+
+      if (!currentNav) return;
+
+      switch (event.key) {
+        case "ArrowUp":
+          if (!currentNav.up) return;
+
+          if (currentNav.up === "last") {
+            selectedButton.value = nextButton.value;
+          } else {
+            nextButton.value = selectedButton.value as keyof T;
+            selectedButton.value = currentNav.up;
+          }
+
+          break;
+
+        case "ArrowDown":
+          if (!currentNav.down) return;
+
+          if (currentNav.down === "last") {
+            if (nextButton.value) {
+              selectedButton.value = nextButton.value;
+            } else {
+              selectedButton.value = currentNav.left ?? currentNav.right;
+            }
+          } else {
+            selectedButton.value = currentNav.down;
+          }
+          break;
+
+        case "ArrowLeft":
+          if (!currentNav.left) return;
+
+          if (currentNav.horizontalMode === "preview") {
+            nextButton.value = currentNav.left;
+          } else {
+            selectedButton.value = currentNav.left;
+          }
+          break;
+
+        case "ArrowRight":
+          if (!currentNav.right) return;
+
+          if (currentNav.horizontalMode === "preview") {
+            nextButton.value = currentNav.right;
+          } else {
+            selectedButton.value = currentNav.right;
+          }
+          break;
+
+        case "Enter":
+        case " ":
+          onButtonClick?.(selectedButton.value);
+          break;
+      }
+
+      event.preventDefault();
+    };
+
+    onMounted(() => {
+      window.addEventListener("keydown", handleKeyPress);
+    });
+
+    onUnmounted(() => {
+      window.removeEventListener("keydown", handleKeyPress);
+    });
+  }
+
+  return {
+    selectedButton,
+    selectorPosition,
+  };
+};