2021-09-05 01:09:30 +02:00
|
|
|
import React, { useState } from "react";
|
2021-09-17 01:23:03 +02:00
|
|
|
import Grid from "@mui/material/Grid";
|
2021-06-13 17:05:40 +02:00
|
|
|
import { IMinigameProps } from "./IMinigameProps";
|
|
|
|
import { KeyHandler } from "./KeyHandler";
|
|
|
|
import { GameTimer } from "./GameTimer";
|
|
|
|
import { random } from "../utils";
|
|
|
|
import { interpolate } from "./Difficulty";
|
|
|
|
import { BlinkingCursor } from "./BlinkingCursor";
|
2022-03-23 15:31:56 +01:00
|
|
|
import { Player } from "../../Player";
|
|
|
|
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
|
|
|
import { KEY } from "../../utils/helpers/keyCodes";
|
2022-04-24 21:43:19 +02:00
|
|
|
import { Paper, Box, Typography } from "@mui/material";
|
2021-06-13 17:05:40 +02:00
|
|
|
|
|
|
|
interface Difficulty {
|
2021-09-05 01:09:30 +02:00
|
|
|
[key: string]: number;
|
|
|
|
timer: number;
|
|
|
|
min: number;
|
|
|
|
max: number;
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const difficulties: {
|
2021-09-05 01:09:30 +02:00
|
|
|
Trivial: Difficulty;
|
|
|
|
Normal: Difficulty;
|
|
|
|
Hard: Difficulty;
|
|
|
|
Impossible: Difficulty;
|
2021-06-13 17:05:40 +02:00
|
|
|
} = {
|
2021-09-05 01:09:30 +02:00
|
|
|
Trivial: { timer: 8000, min: 2, max: 3 },
|
|
|
|
Normal: { timer: 6000, min: 4, max: 5 },
|
|
|
|
Hard: { timer: 4000, min: 4, max: 6 },
|
|
|
|
Impossible: { timer: 2500, min: 7, max: 7 },
|
|
|
|
};
|
2021-06-13 17:05:40 +02:00
|
|
|
|
|
|
|
function generateLeftSide(difficulty: Difficulty): string {
|
2021-09-05 01:09:30 +02:00
|
|
|
let str = "";
|
2022-03-23 15:31:56 +01:00
|
|
|
const options = [KEY.OPEN_BRACKET, KEY.LESS_THAN, KEY.OPEN_PARENTHESIS, KEY.OPEN_BRACE];
|
2022-04-22 21:30:49 +02:00
|
|
|
if (Player.hasAugmentation(AugmentationNames.WisdomOfAthena, true)) {
|
2022-03-23 15:31:56 +01:00
|
|
|
options.splice(0, 1);
|
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
const length = random(difficulty.min, difficulty.max);
|
|
|
|
for (let i = 0; i < length; i++) {
|
2022-03-25 16:39:14 +01:00
|
|
|
str += options[Math.floor(Math.random() * options.length)];
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return str;
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
2021-09-25 04:15:19 +02:00
|
|
|
function getChar(event: KeyboardEvent): string {
|
2022-03-23 15:31:56 +01:00
|
|
|
if (event.key === KEY.CLOSE_PARENTHESIS) return KEY.CLOSE_PARENTHESIS;
|
|
|
|
if (event.key === KEY.CLOSE_BRACKET) return KEY.CLOSE_BRACKET;
|
|
|
|
if (event.key === KEY.CLOSE_BRACE) return KEY.CLOSE_BRACE;
|
|
|
|
if (event.key === KEY.GREATER_THAN) return KEY.GREATER_THAN;
|
2021-09-05 01:09:30 +02:00
|
|
|
return "";
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
function match(left: string, right: string): boolean {
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
2022-03-23 15:31:56 +01:00
|
|
|
(left === KEY.OPEN_BRACKET && right === KEY.CLOSE_BRACKET) ||
|
|
|
|
(left === KEY.LESS_THAN && right === KEY.GREATER_THAN) ||
|
|
|
|
(left === KEY.OPEN_PARENTHESIS && right === KEY.CLOSE_PARENTHESIS) ||
|
|
|
|
(left === KEY.OPEN_BRACE && right === KEY.CLOSE_BRACE)
|
2021-09-05 01:09:30 +02:00
|
|
|
);
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export function BracketGame(props: IMinigameProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
const difficulty: Difficulty = { timer: 0, min: 0, max: 0 };
|
|
|
|
interpolate(difficulties, props.difficulty, difficulty);
|
|
|
|
const timer = difficulty.timer;
|
|
|
|
const [right, setRight] = useState("");
|
|
|
|
const [left] = useState(generateLeftSide(difficulty));
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-25 04:15:19 +02:00
|
|
|
function press(this: Document, event: KeyboardEvent): void {
|
2021-09-05 01:09:30 +02:00
|
|
|
event.preventDefault();
|
|
|
|
const char = getChar(event);
|
|
|
|
if (!char) return;
|
|
|
|
if (!match(left[left.length - right.length - 1], char)) {
|
|
|
|
props.onFailure();
|
|
|
|
return;
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
if (left.length === right.length + 1) {
|
|
|
|
props.onSuccess();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
setRight(right + char);
|
|
|
|
}
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
2022-04-24 21:43:19 +02:00
|
|
|
<>
|
2021-09-05 01:09:30 +02:00
|
|
|
<GameTimer millis={timer} onExpire={props.onFailure} />
|
2022-04-24 21:43:19 +02:00
|
|
|
<Paper sx={{ display: "grid", justifyItems: "center" }}>
|
2021-10-01 19:08:37 +02:00
|
|
|
<Typography variant="h4">Close the brackets</Typography>
|
|
|
|
<Typography style={{ fontSize: "5em" }}>
|
2021-09-05 01:09:30 +02:00
|
|
|
{`${left}${right}`}
|
|
|
|
<BlinkingCursor />
|
2021-10-01 19:08:37 +02:00
|
|
|
</Typography>
|
2021-09-05 01:09:30 +02:00
|
|
|
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
2022-04-24 21:43:19 +02:00
|
|
|
</Paper>
|
|
|
|
</>
|
2021-09-05 01:09:30 +02:00
|
|
|
);
|
|
|
|
}
|