add gamepad icons + refactor + clean up

Author: lucacasonato

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[] = [];
@@ -74,10 +68,6 @@ export default class Board extends Component<Props, State> {
   private _currentFocusableBtn?: HTMLButtonElement;
   private _tableContainer?: HTMLDivElement;
 
-  private _gamepadState: boolean[][] = [];
-  private _gamepadIsTicking = false;
-  private _gamepadStopTicking = false;
-
   componentDidMount() {
     document.documentElement.classList.add("in-game");
     this._createTable(this.props.width, this.props.height);
@@ -105,23 +95,16 @@ export default class Board extends Component<Props, State> {
 
     window.addEventListener("resize", this._onWindowResize);
     window.addEventListener("keyup", this._onGlobalKeyUp);
-    // @ts-ignore This version of TS does not know about gamepadconnected
-    window.addEventListener("gamepadconnected", this._onGamepadsUpdate);
-    // @ts-ignore This version of TS does not know about gamepaddisconnected
-    window.addEventListener("gamepaddisconnected", this._onGamepadsUpdate);
-    this._gamepadStopTicking = false;
-    this._initGamepads();
+    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);
-    // @ts-ignore This version of TS does not know about gamepadconnected
-    window.removeEventListener("gamepadconnected", this._onGamepadsUpdate);
-    // @ts-ignore This version of TS does not know about gamepaddisconnected
-    window.removeEventListener("gamepaddisconnected", this._onGamepadsUpdate);
-    this._gamepadStopTicking = true;
+    gamepad.removeButtonDownCallback(this._onGamepadButtonDown);
+    gamepad.removeButtonPressCallback(this._onGamepadButtonPress);
     this.props.gameChangeUnsubscribe(this._doManualDomHandling);
     this.props.renderer.stop();
     this.props.animator.stop();
@@ -159,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 (
@@ -177,86 +163,52 @@ export default class Board extends Component<Props, State> {
   }
 
   @bind
-  private _onGamepadsUpdate() {
-    this._initGamepads();
-  }
-
-  private _initGamepads() {
-    this._gamepadState = [];
-    if (!this._gamepadIsTicking) {
-      this._gamepadIsTicking = true;
-      requestAnimationFrame(this._gamepadTick);
-    }
-  }
-
-  @bind
-  private _gamepadTick() {
-    const gamepads = navigator.getGamepads();
-
-    const oldState = this._gamepadState;
-    this._gamepadState = [];
-
-    let connectedGamepads = 0;
-    for (let i = 0; i < gamepads.length; i++) {
-      const gamepad = gamepads[i];
-      this._gamepadState[i] = [];
-      if (gamepad !== null) {
-        connectedGamepads++;
-        for (let j = 0; j < gamepad.buttons.length; j++) {
-          const button = gamepad.buttons[j];
-          this._gamepadState[i][j] = button.pressed;
-        }
-      }
+  private _onGamepadButtonDown(buttonId: number) {
+    if (!this.props.interactive) {
+      return;
     }
-
-    for (let i = 0; i < this._gamepadState.length; i++) {
-      for (let j = 0; j < this._gamepadState[i].length; j++) {
-        const oldValue = oldState[i] && oldState[i][j];
-        if (this._gamepadState[i][j] && !oldValue) {
-          this._onGamepadPress(j);
-        }
-        if (!this._gamepadState[i][j] && oldValue) {
-          console.log("release", i, j);
+    switch (buttonId) {
+      case 0: // A
+      case 4: /* Left Shoulder Button */ {
+        const button = document.activeElement as HTMLButtonElement;
+        if (!button) {
+          return;
         }
+        this.simulateClick(button);
+        break;
       }
-    }
-
-    // Continue ticking if there are still gamepads connected, else stop ticking
-    // to avoid unnecessary CPU usage.
-    if (connectedGamepads > 0 && !this._gamepadStopTicking) {
-      requestAnimationFrame(this._gamepadTick);
-    } else {
-      this._gamepadIsTicking = false;
-    }
-  }
-
-  private _onGamepadPress(id: number) {
-    switch (id) {
-      case 0: {
-        // A
+      case 2: // X
+      case 5: /* Right Shoulder Button */ {
         const button = document.activeElement as HTMLButtonElement;
         if (!button) {
           return;
         }
-        this.simulateClick(button);
+        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 KeyboardEvent("press"), 1, 0);
+        this.moveFocusByKey(new Event(""), 1, 0);
         break;
       case 14: // Left
-        this.moveFocusByKey(new KeyboardEvent("press"), -1, 0);
+        this.moveFocusByKey(new Event(""), -1, 0);
         break;
       case 12: // Up
-        this.moveFocusByKey(new KeyboardEvent("press"), 0, -1);
+        this.moveFocusByKey(new Event(""), 0, -1);
         break;
       case 13: // Down
-        this.moveFocusByKey(new KeyboardEvent("press"), 0, 1);
-        break;
-      default:
+        this.moveFocusByKey(new Event(""), 0, 1);
         break;
     }
   }
@@ -346,7 +298,7 @@ export default class Board extends Component<Props, State> {
       button.classList.contains("focus-visible") ||
       isFeaturePhone ||
       cellFocusMode ||
-      this._gamepadIsTicking;
+      gamepad.isGamepadConnected;
 
     if (!showFocusStyle) {
       this.props.renderer.setFocus(-1, -1);
@@ -419,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);
+}