2021-09-05 01:09:30 +02:00
|
|
|
import React, { useState, useEffect } from "react";
|
2021-06-13 17:05:40 +02:00
|
|
|
import { IMinigameProps } from "./IMinigameProps";
|
|
|
|
import { KeyHandler } from "./KeyHandler";
|
|
|
|
import { GameTimer } from "./GameTimer";
|
|
|
|
import { interpolate } from "./Difficulty";
|
2022-03-23 15:31:56 +01:00
|
|
|
import { KEY } from "../../utils/helpers/keyCodes";
|
|
|
|
import { Player } from "../../Player";
|
|
|
|
import { AugmentationNames } from "../../Augmentation/data/AugmentationNames";
|
2022-04-24 21:38:45 +02:00
|
|
|
import { Paper, Typography, Box } from "@mui/material";
|
2021-06-13 17:05:40 +02:00
|
|
|
|
|
|
|
interface Difficulty {
|
2021-09-05 01:09:30 +02:00
|
|
|
[key: string]: number;
|
|
|
|
window: 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: { window: 600 },
|
|
|
|
Normal: { window: 325 },
|
|
|
|
Hard: { window: 250 },
|
|
|
|
Impossible: { window: 150 },
|
|
|
|
};
|
2021-06-13 17:05:40 +02:00
|
|
|
|
|
|
|
export function SlashGame(props: IMinigameProps): React.ReactElement {
|
2021-09-05 01:09:30 +02:00
|
|
|
const difficulty: Difficulty = { window: 0 };
|
|
|
|
interpolate(difficulties, props.difficulty, difficulty);
|
2021-10-27 04:25:30 +02:00
|
|
|
const [phase, setPhase] = useState(0);
|
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();
|
2022-03-23 15:31:56 +01:00
|
|
|
if (event.key !== KEY.SPACE) return;
|
2021-10-27 04:25:30 +02:00
|
|
|
if (phase !== 2) {
|
2021-09-05 01:09:30 +02:00
|
|
|
props.onFailure();
|
|
|
|
} else {
|
|
|
|
props.onSuccess();
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2022-04-22 21:30:49 +02:00
|
|
|
const hasAugment = Player.hasAugmentation(AugmentationNames.MightOfAres, true);
|
2022-03-23 15:31:56 +01:00
|
|
|
const phaseZeroTime = Math.random() * 3250 + 1500 - (250 + difficulty.window);
|
|
|
|
const phaseOneTime = 250;
|
2022-04-25 01:02:49 +02:00
|
|
|
const timeUntilAttacking = (phaseZeroTime + phaseOneTime) * 0.8;
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
useEffect(() => {
|
2021-10-27 04:25:30 +02:00
|
|
|
let id = window.setTimeout(() => {
|
|
|
|
setPhase(1);
|
|
|
|
id = window.setTimeout(() => {
|
|
|
|
setPhase(2);
|
|
|
|
id = window.setTimeout(() => setPhase(0), difficulty.window);
|
2022-03-23 15:31:56 +01:00
|
|
|
}, phaseOneTime);
|
|
|
|
}, phaseZeroTime);
|
2021-09-05 01:09:30 +02:00
|
|
|
return () => {
|
|
|
|
clearInterval(id);
|
|
|
|
};
|
|
|
|
}, []);
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
2022-04-24 21:38:45 +02:00
|
|
|
<>
|
2021-09-05 01:09:30 +02:00
|
|
|
<GameTimer millis={5000} 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">Slash when his guard is down!</Typography>
|
2022-04-24 21:38:45 +02:00
|
|
|
|
2022-03-23 15:31:56 +01:00
|
|
|
{hasAugment ? (
|
2022-04-24 21:38:45 +02:00
|
|
|
<Box sx={{ my: 1 }}>
|
|
|
|
<Typography variant="h5">Guard will drop in...</Typography>
|
|
|
|
<GameTimer millis={timeUntilAttacking} onExpire={props.onFailure} noPaper />
|
|
|
|
</Box>
|
2022-03-23 15:31:56 +01:00
|
|
|
) : (
|
|
|
|
<></>
|
|
|
|
)}
|
2022-04-24 21:38:45 +02:00
|
|
|
|
2021-10-27 04:25:30 +02:00
|
|
|
{phase === 0 && <Typography variant="h4">Guarding ...</Typography>}
|
|
|
|
{phase === 1 && <Typography variant="h4">Preparing?</Typography>}
|
|
|
|
{phase === 2 && <Typography variant="h4">ATTACKING!</Typography>}
|
2021-09-05 01:09:30 +02:00
|
|
|
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
2022-04-24 21:38:45 +02:00
|
|
|
</Paper>
|
|
|
|
</>
|
2021-09-05 01:09:30 +02:00
|
|
|
);
|
|
|
|
}
|