fix: better keyboard

* Scale the font as necessary
* Fix CHUNITHM order
* Fix num-unlocked numpad
This commit is contained in:
2025-04-18 06:55:59 +00:00
parent 7071f19877
commit 795e889bd0
2 changed files with 73 additions and 11 deletions

View File

@ -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>

View File

@ -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"