use ev.code instead of ev.key where possible to support different keyboard layouts

This commit is contained in:
Zutatensuppe 2021-06-06 17:28:37 +02:00
parent 0882d3befd
commit ff69a5e195
6 changed files with 21 additions and 20 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -4,9 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>🧩 jigsaw.hyottoko.club</title> <title>🧩 jigsaw.hyottoko.club</title>
<script type="module" crossorigin src="/assets/index.6b00de5a.js"></script> <script type="module" crossorigin src="/assets/index.5791217a.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js"> <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.a9024809.css"> <link rel="stylesheet" href="/assets/index.5c03949d.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View file

@ -56,14 +56,14 @@ export default defineComponent({
}, },
methods: { methods: {
onKeyUp (ev: KeyboardEvent) { onKeyUp (ev: KeyboardEvent) {
if (ev.key === 'ArrowDown' && this.autocomplete.values.length > 0) { if (ev.code === 'ArrowDown' && this.autocomplete.values.length > 0) {
if (this.autocomplete.idx < this.autocomplete.values.length - 1) { if (this.autocomplete.idx < this.autocomplete.values.length - 1) {
this.autocomplete.idx++ this.autocomplete.idx++
} }
ev.stopPropagation() ev.stopPropagation()
return false return false
} }
if (ev.key === 'ArrowUp' && this.autocomplete.values.length > 0) { if (ev.code === 'ArrowUp' && this.autocomplete.values.length > 0) {
if (this.autocomplete.idx > 0) { if (this.autocomplete.idx > 0) {
this.autocomplete.idx-- this.autocomplete.idx--
} }

View file

@ -122,19 +122,20 @@ function EventAdapter (
if (!KEYS_ON) { if (!KEYS_ON) {
return return
} }
if (ev.key === 'Shift') {
if (ev.code === 'ShiftLeft' || ev.code === 'ShiftRight') {
SHIFT = state SHIFT = state
} else if (ev.key === 'ArrowUp' || ev.key === 'w' || ev.key === 'W') { } else if (ev.code === 'ArrowUp' || ev.code === 'KeyW') {
UP = state UP = state
} else if (ev.key === 'ArrowDown' || ev.key === 's' || ev.key === 'S') { } else if (ev.code === 'ArrowDown' || ev.code === 'KeyS') {
DOWN = state DOWN = state
} else if (ev.key === 'ArrowLeft' || ev.key === 'a' || ev.key === 'A') { } else if (ev.code === 'ArrowLeft' || ev.code === 'KeyA') {
LEFT = state LEFT = state
} else if (ev.key === 'ArrowRight' || ev.key === 'd' || ev.key === 'D') { } else if (ev.code === 'ArrowRight' || ev.code === 'KeyD') {
RIGHT = state RIGHT = state
} else if (ev.key === 'q') { } else if (ev.code === 'KeyQ') {
ZOOM_OUT = state ZOOM_OUT = state
} else if (ev.key === 'e') { } else if (ev.code === 'KeyE') {
ZOOM_IN = state ZOOM_IN = state
} }
} }
@ -176,32 +177,32 @@ function EventAdapter (
if (!KEYS_ON) { if (!KEYS_ON) {
return return
} }
if (ev.key === ' ') { if (ev.code === 'Space') {
addEvent([Protocol.INPUT_EV_TOGGLE_PREVIEW]) addEvent([Protocol.INPUT_EV_TOGGLE_PREVIEW])
} }
if (MODE === MODE_REPLAY) { if (MODE === MODE_REPLAY) {
if (ev.key === 'I' || ev.key === 'i') { if (ev.code === 'KeyI') {
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_UP]) addEvent([Protocol.INPUT_EV_REPLAY_SPEED_UP])
} }
if (ev.key === 'O' || ev.key === 'o') { if (ev.code === 'KeyO') {
addEvent([Protocol.INPUT_EV_REPLAY_SPEED_DOWN]) addEvent([Protocol.INPUT_EV_REPLAY_SPEED_DOWN])
} }
if (ev.key === 'P' || ev.key === 'p') { if (ev.code === 'KeyP') {
addEvent([Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE]) addEvent([Protocol.INPUT_EV_REPLAY_TOGGLE_PAUSE])
} }
} }
if (ev.key === 'F' || ev.key === 'f') { if (ev.code === 'KeyF') {
PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED PIECE_VIEW_FIXED = !PIECE_VIEW_FIXED
RERENDER = true RERENDER = true
} }
if (ev.key === 'G' || ev.key === 'g') { if (ev.code === 'KeyG') {
PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE PIECE_VIEW_LOOSE = !PIECE_VIEW_LOOSE
RERENDER = true RERENDER = true
} }
if (ev.key === 'M' || ev.key === 'm') { if (ev.code === 'KeyM') {
addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS]) addEvent([Protocol.INPUT_EV_TOGGLE_SOUNDS])
} }
}) })