Add gamepad support

This commit adds support for playing PROXX with a gamepad. The gamepad
can be used both on the game board, and in the menus. On the game board
it can be used to clear (A or LB) or flag (X or RB) tiles, navigate the
board using the D-Pad, and switch into alt mode (B). On the menu, A can
be used to confirm (Start or Restart) and B can be used to go back or
cancel.

I tried to keep this relatively light-weight, but it does add a bit of
extra code to the initial bundle (the Gamepad handling specifically). If
the user does not use a game pad, the code will not cause any extra CPU
usage.

Author: lucacasonato

src/main/missing-types.d.ts

@@ -29,3 +29,52 @@ declare namespace JSX {
     inputmode?: string;
   }
 }
+
+/**
+ * This Gamepad API interface defines an individual gamepad or other controller, allowing access to
+ * information such as button presses, axis positions, and id. Available only in secure contexts.
+ */
+interface Gamepad {
+  readonly axes: ReadonlyArray<number>;
+  readonly buttons: ReadonlyArray<GamepadButton>;
+  readonly connected: boolean;
+  readonly hapticActuators: ReadonlyArray<GamepadHapticActuator>;
+  readonly id: string;
+  readonly index: number;
+  readonly mapping: GamepadMappingType;
+  readonly timestamp: DOMHighResTimeStamp;
+}
+
+declare var Gamepad: {
+  prototype: Gamepad;
+  new (): Gamepad;
+};
+
+/**
+ * An individual button of a gamepad or other controller, allowing access to the current state of
+ * different types of buttons available on the control device. Available only in secure contexts.
+ */
+interface GamepadButton {
+  readonly pressed: boolean;
+  readonly touched: boolean;
+  readonly value: number;
+}
+
+declare var GamepadButton: {
+  prototype: GamepadButton;
+  new (): GamepadButton;
+};
+
+/**
+ * This Gamepad API interface contains references to gamepads connected to the system, which is what
+ * the gamepad events Window.gamepadconnected and Window.gamepaddisconnected are fired in response to.
+ * Available only in secure contexts.
+ */
+interface GamepadEvent extends Event {
+  readonly gamepad: Gamepad;
+}
+
+declare var GamepadEvent: {
+  prototype: GamepadEvent;
+  new (type: string, eventInitDict: GamepadEventInit): GamepadEvent;
+};

src/main/services/preact-canvas/components/board/index.tsx

@@ -15,10 +15,11 @@ import { Animator } from "src/main/rendering/animator";
 import { Renderer } from "src/main/rendering/renderer";
 import { putCanvas } from "src/main/utils/canvas-pool";
 import { cellFocusMode } from "src/main/utils/constants";
+import { gamepad } from "src/main/utils/gamepad";
 import { isFeaturePhone } from "src/main/utils/static-display";
 import { bind } from "src/utils/bind";
 import { StateChange } from "src/worker/gamelogic";
