feat : add engines choices

2024-04-14 04:07:18 +02:00
parent 56b267762e
commit 1546709452
20 changed files with 172 additions and 37 deletions
--- a/src/sections/analysis/reviewPanelBody/index.tsx
+++ b/src/sections/analysis/reviewPanelBody/index.tsx
@@ -1,11 +1,15 @@
 import { Icon } from "@iconify/react";
 import { Grid, List, Typography } from "@mui/material";
 import { useAtomValue } from "jotai";
-import { boardAtom, engineMultiPvAtom, gameAtom } from "../states";
+import {
+  boardAtom,
+  engineMultiPvAtom,
+  engineNameAtom,
+  gameAtom,
+} from "../states";
 import LineEvaluation from "./lineEvaluation";
 import { useCurrentPosition } from "../hooks/useCurrentPosition";
 import { LineEval } from "@/types/eval";
-import { EngineName } from "@/types/enums";
 import EngineSettingsButton from "@/sections/engineSettings/engineSettingsButton";
 import Accuracies from "./accuracies";
 import MoveInfo from "./moveInfo";
@@ -13,7 +17,8 @@ import Opening from "./opening";

 export default function ReviewPanelBody() {
  const linesNumber = useAtomValue(engineMultiPvAtom);
-  const position = useCurrentPosition(EngineName.Stockfish16);
+  const engineName = useAtomValue(engineNameAtom);
+  const position = useCurrentPosition(engineName);
  const game = useAtomValue(gameAtom);
  const board = useAtomValue(boardAtom);

--- a/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx
+++ b/src/sections/analysis/reviewPanelHeader/analyzeButton.tsx
@@ -2,6 +2,7 @@ import { Icon } from "@iconify/react";
 import {
  engineDepthAtom,
  engineMultiPvAtom,
+  engineNameAtom,
  evaluationProgressAtom,
  gameAtom,
  gameEvalAtom,
@@ -11,11 +12,11 @@ import { getEvaluateGameParams } from "@/lib/chess";
 import { useGameDatabase } from "@/hooks/useGameDatabase";
 import { LoadingButton } from "@mui/lab";
 import { useEngine } from "@/hooks/useEngine";
-import { EngineName } from "@/types/enums";
 import { logAnalyticsEvent } from "@/lib/firebase";

 export default function AnalyzeButton() {
-  const engine = useEngine(EngineName.Stockfish16);
+  const engineName = useAtomValue(engineNameAtom);
+  const engine = useEngine(engineName);
  const [evaluationProgress, setEvaluationProgress] = useAtom(
    evaluationProgressAtom
  );
@@ -49,7 +50,7 @@ export default function AnalyzeButton() {
    }

    logAnalyticsEvent("analyze_game", {
-      engine: EngineName.Stockfish16,
+      engine: engineName,
      depth: engineDepth,
      multiPv: engineMultiPv,
      nbPositions: params.fens.length,
--- a/src/sections/analysis/states.ts
+++ b/src/sections/analysis/states.ts
@@ -1,3 +1,4 @@
+import { EngineName } from "@/types/enums";
 import { CurrentPosition, GameEval } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
@@ -11,6 +12,7 @@ export const boardOrientationAtom = atom(true);
 export const showBestMoveArrowAtom = atom(true);
 export const showPlayerMoveIconAtom = atom(true);

+export const engineNameAtom = atom<EngineName>(EngineName.Stockfish16);
 export const engineDepthAtom = atom(16);
 export const engineMultiPvAtom = atom(3);
 export const evaluationProgressAtom = atom(0);
--- a/src/sections/engineSettings/engineSettingsDialog.tsx
+++ b/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",
 };
--- a/src/sections/play/board.tsx
+++ b/src/sections/play/board.tsx
@@ -5,11 +5,12 @@ import {
  playerColorAtom,
  isGameInProgressAtom,
  gameDataAtom,
+  enginePlayNameAtom,
 } from "./states";
 import { useChessActions } from "@/hooks/useChessActions";
 import { useEffect, useMemo } from "react";
 import { useScreenSize } from "@/hooks/useScreenSize";
-import { Color, EngineName } from "@/types/enums";
+import { Color } from "@/types/enums";
 import { useEngine } from "@/hooks/useEngine";
 import { uciMoveParams } from "@/lib/chess";
 import Board from "@/components/board";
@@ -17,7 +18,8 @@ import { useGameData } from "@/hooks/useGameData";

 export default function BoardContainer() {
  const screenSize = useScreenSize();
-  const engine = useEngine(EngineName.Stockfish16);
+  const engineName = useAtomValue(enginePlayNameAtom);
+  const engine = useEngine(engineName);
  const game = useAtomValue(gameAtom);
  const playerColor = useAtomValue(playerColorAtom);
  const { makeMove: makeGameMove } = useChessActions(gameAtom);
--- a/src/sections/play/gameSettings/gameSettingsDialog.tsx
+++ b/src/sections/play/gameSettings/gameSettingsDialog.tsx
@@ -24,10 +24,13 @@ import {
  playerColorAtom,
  isGameInProgressAtom,
  gameAtom,
+  enginePlayNameAtom,
 } from "../states";
 import { useChessActions } from "@/hooks/useChessActions";
 import { playGameStartSound } from "@/lib/sounds";
 import { logAnalyticsEvent } from "@/lib/firebase";
+import { Stockfish16 } from "@/lib/engine/stockfish16";
+import { useEffect } from "react";

 interface Props {
  open: boolean;
@@ -39,6 +42,10 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
    "engine-skill-level",
    engineSkillLevelAtom
  );
+  const [engineName, setEngineName] = useAtomLocalStorage(
+    "engine-play-name",
+    enginePlayNameAtom
+  );
  const [playerColor, setPlayerColor] = useAtom(playerColorAtom);
  const setIsGameInProgress = useSetAtom(isGameInProgressAtom);
  const { reset: resetGame } = useChessActions(gameAtom);
@@ -55,12 +62,18 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
    setIsGameInProgress(true);

    logAnalyticsEvent("play_game", {
-      engine: EngineName.Stockfish16,
+      engine: engineName,
      skillLevel,
      playerColor,
    });
  };

+  useEffect(() => {
+    if (!Stockfish16.isSupported()) {
+      setEngineName(EngineName.Stockfish11);
+    }
+  }, [setEngineName]);
+
  return (
    <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
      <DialogTitle marginY={1} variant="h5">
@@ -68,8 +81,10 @@ export default function GameSettingsDialog({ 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}
@@ -88,12 +103,20 @@ export default function GameSettingsDialog({ 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>
                ))}
@@ -145,5 +168,7 @@ export default function GameSettingsDialog({ 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",
 };
--- a/src/sections/play/states.ts
+++ b/src/sections/play/states.ts
@@ -1,4 +1,4 @@
-import { Color } from "@/types/enums";
+import { Color, EngineName } from "@/types/enums";
 import { CurrentPosition } from "@/types/eval";
 import { Chess } from "chess.js";
 import { atom } from "jotai";
@@ -6,5 +6,6 @@ import { atom } from "jotai";
 export const gameAtom = atom(new Chess());
 export const gameDataAtom = atom<CurrentPosition>({});
 export const playerColorAtom = atom<Color>(Color.White);
+export const enginePlayNameAtom = atom<EngineName>(EngineName.Stockfish16);
 export const engineSkillLevelAtom = atom<number>(1);
 export const isGameInProgressAtom = atom(false);