feat: add controls debug interface! Debug happening actions in your game & keyboard buttons!!!!

src/controls.ts

@@ -177,6 +177,7 @@ contro.on('movementUpdate', ({ vector, soleVector, gamepadIndex }) => {
       if (action) {
         void contro.emit('trigger', { command: 'general.forward' } as any)
       } else {
+        void contro.emit('release', { command: 'general.forward' } as any)
         setSprinting(false)
       }
     }

src/optionsGuiScheme.tsx

@@ -569,6 +569,11 @@ export const guiOptionsScheme: {
         ],
       },
     },
+    {
+      debugContro: {
+        text: 'Debug Controls',
+      },
+    }
   ],
   'export-import': [
     {

src/optionsStorage.ts

@@ -66,6 +66,7 @@ const defaultOptions = {
   jeiEnabled: true as boolean | Array<'creative' | 'survival' | 'adventure' | 'spectator'>,
   preventBackgroundTimeoutKick: false,
   preventSleep: false,
+  debugContro: false,
 
   // antiAliasing: false,
 

src/react/ControDebug.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { options } from '../optionsStorage'
+import { contro } from '../controls'
+
+export default () => {
+  const [pressedKeys, setPressedKeys] = useState<Set<string>>(new Set())
+  const [actions, setActions] = useState<string[]>([])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      setPressedKeys(prev => new Set([...prev, e.code]))
+    }
+
+    const handleKeyUp = (e: KeyboardEvent) => {
+      setPressedKeys(prev => {
+        const newSet = new Set(prev)
+        newSet.delete(e.code)
+        return newSet
+      })
+    }
+
+    const handleBlur = () => {
+      setPressedKeys(new Set())
+    }
+
+    const handleControTrigger = ({ command }) => {
+      setActions(prev => [...prev, command])
+    }
+
+    const handleControReleased = ({ command }) => {
+      setActions(prev => prev.filter(action => action !== command))
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    window.addEventListener('keyup', handleKeyUp)
+    window.addEventListener('blur', handleBlur)
+
+    contro.on('trigger', handleControTrigger)
+    contro.on('release', handleControReleased)
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown)
+      window.removeEventListener('keyup', handleKeyUp)
+      window.removeEventListener('blur', handleBlur)
+      contro.off('trigger', handleControTrigger)
+      contro.off('released', handleControReleased)
+    }
+  }, [])
+
+  if (!options.debugContro) return null
+
+  return (
+    <div style={{
+      position: 'fixed',
+      right: 0,
+      top: '50%',
+      transform: 'translateY(-50%)',
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      padding: '8px',
+      fontFamily: 'monospace',
+      fontSize: '8px',
+      color: 'white',
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4px'
+    }}>
+      <div>Keys: {[...pressedKeys].join(', ')}</div>
+      <div style={{ color: 'limegreen' }}>Actions: {actions.join(', ')}</div>
+    </div>
+  )
+}

src/reactUi.tsx

@@ -54,6 +54,7 @@ import { useAppScale } from './scaleInterface'
 import PacketsReplayProvider from './react/PacketsReplayProvider'
 import TouchInteractionHint from './react/TouchInteractionHint'
 import { ua } from './react/utils'
+import ControDebug from './react/ControDebug'
 
 const isFirefox = ua.getBrowser().name === 'Firefox'
 if (isFirefox) {
@@ -208,6 +209,7 @@ const App = () => {
                 <HeldMapUi />
               </InGameComponent>
             </div>
+            <ControDebug />
             <div />
           </RobustPortal>
           <EnterFullscreenButton />