diff --git a/src/Infiltration/ui/Cyberpunk2077Game.tsx b/src/Infiltration/ui/Cyberpunk2077Game.tsx index 3f88045f5..e5c1d6287 100644 --- a/src/Infiltration/ui/Cyberpunk2077Game.tsx +++ b/src/Infiltration/ui/Cyberpunk2077Game.tsx @@ -1,4 +1,4 @@ -import { Paper, Typography } from "@mui/material"; +import { Paper, Typography, Box } from "@mui/material"; import React, { useState } from "react"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { Player } from "../../Player"; @@ -18,6 +18,12 @@ interface Difficulty { symbols: number; } +interface GridItem { + content: string; + color: string; + selected?: boolean; +} + const difficulties: { Trivial: Difficulty; Normal: Difficulty; @@ -75,18 +81,33 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement { } } + const flatGrid: GridItem[] = []; + grid.map((line, y) => + line.map((cell, x) => { + const isCorrectAnswer = cell === answers[currentAnswerIndex]; + const optionColor = hasAugment && !isCorrectAnswer ? Settings.theme.disabled : Settings.theme.primary; + + if (x === pos[0] && y === pos[1]) { + flatGrid.push({ color: optionColor, content: cell, selected: true }); + return; + } + + flatGrid.push({ color: optionColor, content: cell }); + }), + ); + const fontSize = "2em"; return ( <> - + Match the symbols! Targets:{" "} {answers.map((a, i) => { if (i == currentAnswerIndex) return ( - + {a}  ); @@ -98,31 +119,27 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement { })}
- {grid.map((line, y) => ( -
- - {line.map((cell, x) => { - const isCorrectAnswer = cell === answers[currentAnswerIndex]; - - if (x == pos[0] && y == pos[1]) { - return ( - - {cell}  - - ); - } - - const optionColor = hasAugment && !isCorrectAnswer ? Settings.theme.disabled : Settings.theme.primary; - return ( - - {cell}  - - ); - })} + + {flatGrid.map((item) => ( + + {item.content} -
-
- ))} + ))} +