forked from akanyan/STARTLINER
fix: better keyboard
* Scale the font as necessary * Fix CHUNITHM order * Fix num-unlocked numpad
This commit is contained in:
@ -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',
|
||||
height: small ? '3em' : tall ? '10em' : '5em',
|
||||
fontSize: small ? '0.9em' : '1em',
|
||||
width: small ? '2.8rem' : '5rem',
|
||||
height: small ? '2.8rem' : tall ? '10rem' : '5rem',
|
||||
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>
|
||||
|
@ -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"
|
||||
|
Reference in New Issue
Block a user