feat: Key binds screen (#108)

---------

Co-authored-by: gguio <[email protected]>
Co-authored-by: Vitaly <[email protected]>

esbuild.mjs

@@ -79,6 +79,7 @@ const buildOptions = {
   loader: {
     // todo use external or resolve issues with duplicating
     '.png': 'dataurl',
+    '.svg': 'dataurl',
     '.map': 'empty',
     '.vert': 'text',
     '.frag': 'text',

package.json

@@ -118,7 +118,7 @@
     "browserify-zlib": "^0.2.0",
     "buffer": "^6.0.3",
     "constants-browserify": "^1.0.0",
-    "contro-max": "^0.1.6",
+    "contro-max": "^0.1.7",
     "crypto-browserify": "^3.12.0",
     "cypress": "^10.11.0",
     "cypress-esbuild-preprocessor": "^1.0.2",

src/controls.ts

@@ -6,21 +6,24 @@ import { proxy, subscribe } from 'valtio'
 import { ControMax } from 'contro-max/build/controMax'
 import { CommandEventArgument, SchemaCommandInput } from 'contro-max/build/types'
 import { stringStartsWith } from 'contro-max/build/stringUtils'
+import { UserOverridesConfig } from 'contro-max/build/types/store'
 import { isGameActive, showModal, gameAdditionalState, activeModalStack, hideCurrentModal, miscUiState } from './globalState'
 import { goFullscreen, pointerLock, reloadChunks } from './utils'
 import { options } from './optionsStorage'
 import { openPlayerInventory } from './inventoryWindows'
 import { chatInputValueGlobal } from './react/Chat'
 import { fsState } from './loadSave'
+import { customCommandsConfig } from './customCommands'
+import { CustomCommand } from './react/KeybindingsCustom'
 import { showOptionsModal } from './react/SelectOption'
 import widgets from './react/widgets'
 import { getItemFromBlock } from './botUtils'
 import { gamepadUiCursorState, moveGamepadCursorByPx } from './react/GamepadUiCursor'
 
-// todo move this to shared file with component
-export const customKeymaps = proxy(JSON.parse(localStorage.keymap || '{}'))
+
+export const customKeymaps = proxy(JSON.parse(localStorage.keymap || '{}')) as UserOverridesConfig
 subscribe(customKeymaps, () => {
-  localStorage.keymap = JSON.parse(customKeymaps)
+  localStorage.keymap = JSON.stringify(customKeymaps)
 })
 
 const controlOptions = {
@@ -53,7 +56,8 @@ export const contro = new ControMax({
     },
     advanced: {
       lockUrl: ['KeyY'],
-    }
+    },
+    custom: {} as Record<string, SchemaCommandInput & { type: string, input: any[] }>,
     // waila: {
     //   showLookingBlockRecipe: ['Numpad3'],
     //   showLookingBlockUsages: ['Numpad4']
@@ -81,6 +85,8 @@ export const contro = new ControMax({
 window.controMax = contro
 export type Command = CommandEventArgument<typeof contro['_commandsRaw']>['command']
 
+// updateCustomBinds()
+
 export const setDoPreventDefault = (state: boolean) => {
   controlOptions.preventDefault = state
 }
@@ -285,6 +291,20 @@ function cycleHotbarSlot (dir: 1 | -1) {
   bot.setQuickBarSlot(newHotbarSlot)
 }
 
+// custom commands hamdler
+const customCommandsHandler = (buttonData: { code?: string, button?: string, state: boolean }) => {
+  if (!buttonData.state || !isGameActive(true)) return
+
+  const codeOrButton = buttonData.code ?? buttonData.button
+  const inputType = buttonData.code ? 'keys' : 'gamepad'
+  for (const value of Object.values(contro.userConfig!.custom)) {
+    if (value[inputType]?.includes(codeOrButton!)) {
+      customCommandsConfig[(value as CustomCommand).type].handler((value as CustomCommand).inputs)
+    }
+  }
+}
+contro.on('pressedKeyOrButtonChanged', customCommandsHandler)
+
 contro.on('trigger', ({ command }) => {
   const willContinue = !isGameActive(true)
   alwaysPressedHandledCommand(command)

src/customCommands.ts

@@ -0,0 +1,91 @@
+import { guiOptionsScheme, tryFindOptionConfig } from './optionsGuiScheme'
+import { options } from './optionsStorage'
+
+export const customCommandsConfig = {
+  chat: {
+    input: [
+      {
+        type: 'text',
+        placeholder: 'Command to send e.g. gamemode creative'
+      }
+    ],
+    handler ([command]) {
+      bot.chat(`/${command.replace(/^\//, '')}`)
+    }
+  },
+  setOrToggleSetting: {
+    input: [
+      {
+        type: 'select',
+        // maybe title case?
+        options: Object.keys(options)
+      },
+      {
+        type: 'select',
+        options: ['toggle', 'set']
+      },
+      ([setting = '', action = ''] = []) => {
+        const value = options[setting]
+        if (!action || value === undefined || action === 'toggle') return null
+        if (action === 'set') {
+          const getBase = () => {
+            const config = tryFindOptionConfig(setting as any)
+            if (config && 'values' in config) {
+              return {
+                type: 'select',
+                options: config.values
+              }
+            }
+            if (config?.type === 'toggle' || typeof value === 'boolean') {
+              return {
+                type: 'select',
+                options: ['true', 'false']
+              }
+            }
+            if (config?.type === 'slider' || value.type === 'number') {
+              return {
+                type: 'number',
+              }
+            }
+            return {
+              type: 'text'
+            }
+          }
+          return {
+            ...getBase(),
+            placeholder: value
+          }
+        }
+      }
+    ],
+    handler ([setting, action, value]) {
+      if (action === 'toggle') {
+        const value = options[setting]
+        const config = tryFindOptionConfig(setting)
+        if (config && 'values' in config && config.values) {
+          const { values } = config
+          const currentIndex = values.indexOf(value)
+          const nextIndex = (currentIndex + 1) % values.length
+          options[setting] = values[nextIndex]
+        } else {
+          options[setting] = typeof value === 'boolean' ? !value : typeof value === 'number' ? value + 1 : value
+        }
+      } else {
+        options[setting] = value
+      }
+    }
+  },
+  jsScripts: {
+    input: [
+      {
+        type: 'text',
+        placeholder: 'JavaScript code to run in main thread (sensitive!)'
+      }
+    ],
+    handler ([code]) {
+      // eslint-disable-next-line no-new-func -- this is a feature, not a bug
+      new Function(code)()
+    }
+  },
+  // openCommandsScreen: {}
+}

src/optionsGuiScheme.tsx

@@ -184,7 +184,16 @@ export const guiOptionsScheme: {
       custom () {
         return <Category>Keyboard & Mouse</Category>
       },
-      // keybindings
+    },
+    {
+      custom () {
+        return <Button
+          inScreen
+          onClick={() => {
+            showModal({ reactType: 'keybindings' })
+          }}
+        >Keybindings</Button>
+      },
       mouseSensX: {},
       mouseSensY: {
         min: -1,
@@ -282,3 +291,15 @@ const Category = ({ children }) => <div style={{
   textAlign: 'center',
   gridColumn: 'span 2'
 }}>{children}</div>
+
+export const tryFindOptionConfig = (option: keyof AppOptions) => {
+  for (const group of Object.values(guiOptionsScheme)) {
+    for (const optionConfig of group) {
+      if (option in optionConfig) {
+        return optionConfig[option]
+      }
+    }
+  }
+
+  return null
+}