Merge pull request #3605 from Hoekstraa/key-to-keycode

UI: FIX #3592 Sidebar and bash shortcuts now work on MacOS with US-like layouts

src/Sidebar/ui/SidebarRoot.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { KEY } from "../../utils/helpers/keyCodes";
+import { KEYCODE } from "../../utils/helpers/keyCodes";
 import clsx from "clsx";
 import { styled, Theme, CSSObject } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -275,57 +275,53 @@ export function SidebarRoot(props: IProps): React.ReactElement {
     function handleShortcuts(this: Document, event: KeyboardEvent): any {
       if (Settings.DisableHotkeys) return;
       if ((props.player.isWorking && props.player.focus) || props.router.page() === Page.BitVerse) return;
-      if (event.key === KEY.T && event.altKey) {
+      if (event.code === KEYCODE.T && event.altKey) {
         event.preventDefault();
         clickTerminal();
-      } else if (event.key === KEY.C && event.altKey) {
+      } else if (event.code === KEYCODE.C && event.altKey) {
         event.preventDefault();
         clickStats();
-      } else if (event.key === KEY.E && event.altKey) {
+      } else if (event.code === KEYCODE.E && event.altKey) {
         event.preventDefault();
         clickScriptEditor();
-      } else if (event.key === KEY.S && event.altKey) {
+      } else if (event.code === KEYCODE.S && event.altKey) {
         event.preventDefault();
         clickActiveScripts();
-      } else if (event.key === KEY.H && event.altKey) {
+      } else if (event.code === KEYCODE.H && event.altKey) {
         event.preventDefault();
         clickHacknet();
-      } else if (event.key === KEY.W && event.altKey) {
+      } else if (event.code === KEYCODE.W && event.altKey) {
         event.preventDefault();
         clickCity();
-      } else if (event.key === KEY.J && event.altKey && !event.ctrlKey && !event.metaKey && canJob) {
+      } else if (event.code === KEYCODE.J && event.altKey && !event.ctrlKey && !event.metaKey && canJob) {
         // ctrl/cmd + alt + j is shortcut to open Chrome dev tools
         event.preventDefault();
         clickJob();
-      } else if (event.key === KEY.R && event.altKey) {
+      } else if (event.code === KEYCODE.R && event.altKey) {
         event.preventDefault();
         clickTravel();
-      } else if (event.key === KEY.P && event.altKey) {
+      } else if (event.code === KEYCODE.P && event.altKey) {
         event.preventDefault();
         clickCreateProgram();
-      } else if (event.key === KEY.F && event.altKey) {
+      } else if (event.code === KEYCODE.F && event.altKey) {
         if (props.page == Page.Terminal && Settings.EnableBashHotkeys) {
           return;
         }
         event.preventDefault();
         clickFactions();
-      } else if (event.key === KEY.A && event.altKey) {
+      } else if (event.code === KEYCODE.A && event.altKey) {
         event.preventDefault();
         clickAugmentations();
-      } else if (event.key === KEY.U && event.altKey) {
+      } else if (event.code === KEYCODE.U && event.altKey) {
         event.preventDefault();
         clickTutorial();
-      } else if (event.key === KEY.B && event.altKey && props.player.bladeburner) {
+      } else if (event.code === KEYCODE.B && event.altKey && props.player.bladeburner) {
         event.preventDefault();
         clickBladeburner();
-      } else if (event.key === KEY.G && event.altKey && props.player.gang) {
+      } else if (event.code === KEYCODE.G && event.altKey && props.player.gang) {
         event.preventDefault();
         clickGang();
       }
-      // if (event.key === KEY.O && event.altKey) {
-      //   event.preventDefault();
-      //   gameOptionsBoxOpen();
-      // }
     }
 
     document.addEventListener("keydown", handleShortcuts);

src/Terminal/ui/TerminalInput.tsx

@@ -7,7 +7,7 @@ import Paper from "@mui/material/Paper";
 import Popper from "@mui/material/Popper";
 import TextField from "@mui/material/TextField";
 
-import { KEY } from "../../utils/helpers/keyCodes";
+import { KEY, KEYCODE } from "../../utils/helpers/keyCodes";
 import { ITerminal } from "../ITerminal";
 import { IRouter } from "../../ui/Router";
 import { IPlayer } from "../../PersonObjects/IPlayer";
@@ -318,57 +318,57 @@ export function TerminalInput({ terminal, router, player }: IProps): React.React
 
     // Extra Bash Emulation Hotkeys, must be enabled through options
     if (Settings.EnableBashHotkeys) {
-      if (event.key === KEY.A && event.ctrlKey) {
+      if (event.code === KEYCODE.A && event.ctrlKey) {
         event.preventDefault();
         moveTextCursor("home");
       }
 
-      if (event.key === KEY.E && event.ctrlKey) {
+      if (event.code === KEYCODE.E && event.ctrlKey) {
         event.preventDefault();
         moveTextCursor("end");
       }
 
-      if (event.key === KEY.B && event.ctrlKey) {
+      if (event.code === KEYCODE.B && event.ctrlKey) {
         event.preventDefault();
         moveTextCursor("prevchar");
       }
 
-      if (event.key === KEY.B && event.altKey) {
+      if (event.code === KEYCODE.B && event.altKey) {
         event.preventDefault();
         moveTextCursor("prevword");
       }
 
-      if (event.key === KEY.F && event.ctrlKey) {
+      if (event.code === KEYCODE.F && event.ctrlKey) {
         event.preventDefault();
         moveTextCursor("nextchar");
       }
 
-      if (event.key === KEY.F && event.altKey) {
+      if (event.code === KEYCODE.F && event.altKey) {
         event.preventDefault();
         moveTextCursor("nextword");
       }
 
-      if ((event.key === KEY.H || event.key === KEY.D) && event.ctrlKey) {
+      if ((event.code === KEYCODE.H || event.code === KEYCODE.D) && event.ctrlKey) {
         modifyInput("backspace");
         event.preventDefault();
       }
 
-      if (event.key === KEY.W && event.ctrlKey) {
+      if (event.code === KEYCODE.W && event.ctrlKey) {
         event.preventDefault();
         modifyInput("deletewordbefore");
       }
 
-      if (event.key === KEY.D && event.altKey) {
+      if (event.code === KEYCODE.D && event.altKey) {
         event.preventDefault();
         modifyInput("deletewordafter");
       }
 
-      if (event.key === KEY.U && event.ctrlKey) {
+      if (event.code === KEYCODE.U && event.ctrlKey) {
         event.preventDefault();
         modifyInput("clearbefore");
       }
 
-      if (event.key === KEY.K && event.ctrlKey) {
+      if (event.code === KEYCODE.K && event.ctrlKey) {
         event.preventDefault();
         modifyInput("clearafter");
       }

src/utils/helpers/keyCodes.ts

@@ -1,5 +1,5 @@
 /**
- * Keyboard key codes
+ * Keyboard key codes as returned by event.key
  */
 export enum KEY {
   //SHIFT: 16, // Check by `&& event.shiftKey`
@@ -70,3 +70,69 @@ export enum KEY {
   Y = "y",
   Z = "z",
 }
+
+/**
+ * Keyboard key codes as returned by event.code
+ */
+export enum KEYCODE {
+  //SHIFT: 16, // Check by `&& event.shiftKey`
+  //CTRL: 17, // Check by `&& event.ctrlKey`
+  //ALT: 18, // Check by `&& event.altKey`
+  ENTER = "Enter",
+  ESC = "Escape",
+  TAB = "Tab",
+  SPACE = "Space",
+  BACKSPACE = "Backspace",
+  UP_ARROW = "ArrowUp",
+  DOWN_ARROW = "ArrowDown",
+  LEFT_ARROW = "ArrowLeft",
+  RIGHT_ARROW = "ArrowRight",
+
+  BACKWARD_SLASH = "Backslash",
+  BACKQUOTE = "Backquote",
+  COMMA = "Comma",
+  DOT = "Period",
+  EQUAL = "Equal",
+  FORWARD_SLASH = "Slash",
+  HYPHEN = "Minus",
+  SEMICOLON = "Semicolon",
+  QUOTE = "Quote",
+
+  k0 = "Digit0",
+  k1 = "Digit1",
+  k2 = "Digit2",
+  k3 = "Digit3",
+  k4 = "Digit4",
+  k5 = "Digit5",
+  k6 = "Digit6",
+  k7 = "Digit7",
+  k8 = "Digit8",
+  k9 = "Digit9",
+
+  A = "KeyA",
+  B = "KeyB",
+  C = "KeyC",
+  D = "KeyD",
+  E = "KeyE",
+  F = "KeyF",
+  G = "KeyG",
+  H = "KeyH",
+  I = "KeyI",
+  J = "KeyJ",
+  K = "KeyK",
+  L = "KeyL",
+  M = "KeyM",
+  N = "KeyN",
+  O = "KeyO",
+  P = "KeyP",
+  Q = "KeyQ",
+  R = "KeyR",
+  S = "KeyS",
+  T = "KeyT",
+  U = "KeyU",
+  V = "KeyV",
+  W = "KeyW",
+  X = "KeyX",
+  Y = "KeyY",
+  Z = "KeyZ",
+}