2021-09-05 01:09:30 +02:00
|
|
|
import React, { useState, useEffect } 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 { interpolate } from "./Difficulty";
|
|
|
|
|
|
|
|
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);
|
|
|
|
const [guarding, setGuarding] = useState(true);
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
function press(event: React.KeyboardEvent<HTMLElement>): void {
|
|
|
|
event.preventDefault();
|
|
|
|
if (event.keyCode !== 32) return;
|
|
|
|
if (guarding) {
|
|
|
|
props.onFailure();
|
|
|
|
} else {
|
|
|
|
props.onSuccess();
|
2021-06-13 17:05:40 +02:00
|
|
|
}
|
2021-09-05 01:09:30 +02:00
|
|
|
}
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
useEffect(() => {
|
|
|
|
let id2 = -1;
|
|
|
|
const id = window.setTimeout(() => {
|
|
|
|
setGuarding(false);
|
|
|
|
id2 = window.setTimeout(() => setGuarding(true), difficulty.window);
|
|
|
|
}, Math.random() * 3250 + 1500);
|
|
|
|
return () => {
|
|
|
|
clearInterval(id);
|
|
|
|
if (id2 !== -1) clearInterval(id2);
|
|
|
|
};
|
|
|
|
}, []);
|
2021-06-13 17:05:40 +02:00
|
|
|
|
2021-09-05 01:09:30 +02:00
|
|
|
return (
|
|
|
|
<Grid container spacing={3}>
|
|
|
|
<GameTimer millis={5000} onExpire={props.onFailure} />
|
|
|
|
<Grid item xs={12}>
|
|
|
|
<h1 className={"noselect"}>Slash when his guard is down!</h1>
|
2021-09-09 05:47:34 +02:00
|
|
|
<p style={{ fontSize: "5em" }}>{guarding ? "!Guarding!" : "!ATTACKING!"}</p>
|
2021-09-05 01:09:30 +02:00
|
|
|
<KeyHandler onKeyDown={press} onFailure={props.onFailure} />
|
|
|
|
</Grid>
|
|
|
|
</Grid>
|
|
|
|
);
|
|
|
|
}
|