Use KeyboardEvent.key instead of .which/charCode

src/client/js/config.js

@@ -17,6 +17,18 @@ define([
 		damageNumbers: 'element'
 	};
 
+	// Temporarily here, rebinding can come next
+	const keybinds = {
+		axis_horizontal: {
+			negative: ['arrowleft', 'a', 'q', 'z'],
+			positive: ['arrowright', 'd', 'e', 'c']
+		},
+		axis_vertical: {
+			negative: ['arrowup', 'w', 'q', 'e'],
+			positive: ['arrowdown', 's', 'x', 'z', 'c']
+		}
+	};
+
 	const valueChains = {
 		partyView: ['full', 'compact', 'minimal'],
 		showQuests: ['on', 'minimal', 'off'],
@@ -68,7 +80,9 @@ define([
 			config[key] = currentValue;
 	};
 
-	Object.keys(config).forEach(key => loadValue(key) );
+	Object.keys(config).forEach(key => loadValue(key));
+
+	config.keybinds = keybinds;
 
 	return config;
 });

src/client/js/input.js

@@ -1,54 +1,18 @@
 define([
 	'js/system/events',
-	'js/rendering/renderer'
+	'js/rendering/renderer',
+	'js/config'
 ], function (
 	events,
-	renderer
+	renderer,
+	config
 ) {
 	return {
-		axes: {
-			horizontal: {
-				negative: ['left', 'a', 'q', 'z'],
-				positive: ['right', 'd', 'e', 'c']
-			},
-			vertical: {
-				negative: ['up', 'w', 'q', 'e'],
-				positive: ['down', 's', 'x', 'z', 'c']
-			}
-		},
-
-		//Certain keys should always register even if they don't get emitted
+		// Certain keys should always register even if they don't get emitted
 		modifiers: [
-			'shift', 'ctrl'
+			'shift', 'control'
 		],
 
-		numericalKeyCodeMappings: {
-			Digit1: 49,
-			Digit2: 50,
-			Digit3: 51,
-			Digit4: 52,
-			Digit5: 53
-		},
-
-		mappings: {
-			8: 'backspace',
-			9: 'tab',
-			13: 'enter',
-			16: 'shift',
-			17: 'ctrl',
-			27: 'esc',
-			37: 'left',
-			38: 'up',
-			39: 'right',
-			40: 'down',
-			46: 'del',
-
-			//hacks for mac cmd key
-			224: 'ctrl',
-			91: 'ctrl',
-			93: 'ctrl'
-		},
-
 		mouse: {
 			button: null,
 			x: 0,
@@ -95,14 +59,21 @@ define([
 			this.keys = {};
 		},
 
-		getMapping: function (charCode) {
-			if (charCode >= 97)
-				return (charCode - 96).toString();
-
-			return (
-				this.mappings[charCode] ||
-				String.fromCharCode(charCode).toLowerCase()
-			);
+		/*
+		Instead of mapping charCodes / e.which, use e.key (95%+ supported)
+		All keys are lowercased (ArrowLeft -> arrowleft), otherwise printable characters
+			can have multiple versions (inventory has to listen for 'i' and 'I' if shift is pressed)
+		We can use getRemapping or a dictionary of remapped key values to fix edge cases
+			like #1814 (might need to be fixed again) or different control keys on Mac
+
+		https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
+		*/
+		remappings: {
+			// This is the windows key or command key on Mac, do we want to convert it?
+			//meta: 'control'
+		},
+		getRemapping: function (key) {
+			return this.remappings[key.toLowerCase()] || key.toLowerCase();
 		},
 
 		isKeyDown: function (key, noConsume) {
@@ -117,7 +88,8 @@ define([
 			} return false;
 		},
 		getAxis: function (axisName) {
-			let axis = this.axes[axisName];
+			let axis = config.keybinds[`axis_${axisName}`];
+
 			if (!axis)
 				return 0;
 
@@ -146,14 +118,14 @@ define([
 					if (!this.enabled)
 						return;
 
-					let code = this.numericalKeyCodeMappings[e.code] || e.which;
-					let key = this.getMapping(code);
+					let key = this.getRemapping(e.key);
 					let isModifier = this.modifiers.indexOf(key) > -1;
 					let isBody = e.target === document.body;
 
 					if (!isModifier && !isBody)
 						return true;
-					if ((e.keyCode === 9) || (e.keyCode === 8) || (e.keyCode === 122))
+					
+					if (['tab', 'backspace', 'f11'].includes(key))
 						e.preventDefault();
 
 					if (this.keys.has(key))
@@ -163,7 +135,7 @@ define([
 
 						if (isBody || isModifier) {
 							let keyEvent = {
-								key: key,
+								key,
 								consumed: false
 							};
 							events.emit('onUiKeyDown', keyEvent);
@@ -175,14 +147,14 @@ define([
 
 					if (key === 'backspace')
 						return false;
-					else if (e.key === 'F11')
+					else if (key === 'f11')
 						events.emit('onToggleFullscreen');
 				},
 				keyUp: function (e) {
 					if (!this.enabled)
 						return;
 
-					let key = this.getMapping(e.which);
+					let key = this.getRemapping(e.key);
 					let isModifier = this.modifiers.indexOf(key) > -1;
 					let isBody = e.target === document.body;
 

src/client/js/system/browserStorage.js

@@ -1,8 +1,4 @@
-define([
-	'js/system/browserStorage'
-], function (
-	browserStorage
-) {
+define([], function () {
 	const getEntryName = key => {
 		return `iwd_${key.toLowerCase()}`;
 	};

src/client/ui/factory.js

@@ -118,7 +118,7 @@ define([
 		},
 
 		onUiKeyDown: function (keyEvent) {
-			if (keyEvent.key === 'esc') {
+			if (keyEvent.key === 'escape') {
 				this.uis.forEach(u => {
 					if (!u.modal || !u.shown)
 						return;

src/client/ui/templates/characters/characters.js

@@ -54,7 +54,7 @@ define([
 
 			if (key === 'enter')
 				this.onPlayClick();
-			else if (key === 'up' || key === 'down') {
+			else if (key === 'arrowup' || key === 'arrowdown') {
 				if (!this.characters || this.selectedIndex === -1)
 					return;
 
@@ -62,7 +62,7 @@ define([
 				if (!numChars)
 					return;
 
-				const delta = key === 'up' ? -1 : 1;
+				const delta = key === 'arrowup' ? -1 : 1;
 
 				//Clamp index within range [0, numChars - 1]
 				const newIndex = Math.min(Math.max(this.selectedIndex + delta, 0), numChars - 1);

src/client/ui/templates/inventory/inventory.js

@@ -140,7 +140,7 @@ define([
 			if (!msg.success)
 				return;
 
-			if (!forceCtrl && !input.isKeyDown('ctrl', true))
+			if (!forceCtrl && !input.isKeyDown('control', true))
 				return;
 
 			client.request({

src/client/ui/templates/mainMenu/mainMenu.js

@@ -93,7 +93,7 @@ define([
 		},
 
 		onKeyDown: function (key) {
-			if (key === 'esc')
+			if (key === 'escape')
 				this.toggle();
 		}
 	};

src/client/ui/templates/messages/messages.js

@@ -146,7 +146,7 @@ define([
 				this.toggle(true);
 			else if (key === 'shift')
 				this.showItemTooltip();
-			else if (key === 'esc' && this.el.hasClass('typing'))
+			else if (key === 'escape' && this.el.hasClass('typing'))
 				this.toggle(false);
 		},
 

src/client/ui/templates/stash/stash.js

@@ -181,7 +181,7 @@ define([
 		onKeyDown: function (key) {
 			if (key === 'shift' && this.hoverItem)
 				this.onHover();
-			else if (key === 'esc' && this.shown)
+			else if (key === 'escape' && this.shown)
 				this.toggle();
 		},
 

src/server/clientComponents/keyboardMover.js

@@ -41,7 +41,7 @@ define([
 		},
 
 		onCanvasKeyDown: function (keyEvent) {
-			if (keyEvent.key === 'esc') {
+			if (keyEvent.key === 'escape') {
 				client.request({
 					cpn: 'player',
 					method: 'queueAction',

src/server/clientComponents/spellbook.js

@@ -196,7 +196,7 @@ define([
 				method: 'queueAction',
 				data: {
 					action: 'spell',
-					priority: input.isKeyDown('ctrl'),
+					priority: input.isKeyDown('control'),
 					spell: spell.id,
 					target: target,
 					self: isShiftDown