97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import useGameStore from "./GameState";
|
|
|
|
const presets = {
|
|
Easy: { width: 10, height: 10, mines: 20 },
|
|
Medium: { width: 16, height: 16, mines: 32 },
|
|
Expert: { width: 30, height: 16, mines: 99 },
|
|
"Max Mode": { width: 40, height: 40, mines: 350 },
|
|
} as const;
|
|
|
|
function Options() {
|
|
const game = useGameStore();
|
|
const [width, setWidth] = useState(16);
|
|
const [height, setHeight] = useState(16);
|
|
const [mines, setMines] = useState(32);
|
|
const [showOptions, setShowOptions] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const fixWidth = Math.min(40, width);
|
|
const fixHeight = Math.min(40, height);
|
|
setWidth(fixWidth);
|
|
setHeight(fixHeight);
|
|
}, [width, height]);
|
|
|
|
useEffect(() => {
|
|
if (!game.isTouched()) {
|
|
if (width <= 0 || height <= 0 || mines <= 0) {
|
|
return;
|
|
}
|
|
game.resetGame(width, height, mines);
|
|
}
|
|
}, [width, height, mines]);
|
|
|
|
return (
|
|
<div>
|
|
<button onClick={() => setShowOptions(!showOptions)}>
|
|
{showOptions ? "Hide" : "Show"} Options
|
|
</button>
|
|
{showOptions && (
|
|
<>
|
|
<p>
|
|
Presets:{" "}
|
|
{(Object.keys(presets) as Array<keyof typeof presets>).map(
|
|
(key) => (
|
|
<button
|
|
key={key}
|
|
onClick={() => {
|
|
const { width, height, mines } = presets[key];
|
|
setWidth(width);
|
|
setHeight(height);
|
|
setMines(mines);
|
|
}}
|
|
>
|
|
{key}
|
|
</button>
|
|
),
|
|
)}
|
|
</p>
|
|
<p>
|
|
Width:{" "}
|
|
<input
|
|
type="number"
|
|
value={width}
|
|
onChange={(e) => setWidth(Number(e.target.value))}
|
|
/>
|
|
</p>
|
|
<p>
|
|
Height:{" "}
|
|
<input
|
|
type="number"
|
|
value={height}
|
|
onChange={(e) => setHeight(Number(e.target.value))}
|
|
/>
|
|
</p>
|
|
<p>
|
|
Mines:{" "}
|
|
<input
|
|
type="number"
|
|
value={mines}
|
|
onChange={(e) => setMines(Number(e.target.value))}
|
|
/>
|
|
</p>
|
|
</>
|
|
)}
|
|
<button
|
|
onClick={() => {
|
|
game.resetGame(width, height, mines);
|
|
}}
|
|
>
|
|
Reset
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Options;
|