135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import Slider from "@/components/slider";
|
|
import { EngineName } from "@/types/enums";
|
|
import {
|
|
MenuItem,
|
|
Select,
|
|
Button,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
FormControl,
|
|
InputLabel,
|
|
OutlinedInput,
|
|
DialogActions,
|
|
Typography,
|
|
Grid2 as Grid,
|
|
} from "@mui/material";
|
|
import {
|
|
engineNameAtom,
|
|
engineDepthAtom,
|
|
engineMultiPvAtom,
|
|
} from "../analysis/states";
|
|
import ArrowOptions from "./arrowOptions";
|
|
import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
|
|
import { useEffect } from "react";
|
|
import { isWasmSupported } from "@/lib/engine/shared";
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export default function EngineSettingsDialog({ open, onClose }: Props) {
|
|
const [depth, setDepth] = useAtomLocalStorage(
|
|
"engine-depth",
|
|
engineDepthAtom
|
|
);
|
|
const [multiPv, setMultiPv] = useAtomLocalStorage(
|
|
"engine-multi-pv",
|
|
engineMultiPvAtom
|
|
);
|
|
const [engineName, setEngineName] = useAtomLocalStorage(
|
|
"engine-name",
|
|
engineNameAtom
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!isWasmSupported()) {
|
|
setEngineName(EngineName.Stockfish11);
|
|
}
|
|
}, [setEngineName]);
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
|
<DialogTitle marginY={1} variant="h5">
|
|
Set engine parameters
|
|
</DialogTitle>
|
|
<DialogContent sx={{ paddingBottom: 0 }}>
|
|
<Typography>
|
|
Stockfish 16.1 Lite is the default engine. It offers the best balance
|
|
between speed and strength. Stockfish 16.1 is the strongest engine
|
|
available, note that it requires a one time download of 64MB.
|
|
</Typography>
|
|
<Grid
|
|
marginTop={4}
|
|
container
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
rowGap={3}
|
|
size={12}
|
|
>
|
|
<Grid container justifyContent="center" size={12}>
|
|
<FormControl variant="outlined">
|
|
<InputLabel id="dialog-select-label">Engine</InputLabel>
|
|
<Select
|
|
labelId="dialog-select-label"
|
|
id="dialog-select"
|
|
displayEmpty
|
|
input={<OutlinedInput label="Engine" />}
|
|
value={engineName}
|
|
onChange={(e) => setEngineName(e.target.value as EngineName)}
|
|
sx={{ width: 280, maxWidth: "100%" }}
|
|
>
|
|
{Object.values(EngineName).map((engine) => (
|
|
<MenuItem
|
|
key={engine}
|
|
value={engine}
|
|
disabled={
|
|
engine !== EngineName.Stockfish11 && !isWasmSupported()
|
|
}
|
|
>
|
|
{engineLabel[engine]}
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</Grid>
|
|
|
|
<Slider
|
|
label="Maximum depth"
|
|
value={depth}
|
|
setValue={setDepth}
|
|
min={10}
|
|
max={30}
|
|
marksFilter={2}
|
|
/>
|
|
|
|
<Slider
|
|
label="Number of lines"
|
|
value={multiPv}
|
|
setValue={setMultiPv}
|
|
min={2}
|
|
max={6}
|
|
size={6}
|
|
/>
|
|
|
|
<ArrowOptions />
|
|
</Grid>
|
|
</DialogContent>
|
|
<DialogActions sx={{ m: 2 }}>
|
|
<Button variant="contained" onClick={onClose}>
|
|
Done
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
const engineLabel: Record<EngineName, string> = {
|
|
[EngineName.Stockfish16_1]: "Stockfish 16.1 (64MB)",
|
|
[EngineName.Stockfish16_1Lite]: "Stockfish 16.1 Lite (6MB)",
|
|
[EngineName.Stockfish16NNUE]: "Stockfish 16 (40MB)",
|
|
[EngineName.Stockfish16]: "Stockfish 16 Lite (HCE)",
|
|
[EngineName.Stockfish11]: "Stockfish 11",
|
|
};
|