diff --git a/src/Infiltration/ui/BackwardGame.tsx b/src/Infiltration/ui/BackwardGame.tsx index 1c5ef1e6c..f02e62abe 100644 --- a/src/Infiltration/ui/BackwardGame.tsx +++ b/src/Infiltration/ui/BackwardGame.tsx @@ -1,15 +1,14 @@ +import { Paper, Typography } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; +import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { Player } from "../../Player"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { random } from "../utils"; +import { BlinkingCursor } from "./BlinkingCursor"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; import { IMinigameProps } from "./IMinigameProps"; import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { random } from "../utils"; -import { interpolate } from "./Difficulty"; -import { BlinkingCursor } from "./BlinkingCursor"; -import Typography from "@mui/material/Typography"; -import { KEY } from "../../utils/helpers/keyCodes"; -import { Player } from "../../Player"; -import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; interface Difficulty { [key: string]: number; @@ -48,24 +47,18 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement { } return ( - + <> - + Type it{!hasAugment ? " backward" : ""} - - - - {answer} - - - + {answer} {guess} - - + + ); } diff --git a/src/Infiltration/ui/BlinkingCursor.tsx b/src/Infiltration/ui/BlinkingCursor.tsx index 599d23f66..c3152ab72 100644 --- a/src/Infiltration/ui/BlinkingCursor.tsx +++ b/src/Infiltration/ui/BlinkingCursor.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, { useEffect, useState } from "react"; export function BlinkingCursor(): React.ReactElement { const [on, setOn] = useState(true); @@ -6,5 +6,5 @@ export function BlinkingCursor(): React.ReactElement { const i = setInterval(() => setOn((old) => !old), 1000); return () => clearInterval(i); }); - return <>{on ? "|" : ""}; + return <>{on ? "|" : <> }; } diff --git a/src/Infiltration/ui/BracketGame.tsx b/src/Infiltration/ui/BracketGame.tsx index 41015e8e6..26f7e19fe 100644 --- a/src/Infiltration/ui/BracketGame.tsx +++ b/src/Infiltration/ui/BracketGame.tsx @@ -1,15 +1,14 @@ +import { Paper, Typography } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; +import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { Player } from "../../Player"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { random } from "../utils"; +import { BlinkingCursor } from "./BlinkingCursor"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; import { IMinigameProps } from "./IMinigameProps"; import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { random } from "../utils"; -import { interpolate } from "./Difficulty"; -import { BlinkingCursor } from "./BlinkingCursor"; -import Typography from "@mui/material/Typography"; -import { Player } from "../../Player"; -import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; -import { KEY } from "../../utils/helpers/keyCodes"; interface Difficulty { [key: string]: number; @@ -84,16 +83,16 @@ export function BracketGame(props: IMinigameProps): React.ReactElement { } return ( - + <> - + Close the brackets {`${left}${right}`} - - + + ); } diff --git a/src/Infiltration/ui/BribeGame.tsx b/src/Infiltration/ui/BribeGame.tsx index 6f6811e14..6fdc85246 100644 --- a/src/Infiltration/ui/BribeGame.tsx +++ b/src/Infiltration/ui/BribeGame.tsx @@ -1,15 +1,14 @@ +import { Paper, Typography } from "@mui/material"; import React, { useEffect, useState } from "react"; -import Grid from "@mui/material/Grid"; -import { IMinigameProps } from "./IMinigameProps"; -import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { interpolate } from "./Difficulty"; -import Typography from "@mui/material/Typography"; -import { KEY } from "../../utils/helpers/keyCodes"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { Player } from "../../Player"; import { Settings } from "../../Settings/Settings"; +import { KEY } from "../../utils/helpers/keyCodes"; import { downArrowSymbol, upArrowSymbol } from "../utils"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; +import { IMinigameProps } from "./IMinigameProps"; +import { KeyHandler } from "./KeyHandler"; interface Difficulty { [key: string]: number; @@ -88,13 +87,11 @@ export function BribeGame(props: IMinigameProps): React.ReactElement { } return ( - + <> - - Say something nice about the guard. + + Say something nice about the guard - - {upArrowSymbol} @@ -104,8 +101,8 @@ export function BribeGame(props: IMinigameProps): React.ReactElement { {downArrowSymbol} - - + + ); } @@ -154,6 +151,7 @@ const positive = [ "patient", "dynamic", "loyal", + "based", ]; const negative = [ @@ -177,4 +175,5 @@ const negative = [ "picky", "tactless", "thoughtless", + "cringe", ]; diff --git a/src/Infiltration/ui/CheatCodeGame.tsx b/src/Infiltration/ui/CheatCodeGame.tsx index f0974a3bc..471003b41 100644 --- a/src/Infiltration/ui/CheatCodeGame.tsx +++ b/src/Infiltration/ui/CheatCodeGame.tsx @@ -1,21 +1,20 @@ +import { Paper, Typography } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; -import { IMinigameProps } from "./IMinigameProps"; -import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; +import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { Player } from "../../Player"; import { - random, + downArrowSymbol, getArrow, getInverseArrow, leftArrowSymbol, + random, rightArrowSymbol, upArrowSymbol, - downArrowSymbol, } from "../utils"; import { interpolate } from "./Difficulty"; -import Typography from "@mui/material/Typography"; -import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; -import { Player } from "../../Player"; +import { GameTimer } from "./GameTimer"; +import { IMinigameProps } from "./IMinigameProps"; +import { KeyHandler } from "./KeyHandler"; interface Difficulty { [key: string]: number; @@ -55,14 +54,14 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement { } return ( - + <> - + Enter the Code! {code[index]} - - + + ); } diff --git a/src/Infiltration/ui/Countdown.tsx b/src/Infiltration/ui/Countdown.tsx index 91878cd20..00d068ba6 100644 --- a/src/Infiltration/ui/Countdown.tsx +++ b/src/Infiltration/ui/Countdown.tsx @@ -1,7 +1,6 @@ -import React, { useState, useEffect } from "react"; -import Grid from "@mui/material/Grid"; +import { Paper, Typography } from "@mui/material"; +import React, { useEffect, useState } from "react"; -import Typography from "@mui/material/Typography"; interface IProps { onFinish: () => void; } @@ -13,17 +12,13 @@ export function Countdown(props: IProps): React.ReactElement { props.onFinish(); return; } - setTimeout(() => setX(x - 1), 200); + setTimeout(() => setX(x - 1), 300); }); return ( - <> - - - Get Ready! - {x} - - - + + Get Ready! + {x} + ); } diff --git a/src/Infiltration/ui/Cyberpunk2077Game.tsx b/src/Infiltration/ui/Cyberpunk2077Game.tsx index 6c61f6494..e5c1d6287 100644 --- a/src/Infiltration/ui/Cyberpunk2077Game.tsx +++ b/src/Infiltration/ui/Cyberpunk2077Game.tsx @@ -1,15 +1,14 @@ +import { Paper, Typography, Box } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; -import { IMinigameProps } from "./IMinigameProps"; -import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { interpolate } from "./Difficulty"; -import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils"; -import Typography from "@mui/material/Typography"; -import { KEY } from "../../utils/helpers/keyCodes"; -import { Settings } from "../../Settings/Settings"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { Player } from "../../Player"; +import { Settings } from "../../Settings/Settings"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; +import { IMinigameProps } from "./IMinigameProps"; +import { KeyHandler } from "./KeyHandler"; interface Difficulty { [key: string]: number; @@ -19,6 +18,12 @@ interface Difficulty { symbols: number; } +interface GridItem { + content: string; + color: string; + selected?: boolean; +} + const difficulties: { Trivial: Difficulty; Normal: Difficulty; @@ -76,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}  ); @@ -99,34 +119,30 @@ 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} -
-
- ))} + ))} + - - + + ); } diff --git a/src/Infiltration/ui/Game.tsx b/src/Infiltration/ui/Game.tsx index db1475375..52c972add 100644 --- a/src/Infiltration/ui/Game.tsx +++ b/src/Infiltration/ui/Game.tsx @@ -1,19 +1,17 @@ -import { use } from "../../ui/Context"; +import { Button, Container, Paper, Typography } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; -import Button from "@mui/material/Button"; -import { Countdown } from "./Countdown"; -import { BracketGame } from "./BracketGame"; -import { SlashGame } from "./SlashGame"; +import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { use } from "../../ui/Context"; import { BackwardGame } from "./BackwardGame"; +import { BracketGame } from "./BracketGame"; import { BribeGame } from "./BribeGame"; import { CheatCodeGame } from "./CheatCodeGame"; +import { Countdown } from "./Countdown"; import { Cyberpunk2077Game } from "./Cyberpunk2077Game"; import { MinesweeperGame } from "./MinesweeperGame"; -import { WireCuttingGame } from "./WireCuttingGame"; +import { SlashGame } from "./SlashGame"; import { Victory } from "./Victory"; -import Typography from "@mui/material/Typography"; -import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { WireCuttingGame } from "./WireCuttingGame"; interface IProps { StartingDifficulty: number; @@ -139,22 +137,20 @@ export function Game(props: IProps): React.ReactElement { } return ( - <> - - - - - - - Level: {level} / {props.MaxLevel} - - - + + + {stage !== Stage.Sell && ( + + )} + + Level {level} / {props.MaxLevel} + + + - - {stageComponent} - - - + {stageComponent} + ); } diff --git a/src/Infiltration/ui/GameTimer.tsx b/src/Infiltration/ui/GameTimer.tsx index c6ea60f44..7bd25e563 100644 --- a/src/Infiltration/ui/GameTimer.tsx +++ b/src/Infiltration/ui/GameTimer.tsx @@ -1,10 +1,9 @@ -import LinearProgress from "@mui/material/LinearProgress"; -import React, { useState, useEffect } from "react"; -import withStyles from "@mui/styles/withStyles"; +import { LinearProgress, Paper } from "@mui/material"; import { Theme } from "@mui/material/styles"; -import Grid from "@mui/material/Grid"; -import { use } from "../../ui/Context"; +import withStyles from "@mui/styles/withStyles"; +import React, { useEffect, useState } from "react"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { use } from "../../ui/Context"; const TimerProgress = withStyles((theme: Theme) => ({ root: { @@ -19,6 +18,7 @@ const TimerProgress = withStyles((theme: Theme) => ({ interface IProps { millis: number; onExpire: () => void; + noPaper?: boolean; } export function GameTimer(props: IProps): React.ReactElement { @@ -42,9 +42,11 @@ export function GameTimer(props: IProps): React.ReactElement { // https://stackoverflow.com/questions/55593367/disable-material-uis-linearprogress-animation // TODO(hydroflame): there's like a bug where it triggers the end before the // bar physically reaches the end - return ( - + return props.noPaper ? ( + + ) : ( + - + ); } diff --git a/src/Infiltration/ui/InfiltrationRoot.tsx b/src/Infiltration/ui/InfiltrationRoot.tsx index 1c78b5b19..b66a7d31b 100644 --- a/src/Infiltration/ui/InfiltrationRoot.tsx +++ b/src/Infiltration/ui/InfiltrationRoot.tsx @@ -1,9 +1,9 @@ import React, { useState } from "react"; -import { Intro } from "./Intro"; -import { Game } from "./Game"; import { Location } from "../../Locations/Location"; import { use } from "../../ui/Context"; import { calculateDifficulty, calculateReward } from "../formulas/game"; +import { Game } from "./Game"; +import { Intro } from "./Intro"; interface IProps { location: Location; } @@ -22,24 +22,24 @@ export function InfiltrationRoot(props: IProps): React.ReactElement { router.toCity(); } - if (!start) { - return ( - setStart(true)} - cancel={cancel} - /> - ); - } - return ( - +
+ {start ? ( + + ) : ( + setStart(true)} + cancel={cancel} + /> + )} +
); } diff --git a/src/Infiltration/ui/Intro.tsx b/src/Infiltration/ui/Intro.tsx index bedf9e629..7844ba3ca 100644 --- a/src/Infiltration/ui/Intro.tsx +++ b/src/Infiltration/ui/Intro.tsx @@ -1,8 +1,8 @@ +import { Report } from "@mui/icons-material"; +import { Box, Button, Container, Paper, Tooltip, Typography } from "@mui/material"; import React from "react"; import { Location } from "../../Locations/Location"; -import Grid from "@mui/material/Grid"; -import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; +import { Settings } from "../../Settings/Settings"; import { numeralWrapper } from "../../ui/numeralFormat"; interface IProps { @@ -41,9 +41,9 @@ function coloredArrow(difficulty: number): JSX.Element { } else { return ( <> - {arrowPart("white", difficulty * 13)} - {arrowPart("orange", (difficulty - 1) * 13)} - {arrowPart("red", (difficulty - 2) * 13)} + {arrowPart(Settings.theme.primary, difficulty * 13)} + {arrowPart(Settings.theme.warning, (difficulty - 1) * 13)} + {arrowPart(Settings.theme.error, (difficulty - 2) * 13)} ); } @@ -51,65 +51,84 @@ function coloredArrow(difficulty: number): JSX.Element { export function Intro(props: IProps): React.ReactElement { return ( - <> - - - Infiltrating {props.Location.name} - - - - Maximum level: {props.MaxLevel} - - - - - Difficulty: {numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100 - - + + + + Infiltrating {props.Location.name} + + + Maximum Level: + {props.MaxLevel} + + 2 + ? Settings.theme.error + : props.Difficulty > 1 + ? Settings.theme.warning + : Settings.theme.primary, + display: "flex", + alignItems: "center", + }} + > + Difficulty:  + {numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100 + {props.Difficulty > 1.5 && ( + + This location is too heavily guarded for your current stats. It is recommended that you try training, + or finding an easier location. + + } + > + + + )} + - {props.Difficulty > 1.5 && ( - - - Warning: This location is too heavily guarded for your current stats, try training or finding an easier - location. - - - )} + [{coloredArrow(props.Difficulty)}] + {`▲ ▲ ▲ ▲`} + {` Trivial Normal Hard Impossible`} + - - [{coloredArrow(props.Difficulty)}] - {` ^ ^ ^ ^`} - {` Trivial Normal Hard Impossible`} - - + + + Infiltration is a series of short minigames that get progressively harder. You take damage for failing + them. Reaching the maximum level rewards you with intel that you can trade for money or reputation. +
+
+ Gameplay: + +
    - Infiltration is a series of short minigames that get progressively harder. You take damage for failing them. - Reaching the maximum level rewards you with intel you can trade for money or reputation. +
  • + The minigames you play are randomly selected. +
    + It might take you a few tries to get used to them. +
    • +
  • No game requires use of the mouse.
    • +
  • + Spacebar is the default action/confirm button. +
    • +
  • + The arrow keys and WASD can be used interchangeably. +
    • +
  • Sometimes the rest of the keyboard is used.
    •  -
    - - The minigames you play are randomly selected. It might take you few tries to get used to them. - -
    - No game require use of the mouse. -
    - Spacebar is the default action/confirm button. -
    - Everything that uses arrow can also use WASD -
    - Sometimes the rest of the keyboard is used. - - +
+ + - - - - - + + + ); } diff --git a/src/Infiltration/ui/MinesweeperGame.tsx b/src/Infiltration/ui/MinesweeperGame.tsx index 723b31f57..af49a144f 100644 --- a/src/Infiltration/ui/MinesweeperGame.tsx +++ b/src/Infiltration/ui/MinesweeperGame.tsx @@ -1,14 +1,16 @@ -import React, { useState, useEffect } from "react"; -import Grid from "@mui/material/Grid"; -import { IMinigameProps } from "./IMinigameProps"; -import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { interpolate } from "./Difficulty"; -import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils"; -import Typography from "@mui/material/Typography"; -import { KEY } from "../../utils/helpers/keyCodes"; +import { Close, Flag, Report } from "@mui/icons-material"; +import { Box, Paper, Typography } from "@mui/material"; +import { uniqueId } from "lodash"; +import React, { useEffect, useState } from "react"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { Player } from "../../Player"; +import { Settings } from "../../Settings/Settings"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { downArrowSymbol, getArrow, leftArrowSymbol, rightArrowSymbol, upArrowSymbol } from "../utils"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; +import { IMinigameProps } from "./IMinigameProps"; +import { KeyHandler } from "./KeyHandler"; interface Difficulty { [key: string]: number; @@ -81,32 +83,77 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement { return () => clearInterval(id); }, []); + const flatGrid: { flagged?: boolean; current?: boolean; marked?: boolean }[] = []; + + minefield.map((line, y) => + line.map((cell, x) => { + if (memoryPhase) { + flatGrid.push({ flagged: Boolean(minefield[y][x]) }); + return; + } else if (x === pos[0] && y === pos[1]) { + flatGrid.push({ current: true }); + } else if (answer[y][x]) { + flatGrid.push({ marked: true }); + } else if (hasAugment && minefield[y][x]) { + flatGrid.push({ flagged: true }); + } else { + flatGrid.push({}); + } + }), + ); + return ( - + <> - + {memoryPhase ? "Remember all the mines!" : "Mark all the mines!"} - {minefield.map((line, y) => ( -
- - {line.map((cell, x) => { - if (memoryPhase) { - if (minefield[y][x]) return [?] ; - return [ ] ; - } else { - if (x == pos[0] && y == pos[1]) return [X] ; - if (answer[y][x]) return [.] ; - if (hasAugment && minefield[y][x]) return [?] ; - return [ ] ; - } - })} - -
-
- ))} + + {flatGrid.map((item) => { + let color: string; + let icon: React.ReactElement; + + if (item.marked) { + color = Settings.theme.warning; + icon = ; + } else if (item.current) { + color = Settings.theme.infolight; + icon = ; + } else if (item.flagged) { + color = Settings.theme.error; + icon = ; + } else { + color = Settings.theme.primary; + icon = <>; + } + + return ( + + {icon} + + ); + })} + - - + + ); } diff --git a/src/Infiltration/ui/SlashGame.tsx b/src/Infiltration/ui/SlashGame.tsx index b9eb523a9..16787eefc 100644 --- a/src/Infiltration/ui/SlashGame.tsx +++ b/src/Infiltration/ui/SlashGame.tsx @@ -1,13 +1,12 @@ -import React, { useState, useEffect } from "react"; -import Grid from "@mui/material/Grid"; +import { Box, Paper, Typography } from "@mui/material"; +import React, { useEffect, useState } from "react"; +import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; +import { Player } from "../../Player"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; import { IMinigameProps } from "./IMinigameProps"; import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { interpolate } from "./Difficulty"; -import Typography from "@mui/material/Typography"; -import { KEY } from "../../utils/helpers/keyCodes"; -import { Player } from "../../Player"; -import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; interface Difficulty { [key: string]: number; @@ -59,23 +58,25 @@ export function SlashGame(props: IMinigameProps): React.ReactElement { }, []); return ( - + <> - + Slash when his guard is down! + {hasAugment ? ( - <> - Guard will drop in... - - + + Guard will drop in... + null} noPaper /> + ) : ( <> )} + {phase === 0 && Guarding ...} {phase === 1 && Preparing?} {phase === 2 && ATTACKING!} - - + + ); } diff --git a/src/Infiltration/ui/Victory.tsx b/src/Infiltration/ui/Victory.tsx index 2a90351a0..c73993ae1 100644 --- a/src/Infiltration/ui/Victory.tsx +++ b/src/Infiltration/ui/Victory.tsx @@ -1,21 +1,17 @@ -import { Factions } from "../../Faction/Factions"; +import { Box, Button, MenuItem, Paper, Select, SelectChangeEvent, Typography } from "@mui/material"; import React, { useState } from "react"; -import Grid from "@mui/material/Grid"; +import { FactionNames } from "../../Faction/data/FactionNames"; +import { inviteToFaction } from "../../Faction/FactionHelpers"; +import { Factions } from "../../Faction/Factions"; +import { use } from "../../ui/Context"; import { Money } from "../../ui/React/Money"; import { Reputation } from "../../ui/React/Reputation"; -import { use } from "../../ui/Context"; -import Typography from "@mui/material/Typography"; -import Button from "@mui/material/Button"; -import MenuItem from "@mui/material/MenuItem"; -import Select, { SelectChangeEvent } from "@mui/material/Select"; -import { FactionNames } from "../../Faction/data/FactionNames"; import { formatNumber } from "../../utils/StringHelperFunctions"; import { calculateInfiltratorsRepReward, calculateSellInformationCashReward, calculateTradeInformationRepReward, } from "../formulas/victory"; -import { inviteToFaction } from "../../Faction/FactionHelpers"; interface IProps { StartingDifficulty: number; @@ -66,24 +62,22 @@ export function Victory(props: IProps): React.ReactElement { } return ( - <> - - - Infiltration successful! - - - - You{" "} - {isMemberOfInfiltrators ? ( - <> - have gained {formatNumber(infiltrationRepGain, 2)} rep for {FactionNames.ShadowsOfAnarchy} and{" "} - - ) : ( - <> - )} - can trade the confidential information you found for money or reputation. - - {"none"} @@ -98,17 +92,15 @@ export function Victory(props: IProps): React.ReactElement { - - - - - - - - - + + + + + ); } diff --git a/src/Infiltration/ui/WireCuttingGame.tsx b/src/Infiltration/ui/WireCuttingGame.tsx index 7ca0aedbc..ce994e1a4 100644 --- a/src/Infiltration/ui/WireCuttingGame.tsx +++ b/src/Infiltration/ui/WireCuttingGame.tsx @@ -1,15 +1,14 @@ +import { Box, Paper, Typography } from "@mui/material"; import React, { useEffect, useState } from "react"; -import Grid from "@mui/material/Grid"; -import Typography from "@mui/material/Typography"; -import { IMinigameProps } from "./IMinigameProps"; -import { KeyHandler } from "./KeyHandler"; -import { GameTimer } from "./GameTimer"; -import { random } from "../utils"; -import { interpolate } from "./Difficulty"; -import { KEY } from "../../utils/helpers/keyCodes"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { Player } from "../../Player"; import { Settings } from "../../Settings/Settings"; +import { KEY } from "../../utils/helpers/keyCodes"; +import { random } from "../utils"; +import { interpolate } from "./Difficulty"; +import { GameTimer } from "./GameTimer"; +import { IMinigameProps } from "./IMinigameProps"; +import { KeyHandler } from "./KeyHandler"; interface Difficulty { [key: string]: number; @@ -102,46 +101,53 @@ export function WireCuttingGame(props: IMinigameProps): React.ReactElement { } return ( - + <> - - Cut the wires with the following properties! (keyboard 1 to 9) + + + Cut the wires with the following properties! (keyboard 1 to 9) + {questions.map((question, i) => ( {question.toString()} ))} - + {new Array(wires.length).fill(0).map((_, i) => { const isCorrectWire = checkWire(i + 1); const color = hasAugment && !isCorrectWire ? Settings.theme.disabled : Settings.theme.primary; return ( - -  {i + 1}     - + + {i + 1} + ); })} - - {new Array(8).fill(0).map((_, i) => ( -
- + {new Array(8).fill(0).map((_, i) => ( + {wires.map((wire, j) => { if ((i === 3 || i === 4) && cutWires[j]) { - return       ; + return ; } const isCorrectWire = checkWire(j + 1); const wireColor = hasAugment && !isCorrectWire ? Settings.theme.disabled : wire.colors[i % wire.colors.length]; return ( - - |{wire.tpe}|    - + + |{wire.tpe}| + ); })} - -
- ))} + + ))} + - - + + ); }