fix: better keyboard

* Scale the font as necessary
* Fix CHUNITHM order
* Fix num-unlocked numpad

src/components/KeyboardKey.vue

@@ -15,9 +15,51 @@ const handleKey = (
 ) => {
     event.preventDefault();
 
-    const keycode = toKeycode(event.code);
+    let keycode = toKeycode(event.code);
+
     if (keycode !== null && button !== undefined) {
         const data = prf.current!.data.keyboard!.data as any;
+
+        if (event.getModifierState('NumLock') === false) {
+            switch (event.code) {
+                case 'NumpadDecimal':
+                    keycode = toKeycode('Delete');
+                    break;
+                case 'Numpad0':
+                    keycode = toKeycode('Insert');
+                    break;
+                case 'Numpad1':
+                    keycode = toKeycode('End');
+                    break;
+                case 'Numpad2':
+                    keycode = toKeycode('ArrowDown');
+                    break;
+                case 'Numpad3':
+                    keycode = toKeycode('PageDown');
+                    break;
+                case 'Numpad4':
+                    keycode = toKeycode('ArrowLeft');
+                    break;
+                case 'Numpad5':
+                    keycode = toKeycode('Clear');
+                    break;
+                case 'Numpad6':
+                    keycode = toKeycode('ArrowRight');
+                    break;
+                case 'Numpad7':
+                    keycode = toKeycode('Home');
+                    break;
+                case 'Numpad8':
+                    keycode = toKeycode('ArrowUp');
+                    break;
+                case 'Numpad9':
+                    keycode = toKeycode('PageUp');
+                    break;
+                default:
+                    break;
+            }
+        }
+
         if (index !== undefined) {
             data[button][index] = keycode;
         } else {
@@ -75,7 +117,7 @@ const handleMouse = (
     }
 };
 
-const getKey = (key: keyof OngekiButtons, index?: number) =>
+const getKey = (key: keyof OngekiButtons, index?: number): any =>
     computed(() => {
         const data = prf.current!.data.keyboard?.data as any;
         const keycode =
@@ -93,6 +135,7 @@ const KEY_MAP: { [key: number]: string } = {
     6: 'M5',
     8: 'Backspace',
     9: 'Tab',
+    12: 'Clear',
     13: 'Enter',
     19: 'Pause',
     20: 'CapsLock',
@@ -204,28 +247,45 @@ const toKeycode = (key: string): number | null => {
     return res ? parseInt(res) : null;
 };
 
-defineProps({
+const props = defineProps({
     small: Boolean,
-    verySmall: Boolean,
     tall: Boolean,
     tooltip: String,
     button: String,
     color: String,
     index: Number,
 });
+
+const modelValue = computed(() => {
+    return getKey(props.button as keyof OngekiButtons, props.index).value;
+});
+
+const fontSize = computed(() => {
+    if (!props.small) {
+        return '1rem';
+    }
+    const len = modelValue.value.length;
+    if (len < 5) {
+        return '1rem';
+    }
+    if (len < 7) {
+        return '0.75rem';
+    }
+    return '0.5rem';
+});
 </script>
 
 <template>
     <InputText
         :style="{
-            width: small ? '3em' : '5em',
+            width: small ? '2.8rem' : '5rem',
-            height: small ? '3em' : tall ? '10em' : '5em',
+            height: small ? '2.8rem' : tall ? '10rem' : '5rem',
-            fontSize: small ? '0.9em' : '1em',
+            fontSize,
             backgroundColor: color,
         }"
         unstyled
         class="text-center buttoninputtext"
-        v-tooltip="tooltip"
+        v-tooltip="tooltip ? `${tooltip}: ${modelValue}` : undefined"
         @contextmenu.prevent="() => {}"
         @keydown="(ev: KeyboardEvent) => handleKey(button, ev, index)"
         @mousedown="
@@ -233,7 +293,7 @@ defineProps({
                 handleMouse(button as keyof OngekiButtons, ev, index)
         "
         @focusout="() => (hasClickedM1Once = false)"
-        :model-value="getKey(button as keyof OngekiButtons, index) as any"
+        :model-value="modelValue"
     />
 </template>
 
@@ -241,5 +301,7 @@ defineProps({
 .buttoninputtext {
     border-radius: 6px;
     border: 1px solid rgba(200, 200, 200, 0.3);
+    overflow: scroll !important;
+    text-align: center !important;
 }
 </style>

src/components/options/Keyboard.vue

@@ -124,7 +124,7 @@ const prf = usePrfStore();
                         <div
                             v-for="idx in Array(16)
                                 .fill(0)
-                                .map((_, i) => 16 - i)"
+                                .map((_, i) => 32 - 2 * i - 1)"
                         >
                             <KeyboardKey
                                 button="cell"
@@ -142,7 +142,7 @@ const prf = usePrfStore();
                         <div
                             v-for="idx in Array(16)
                                 .fill(0)
-                                .map((_, i) => 32 - i)"
+                                .map((_, i) => 32 - 2 * i)"
                         >
                             <KeyboardKey
                                 button="cell"