fix: some keybinding names were incorrectly parsed

feat: make fullscreen button (F11) configurable in the keybinding panel

src/controls.ts

@@ -52,6 +52,7 @@ export const contro = new ControMax({
       selectItem: ['KeyH'] // default will be removed
     },
     ui: {
+      toggleFullscreen: ['F11'],
       back: [null/* 'Escape' */, 'B'],
       leftClick: [null, 'A'],
       rightClick: [null, 'Y'],
@@ -419,6 +420,10 @@ contro.on('trigger', ({ command }) => {
   if (command === 'ui.pauseMenu') {
     showModal({ reactType: 'pause-screen' })
   }
+
+  if (command === 'ui.toggleFullscreen') {
+    void goFullscreen(true)
+  }
 })
 
 contro.on('release', ({ command }) => {
@@ -742,10 +747,6 @@ window.addEventListener('keydown', (e) => {
 
 // #region experimental debug things
 window.addEventListener('keydown', (e) => {
-  if (e.code === 'F11') {
-    e.preventDefault()
-    void goFullscreen(true)
-  }
   if (e.code === 'KeyL' && e.altKey) {
     console.clear()
   }

src/react/Keybinding.tsx

@@ -30,19 +30,19 @@ export default ({ type, val, isPS }: Props) => {
   </>
 }
 
-async function parseBindingName (binding: string) {
+export async function parseBindingName (binding: string) {
   if (!binding) return ''
 
   const { keyboard } = navigator
-  const layoutMap = await keyboard?.getLayoutMap?.() ?? new Map()
+  const layoutMap = await keyboard?.getLayoutMap?.() ?? new Map<string, string>()
 
-  const mapKey = key => layoutMap.get(key) || key
+  const mapKey = (key: string) => layoutMap.get(key) || key
 
-  const cut = binding.replaceAll(/(Numpad|Digit|Key)/g, '')
+  const cut = binding.replaceAll(/(Digit|Key)/g, '')
   const parts = cut.includes('+') ? cut.split('+') : [cut]
 
   for (let i = 0; i < parts.length; i++) {
-    parts[i] = mapKey(parts[i]).split(/(?=[A-Z\d])/).reverse().join(' ')
+    parts[i] = mapKey(parts[i]).split(/(?<=[a-z])(?=\d)/).join(' ').split(/(?=[A-Z])/).reverse().join(' ')
   }
 
   return parts.join(' + ')

src/react/keybinding.test.ts

@@ -0,0 +1,14 @@
+import { test, expect } from 'vitest'
+import { parseBindingName } from './Keybinding'
+
+test('display keybinding correctly', async () => {
+  expect(await parseBindingName('unknown')).toMatchInlineSnapshot('"unknown"')
+  expect(await parseBindingName('KeyT')).toMatchInlineSnapshot('"T"')
+  expect(await parseBindingName('Digit1')).toMatchInlineSnapshot('"1"')
+  expect(await parseBindingName('Numpad1')).toMatchInlineSnapshot('"Numpad 1"')
+  expect(await parseBindingName('MetaLeft')).toMatchInlineSnapshot('"Left Meta"')
+  expect(await parseBindingName('Space')).toMatchInlineSnapshot('"Space"')
+  expect(await parseBindingName('Escape')).toMatchInlineSnapshot('"Escape"')
+  expect(await parseBindingName('F11')).toMatchInlineSnapshot('"F11"')
+  expect(await parseBindingName('Mouse 55')).toMatchInlineSnapshot('"Mouse 55"')
+})

vitest.config.ts

@@ -6,6 +6,7 @@ export default defineConfig({
     include: [
       '../../src/botUtils.test.ts',
       '../../src/markdownToFormattedText.test.ts',
+      '../../src/react/keybinding.test.ts',
       'lib/mesher/test/tests.test.ts',
       'sign-renderer/tests.test.ts'
     ],