Controller navigation fixes, part 1

Navigating "over" selects now works

This is done by simulating Tab/Shift-Tab key presses when pressing the
respective buttons while focussing a MUI select element

I've gone ahead and removed our home-grown `GamepadInputEvent` type, as it's
just a lesser version of Electron's input events

src/backend/main.ts

@@ -5,7 +5,6 @@ import {
   GameSettings,
   DiskSpaceData,
   StatusPromise,
-  GamepadInputEvent,
   Runner
 } from 'common/types'
 import * as path from 'path'
@@ -1499,7 +1498,11 @@ ipcMain.handle('gamepadAction', async (event, args) => {
   const mainWindow = getMainWindow()!
 
   const { action, metadata } = args
-  const inputEvents: GamepadInputEvent[] = []
+  const inputEvents: (
+    | Electron.MouseInputEvent
+    | Electron.MouseWheelInputEvent
+    | Electron.KeyboardInputEvent
+  )[] = []
 
   /*
    * How to extend:
@@ -1585,6 +1588,32 @@ ipcMain.handle('gamepadAction', async (event, args) => {
         keyCode: 'Esc'
       })
       break
+    case 'tab':
+      inputEvents.push(
+        {
+          type: 'keyDown',
+          keyCode: 'Tab'
+        },
+        {
+          type: 'keyUp',
+          keyCode: 'Tab'
+        }
+      )
+      break
+    case 'shiftTab':
+      inputEvents.push(
+        {
+          type: 'keyDown',
+          keyCode: 'Tab',
+          modifiers: ['shift']
+        },
+        {
+          type: 'keyUp',
+          keyCode: 'Tab',
+          modifiers: ['shift']
+        }
+      )
+      break
   }
 
   if (inputEvents.length) {

src/common/types.ts

@@ -346,30 +346,6 @@ export interface GOGImportData {
   dlcs: string[]
 }
 
-export type GamepadInputEvent =
-  | GamepadInputEventKey
-  | GamepadInputEventWheel
-  | GamepadInputEventMouse
-
-interface GamepadInputEventKey {
-  type: 'keyDown' | 'keyUp' | 'char'
-  keyCode: string
-}
-
-interface GamepadInputEventWheel {
-  type: 'mouseWheel'
-  deltaY: number
-  x: number
-  y: number
-}
-
-interface GamepadInputEventMouse {
-  type: 'mouseDown' | 'mouseUp'
-  x: number
-  y: number
-  button: 'left' | 'middle' | 'right'
-}
-
 export interface SteamRuntime {
   path: string
   type: 'sniper' | 'scout' | 'soldier'
@@ -540,6 +516,8 @@ interface GamepadActionArgsWithoutMetadata {
     | 'back'
     | 'altAction'
     | 'esc'
+    | 'tab'
+    | 'shiftTab'
   metadata?: undefined
 }
 

src/frontend/helpers/gamepad.ts

@@ -57,7 +57,9 @@ export const initGamepad = () => {
     altAction: { triggeredAt: {}, repeatDelay: false },
     rightClick: { triggeredAt: {}, repeatDelay: false },
     leftClick: { triggeredAt: {}, repeatDelay: false },
-    esc: { triggeredAt: {}, repeatDelay: false }
+    esc: { triggeredAt: {}, repeatDelay: false },
+    tab: { triggeredAt: {}, repeatDelay: false },
+    shiftTab: { triggeredAt: {}, repeatDelay: false }
   }
 
   // check if an action should be triggered
@@ -160,6 +162,22 @@ export const initGamepad = () => {
             VirtualKeyboardController.backspace()
             return
           }
+          break
+        case 'padDown':
+        case 'leftStickDown':
+          // MUI Selects open on arrow down, which is usually not your intention
+          // when navigating down with the stick, so we change the action to tab
+          if (isMuiSelect()) {
+            action = 'tab'
+          }
+          break
+        case 'padUp':
+        case 'leftStickUp':
+          // Same as above
+          if (isMuiSelect()) {
+            action = 'shiftTab'
+          }
+          break
       }
 
       if (action === 'mainAction') {
@@ -185,7 +203,7 @@ export const initGamepad = () => {
 
   const currentElement = () => document.querySelector<HTMLElement>(':focus')
 
-  const shouldSimulateClick = isSelect
+  const shouldSimulateClick = () => isSelect() || isMuiSelect()
   function isSelect() {
     const el = currentElement()
     if (!el) return false
@@ -222,6 +240,13 @@ export const initGamepad = () => {
     return parent.classList.contains('MuiMenu-list')
   }
 
+  function isMuiSelect() {
+    const el = currentElement()
+    if (!el) return false
+
+    return el.classList.contains('MuiSelect-select')
+  }
+
   function playable() {
     const el = currentElement()
     if (!el) return false