Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-20 13:15:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #3587 from nickofolas/improvement/infiltration-ui

Browse Source 
INFILTRATION: Update gameplay UI
This commit is contained in:
hydroflame 2022-05-04 11:52:02 -04:00 committed by GitHub
commit 8b0ab7842d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 403 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/Infiltration/ui/BackwardGame.tsx
View File

@ -1,15 +1,14 @@
import { Paper, Typography } from "@mui/material";
import React, { useState } from "react"; 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 { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -48,24 +47,18 @@ export function BackwardGame(props: IMinigameProps): React.ReactElement {
} }
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
<Typography variant="h4">Type it{!hasAugment ? " backward" : ""}</Typography> <Typography variant="h4">Type it{!hasAugment ? " backward" : ""}</Typography>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> <Typography style={{ transform: hasAugment ? "none" : "scaleX(-1)" }}>{answer}</Typography>
<Grid item xs={6}>
<Typography style={{ transform: hasAugment ? "none" : "scaleX(-1)", marginLeft: hasAugment ? "50%" : "none" }}>
{answer}
</Typography>
</Grid>
<Grid item xs={6}>
<Typography> <Typography>
{guess} {guess}
<BlinkingCursor /> <BlinkingCursor />
</Typography> </Typography>
</Grid> </Paper>
</Grid> </>
); );
} }

4
src/Infiltration/ui/BlinkingCursor.tsx
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, { useEffect, useState } from "react";
export function BlinkingCursor(): React.ReactElement { export function BlinkingCursor(): React.ReactElement {
const [on, setOn] = useState(true); const [on, setOn] = useState(true);
@ -6,5 +6,5 @@ export function BlinkingCursor(): React.ReactElement {
const i = setInterval(() => setOn((old) => !old), 1000); const i = setInterval(() => setOn((old) => !old), 1000);
return () => clearInterval(i); return () => clearInterval(i);
}); });
return <>{on ? "|" : ""}</>; return <>{on ? "|" : <>&nbsp;</>}</>;
} }

25
src/Infiltration/ui/BracketGame.tsx
View File

@ -1,15 +1,14 @@
import { Paper, Typography } from "@mui/material";
import React, { useState } from "react"; 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 { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -84,16 +83,16 @@ export function BracketGame(props: IMinigameProps): React.ReactElement {
} }
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center" }}>
<Typography variant="h4">Close the brackets</Typography> <Typography variant="h4">Close the brackets</Typography>
<Typography style={{ fontSize: "5em" }}> <Typography style={{ fontSize: "5em" }}>
{`${left}${right}`} {`${left}${right}`}
<BlinkingCursor /> <BlinkingCursor />
</Typography> </Typography>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }

27
src/Infiltration/ui/BribeGame.tsx
View File

