From b3c6edfbb977a8f8c01baed88713787965e82030 Mon Sep 17 00:00:00 2001
From: Julian Waller <git@julusian.co.uk>
Date: Sun, 19 Jan 2025 12:59:43 +0000
Subject: [PATCH] feat: update emulator keymap #3212 #2020

---
 webui/src/Emulator/Emulator.tsx | 16 ++++---
 webui/src/Emulator/Keymaps.ts   | 74 ++++++++++++++++++---------------
 2 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/webui/src/Emulator/Emulator.tsx b/webui/src/Emulator/Emulator.tsx
index bbe17287ec..9ce654c805 100644
--- a/webui/src/Emulator/Emulator.tsx
+++ b/webui/src/Emulator/Emulator.tsx
@@ -115,21 +115,19 @@ export const Emulator = observer(function Emulator() {
 		const onKeyDown = (e: KeyboardEvent) => {
 			if (!emulatorId) return
 
-			if (keymap[e.keyCode] !== undefined) {
-				const xy = keymap[e.keyCode]
-				if (xy) {
-					socket.emitPromise('emulator:press', [emulatorId, ...xy]).catch((e: any) => {
-						console.error('press failed', e)
-					})
-					console.log('emulator:press', emulatorId, xy)
-				}
+			const xy = keymap[e.code] ?? keymap[e.charCode]
+			if (xy) {
+				socket.emitPromise('emulator:press', [emulatorId, ...xy]).catch((e: any) => {
+					console.error('press failed', e)
+				})
+				console.log('emulator:press', emulatorId, xy)
 			}
 		}
 
 		const onKeyUp = (e: KeyboardEvent) => {
 			if (!emulatorId) return
 
-			const xy = keymap[e.keyCode]
+			const xy = keymap[e.code] ?? keymap[e.charCode]
 			if (xy) {
 				socket.emitPromise('emulator:release', [emulatorId, ...xy]).catch((e: any) => {
 					console.error('release failed', e)
diff --git a/webui/src/Emulator/Keymaps.ts b/webui/src/Emulator/Keymaps.ts
index fdb54394e3..11157373ae 100644
--- a/webui/src/Emulator/Keymaps.ts
+++ b/webui/src/Emulator/Keymaps.ts
@@ -1,39 +1,47 @@
-export type KeyMap = Record<number, [number, number] | undefined>
+export type KeyMap = Record<string | number, [number, number] | undefined>
 
 // Added last row for logitec controllers (PageUp, PageDown, F5, Escape, .)
 export const keyboardKeymap: KeyMap = {
-	49: [0, 0],
-	50: [1, 0],
-	51: [2, 0],
-	52: [3, 0],
-	53: [4, 0],
-	54: [5, 0],
-	55: [6, 0],
-	56: [7, 0],
-	81: [0, 1],
-	87: [1, 1],
-	69: [2, 1],
-	82: [3, 1],
-	84: [4, 1],
-	89: [5, 1],
-	85: [6, 1],
-	73: [7, 1],
-	65: [0, 2],
-	83: [1, 2],
-	68: [2, 2],
-	70: [3, 2],
-	71: [4, 2],
-	72: [5, 2],
-	74: [6, 2],
-	75: [7, 2],
-	90: [0, 3],
-	88: [1, 3],
-	67: [2, 3],
-	86: [3, 3],
-	66: [4, 3],
-	78: [5, 3],
-	77: [6, 3],
-	188: [7, 3],
+	Digit1: [0, 0],
+	Digit2: [1, 0],
+	Digit3: [2, 0],
+	Digit4: [3, 0],
+	Digit5: [4, 0],
+	Digit6: [5, 0],
+	Digit7: [6, 0],
+	Digit8: [7, 0],
+	Digit9: [8, 0],
+	Digit0: [9, 0],
+	KeyQ: [0, 1],
+	KeyW: [1, 1],
+	KeyE: [2, 1],
+	KeyR: [3, 1],
+	KeyT: [4, 1],
+	KeyY: [5, 1],
+	KeyU: [6, 1],
+	KeyI: [7, 1],
+	KeyO: [8, 1],
+	KeyP: [9, 1],
+	KeyA: [0, 2],
+	KeyS: [1, 2],
+	KeyD: [2, 2],
+	KeyF: [3, 2],
+	KeyG: [4, 2],
+	KeyH: [5, 2],
+	KeyJ: [6, 2],
+	KeyK: [7, 2],
+	KeyL: [8, 2],
+	Semicolon: [9, 2],
+	KeyZ: [0, 3],
+	KeyX: [1, 3],
+	KeyC: [2, 3],
+	KeyV: [3, 3],
+	KeyB: [4, 3],
+	KeyN: [5, 3],
+	KeyM: [6, 3],
+	Comma: [7, 3],
+	Period: [8, 3],
+	Slash: [9, 3],
 }
 
 export const logitecKeymap: KeyMap = {