convert infiltration to use key instead of keyCode

src/Infiltration/ui/BackwardGame.tsx

@@ -36,7 +36,7 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement {
 
   function press(this: Document, event: KeyboardEvent): void {
     event.preventDefault();
-    if (event.keyCode === 16) return;
+    if (event.key === "Backspace") return;
     const nextGuess = guess + event.key.toUpperCase();
     if (!answer.startsWith(nextGuess)) props.onFailure();
     else if (answer === nextGuess) props.onSuccess();

src/Infiltration/ui/BracketGame.tsx

@@ -38,10 +38,10 @@ function generateLeftSide(difficulty: Difficulty): string {
 }
 
 function getChar(event: KeyboardEvent): string {
-  if (event.keyCode == 48 && event.shiftKey) return ")";
-  if (event.keyCode == 221 && !event.shiftKey) return "]";
-  if (event.keyCode == 221 && event.shiftKey) return "}";
-  if (event.keyCode == 190 && event.shiftKey) return ">";
+  if (event.key === ")") return ")";
+  if (event.key === "]") return "]";
+  if (event.key === "}") return "}";
+  if (event.key === ">") return ">";
   return "";
 }
 

src/Infiltration/ui/BribeGame.tsx

@@ -33,16 +33,16 @@ export function BribeGame(props: IMinigameProps): React.ReactElement {
 
   function press(this: Document, event: KeyboardEvent): void {
     event.preventDefault();
-    const k = event.keyCode;
-    if (k === 32) {
+    const k = event.key;
+    if (k === " ") {
       if (positive.includes(choices[index])) props.onSuccess();
       else props.onFailure();
       return;
     }
 
     let newIndex = index;
-    if ([38, 87, 68, 39].includes(k)) newIndex++;
-    if ([65, 37, 83, 40].includes(k)) newIndex--;
+    if (["ArrowUp", "w", "ArrowRight", "d"].includes(k)) newIndex++;
+    if (["ArrowDown", "s", "ArrowLeft", "a"].includes(k)) newIndex--;
     while (newIndex < 0) newIndex += choices.length;
     while (newIndex > choices.length - 1) newIndex -= choices.length;
     setIndex(newIndex);

src/Infiltration/ui/Cyberpunk2077Game.tsx

@@ -59,7 +59,7 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement {
     next[1] = (next[1] + grid.length) % grid.length;
     setPos(next);
 
-    if (event.keyCode == 32) {
+    if (event.key === " ") {
       const selected = grid[pos[1]][pos[0]];
       const expected = answer[index];
       if (selected !== expected) {

src/Infiltration/ui/MinesweeperGame.tsx

@@ -60,7 +60,7 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement {
     next[1] = (next[1] + minefield.length) % minefield.length;
     setPos(next);
 
-    if (event.keyCode == 32) {
+    if (event.key == " ") {
       if (!minefield[pos[1]][pos[0]]) {
         props.onFailure();
         return;

src/Infiltration/ui/SlashGame.tsx

@@ -30,7 +30,7 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
 
   function press(this: Document, event: KeyboardEvent): void {
     event.preventDefault();
-    if (event.keyCode !== 32) return;
+    if (event.key !== " ") return;
     if (phase !== 2) {
       props.onFailure();
     } else {

src/Infiltration/utils.ts

@@ -3,18 +3,18 @@ export function random(min: number, max: number): number {
 }
 
 export function getArrow(event: KeyboardEvent): string {
-  switch (event.keyCode) {
-    case 38:
-    case 87:
+  switch (event.key) {
+    case "ArrowUp":
+    case "w":
       return "↑";
-    case 65:
-    case 37:
+    case "ArrowLeft":
+    case "a":
       return "←";
-    case 40:
-    case 83:
+    case "ArrowDown":
+    case "s":
       return "↓";
-    case 39:
-    case 68:
+    case "ArrowRight":
+    case "d":
       return "→";
   }
   return "";