-import { Cell } from "src/worker/gamelogic/types";
+import { Cell, PlayMode } from "src/worker/gamelogic/types";
 import { GameChangeCallback } from "../../index";
 import {
   board,
@@ -45,24 +46,17 @@ export interface Props {
   renderer: Renderer;
   animator: Animator;
   dangerMode: boolean;
+  interactive: boolean;
   gameChangeSubscribe: (f: GameChangeCallback) => void;
   gameChangeUnsubscribe: (f: GameChangeCallback) => void;
   onDangerModeChange: (v: boolean) => void;
 }
 
-interface State {
-  keyNavigation: boolean;
-}
-
 interface SetFocusOptions {
   preventScroll?: boolean;
 }
 
-export default class Board extends Component<Props, State> {
-  state: State = {
-    keyNavigation: false
-  };
-
+export default class Board extends Component<Props, {}> {
   private _canvas?: HTMLCanvasElement;
   private _table?: HTMLTableElement;
   private _buttons: HTMLButtonElement[] = [];
@@ -101,12 +95,16 @@ export default class Board extends Component<Props, State> {
 
     window.addEventListener("resize", this._onWindowResize);
     window.addEventListener("keyup", this._onGlobalKeyUp);
+    gamepad.addButtonDownCallback(this._onGamepadButtonDown);
+    gamepad.addButtonPressCallback(this._onGamepadButtonPress);
   }
 
   componentWillUnmount() {
     document.documentElement.classList.remove("in-game");
     window.removeEventListener("resize", this._onWindowResize);
     window.removeEventListener("keyup", this._onGlobalKeyUp);
+    gamepad.removeButtonDownCallback(this._onGamepadButtonDown);
+    gamepad.removeButtonPressCallback(this._onGamepadButtonPress);
     this.props.gameChangeUnsubscribe(this._doManualDomHandling);
     this.props.renderer.stop();
     this.props.animator.stop();
@@ -144,6 +142,9 @@ export default class Board extends Component<Props, State> {
 
   @bind
   private _onGlobalKeyUp(event: KeyboardEvent) {
+    if (!this.props.interactive) {
+      return;
+    }
     // This returns the focus to the board when one of these keys is pressed (on feature phones
     // only). This means the user doesn't have to manually refocus the board.
     if (
@@ -161,6 +162,57 @@ export default class Board extends Component<Props, State> {
     }
   }
 
+  @bind
+  private _onGamepadButtonDown(buttonId: number) {
+    if (!this.props.interactive) {
+      return;
+    }
+    switch (buttonId) {
+      case 0: // A
+      case 4: /* Left Shoulder Button */ {
+        const button = document.activeElement as HTMLButtonElement;
+        if (!button) {
+          return;
+        }
+        this.simulateClick(button);
+        break;
+      }
+      case 2: // X
+      case 5: /* Right Shoulder Button */ {
+        const button = document.activeElement as HTMLButtonElement;
+        if (!button) {
+          return;
+        }
+        this.simulateClick(button, true);
+        break;
+      }
+      case 1: // B
+        this._toggleDangerMode();
+        break;
+    }
+  }
+
+  @bind
+  private _onGamepadButtonPress(buttonId: number) {
+    if (!this.props.interactive) {
+      return;
+    }
+    switch (buttonId) {
+      case 15: // Right
+        this.moveFocusByKey(new Event(""), 1, 0);
+        break;
+      case 14: // Left
+        this.moveFocusByKey(new Event(""), -1, 0);
+        break;
+      case 12: // Up
+        this.moveFocusByKey(new Event(""), 0, -1);
+        break;
+      case 13: // Down
+        this.moveFocusByKey(new Event(""), 0, 1);
+        break;
+    }
+  }
+
   @bind
   private _doManualDomHandling(stateChange: StateChange) {
     if (!stateChange.gridChanges) {
@@ -245,7 +297,8 @@ export default class Board extends Component<Props, State> {
     const showFocusStyle =
       button.classList.contains("focus-visible") ||
       isFeaturePhone ||
-      cellFocusMode;
+      cellFocusMode ||
+      gamepad.isGamepadConnected;
 
     if (!showFocusStyle) {
       this.props.renderer.setFocus(-1, -1);
@@ -318,7 +371,7 @@ export default class Board extends Component<Props, State> {
   }
 
   @bind
-  private moveFocusByKey(event: KeyboardEvent, h: number, v: number) {
+  private moveFocusByKey(event: Event, h: number, v: number) {
     event.stopPropagation();
     event.preventDefault();
 

src/main/services/preact-canvas/components/game/index.tsx

@@ -18,6 +18,7 @@ import { GameChangeCallback } from "src/main/services/preact-canvas";
 import { submitTime } from "src/main/services/state/best-times";
 import { supportsVibration } from "src/main/services/state/vibration-preference";
 import { vibrationLength } from "src/main/utils/constants";
+import { gamepad } from "src/main/utils/gamepad";
 import { isFeaturePhone } from "src/main/utils/static-display";
 import { bind } from "src/utils/bind";
 import { StateChange } from "src/worker/gamelogic";
@@ -33,6 +34,9 @@ import {
   exitRow,
   exitRowInner,
   game as gameClass,
+  gamepadButton,
+  gamepadButtonA,
+  gamepadButtonB,
   mainButton,
   shortcutKey
 } from "./style.css";
@@ -50,6 +54,7 @@ export interface Props {
   useMotion: boolean;
   bestTime?: number;
   useVibration: boolean;
+  isGamepadConnected: boolean;
 }
 
 interface State {
@@ -96,7 +101,8 @@ export default class Game extends Component<Props, State> {
       gameChangeUnsubscribe,
       toRevealTotal,
       useMotion,
-      bestTime: previousBestTime
+      bestTime: previousBestTime,
+      isGamepadConnected
     }: Props,
     { playMode, toReveal, animator, renderer, completeTime, bestTime }: State
   ) {
@@ -123,6 +129,7 @@ export default class Game extends Component<Props, State> {
             height={height}
             mines={mines}
             useMotion={this.props.useMotion}
+            isGamepadConnected={isGamepadConnected}
           />
         ) : renderer && animator ? (
           [
@@ -132,6 +139,9 @@ export default class Game extends Component<Props, State> {
               dangerMode={dangerMode}
               animator={animator}
               renderer={renderer}
+              interactive={
+                playMode === PlayMode.Pending || playMode === PlayMode.Playing
+              }
               gameChangeSubscribe={gameChangeSubscribe}
               gameChangeUnsubscribe={gameChangeUnsubscribe}
               onCellClick={this.onCellClick}
@@ -150,10 +160,24 @@ export default class Game extends Component<Props, State> {
                         #
                       </span>
                     )}{" "}
+                    {isGamepadConnected ? (
+                      <span class={[gamepadButton, gamepadButtonA].join(" ")}>
+                        A
+                      </span>
+                    ) : (
+                      ""
+                    )}{" "}
                     Try again
                   </button>
                   <button class={mainButton} onClick={this.onReset}>
                     {isFeaturePhone ? <span class={shortcutKey}>*</span> : ""}{" "}
+                    {isGamepadConnected ? (
+                      <span class={[gamepadButton, gamepadButtonB].join(" ")}>
+                        B
+                      </span>
+                    ) : (
+                      ""
+                    )}{" "}
                     Main menu
                   </button>
                 </div>
@@ -175,11 +199,13 @@ export default class Game extends Component<Props, State> {
       this.props.onDangerModeChange(true);
     }
     window.addEventListener("keyup", this.onKeyUp);
+    gamepad.addButtonDownCallback(this.onGamepadButtonDown);
   }
 
   componentWillUnmount() {
     this.props.gameChangeUnsubscribe(this.onGameChange);
     window.removeEventListener("keyup", this.onKeyUp);
+    gamepad.removeButtonDownCallback(this.onGamepadButtonDown);
   }
 
   componentDidUpdate(_: Props, previousState: State) {
@@ -230,12 +256,31 @@ export default class Game extends Component<Props, State> {
 
   @bind
   private onKeyUp(event: KeyboardEvent) {
-    if (event.key === "#") {
-      if (this.state.playMode === PlayMode.Lost) {
+    if (
+      this.state.playMode === PlayMode.Won ||
+      this.state.playMode === PlayMode.Lost
+    ) {
+      if (event.key === "#") {
+        this.onRestart();
+      } else if (event.key === "*") {
+        this.onReset();
+      }
+    }
+  }
+
+  @bind
+  private onGamepadButtonDown(buttonId: number) {
+    if (
+      this.state.playMode === PlayMode.Won ||
+      this.state.playMode === PlayMode.Lost
+    ) {
+      if (buttonId === 0) {
+        // A
         this.onRestart();
+      } else if (buttonId === 1) {
+        // B
+        this.onReset();
       }
-    } else if (event.key === "*") {
-      this.onReset();
     }
   }
 

src/main/services/preact-canvas/components/game/style.css

@@ -78,3 +78,15 @@
   /** PostCSS adding classes in wrong order :( */
   border-color: #000 !important;
 }
+
+.gamepad-button {
+  composes: gamepadbutton from "../../utils.css";
+}
+
+.gamepad-button-a {
+  color: var(--color-gamepad-a);
+}
+
+.gamepad-button-b {
+  color: var(--color-gamepad-b);
+}