fix: do not display capture lock message when possilbe (avoid flickering - do strategy switch)

feat: make tab (players list) keybindign configurable and add a way to assign to a gamepad button

Author: zardoy

package.json

@@ -140,7 +140,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
-    "contro-max": "^0.1.8",
+    "contro-max": "^0.1.9",
     "crypto-browserify": "^3.12.0",
     "cypress-esbuild-preprocessor": "^1.0.2",
     "eslint": "^8.50.0",

pnpm-lock.yaml

@@ -27,6 +27,7 @@ import { onCameraMove, onControInit } from './cameraRotationControls'
 import { createNotificationProgressReporter } from './core/progressReporter'
 import { appStorage } from './react/appStorageProvider'
 import { switchGameMode } from './packetsReplay/replayPackets'
+import { tabListState } from './react/PlayerListOverlayProvider'
 
 
 export const customKeymaps = proxy(appStorage.keybindings)
@@ -65,6 +66,7 @@ export const contro = new ControMax({
       // client side
       zoom: ['KeyC'],
       viewerConsole: ['Backquote'],
+      playersList: ['Tab'],
     },
     ui: {
       toggleFullscreen: ['F11'],
@@ -405,6 +407,9 @@ const onTriggerOrReleased = (command: Command, pressed: boolean) => {
       case 'general.rotateCameraDown':
         cameraRotationControls.handleCommand(command, pressed)
         break
+      case 'general.playersList':
+        tabListState.isOpen = pressed
+        break
     }
   }
 }

src/controls.ts

@@ -6,7 +6,7 @@ import PixelartIcon, { pixelartIcons } from './PixelartIcon'
 import { useUsingTouch } from './utilsApp'
 
 export const displayHintsState = proxy({
-  captureMouseHint: true
+  captureMouseHint: false
 })
 
 export default () => {

src/react/GlobalOverlayHints.tsx

@@ -1,4 +1,4 @@
-import { useSnapshot } from 'valtio'
+import { proxy, useSnapshot } from 'valtio'
 import { useState, useEffect, useMemo } from 'react'
 import { isGameActive } from '../globalState'
 import PlayerListOverlay from './PlayerListOverlay'
@@ -9,28 +9,18 @@ const MAX_ROWS_PER_COL = 10
 
 type Players = typeof bot.players
 
+export const tabListState = proxy({
+  isOpen: false,
+})
+
 export default () => {
+  const { isOpen } = useSnapshot(tabListState)
+
   const serverIp = lastConnectOptions.value?.server
   const [clientId, setClientId] = useState(bot._client.uuid)
   const [players, setPlayers] = useState<Players>({})
-  const [isOpen, setIsOpen] = useState(false)
   const [counter, setCounter] = useState(0)
 
-  const handleKeyDown = (e) => {
-    if (!isGameActive(true)) return
-    if (e.key === 'Tab') {
-      setIsOpen(prev => true)
-      e.preventDefault()
-    }
-  }
-
-  const handleKeyUp = (e) => {
-    if (e.key === 'Tab') {
-      setIsOpen(prev => false)
-      e.preventDefault()
-    }
-  }
-
   useEffect(() => {
     function requestUpdate () {
       setPlayers(bot?.players ?? {})
@@ -58,15 +48,10 @@ export default () => {
       })
     }
 
-    document.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('keyup', handleKeyUp)
-
     const playerlistHeader = () => setCounter(prev => prev + 1)
     bot._client.on('playerlist_header', playerlistHeader)
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('keyup', handleKeyUp)
       bot?._client.removeListener('playerlist_header', playerlistHeader)
     }
   }, [serverIp])

src/react/PlayerListOverlayProvider.tsx

@@ -39,14 +39,14 @@ export const pointerLock = {
     if (options.autoFullScreen) {
       void goFullscreen()
     }
-    const displayBrowserProblem = () => {
+    const displayMouseCaptureFailure = () => {
       // if (notificationProxy.id === 'auto-login') return // prevent notification hide
       // showNotification('Browser Delay Limitation', navigator['keyboard'] ? 'Click on screen, enable Auto Fullscreen or F11' : 'Click on screen or use fullscreen in Chrome')
       // notificationProxy.id = 'pointerlockchange'
       displayHintsState.captureMouseHint = true
     }
     if (!(document.fullscreenElement && navigator['keyboard']) && this.justHitEscape) {
-      displayBrowserProblem()
+      displayMouseCaptureFailure()
     } else {
       //@ts-expect-error
       const promise: any = document.documentElement.requestPointerLock({
@@ -58,9 +58,10 @@ export const pointerLock = {
           document.documentElement.requestPointerLock()
         } else if (error.name === 'SecurityError') {
           // cause: https://discourse.threejs.org/t/how-to-avoid-pointerlockcontrols-error/33017/4
-          displayBrowserProblem()
+          displayMouseCaptureFailure()
         } else {
-          console.error(error)
+          displayMouseCaptureFailure()
+          console.warn('Failed to request pointer lock:', error)
         }
       })
     }