@ -1,15 +1,14 @@
import { Paper, Typography } from "@mui/material";
import React, { useEffect, useState } from "react"; 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 { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player"; import { Player } from "../../Player";
import { Settings } from "../../Settings/Settings"; import { Settings } from "../../Settings/Settings";
import { KEY } from "../../utils/helpers/keyCodes";
import { downArrowSymbol, upArrowSymbol } from "../utils"; import { downArrowSymbol, upArrowSymbol } from "../utils";
import { interpolate } from "./Difficulty";
import { GameTimer } from "./GameTimer";
import { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler";
interface Difficulty { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -88,13 +87,11 @@ export function BribeGame(props: IMinigameProps): React.ReactElement {
} }
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center" }}>
<Typography variant="h4">Say something nice about the guard.</Typography> <Typography variant="h4">Say something nice about the guard</Typography>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid>
<Grid item xs={6}>
<Typography variant="h5" color={upColor}> <Typography variant="h5" color={upColor}>
{upArrowSymbol} {upArrowSymbol}
</Typography> </Typography>
@ -104,8 +101,8 @@ export function BribeGame(props: IMinigameProps): React.ReactElement {
<Typography variant="h5" color={downColor}> <Typography variant="h5" color={downColor}>
{downArrowSymbol} {downArrowSymbol}
</Typography> </Typography>
</Grid> </Paper>
</Grid> </>
); );
} }
@ -154,6 +151,7 @@ const positive = [
"patient", "patient",
"dynamic", "dynamic",
"loyal", "loyal",
"based",
]; ];
const negative = [ const negative = [
@ -177,4 +175,5 @@ const negative = [
"picky", "picky",
"tactless", "tactless",
"thoughtless", "thoughtless",
"cringe",
]; ];

25
src/Infiltration/ui/CheatCodeGame.tsx
View File

@ -1,21 +1,20 @@
import { Paper, Typography } from "@mui/material";
import React, { useState } from "react"; import React, { useState } from "react";
import Grid from "@mui/material/Grid"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { IMinigameProps } from "./IMinigameProps"; import { Player } from "../../Player";
import { KeyHandler } from "./KeyHandler";
import { GameTimer } from "./GameTimer";
import { import {
random, downArrowSymbol,
getArrow, getArrow,
getInverseArrow, getInverseArrow,
leftArrowSymbol, leftArrowSymbol,
random,
rightArrowSymbol, rightArrowSymbol,
upArrowSymbol, upArrowSymbol,
downArrowSymbol,
} from "../utils"; } from "../utils";
import { interpolate } from "./Difficulty"; import { interpolate } from "./Difficulty";
import Typography from "@mui/material/Typography"; import { GameTimer } from "./GameTimer";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { IMinigameProps } from "./IMinigameProps";
import { Player } from "../../Player"; import { KeyHandler } from "./KeyHandler";
interface Difficulty { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -55,14 +54,14 @@ export function CheatCodeGame(props: IMinigameProps): React.ReactElement {
} }
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center" }}>
<Typography variant="h4">Enter the Code!</Typography> <Typography variant="h4">Enter the Code!</Typography>
<Typography variant="h4">{code[index]}</Typography> <Typography variant="h4">{code[index]}</Typography>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }

15
src/Infiltration/ui/Countdown.tsx
View File

@ -1,7 +1,6 @@
import React, { useState, useEffect } from "react"; import { Paper, Typography } from "@mui/material";
import Grid from "@mui/material/Grid"; import React, { useEffect, useState } from "react";
import Typography from "@mui/material/Typography";
interface IProps { interface IProps {
onFinish: () => void; onFinish: () => void;
} }
@ -13,17 +12,13 @@ export function Countdown(props: IProps): React.ReactElement {
props.onFinish(); props.onFinish();
return; return;
} }
setTimeout(() => setX(x - 1), 200); setTimeout(() => setX(x - 1), 300);
}); });
return ( return (
<> <Paper sx={{ p: 1, textAlign: "center" }}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="h4">Get Ready!</Typography> <Typography variant="h4">Get Ready!</Typography>
<Typography variant="h4">{x}</Typography> <Typography variant="h4">{x}</Typography>
</Grid> </Paper>
</Grid>
</>
); );
} }

90
src/Infiltration/ui/Cyberpunk2077Game.tsx
View File

