INFILTRATION: Different visual rework for CheatCodeGame (#994)

src/Augmentation/Augmentations.ts

@@ -1781,7 +1781,7 @@ export const Augmentations: Record<AugmentationName, Augmentation> = (() => {
       repCost: 1e4,
       moneyCost: 1e6,
       info: "Penta-dynamo-neurovascular-valve inserted in the carpal ligament, enhances dexterity.",
-      stats: "This augmentation makes the Cheat Code minigame easier by allowing the opposite character.",
+      stats: "This augmentation makes the Cheat Code minigame easier by showing what character will come next.",
       isSpecial: true,
       factions: [FactionName.ShadowsOfAnarchy],
     },

src/Infiltration/ui/CheatCodeGame.tsx

@@ -2,15 +2,7 @@ import { Paper, Typography } from "@mui/material";
 import React, { useState } from "react";
 import { AugmentationName } from "@enums";
 import { Player } from "@player";
-import {
+import { Arrow, downArrowSymbol, getArrow, leftArrowSymbol, random, rightArrowSymbol, upArrowSymbol } from "../utils";
-  downArrowSymbol,
-  getArrow,
-  getInverseArrow,
-  leftArrowSymbol,
-  random,
-  rightArrowSymbol,
-  upArrowSymbol,
-} from "../utils";
 import { interpolate } from "./Difficulty";
 import { GameTimer } from "./GameTimer";
 import { IMinigameProps } from "./IMinigameProps";
@@ -45,7 +37,7 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement {
 
   function press(this: Document, event: KeyboardEvent): void {
     event.preventDefault();
-    if (code[index] !== getArrow(event) && (!hasAugment || code[index] !== getInverseArrow(event))) {
+    if (code[index] !== getArrow(event)) {
       props.onFailure();
       return;
     }
@@ -58,21 +50,37 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement {
       <GameTimer millis={timer} onExpire={props.onFailure} />
       <Paper sx={{ display: "grid", justifyItems: "center" }}>
         <Typography variant="h4">Enter the Code!</Typography>
-        <Typography variant="h4">{code[index]}</Typography>
+        <Typography variant="h4">
+          <div
+            style={{
+              display: "grid",
+              gap: "2rem",
+              gridTemplateColumns: `repeat(${code.length}, 1fr)`,
+              textAlign: "center",
+            }}
+          >
+            {code.map((arrow, i) => {
+              return (
+                <span key={i} style={i !== index ? { opacity: 0.4 } : {}}>
+                  {i > index && !hasAugment ? "?" : arrow}
+                </span>
+              );
+            })}
+          </div>
+        </Typography>
         <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
       </Paper>
     </>
   );
 }
 
-function generateCode(difficulty: Difficulty): string {
+function generateCode(difficulty: Difficulty): Arrow[] {
-  const arrows = [leftArrowSymbol, rightArrowSymbol, upArrowSymbol, downArrowSymbol];
+  const arrows: Arrow[] = [leftArrowSymbol, rightArrowSymbol, upArrowSymbol, downArrowSymbol];
-  let code = "";
+  const code: Arrow[] = [];
   for (let i = 0; i < random(difficulty.min, difficulty.max); i++) {
     let arrow = arrows[Math.floor(4 * Math.random())];
     while (arrow === code[code.length - 1]) arrow = arrows[Math.floor(4 * Math.random())];
-    code += arrow;
+    code.push(arrow);
   }
-
   return code;
 }

src/Infiltration/utils.ts

@@ -9,38 +9,21 @@ export const downArrowSymbol = "↓";
 export const leftArrowSymbol = "←";
 export const rightArrowSymbol = "→";
 
-export function getArrow(event: KeyboardEvent): string {
+export type Arrow = typeof leftArrowSymbol | typeof rightArrowSymbol | typeof upArrowSymbol | typeof downArrowSymbol;
-  switch (event.key) {
-    case KEY.UP_ARROW:
-    case KEY.W:
-      return upArrowSymbol;
-    case KEY.LEFT_ARROW:
-    case KEY.A:
-      return leftArrowSymbol;
-    case KEY.DOWN_ARROW:
-    case KEY.S:
-      return downArrowSymbol;
-    case KEY.RIGHT_ARROW:
-    case KEY.D:
-      return rightArrowSymbol;
-  }
-  return "";
-}
 
-export function getInverseArrow(event: KeyboardEvent): string {
+export function getArrow(event: KeyboardEvent): Arrow | undefined {
   switch (event.key) {
-    case KEY.DOWN_ARROW:
-    case KEY.S:
-      return upArrowSymbol;
-    case KEY.RIGHT_ARROW:
-    case KEY.D:
-      return leftArrowSymbol;
     case KEY.UP_ARROW:
     case KEY.W:
-      return downArrowSymbol;
+      return upArrowSymbol;
     case KEY.LEFT_ARROW:
     case KEY.A:
+      return leftArrowSymbol;
+    case KEY.DOWN_ARROW:
+    case KEY.S:
+      return downArrowSymbol;
+    case KEY.RIGHT_ARROW:
+    case KEY.D:
       return rightArrowSymbol;
   }
-  return "";
 }