fully implement logic for custom commands TODO add invoking

zardoy · zardoy · commit 13271db3f431 · 2024-04-29T00:52:40.000+03:00
diff --git a/src/customCommands.ts b/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-eval -- this is a feature, not a bug
+      eval(code)
+    }
+  },
+  // openCommandsScreen: {}
+}
diff --git a/src/optionsGuiScheme.tsx b/src/optionsGuiScheme.tsx
@@ -290,3 +290,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
+}
diff --git a/src/react/KeybindingsCustom.tsx b/src/react/KeybindingsCustom.tsx
@@ -1,10 +1,11 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { contro as controEx } from '../controls'
+import { customCommandsConfig } from '../customCommands'
 import { AwaitingInputOverlay, ButtonWithMatchesAlert } from './KeybindingsScreenApp'
 import Button from './Button'
 import PixelartIcon from './PixelartIcon'
 import styles from './KeybindingsScreen.module.css'
-
+import Input from './Input'
 
 export default (
   {
@@ -35,47 +36,88 @@ export default (
     isPS: boolean | undefined
   }
 ) => {
-  const [, forceUpdate] = useState(false)
+  type CustomCommand = {
+    keys: string[],
+    gamepad: string[]
+    type: string
+    inputs: any[]
+  }
+  // todo need to save custom actions to localstorage in the upper component and pass it down parsed to keybindings with config inputs
+  const [customConfig, setCustomConfig] = useState([] as CustomCommand[]/* userConfig.custom */)
+  useEffect(() => {
+    localStorage.setItem('customConfig', JSON.stringify(customConfig))
+    // userConfig.custom = customConfig
+  }, [customConfig])
 
-  const addNewChatCommand = (e) => {
-    let chatCommands
-    if (userConfig.custom) {
-      chatCommands = Object.keys(userConfig.custom)
-    } else {
-      chatCommands = [] as string[]
-    }
-    let commandName = 'chat_command_' + generateCode()
-    while (chatCommands.includes(commandName)) {
-      commandName = 'chat_command_' + generateCode()
-    }
-    setBinding({}, 'custom', commandName, 0)
-    forceUpdate(prev => !prev)
+  const addNewCommand = (type) => {
+    setCustomConfig(prev => [...prev, {
+      keys: [],
+      gamepad: [],
+      type,
+      inputs: []
+    }])
+
+    // setBinding({}, 'custom', commandName, 0)
+  }
+
+  const setInputValue = (indexOption, indexInput, value) => {
+    setCustomConfig(prev => {
+      const newConfig = [...prev]
+      newConfig[indexOption].inputs[indexInput] = value
+      return newConfig
+    })
   }
 
   return <>
     <div className={styles.group}>
+      {Object.entries(customCommandsConfig).map(([group, { input }]) => (
+        <><div key={group} className={styles['group-category']}>{group}</div>
+          {customConfig.filter(x => x.type === group).map(({ keys, gamepad, inputs }, indexOption) => {
+            return <div key={indexOption}>
+              {input.map((obj, indexInput) => {
+                const config = typeof obj === 'function' ? obj(inputs) : obj
+                if (!config) return null
+
+                return config.type === 'select'
+                  ? <select key={indexInput} onChange={(e) => {
+                    setInputValue(indexOption, indexInput, e.target.value)
+                  }}>{config.options.map((option) => <option key={option} value={option}>{option}</option>)}</select>
+                  : <Input key={indexInput} placeholder={config.placeholder} value={inputs[indexInput]} onChange={(e) => setInputValue(indexOption, indexInput, e.target.value)} />
+              })}
+            </div>
+          })}
+          <Button
+            onClick={() => addNewCommand(group)}
+            icon={'pixelarticons:add-box'}
+            style={{
+              alignSelf: 'center'
+            }}
+          />
+        </>
+      ))}
       <div className={styles['group-category']}>Chat commands</div>
       {userConfig.custom &&
         Object.entries(userConfig.custom)
-          .map(([action, { keys, gamepadButtons }]) => <ChatCommandBind
-            key={`${action}`}
-            group={'custom'}
-            action={action}
-            parseBindingName={parseBindingName}
-            handleClick={handleClick}
-            keys={keys}
-            userConfig={userConfig}
-            gamepadButtons={gamepadButtons}
-            resetBinding={resetBinding}
-            setActionName={setActionName}
-            setGroupName={setGroupName}
-            forceUpdate={forceUpdate}
-            isPS={isPS}
-          />
+          .map(([action, { keys, gamepadButtons }]) =>
+            <ChatCommandBind
+              key={`${action}`}
+              group={'custom'}
+              action={action}
+              parseBindingName={parseBindingName}
+              handleClick={handleClick}
+              keys={keys}
+              userConfig={userConfig}
+              gamepadButtons={gamepadButtons}
+              resetBinding={resetBinding}
+              setActionName={setActionName}
+              setGroupName={setGroupName}
+              forceUpdate={forceUpdate}
+              isPS={isPS}
+            />
           )}
 
       <Button
-        onClick={addNewChatCommand}
+        onClick={addNewCommand}
         icon={'pixelarticons:add-box'}
         style={{
           alignSelf: 'center'
@@ -195,18 +237,3 @@ const ChatCommandBind = ({
       placeholder='Chat command' />
   </>
 }
-
-const generateCode = () => {
-  const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
-  const digits = '0123456789'
-
-  let code = ''
-  for (let i = 0; i < 4; i++) {
-    const randomLetter = letters.charAt(Math.floor(Math.random() * letters.length))
-    const randomDigit = digits.charAt(Math.floor(Math.random() * digits.length))
-    code += (i < 3) ? randomLetter : '_' + randomDigit
-  }
-
-  return code
-}
-
diff --git a/src/react/KeybindingsScreen.module.css b/src/react/KeybindingsScreen.module.css
@@ -32,8 +32,10 @@
 }
 
 .actionName {
-    flex-basis: 40%;
+    flex-basis: 23%;
     flex-wrap: wrap;
+    align-self: center;
+    font-size: 13px;
 }
 
 .undo-keyboard,
@@ -81,4 +83,4 @@
     display: block;
     height: 100%;
     flex-grow: 1;
-}
+}
diff --git a/src/react/OptionsGroup.tsx b/src/react/OptionsGroup.tsx
@@ -3,7 +3,7 @@ import { options } from '../optionsStorage'
 import { OptionsGroupType, guiOptionsScheme } from '../optionsGuiScheme'
 import OptionsItems, { OptionMeta } from './OptionsItems'
 
-const optionValueToType = (optionValue: any, item: OptionMeta) => {
+export const optionValueToType = (optionValue: any, item: OptionMeta) => {
   if (typeof optionValue === 'boolean' || item.values) return 'toggle'
   if (typeof optionValue === 'number') return 'slider'
   if (typeof optionValue === 'string') return 'element'
