feat: support steam deck controller

forks/Controller.js/source/Controller.ts

@@ -9,7 +9,7 @@ import {
   mapAnalogToShape,
 } from "./lib/settings";
 
-import "./lib/GC_Errors";
+import { GC_Errors } from "./lib/GC_Errors";
 
 // No turning back now…
 
@@ -66,6 +66,12 @@ function Controller(HTMLgamepad) {
 
     // Gets the gamepad for this frame
     gamepad = this.constructor.gamepads[index];
+    if (!gamepad) {
+      console.warn(
+        `Gamepad at index ${index} was not found. Skipping this frame.`
+      );
+      return;
+    }
 
     // Updates timestamp
     lastUpdated = performance.now();
@@ -1044,7 +1050,7 @@ Controller.search = function (options?: any) {
         return;
       }
 
-      for (let index in this.gamepads) {
+      for (let index in Array.from(this.gamepads)) {
         index = parseInt(index, 10);
 
         if (isNaN(index)) {

forks/Controller.js/source/lib/GC_Errors.ts

@@ -1,7 +1,13 @@
 // Defines all error messages
 
-const GC_Errors = {
-    get GAMEPAD() {return 'This browser does not support the Gamepad API.';},
-    get DEFINEPROPERTY() {return 'This browser does not suppoert Object.defineProperty().';},
-    get MAP() {return 'No matching map found. Using "Standard".';}
+export const GC_Errors = {
+  get GAMEPAD() {
+    return "This browser does not support the Gamepad API.";
+  },
+  get DEFINEPROPERTY() {
+    return "This browser does not suppoert Object.defineProperty().";
+  },
+  get MAP() {
+    return 'No matching map found. Using "Standard".';
+  },
 };

forks/Controller.js/source/lib/GC_Layouts.ts

@@ -27,12 +27,34 @@ export const GC_Layouts = {
     layouts.list[id.toLowerCase()] = map;
   },
 
-  has: function (name) {
+  has: function has(name) {
+    // TODO: added by me
+    // Support regex as matchers
+    for (let i in Controller.layouts.list) {
+      const matchFn = Controller.layouts.list[i].matchFn;
+      if (typeof matchFn === "function") {
+        if (matchFn(name)) {
+          return true;
+        }
+      }
+    }
+
     name = name.toLowerCase();
     return name in Controller.layouts.list;
   },
 
-  get: function (name) {
+  get: function get(name) {
+    // TODO: added by me
+    // Support regex as matchers
+    for (let i in Controller.layouts.list) {
+      const matchFn = Controller.layouts.list[i].matchFn;
+      if (typeof matchFn === "function") {
+        if (matchFn(name)) {
+          return Controller.layouts.list[i];
+        }
+      }
+    }
+
     name = name.toLowerCase();
     return Controller.layouts.list[name];
   },

src/devOnly.ts

@@ -42,6 +42,9 @@ function init() {
     }
   });
 }
+export function isDev() {
+  return FGN_DEBUG;
+}
 
 if (FGN_DEBUG) {
   init();

src/electron.ts

@@ -1,3 +1,25 @@
+import { isDev } from "@app/devOnly";
+
+function tryRequire(name: string) {
+  try {
+    return require(name);
+  } catch (e) {
+    return {};
+  }
+}
+const electronName = "electron";
+const win = tryRequire(electronName);
+
+export function hasFocus() {
+  if (!isDev()) {
+    // TODO: this is deprecated and should be removed in electron 14
+    // https://www.electronjs.org/docs/latest/breaking-changes#removed-remote-module
+    return win.remote.BrowserWindow.getAllWindows()[0].isFocused();
+  }
+
+  return true;
+}
+
 // https://stackoverflow.com/a/61725416
 export function isElectron() {
   // Renderer process

src/gamepad/index.ts

@@ -4,6 +4,7 @@ import { toKeyboardEvent } from "@app/gamepad/buttons";
 import { identifyLayout } from "@app/gamepad/layouts/identify";
 import { findFirstFocusableChild } from "@app/dom";
 import { ControllerButtonPressed } from "@app/gamepad/events";
+import { hasFocus } from "@app/electron";
 
 type ControllerInfo = {
   name: string;
@@ -19,6 +20,39 @@ const lastValidPress: Record<
 const THROTTLE_MS = 200;
 
 export function initGamepad() {
+  const steamLayout = {
+    match: "Microsoft X-Box 360 pad",
+    matchFn: (name: string) => {
+      return /Microsoft X-Box 360 pad \d/.test(name);
+    },
+    name: "Steam Deck Controller",
+    description: "",
+    buttons: {
+      FACE_1: 0,
+      FACE_2: 1,
+      FACE_3: 2,
+      FACE_4: 3,
+      LEFT_SHOULDER: 4,
+      RIGHT_SHOULDER: 5,
+      LEFT_ANALOG_BUTTON: 9,
+      RIGHT_ANALOG_BUTTON: 11,
+      START: 11,
+      SELECT: 10,
+    },
+    // The dpad is actually considered an axe
+    // So what this + useAnalogAsDpad effectively do
+    // is to enable dpad!
+    axes: {
+      LEFT_ANALOG_STICK_VERT: 7,
+      LEFT_ANALOG_STICK_HOR: 6,
+    },
+    options: {
+      useAnalogAsDpad: "left",
+    },
+  };
+
+  Controller.layouts.register(Controller, steamLayout);
+
   Controller.globalSettings.useAnalogAsDpad = "left";
   Controller.search();
 
@@ -42,6 +76,7 @@ export function initGamepad() {
   window.addEventListener(
     "gc.controller.lost",
     function (event) {
+      console.log("disconnected controller", event.detail);
       notify(`[DISCONNECTED]: Controller at index ${event.detail.index}`);
     },
     false
@@ -58,6 +93,9 @@ export function initGamepad() {
   });
 
   function onPress(event: ControllerButtonPressed) {
+    if (!hasFocus()) {
+      return;
+    }
     const activeElement = document.activeElement;
 
     // If nothing is focused, navigation won't work

src/inject.ts

@@ -6,6 +6,8 @@ import * as aboutPage from "./pages/about";
 import * as lobbyPage from "./pages/lobby";
 import "./devOnly";
 import { startOOBNavigator } from "@app/oobNavigator";
+// Needed for its side effects
+import "./electron";
 
 const initialized = {
   sidebar: false,
@@ -43,6 +45,11 @@ const observer = new MutationObserver(function (mr: MutationRecord[]) {
   //  TODO: only do this if gamepad is detected
   makeExternalLinksNotFocusable();
 
+  // TODO: disable Make all inputs non focusable for steam deck
+  document.querySelectorAll("input").forEach((el) => {
+    el.setAttribute("tabindex", "-1");
+  });
+
   if (!initialized.gamepad) {
     initGamepad();
     initialized.gamepad = true;