feat: onboarding

src/components/KeyboardKey.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import InputText from 'primevue/inputtext';
+import { fromKeycode, toKeycode } from '../keyboard';
 import { usePrfStore } from '../stores';
 import { OngekiButtons } from '../types';
 
@@ -127,126 +128,6 @@ const getKey = (key: keyof OngekiButtons, index?: number): any =>
         return keycode && fromKeycode(keycode) ? fromKeycode(keycode) : '–';
     });
 
-const KEY_MAP: { [key: number]: string } = {
-    1: 'M1',
-    2: 'M2',
-    4: 'M3',
-    5: 'M4',
-    6: 'M5',
-    8: 'Backspace',
-    9: 'Tab',
-    12: 'Clear',
-    13: 'Enter',
-    19: 'Pause',
-    20: 'CapsLock',
-    27: 'Escape',
-    32: 'Space',
-    33: 'PageUp',
-    34: 'PageDown',
-    35: 'End',
-    36: 'Home',
-    37: 'ArrowLeft',
-    38: 'ArrowUp',
-    39: 'ArrowRight',
-    40: 'ArrowDown',
-    45: 'Insert',
-    46: 'Delete',
-    48: 'Digit0',
-    49: 'Digit1',
-    50: 'Digit2',
-    51: 'Digit3',
-    52: 'Digit4',
-    53: 'Digit5',
-    54: 'Digit6',
-    55: 'Digit7',
-    56: 'Digit8',
-    57: 'Digit9',
-    65: 'KeyA',
-    66: 'KeyB',
-    67: 'KeyC',
-    68: 'KeyD',
-    69: 'KeyE',
-    70: 'KeyF',
-    71: 'KeyG',
-    72: 'KeyH',
-    73: 'KeyI',
-    74: 'KeyJ',
-    75: 'KeyK',
-    76: 'KeyL',
-    77: 'KeyM',
-    78: 'KeyN',
-    79: 'KeyO',
-    80: 'KeyP',
-    81: 'KeyQ',
-    82: 'KeyR',
-    83: 'KeyS',
-    84: 'KeyT',
-    85: 'KeyU',
-    86: 'KeyV',
-    87: 'KeyW',
-    88: 'KeyX',
-    89: 'KeyY',
-    90: 'KeyZ',
-    91: 'MetaLeft',
-    92: 'MetaRight',
-    93: 'ContextMenu',
-    96: 'Numpad0',
-    97: 'Numpad1',
-    98: 'Numpad2',
-    99: 'Numpad3',
-    100: 'Numpad4',
-    101: 'Numpad5',
-    102: 'Numpad6',
-    103: 'Numpad7',
-    104: 'Numpad8',
-    105: 'Numpad9',
-    106: 'NumpadMultiply',
-    107: 'NumpadAdd',
-    109: 'NumpadSubtract',
-    110: 'NumpadDecimal',
-    111: 'NumpadDivide',
-    112: 'F1',
-    113: 'F2',
-    114: 'F3',
-    115: 'F4',
-    116: 'F5',
-    117: 'F6',
-    118: 'F7',
-    119: 'F8',
-    120: 'F9',
-    121: 'F10',
-    122: 'F11',
-    123: 'F12',
-    144: 'NumLock',
-    145: 'ScrollLock',
-    160: 'ShiftLeft',
-    161: 'ShiftRight',
-    162: 'ControlLeft',
-    163: 'ControlRight',
-    164: 'AltLeft',
-    165: 'AltRight',
-    186: 'Semicolon',
-    187: 'Equal',
-    188: 'Comma',
-    189: 'Minus',
-    190: 'Period',
-    191: 'Slash',
-    192: 'Backquote',
-    219: 'BracketLeft',
-    220: 'Backslash',
-    221: 'BracketRight',
-    222: 'Quote',
-};
-
-const fromKeycode = (keyCode: number): string | null => {
-    return KEY_MAP[keyCode] ?? null;
-};
-
-const toKeycode = (key: string): number | null => {
-    const res = Object.entries(KEY_MAP).find(([_, v]) => v === key)?.[0];
-    return res ? parseInt(res) : null;
-};
-
 const props = defineProps({
     small: Boolean,
     tall: Boolean,