feat: generic button navigation

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,
+  };
+};