feat : add engines choices

src/sections/engineSettings/engineSettingsDialog.tsx

@@ -14,9 +14,15 @@ import {
   Typography,
   Grid,
 } from "@mui/material";
-import { engineDepthAtom, engineMultiPvAtom } from "../analysis/states";
+import {
+  engineNameAtom,
+  engineDepthAtom,
+  engineMultiPvAtom,
+} from "../analysis/states";
 import ArrowOptions from "./arrowOptions";
 import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
+import { Stockfish16 } from "@/lib/engine/stockfish16";
+import { useEffect } from "react";
 
 interface Props {
   open: boolean;
@@ -32,6 +38,16 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
     "engine-multi-pv",
     engineMultiPvAtom
   );
+  const [engineName, setEngineName] = useAtomLocalStorage(
+    "engine-name",
+    engineNameAtom
+  );
+
+  useEffect(() => {
+    if (!Stockfish16.isSupported()) {
+      setEngineName(EngineName.Stockfish11);
+    }
+  }, [setEngineName]);
 
   return (
     <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
@@ -40,8 +56,10 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
       </DialogTitle>
       <DialogContent sx={{ paddingBottom: 0 }}>
         <Typography>
-          Stockfish 16 is the only engine available now, more engine choices
-          will come soon !
+          Stockfish 16 Lite (HCE) is the default engine. It offers the best
+          balance between speed and strength. Stockfish 16 is the strongest
+          engine available, but please note that it requires a one time download
+          of 40MB.
         </Typography>
         <Grid
           marginTop={4}
@@ -60,12 +78,20 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
                 id="dialog-select"
                 displayEmpty
                 input={<OutlinedInput label="Engine" />}
-                value={EngineName.Stockfish16}
-                disabled={true}
-                sx={{ width: 200 }}
+                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}>
+                  <MenuItem
+                    key={engine}
+                    value={engine}
+                    disabled={
+                      engine.includes("stockfish_16")
+                        ? !Stockfish16.isSupported()
+                        : false
+                    }
+                  >
                     {engineLabel[engine]}
                   </MenuItem>
                 ))}
@@ -104,5 +130,7 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
 }
 
 const engineLabel: Record<EngineName, string> = {
-  [EngineName.Stockfish16]: "Stockfish 16",
+  [EngineName.Stockfish16]: "Stockfish 16 Lite (HCE)",
+  [EngineName.Stockfish16NNUE]: "Stockfish 16 (40MB download)",
+  [EngineName.Stockfish11]: "Stockfish 11",
 };