mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2025-03-08 19:32:31 +01:00
Update grid matching game
This commit is contained in:
@ -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 (
|
||||
<>
|
||||
<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="h5" color={Settings.theme.primary}>
|
||||
Targets:{" "}
|
||||
{answers.map((a, i) => {
|
||||
if (i == currentAnswerIndex)
|
||||
return (
|
||||
<span key={`${i}`} style={{ fontSize: "1em", color: "blue" }}>
|
||||
<span key={`${i}`} style={{ fontSize: "1em", color: Settings.theme.infolight }}>
|
||||
{a}
|
||||
</span>
|
||||
);
|
||||
@ -98,31 +119,27 @@ export function Cyberpunk2077Game(props: IMinigameProps): React.ReactElement {
|
||||
})}
|
||||
</Typography>
|
||||
<br />
|
||||
{grid.map((line, y) => (
|
||||
<div key={y}>
|
||||
<Typography>
|
||||
{line.map((cell, x) => {
|
||||
const isCorrectAnswer = cell === answers[currentAnswerIndex];
|
||||
|
||||
if (x == pos[0] && y == pos[1]) {
|
||||
return (
|
||||
<span key={`${x}${y}`} style={{ fontSize: fontSize, color: "blue" }}>
|
||||
{cell}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
const optionColor = hasAugment && !isCorrectAnswer ? Settings.theme.disabled : Settings.theme.primary;
|
||||
return (
|
||||
<span key={`${x}${y}`} style={{ fontSize: fontSize, color: optionColor }}>
|
||||
{cell}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
<Box
|
||||
sx={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: `repeat(${Math.round(difficulty.width)}, 1fr)`,
|
||||
gap: 1,
|
||||
}}
|
||||
>
|
||||
{flatGrid.map((item) => (
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: fontSize,
|
||||
color: item.color,
|
||||
border: item.selected ? `2px solid ${Settings.theme.infolight}` : "unset",
|
||||
lineHeight: "unset",
|
||||
p: item.selected ? "2px" : "4px",
|
||||
}}
|
||||
>
|
||||
{item.content}
|
||||
</Typography>
|
||||
<br />
|
||||
</div>
|
||||
))}
|
||||
))}
|
||||
</Box>
|
||||
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
||||
</Paper>
|
||||
</>
|
||||
|
Reference in New Issue
Block a user