Update 3D game 2026-07-10 21:20

src/game/useGameLoop.ts

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from "react";
+import { ABILITY_ORDER } from "./data";
+import { useGameStore } from "./store";
+import type { AbilityId } from "./types";
+
+const gamepadAbilityMap: Record<number, AbilityId> = {
+  0: "purify",
+  1: "shield",
+  2: "mend",
+  3: "renew",
+  4: "radiance",
+  5: "barrier",
+};
+
+export function useGameLoop() {
+  useEffect(() => {
+    let frame = 0;
+    let previous = performance.now();
+    let accumulator = 0;
+    const loop = (now: number) => {
+      const delta = Math.min((now - previous) / 1000, 0.25);
+      previous = now;
+      accumulator += delta;
+      if (accumulator >= 0.1) {
+        useGameStore.getState().tick(accumulator);
+        accumulator = 0;
+      }
+      frame = requestAnimationFrame(loop);
+    };
+    frame = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(frame);
+  }, []);
+}
+
+export function useActionBindings(enabled = true, onExit?: () => void) {
+  const exitRef = useRef(onExit);
+  exitRef.current = onExit;
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (!enabled) return;
+      if (event.repeat) return;
+      const store = useGameStore.getState();
+      const key = event.key.toLowerCase();
+      if (store.paused) {
+        if (["escape", "arrowup", "arrowdown", "enter"].includes(key)) event.preventDefault();
+        if (key === "escape") store.setPaused(false);
+        if (key === "arrowup") store.setPauseSelection("resume");
+        if (key === "arrowdown") store.setPauseSelection("exit");
+        if (key === "enter") {
+          if (store.pauseSelection === "resume") store.setPaused(false);
+          else exitRef.current?.();
+        }
+        return;
+      }
+      const numberIndex = Number(event.key) - 1;
+      if (numberIndex >= 0 && numberIndex < ABILITY_ORDER.length) {
+        store.castAbility(ABILITY_ORDER[numberIndex]);
+        return;
+      }
+      switch (key) {
+        case "q":
+          store.cycleMember(-1);
+          break;
+        case "e":
+          store.cycleMember(1);
+          break;
+        case "m":
+          store.setActiveTab(store.activeTab === "map" ? "combat" : "map");
+          break;
+        case "i":
+          store.setActiveTab(store.activeTab === "pack" ? "combat" : "pack");
+          break;
+        case "enter":
+          if (store.phase === "briefing") store.startEncounter();
+          if (store.phase === "victory" || store.phase === "defeat") store.restart();
+          break;
+        case "escape":
+          if (store.phase === "combat") store.setPaused(true);
+          else exitRef.current?.();
+          break;
+      }
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [enabled]);
+
+  useEffect(() => {
+    let frame = 0;
+    let previousButtons: boolean[] = [];
+    const poll = () => {
+      const gamepad = navigator.getGamepads?.()[0];
+      if (gamepad && enabled) {
+        const buttons = gamepad.buttons.map((button) => button.pressed);
+        const store = useGameStore.getState();
+        if (store.paused) {
+          if (buttons[12] && !previousButtons[12]) store.setPauseSelection("resume");
+          if (buttons[13] && !previousButtons[13]) store.setPauseSelection("exit");
+          if ((buttons[1] && !previousButtons[1]) || (buttons[9] && !previousButtons[9])) store.setPaused(false);
+          if (buttons[0] && !previousButtons[0]) {
+            if (store.pauseSelection === "resume") store.setPaused(false);
+            else exitRef.current?.();
+          }
+        } else {
+          for (const [button, ability] of Object.entries(gamepadAbilityMap)) {
+            const index = Number(button);
+            if (buttons[index] && !previousButtons[index]) store.castAbility(ability);
+          }
+          if (buttons[12] && !previousButtons[12]) store.cycleMember(-1);
+          if (buttons[13] && !previousButtons[13]) store.cycleMember(1);
+          if (buttons[8] && !previousButtons[8]) store.setActiveTab(store.activeTab === "map" ? "combat" : "map");
+          if (buttons[9] && !previousButtons[9]) {
+            if (store.phase === "briefing") store.startEncounter();
+            if (store.phase === "victory" || store.phase === "defeat") store.restart();
+            if (store.phase === "combat") store.setPaused(true);
+          }
+        }
+        previousButtons = buttons;
+      } else {
+        previousButtons = [];
+      }
+      frame = requestAnimationFrame(poll);
+    };
+    frame = requestAnimationFrame(poll);
+    return () => cancelAnimationFrame(frame);
+  }, [enabled]);
+}