@ -1,15 +1,14 @@
import { Paper, Typography, Box } from "@mui/material";
import React, { useState } from "react"; 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 { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -19,6 +18,12 @@ interface Difficulty {
symbols: number; symbols: number;
} }
interface GridItem {
content: string;
color: string;
selected?: boolean;
}
const difficulties: { const difficulties: {
Trivial: Difficulty; Trivial: Difficulty;
Normal: 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"; const fontSize = "2em";
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
<Typography variant="h4">Match the symbols!</Typography> <Typography variant="h4">Match the symbols!</Typography>
<Typography variant="h5" color={Settings.theme.primary}> <Typography variant="h5" color={Settings.theme.primary}>
Targets:{" "} Targets:{" "}
{answers.map((a, i) => { {answers.map((a, i) => {
if (i == currentAnswerIndex) if (i == currentAnswerIndex)
return ( return (
<span key={`${i}`} style={{ fontSize: "1em", color: "blue" }}> <span key={`${i}`} style={{ fontSize: "1em", color: Settings.theme.infolight }}>
{a}&nbsp; {a}&nbsp;
</span> </span>
); );
@ -99,34 +119,30 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement {
})} })}
</Typography> </Typography>
<br /> <br />
{grid.map((line, y) => ( <Box
<div key={y}> sx={{
<Typography> display: "grid",
{line.map((cell, x) => { gridTemplateColumns: `repeat(${Math.round(difficulty.width)}, 1fr)`,
const isCorrectAnswer = cell === answers[currentAnswerIndex]; gap: 1,
}}
if (x == pos[0] && y == pos[1]) { >
return ( {flatGrid.map((item) => (
<span key={`${x}${y}`} style={{ fontSize: fontSize, color: "blue" }}> <Typography
{cell}&nbsp; sx={{
</span> fontSize: fontSize,
); color: item.color,
} border: item.selected ? `2px solid ${Settings.theme.infolight}` : "unset",
lineHeight: "unset",
const optionColor = hasAugment && !isCorrectAnswer ? Settings.theme.disabled : Settings.theme.primary; p: item.selected ? "2px" : "4px",
return ( }}
<span key={`${x}${y}`} style={{ fontSize: fontSize, color: optionColor }}> >
{cell}&nbsp; {item.content}
</span>
);
})}
</Typography> </Typography>
<br />
</div>
))} ))}
</Box>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }

40
src/Infiltration/ui/Game.tsx
View File

@ -1,19 +1,17 @@
import { use } from "../../ui/Context"; import { Button, Container, Paper, Typography } from "@mui/material";
import React, { useState } from "react"; import React, { useState } from "react";
import Grid from "@mui/material/Grid"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import Button from "@mui/material/Button"; import { use } from "../../ui/Context";
import { Countdown } from "./Countdown";
import { BracketGame } from "./BracketGame";
import { SlashGame } from "./SlashGame";
import { BackwardGame } from "./BackwardGame"; import { BackwardGame } from "./BackwardGame";
import { BracketGame } from "./BracketGame";
import { BribeGame } from "./BribeGame"; import { BribeGame } from "./BribeGame";
import { CheatCodeGame } from "./CheatCodeGame"; import { CheatCodeGame } from "./CheatCodeGame";
import { Countdown } from "./Countdown";
import { Cyberpunk2077Game } from "./Cyberpunk2077Game"; import { Cyberpunk2077Game } from "./Cyberpunk2077Game";
import { MinesweeperGame } from "./MinesweeperGame"; import { MinesweeperGame } from "./MinesweeperGame";
import { WireCuttingGame } from "./WireCuttingGame"; import { SlashGame } from "./SlashGame";
import { Victory } from "./Victory"; import { Victory } from "./Victory";
import Typography from "@mui/material/Typography"; import { WireCuttingGame } from "./WireCuttingGame";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
interface IProps { interface IProps {
StartingDifficulty: number; StartingDifficulty: number;
@ -139,22 +137,20 @@ export function Game(props: IProps): React.ReactElement {
} }
return ( return (
<> <Container>
<Grid container spacing={3}> <Paper sx={{ p: 1, mb: 1, display: "grid", justifyItems: "center", gap: 1 }}>
<Grid item xs={3}> {stage !== Stage.Sell && (
<Button onClick={cancel}>Cancel</Button> <Button sx={{ width: "100%" }} onClick={cancel}>
</Grid> Cancel Infiltration
<Grid item xs={3}> </Button>
<Typography> )}
Level: {level}&nbsp;/&nbsp;{props.MaxLevel} <Typography variant="h5">
Level {level} / {props.MaxLevel}
</Typography> </Typography>
<Progress /> <Progress />
</Grid> </Paper>
<Grid item xs={12}>
{stageComponent} {stageComponent}
</Grid> </Container>
</Grid>
</>
); );
} }

18
src/Infiltration/ui/GameTimer.tsx
View File

@ -1,10 +1,9 @@
import LinearProgress from "@mui/material/LinearProgress"; import { LinearProgress, Paper } from "@mui/material";
import React, { useState, useEffect } from "react";
import withStyles from "@mui/styles/withStyles";
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import Grid from "@mui/material/Grid"; import withStyles from "@mui/styles/withStyles";
import { use } from "../../ui/Context"; import React, { useEffect, useState } from "react";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { use } from "../../ui/Context";
const TimerProgress = withStyles((theme: Theme) => ({ const TimerProgress = withStyles((theme: Theme) => ({
root: { root: {
@ -19,6 +18,7 @@ const TimerProgress = withStyles((theme: Theme) => ({
interface IProps { interface IProps {
millis: number; millis: number;
onExpire: () => void; onExpire: () => void;
noPaper?: boolean;
} }
export function GameTimer(props: IProps): React.ReactElement { 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 // https://stackoverflow.com/questions/55593367/disable-material-uis-linearprogress-animation
// TODO(hydroflame): there's like a bug where it triggers the end before the // TODO(hydroflame): there's like a bug where it triggers the end before the
// bar physically reaches the end // bar physically reaches the end
return ( return props.noPaper ? (
<Grid item xs={12}>
<TimerProgress variant="determinate" value={v} color="primary" /> <TimerProgress variant="determinate" value={v} color="primary" />
</Grid> ) : (
<Paper sx={{ p: 1, mb: 1 }}>
<TimerProgress variant="determinate" value={v} color="primary" />
</Paper>
); );
} }

26
src/Infiltration/ui/InfiltrationRoot.tsx
View File

@ -1,9 +1,9 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { Intro } from "./Intro";
import { Game } from "./Game";
import { Location } from "../../Locations/Location"; import { Location } from "../../Locations/Location";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { calculateDifficulty, calculateReward } from "../formulas/game"; import { calculateDifficulty, calculateReward } from "../formulas/game";
import { Game } from "./Game";
import { Intro } from "./Intro";
interface IProps { interface IProps {
location: Location; location: Location;
} }
@ -22,8 +22,16 @@ export function InfiltrationRoot(props: IProps): React.ReactElement {
router.toCity(); router.toCity();
} }
if (!start) {
return ( return (
<div style={{ display: "flex", alignItems: "center", height: "calc(100vh - 16px)" }}>
{start ? (
<Game
StartingDifficulty={startingSecurityLevel}
Difficulty={difficulty}
Reward={reward}
MaxLevel={props.location.infiltrationData.maxClearanceLevel}
/>
) : (
<Intro <Intro
Location={props.location} Location={props.location}
Difficulty={difficulty} Difficulty={difficulty}
@ -31,15 +39,7 @@ export function InfiltrationRoot(props: IProps): React.ReactElement {
start={() => setStart(true)} start={() => setStart(true)}
cancel={cancel} cancel={cancel}
/> />
); )}
} </div>
return (
<Game
StartingDifficulty={startingSecurityLevel}
Difficulty={difficulty}
Reward={reward}
MaxLevel={props.location.infiltrationData.maxClearanceLevel}
/>
); );
} }

117
src/Infiltration/ui/Intro.tsx
View File

@ -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 React from "react";
import { Location } from "../../Locations/Location"; import { Location } from "../../Locations/Location";
import Grid from "@mui/material/Grid"; import { Settings } from "../../Settings/Settings";
import Typography from "@mui/material/Typography";
import Button from "@mui/material/Button";
import { numeralWrapper } from "../../ui/numeralFormat"; import { numeralWrapper } from "../../ui/numeralFormat";
interface IProps { interface IProps {
@ -41,9 +41,9 @@ function coloredArrow(difficulty: number): JSX.Element {
} else { } else {
return ( return (
<> <>
{arrowPart("white", difficulty * 13)} {arrowPart(Settings.theme.primary, difficulty * 13)}
{arrowPart("orange", (difficulty - 1) * 13)} {arrowPart(Settings.theme.warning, (difficulty - 1) * 13)}
{arrowPart("red", (difficulty - 2) * 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 { export function Intro(props: IProps): React.ReactElement {
return ( return (
<> <Container sx={{ alignItems: "center" }}>
<Grid container spacing={3}> <Paper sx={{ p: 1, mb: 1, display: "grid", justifyItems: "center" }}>
<Grid item xs={10}> <Typography variant="h4">
<Typography variant="h4">Infiltrating {props.Location.name}</Typography> Infiltrating <b>{props.Location.name}</b>
</Grid>
<Grid item xs={10}>
<Typography variant="h5" color="primary">
Maximum level: {props.MaxLevel}
</Typography> </Typography>
</Grid> <Typography variant="h6">
<Grid item xs={10}> <b>Maximum Level: </b>
<Typography variant="h5" color="primary"> {props.MaxLevel}
Difficulty: {numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100
</Typography> </Typography>
</Grid> <Typography
variant="h6"
sx={{
color:
props.Difficulty > 2
? Settings.theme.error
: props.Difficulty > 1
? Settings.theme.warning
: Settings.theme.primary,
display: "flex",
alignItems: "center",
}}
>
<b>Difficulty:&nbsp;</b>
{numeralWrapper.format(props.Difficulty * 33.3333, "0")} / 100
{props.Difficulty > 1.5 && ( {props.Difficulty > 1.5 && (
<Grid item xs={10}> <Tooltip
<Typography variant="h5" color="primary"> title={
Warning: This location is too heavily guarded for your current stats, try training or finding an easier <Typography color="error">
location. This location is too heavily guarded for your current stats. It is recommended that you try training,
or finding an easier location.
</Typography> </Typography>
</Grid> }
>
<Report sx={{ ml: 1 }} />
</Tooltip>
)} )}
</Typography>
<Grid item xs={10}>
<Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>[{coloredArrow(props.Difficulty)}]</Typography> <Typography sx={{ lineHeight: "1em", whiteSpace: "pre" }}>[{coloredArrow(props.Difficulty)}]</Typography>
<Typography <Typography
sx={{ lineHeight: "1em", whiteSpace: "pre" }} sx={{ lineHeight: "1em", whiteSpace: "pre" }}
>{` ^ ^ ^ ^`}</Typography> >{`▲ ▲ ▲ ▲`}</Typography>
<Typography <Typography
sx={{ lineHeight: "1em", whiteSpace: "pre" }} sx={{ lineHeight: "1em", whiteSpace: "pre" }}
>{` Trivial Normal Hard Impossible`}</Typography> >{` Trivial Normal Hard Impossible`}</Typography>
</Grid> </Paper>
<Grid item xs={10}>
<Typography> <Paper sx={{ p: 1, display: "grid", justifyItems: "center" }}>
Infiltration is a series of short minigames that get progressively harder. You take damage for failing them. <Typography sx={{ width: "75%", textAlign: "center" }}>
Reaching the maximum level rewards you with intel you can trade for money or reputation. <b>Infiltration</b> 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.
<br />
<br />
<b>Gameplay:</b>
</Typography> </Typography>
<br /> <ul>
<Typography> <Typography>
The minigames you play are randomly selected. It might take you few tries to get used to them. <li>
The minigames you play are randomly selected.
<br />
It might take you a few tries to get used to them.
</li>
<li>No game requires use of the mouse.</li>
<li>
<b>Spacebar</b> is the default action/confirm button.
</li>
<li>
The <b>arrow keys</b> and <b>WASD</b> can be used interchangeably.
</li>
<li>Sometimes the rest of the keyboard is used.</li>
</Typography> </Typography>
<br /> </ul>
<Typography>No game require use of the mouse.</Typography>
<br /> <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", width: "100%" }}>
<Typography>Spacebar is the default action/confirm button.</Typography>
<br />
<Typography>Everything that uses arrow can also use WASD</Typography>
<br />
<Typography>Sometimes the rest of the keyboard is used.</Typography>
</Grid>
<Grid item xs={3}>
<Button onClick={props.start}>Start</Button> <Button onClick={props.start}>Start</Button>
</Grid>
<Grid item xs={3}>
<Button onClick={props.cancel}>Cancel</Button> <Button onClick={props.cancel}>Cancel</Button>
</Grid> </Box>
</Grid> </Paper>
</> </Container>
); );
} }

107
src/Infiltration/ui/MinesweeperGame.tsx
View File

@ -1,14 +1,16 @@
import React, { useState, useEffect } from "react"; import { Close, Flag, Report } from "@mui/icons-material";
import Grid from "@mui/material/Grid"; import { Box, Paper, Typography } from "@mui/material";
import { IMinigameProps } from "./IMinigameProps"; import { uniqueId } from "lodash";
import { KeyHandler } from "./KeyHandler"; import React, { useEffect, useState } from "react";
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 { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -81,32 +83,77 @@ export function MinesweeperGame(props: IMinigameProps): React.ReactElement {
return () => clearInterval(id); return () => clearInterval(id);
}, []); }, []);
return ( const flatGrid: { flagged?: boolean; current?: boolean; marked?: boolean }[] = [];
<Grid container spacing={3}>
<GameTimer millis={timer} onExpire={props.onFailure} /> minefield.map((line, y) =>
<Grid item xs={12}> line.map((cell, x) => {
<Typography variant="h4">{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</Typography>
{minefield.map((line, y) => (
<div key={y}>
<Typography>
{line.map((cell, x) => {
if (memoryPhase) { if (memoryPhase) {
if (minefield[y][x]) return <span key={x}>[?]&nbsp;</span>; flatGrid.push({ flagged: Boolean(minefield[y][x]) });
return <span key={x}>[&nbsp;]&nbsp;</span>; 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 { } else {
if (x == pos[0] && y == pos[1]) return <span key={x}>[X]&nbsp;</span>; flatGrid.push({});
if (answer[y][x]) return <span key={x}>[.]&nbsp;</span>;
if (hasAugment && minefield[y][x]) return <span key={x}>[?]&nbsp;</span>;
return <span key={x}>[&nbsp;]&nbsp;</span>;
} }
})} }),
);
return (
<>
<GameTimer millis={timer} onExpire={props.onFailure} />
<Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
<Typography variant="h4">{memoryPhase ? "Remember all the mines!" : "Mark all the mines!"}</Typography>
<Box
sx={{
display: "grid",
gridTemplateColumns: `repeat(${Math.round(difficulty.width)}, 1fr)`,
gridTemplateRows: `repeat(${Math.round(difficulty.height)}, 1fr)`,
gap: 1,
}}
>
{flatGrid.map((item) => {
let color: string;
let icon: React.ReactElement;
if (item.marked) {
color = Settings.theme.warning;
icon = <Flag />;
} else if (item.current) {
color = Settings.theme.infolight;
icon = <Close />;
} else if (item.flagged) {
color = Settings.theme.error;
icon = <Report />;
} else {
color = Settings.theme.primary;
icon = <></>;
}
return (
<Typography
key={`${item}${uniqueId()}`}
sx={{
color: color,
border: `2px solid ${item.current ? Settings.theme.infolight : Settings.theme.primary}`,
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{icon}
</Typography> </Typography>
<br /> );
</div> })}
))} </Box>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }

37
src/Infiltration/ui/SlashGame.tsx
View File

@ -1,13 +1,12 @@
import React, { useState, useEffect } from "react"; import { Box, Paper, Typography } from "@mui/material";
import Grid from "@mui/material/Grid"; 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 { IMinigameProps } from "./IMinigameProps";
import { KeyHandler } from "./KeyHandler"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -59,23 +58,25 @@ export function SlashGame(props: IMinigameProps): React.ReactElement {
}, []); }, []);
return ( return (
<Grid container spacing={3}>
<GameTimer millis={5000} onExpire={props.onFailure} />
<Grid item xs={12}>
<Typography variant="h4">Slash when his guard is down!</Typography>
{hasAugment ? (
<> <>
<Typography variant="h4">Guard will drop in...</Typography> <GameTimer millis={5000} onExpire={props.onFailure} />
<GameTimer millis={timeUntilAttacking} onExpire={props.onFailure} /> <Paper sx={{ display: "grid", justifyItems: "center" }}>
</> <Typography variant="h4">Slash when his guard is down!</Typography>
{hasAugment ? (
<Box sx={{ my: 1 }}>
<Typography variant="h5">Guard will drop in...</Typography>
<GameTimer millis={timeUntilAttacking} onExpire={() => null} noPaper />
</Box>
) : ( ) : (
<></> <></>
)} )}
{phase === 0 && <Typography variant="h4">Guarding ...</Typography>} {phase === 0 && <Typography variant="h4">Guarding ...</Typography>}
{phase === 1 && <Typography variant="h4">Preparing?</Typography>} {phase === 1 && <Typography variant="h4">Preparing?</Typography>}
{phase === 2 && <Typography variant="h4">ATTACKING!</Typography>} {phase === 2 && <Typography variant="h4">ATTACKING!</Typography>}
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }

42
src/Infiltration/ui/Victory.tsx
View File

@ -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 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 { Money } from "../../ui/React/Money";
import { Reputation } from "../../ui/React/Reputation"; 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 { formatNumber } from "../../utils/StringHelperFunctions";
import { import {
calculateInfiltratorsRepReward, calculateInfiltratorsRepReward,
calculateSellInformationCashReward, calculateSellInformationCashReward,
calculateTradeInformationRepReward, calculateTradeInformationRepReward,
} from "../formulas/victory"; } from "../formulas/victory";
import { inviteToFaction } from "../../Faction/FactionHelpers";
interface IProps { interface IProps {
StartingDifficulty: number; StartingDifficulty: number;
@ -66,13 +62,9 @@ export function Victory(props: IProps): React.ReactElement {
} }
return ( return (
<> <Paper sx={{ p: 1, textAlign: "center", display: "flex", alignItems: "center", flexDirection: "column" }}>
<Grid container spacing={3}>
<Grid item xs={10}>
<Typography variant="h4">Infiltration successful!</Typography> <Typography variant="h4">Infiltration successful!</Typography>
</Grid> <Typography variant="h5" color="primary" width="75%">
<Grid item xs={10}>
<Typography variant="h5" color="primary">
You{" "} You{" "}
{isMemberOfInfiltrators ? ( {isMemberOfInfiltrators ? (
<> <>
@ -83,7 +75,9 @@ export function Victory(props: IProps): React.ReactElement {
)} )}
can trade the confidential information you found for money or reputation. can trade the confidential information you found for money or reputation.
</Typography> </Typography>
<Select value={faction} onChange={changeDropdown}> <Box sx={{ width: "fit-content" }}>
<Box sx={{ width: "100%" }}>
<Select value={faction} onChange={changeDropdown} sx={{ mr: 1 }}>
<MenuItem key={"none"} value={"none"}> <MenuItem key={"none"} value={"none"}>
{"none"} {"none"}
</MenuItem> </MenuItem>
@ -98,17 +92,15 @@ export function Victory(props: IProps): React.ReactElement {
<Button onClick={trade}> <Button onClick={trade}>
Trade for <Reputation reputation={repGain} /> reputation Trade for <Reputation reputation={repGain} /> reputation
</Button> </Button>
</Grid> </Box>
<Grid item xs={3}> <Button onClick={sell} sx={{ width: "100%" }}>
<Button onClick={sell}>
Sell for&nbsp; Sell for&nbsp;
<Money money={moneyGain} /> <Money money={moneyGain} />
</Button> </Button>
</Grid> </Box>
<Grid item xs={3}> <Button onClick={quitInfiltration} sx={{ width: "100%", mt: 1 }}>
<Button onClick={quitInfiltration}>Quit</Button> Quit
</Grid> </Button>
</Grid> </Paper>
</>
); );
} }

58
src/Infiltration/ui/WireCuttingGame.tsx
View File

@ -1,15 +1,14 @@
import { Box, Paper, Typography } from "@mui/material";
import React, { useEffect, useState } from "react"; 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 { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player"; import { Player } from "../../Player";
import { Settings } from "../../Settings/Settings"; 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 { interface Difficulty {
[key: string]: number; [key: string]: number;
@ -102,46 +101,53 @@ export function WireCuttingGame(props: IMinigameProps): React.ReactElement {
} }
return ( return (
<Grid container spacing={3}> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Grid item xs={12}> <Paper sx={{ display: "grid", justifyItems: "center", pb: 1 }}>
<Typography variant="h4">Cut the wires with the following properties! (keyboard 1 to 9)</Typography> <Typography variant="h4" sx={{ width: "75%", textAlign: "center" }}>
Cut the wires with the following properties! (keyboard 1 to 9)
</Typography>
{questions.map((question, i) => ( {questions.map((question, i) => (
<Typography key={i}>{question.toString()}</Typography> <Typography key={i}>{question.toString()}</Typography>
))} ))}
<Typography> <Box
sx={{
display: "grid",
gridTemplateColumns: `repeat(${wires.length}, 1fr)`,
columnGap: 3,
justifyItems: "center",
}}
>
{new Array(wires.length).fill(0).map((_, i) => { {new Array(wires.length).fill(0).map((_, i) => {
const isCorrectWire = checkWire(i + 1); const isCorrectWire = checkWire(i + 1);
const color = hasAugment && !isCorrectWire ? Settings.theme.disabled : Settings.theme.primary; const color = hasAugment && !isCorrectWire ? Settings.theme.disabled : Settings.theme.primary;
return ( return (
<span key={i} style={{ color: color }}> <Typography key={i} style={{ color: color }}>
&nbsp;{i + 1}&nbsp;&nbsp;&nbsp;&nbsp; {i + 1}
</span> </Typography>
); );
})} })}
</Typography>
{new Array(8).fill(0).map((_, i) => ( {new Array(8).fill(0).map((_, i) => (
<div key={i}> <React.Fragment key={i}>
<Typography>
{wires.map((wire, j) => { {wires.map((wire, j) => {
if ((i === 3 || i === 4) && cutWires[j]) { if ((i === 3 || i === 4) && cutWires[j]) {
return <span key={j}>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>; return <Typography key={j}></Typography>;
} }
const isCorrectWire = checkWire(j + 1); const isCorrectWire = checkWire(j + 1);
const wireColor = const wireColor =
hasAugment && !isCorrectWire ? Settings.theme.disabled : wire.colors[i % wire.colors.length]; hasAugment && !isCorrectWire ? Settings.theme.disabled : wire.colors[i % wire.colors.length];
return ( return (
<span key={j} style={{ color: wireColor }}> <Typography key={j} style={{ color: wireColor }}>
|{wire.tpe}|&nbsp;&nbsp;&nbsp; |{wire.tpe}|
</span> </Typography>
); );
})} })}
</Typography> </React.Fragment>
</div>
))} ))}
</Box>
<KeyHandler onKeyDown={press} onFailure={props.onFailure} /> <KeyHandler onKeyDown={press} onFailure={props.onFailure} />
</Grid> </Paper>
</Grid> </>
); );
} }