Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-11-10 09:43:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update grid matching game

Browse Source
This commit is contained in:
nickofolas 2022-04-29 17:01:38 -05:00
parent c3a3cca9ae
commit 1bcb0099f4
1 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Paper, Typography } from "@mui/material"; import { Paper, Typography, Box } from "@mui/material";
import React, { useState } from "react"; import React, { useState } from "react";
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames"; import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
import { Player } from "../../Player"; import { Player } from "../../Player";
@ -18,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;
@ -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"; const fontSize = "2em";
return ( return (
<> <>
<GameTimer millis={timer} onExpire={props.onFailure} /> <GameTimer millis={timer} onExpire={props.onFailure} />
<Paper sx={{ display: "grid", justifyItems: "center" }}> <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>
); );
@ -98,31 +119,27 @@ 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} />
</Paper> </Paper>
</> </>