0.3.0-0-pre.4

Web/game-snake-poc/frontend/ts/input.ts

@@ -0,0 +1,56 @@
+// file: Web/game-snake-poc/frontend/ts/input.ts
+// version: 1
+
+import type { SnakeDirection, SnakeWebSession } from "./game";
+
+const KEY_DIRECTIONS: Readonly<Record<string, SnakeDirection>> = {
+    arrowleft: "left",
+    a: "left",
+    q: "left",
+    arrowright: "right",
+    d: "right",
+    arrowup: "up",
+    w: "up",
+    z: "up",
+    arrowdown: "down",
+    s: "down",
+};
+
+function buttonDirection(button: HTMLButtonElement): SnakeDirection | null {
+    const direction = button.dataset.direction;
+    if (direction === "left" || direction === "right" || direction === "up" || direction === "down") {
+        return direction;
+    }
+    return null;
+}
+
+export function bindInputs(session: SnakeWebSession, buttons: readonly HTMLButtonElement[]): void {
+    window.addEventListener("keydown", event => {
+        if (event.repeat) {
+            return;
+        }
+        const direction = KEY_DIRECTIONS[event.key.toLowerCase()];
+        if (direction === undefined) {
+            return;
+        }
+        event.preventDefault();
+        session.queueDirection(direction);
+    });
+
+    for (const button of buttons) {
+        const direction = buttonDirection(button);
+        if (direction === null) {
+            continue;
+        }
+        button.addEventListener("pointerdown", event => {
+            event.preventDefault();
+            session.queueDirection(direction);
+        });
+        button.addEventListener("click", event => {
+            if (event.detail !== 0) {
+                return;
+            }
+            session.queueDirection(direction);
+        });
+    }
+}