Elo play level selection (#17)

* feat(play): switch engine UI and logic from skill level to Elo rating (100–3200)

src/sections/play/board.tsx

@@ -1,6 +1,6 @@
 import { useAtomValue } from "jotai";
 import {
-  engineSkillLevelAtom,
+  engineEloAtom,
   gameAtom,
   playerColorAtom,
   isGameInProgressAtom,
@@ -24,7 +24,7 @@ export default function BoardContainer() {
   const { white, black } = usePlayersData(gameAtom);
   const playerColor = useAtomValue(playerColorAtom);
   const { makeMove: makeGameMove } = useChessActions(gameAtom);
-  const engineSkillLevel = useAtomValue(engineSkillLevelAtom);
+  const engineElo = useAtomValue(engineEloAtom);
   const isGameInProgress = useAtomValue(isGameInProgressAtom);
 
   const gameFen = game.fen();
@@ -40,10 +40,7 @@ export default function BoardContainer() {
       ) {
         return;
       }
-      const move = await engine.getEngineNextMove(
-        gameFen,
-        engineSkillLevel - 1
-      );
+      const move = await engine.getEngineNextMove(gameFen, engineElo);
       if (move) makeGameMove(uciMoveParams(move));
     };
     playEngineMove();

src/sections/play/gameSettings/gameSettingsDialog.tsx

@@ -20,7 +20,7 @@ import {
 import { useAtomLocalStorage } from "@/hooks/useAtomLocalStorage";
 import { useAtom, useSetAtom } from "jotai";
 import {
-  engineSkillLevelAtom,
+  engineEloAtom,
   playerColorAtom,
   isGameInProgressAtom,
   gameAtom,
@@ -40,9 +40,9 @@ interface Props {
 }
 
 export default function GameSettingsDialog({ open, onClose }: Props) {
-  const [skillLevel, setSkillLevel] = useAtomLocalStorage(
-    "engine-skill-level",
-    engineSkillLevelAtom
+  const [engineElo, setEngineElo] = useAtomLocalStorage(
+    "engine-elo",
+    engineEloAtom
   );
   const [engineName, setEngineName] = useAtomLocalStorage(
     "engine-play-name",
@@ -56,20 +56,16 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
     onClose();
     resetGame({
       whiteName:
-        playerColor === Color.White
-          ? "You"
-          : `${engineLabel[engineName].small} level ${skillLevel}`,
+        playerColor === Color.White ? "You" : engineLabel[engineName].small,
       blackName:
-        playerColor === Color.Black
-          ? "You"
-          : `${engineLabel[engineName].small} level ${skillLevel}`,
+        playerColor === Color.Black ? "You" : engineLabel[engineName].small,
     });
     playGameStartSound();
     setIsGameInProgress(true);
 
     logAnalyticsEvent("play_game", {
       engine: engineName,
-      skillLevel,
+      engineElo,
       playerColor,
     });
   };
@@ -130,12 +126,12 @@ export default function GameSettingsDialog({ open, onClose }: Props) {
           </Grid>
 
           <Slider
-            label="Bot skill level"
-            value={skillLevel}
-            setValue={setSkillLevel}
-            min={1}
-            max={21}
-            marksFilter={2}
+            label="Bot Elo rating"
+            value={engineElo}
+            setValue={setEngineElo}
+            min={100}
+            max={3200}
+            step={100}
           />
 
           <FormGroup>

src/sections/play/states.ts

@@ -8,4 +8,5 @@ export const gameDataAtom = atom<CurrentPosition>({});
 export const playerColorAtom = atom<Color>(Color.White);
 export const enginePlayNameAtom = atom<EngineName>(EngineName.Stockfish17Lite);
 export const engineSkillLevelAtom = atom<number>(1);
+export const engineEloAtom = atom<number>(1200);
 export const isGameInProgressAtom = atom(false);