style : engine settings dialog

src/components/slider.tsx

@@ -24,7 +24,7 @@ export default function Slider({
     <Grid
       item
       container
-      xs={xs ?? 10}
+      xs={xs ?? 11}
       justifyContent="center"
       alignItems="center"
     >

src/hooks/useScreenSize.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+
+export const useScreenSize = () => {
+  const [screenSize, setScreenSize] = useState({
+    width: window?.innerWidth ?? 500,
+    height: window?.innerHeight ?? 500,
+  });
+
+  useEffect(() => {
+    if (window === undefined) return;
+
+    const handleResize = () => {
+      setScreenSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  return screenSize;
+};

src/pages/index.tsx

@@ -2,9 +2,7 @@ import { useChessActions } from "@/hooks/useChess";
 import Board from "@/sections/analysis/board";
 import ReviewPanelBody from "@/sections/analysis/reviewPanelBody";
 import ReviewPanelHeader from "@/sections/analysis/reviewPanelHeader";
-import AnalyzePanel from "@/sections/analysis/analyzePanel";
 import ReviewPanelToolBar from "@/sections/analysis/reviewPanelToolbar";
-import ArrowOptions from "@/sections/analysis/arrowOptions";
 import {
   boardAtom,
   boardOrientationAtom,
@@ -84,17 +82,11 @@ export default function GameReport() {
 
           <Divider sx={{ width: "90%" }} />
 
-          <AnalyzePanel />
-
-          <Divider sx={{ width: "90%" }} />
-
           <ReviewPanelBody />
 
           <Divider sx={{ width: "90%" }} />
 
           <ReviewPanelToolBar />
-
-          <ArrowOptions />
         </Grid>
       </Grid>
     </Grid>

src/sections/analysis/reviewPanelBody/index.tsx

@@ -72,7 +72,7 @@ export default function ReviewPanelBody() {
       )}
 
       <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <List>
+        <List sx={{ maxWidth: "95%" }}>
           {engineLines.map((line) => (
             <LineEvaluation key={line.multiPv} line={line} />
           ))}

src/sections/analysis/reviewPanelBody/lineEvaluation.tsx

@@ -36,7 +36,7 @@ export default function LineEvaluation({ line }: Props) {
         )}
       </Typography>
 
-      <Typography>
+      <Typography noWrap>
         {showSkeleton ? (
           <Skeleton width={"20em"} variant="rounded" animation="wave" />
         ) : (

src/sections/analysis/reviewPanelHeader/analyzeButton.tsx

@@ -1,22 +1,20 @@
 import { Icon } from "@iconify/react";
-import { Grid } from "@mui/material";
 import { useState } from "react";
 import {
   engineDepthAtom,
   engineMultiPvAtom,
   gameAtom,
   gameEvalAtom,
-} from "./states";
+} from "../states";
 import { useAtomValue, useSetAtom } from "jotai";
 import { getFens } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { LoadingButton } from "@mui/lab";
-import Slider from "@/components/slider";
 import { useEngine } from "@/hooks/useEngine";
 import { EngineName } from "@/types/enums";
 import { logAnalyticsEvent } from "@/lib/firebase";
 
-export default function AnalyzePanel() {
+export default function AnalyzeButton() {
   const engine = useEngine(EngineName.Stockfish16);
   const [evaluationInProgress, setEvaluationInProgress] = useState(false);
   const engineDepth = useAtomValue(engineDepthAtom);
@@ -58,52 +56,25 @@ export default function AnalyzePanel() {
   };
 
   return (
-    <Grid
+    <LoadingButton
-      item
+      variant="contained"
-      container
+      size="large"
-      xs={12}
+      startIcon={
-      justifyContent="center"
+        !evaluationInProgress && (
-      alignItems="center"
+          <Icon icon="streamline:magnifying-glass-solid" />
-      rowGap={3}
+        )
+      }
+      onClick={handleAnalyze}
+      disabled={!readyToAnalyse}
+      loading={evaluationInProgress}
+      loadingPosition={evaluationInProgress ? "end" : undefined}
+      endIcon={
+        evaluationInProgress && (
+          <Icon icon="streamline:magnifying-glass-solid" />
+        )
+      }
     >
-      <Slider
+      {evaluationInProgress ? "Analyzing..." : "Analyze"}
-        label="Maximum depth"
+    </LoadingButton>
-        atom={engineDepthAtom}
-        min={10}
-        max={30}
-        marksFilter={2}
-      />
-
-      <Slider
-        label="Number of lines"
-        atom={engineMultiPvAtom}
-        min={1}
-        max={6}
-        xs={6}
-      />
-
-      <Grid item container xs={12} justifyContent="center" alignItems="center">
-        <LoadingButton
-          variant="contained"
-          size="large"
-          startIcon={
-            !evaluationInProgress && (
-              <Icon icon="streamline:magnifying-glass-solid" />
-            )
-          }
-          onClick={handleAnalyze}
-          disabled={!readyToAnalyse}
-          loading={evaluationInProgress}
-          loadingPosition={evaluationInProgress ? "end" : undefined}
-          endIcon={
-            evaluationInProgress && (
-              <Icon icon="streamline:magnifying-glass-solid" />
-            )
-          }
-        >
-          {evaluationInProgress ? "Analyzing..." : "Analyze"}
-        </LoadingButton>
-      </Grid>
-    </Grid>
   );
 }

src/sections/analysis/reviewPanelHeader/index.tsx

@@ -2,6 +2,8 @@ import { Icon } from "@iconify/react";
 import { Grid, Typography } from "@mui/material";
 import GamePanel from "./gamePanel";
 import LoadGame from "./loadGame";
+import AnalyzeButton from "./analyzeButton";
+import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 
 export default function ReviewPanelHeader() {
   return (
@@ -37,6 +39,8 @@ export default function ReviewPanelHeader() {
       >
         <GamePanel />
         <LoadGame />
+        <AnalyzeButton />
+        <EngineSettingsButton />
       </Grid>
     </Grid>
   );

src/sections/engineSettings/arrowOptions.tsx

@@ -1,13 +1,11 @@
 import { Checkbox, FormControlLabel, Grid } from "@mui/material";
-import { useAtom, useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import {
-  gameEvalAtom,
   showBestMoveArrowAtom,
   showPlayerMoveArrowAtom,
-} from "./states";
+} from "../analysis/states";
 
 export default function ArrowOptions() {
-  const gameEval = useAtomValue(gameEvalAtom);
   const [showBestMove, setShowBestMove] = useAtom(showBestMoveArrowAtom);
   const [showPlayerMove, setShowPlayerMove] = useAtom(showPlayerMoveArrowAtom);
 
@@ -25,7 +23,6 @@ export default function ArrowOptions() {
           <Checkbox
             checked={showBestMove}
             onChange={(_, checked) => setShowBestMove(checked)}
-            disabled={!gameEval}
           />
         }
         label="Show best move green arrow"

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",
+};