style : engine settings dialog

src/sections/engineSettings/arrowOptions.tsx

@@ -0,0 +1,43 @@
+import { Checkbox, FormControlLabel, Grid } from "@mui/material";
+import { useAtom } from "jotai";
+import {
+  showBestMoveArrowAtom,
+  showPlayerMoveArrowAtom,
+} from "../analysis/states";
+
+export default function ArrowOptions() {
+  const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
+  const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
+
+  return (
+    <Grid
+      container
+      item
+      justifyContent="space-evenly"
+      alignItems="center"
+      xs={12}
+      gap={3}
+    >
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={showBestMove}
+            onChange={(_, checked) => setShowBestMove(checked)}
+          />
+        }
+        label="Show best move green arrow"
+        sx={{ marginX: 0 }}
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={showPlayerMove}
+            onChange={(_, checked) => setShowPlayerMove(checked)}
+          />
+        }
+        label="Show player move yellow arrow"
+        sx={{ marginX: 0 }}
+      />
+    </Grid>
+  );
+}

src/sections/engineSettings/engineSettingsButton.tsx

@@ -0,0 +1,20 @@
+import { Button } from "@mui/material";
+import { useState } from "react";
+import EngineSettingsDialog from "./engineSettingsDialog";
+
+export default function EngineSettingsButton() {
+  const [openDialog, setOpenDialog] = useState(false);
+
+  return (
+    <>
+      <Button variant="contained" onClick={() => setOpenDialog(true)}>
+        Engine Settings
+      </Button>
+
+      <EngineSettingsDialog
+        open={openDialog}
+        onClose={() => setOpenDialog(false)}
+      />
+    </>
+  );
+}

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -0,0 +1,95 @@
+import Slider from "@/components/slider";
+import { EngineName } from "@/types/enums";
+import {
+  MenuItem,
+  Select,
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  FormControl,
+  InputLabel,
+  OutlinedInput,
+  DialogActions,
+  Typography,
+  Grid,
+} from "@mui/material";
+import { engineDepthAtom, engineMultiPvAtom } from "../analysis/states";
+import ArrowOptions from "./arrowOptions";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+export default function EngineSettingsDialog({ open, onClose }: Props) {
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+      <DialogTitle marginY={1} variant="h5">
+        Set engine parameters
+      </DialogTitle>
+      <DialogContent>
+        <Typography>
+          Only Stockfish 16 is available now, more engine choices will come !
+        </Typography>
+        <Grid
+          marginTop={4}
+          item
+          container
+          justifyContent="center"
+          alignItems="center"
+          xs={12}
+          rowGap={3}
+        >
+          <Grid item container xs={12} justifyContent="center">
+            <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.Stockfish16}
+                disabled={true}
+                sx={{ width: 200 }}
+              >
+                {Object.values(EngineName).map((engine) => (
+                  <MenuItem key={engine} value={engine}>
+                    {engineLabel[engine]}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </Grid>
+
+          <Slider
+            label="Maximum depth"
+            atom={engineDepthAtom}
+            min={10}
+            max={30}
+            marksFilter={2}
+          />
+
+          <Slider
+            label="Number of lines"
+            atom={engineMultiPvAtom}
+            min={1}
+            max={6}
+            xs={6}
+          />
+
+          <ArrowOptions />
+        </Grid>
+      </DialogContent>
+      <DialogActions sx={{ m: 2 }}>
+        <Button variant="contained" onClick={onClose}>
+          Done
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+const engineLabel: Record<EngineName, string> = {
+  [EngineName.Stockfish16]: "Stockfish 16",
+};