From c5e8fcb90c8ca23b77ea9704c6ee9b91676d72bc Mon Sep 17 00:00:00 2001
From: Vitaly Turovsky <vital2580@icloud.com>
Date: Mon, 14 Apr 2025 17:21:22 +0300
Subject: [PATCH] feat: add controls debug interface! Debug happening actions
 in your game & keyboard buttons!!!!

---
 src/controls.ts           |  1 +
 src/optionsGuiScheme.tsx  |  5 +++
 src/optionsStorage.ts     |  1 +
 src/react/ControDebug.tsx | 71 +++++++++++++++++++++++++++++++++++++++
 src/reactUi.tsx           |  2 ++
 5 files changed, 80 insertions(+)
 create mode 100644 src/react/ControDebug.tsx

diff --git a/src/controls.ts b/src/controls.ts
index c8ff2279..0716d68d 100644
--- a/src/controls.ts
+++ b/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)
       }
     }
diff --git a/src/optionsGuiScheme.tsx b/src/optionsGuiScheme.tsx
index ef8d9a8e..55d107ce 100644
--- a/src/optionsGuiScheme.tsx
+++ b/src/optionsGuiScheme.tsx
@@ -569,6 +569,11 @@ export const guiOptionsScheme: {
         ],
       },
     },
+    {
+      debugContro: {
+        text: 'Debug Controls',
+      },
+    }
   ],
   'export-import': [
     {
diff --git a/src/optionsStorage.ts b/src/optionsStorage.ts
index 4d76ba0c..a69d4e16 100644
--- a/src/optionsStorage.ts
+++ b/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,
 
diff --git a/src/react/ControDebug.tsx b/src/react/ControDebug.tsx
new file mode 100644
index 00000000..9c5f272c
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/reactUi.tsx b/src/reactUi.tsx
index 15c09939..bbfbc2ee 100644
--- a/src/reactUi.tsx
+++ b/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 />