feat : eval bar value on win percentage

src/lib/chess.ts

@@ -1,6 +1,7 @@
-import { EvaluateGameParams, LineEval } from "@/types/eval";
+import { EvaluateGameParams, PositionEval } from "@/types/eval";
 import { Game } from "@/types/game";
 import { Chess } from "chess.js";
+import { getPositionWinPercentage } from "./engine/helpers/winPercentage";
 
 export const getEvaluateGameParams = (game: Chess): EvaluateGameParams => {
   const history = game.history({ verbose: true });
@@ -89,31 +90,26 @@ export const moveLineUciToSan = (
 };
 
 export const getEvaluationBarValue = (
-  bestLine: LineEval,
-  whiteToPlay: boolean
+  position: PositionEval
 ): { whiteBarPercentage: number; label: string } => {
-  if (bestLine.mate) {
-    return {
-      whiteBarPercentage: whiteToPlay && bestLine.mate > 0 ? 100 : 0,
-      label: `M${Math.abs(bestLine.mate)}`,
-    };
-  }
+  const whiteBarPercentage = getPositionWinPercentage(position);
+  const bestLine = position.lines[0];
 
-  if (!bestLine.cp) {
-    return { whiteBarPercentage: 50, label: "0.0" };
+  if (bestLine.mate) {
+    return { label: `M${Math.abs(bestLine.mate)}`, whiteBarPercentage };
   }
 
   const cp = bestLine.cp;
-  const whiteBarPercentage = Math.min(50 + cp / 20, 98);
+  if (!cp) return { whiteBarPercentage, label: "0.0" };
 
   const pEval = Math.abs(cp) / 100;
-  const label = pEval.toFixed(1);
+  let label = pEval.toFixed(1);
 
   if (label.toString().length > 3) {
-    return { whiteBarPercentage, label: pEval.toFixed(0) };
+    label = pEval.toFixed(0);
   }
 
-  return { whiteBarPercentage, label: pEval.toFixed(1) };
+  return { whiteBarPercentage, label };
 };
 
 export const getWhoIsCheckmated = (fen: string): "w" | "b" | null => {

src/lib/engine/helpers/moveClassification.ts

@@ -4,32 +4,32 @@ import { MoveClassification } from "@/types/enums";
 import { openings } from "@/data/openings";
 
 export const getMovesClassification = (
-  rawMoves: PositionEval[],
+  rawPositions: PositionEval[],
   uciMoves: string[],
   fens: string[]
 ): PositionEval[] => {
-  const positionsWinPercentage = rawMoves.map(getPositionWinPercentage);
+  const positionsWinPercentage = rawPositions.map(getPositionWinPercentage);
   let currentOpening: string | undefined = undefined;
 
-  const moves = rawMoves.map((rawMove, index) => {
-    if (index === 0) return rawMove;
+  const positions = rawPositions.map((rawPosition, index) => {
+    if (index === 0) return rawPosition;
 
     const currentFen = fens[index].split(" ")[0];
     const opening = openings.find((opening) => opening.fen === currentFen);
     if (opening) {
       currentOpening = opening.name;
       return {
-        ...rawMove,
+        ...rawPosition,
         opening: opening.name,
         moveClassification: MoveClassification.Book,
       };
     }
 
     const uciMove = uciMoves[index - 1];
-    const bestMove = rawMoves[index - 1].bestMove;
+    const bestMove = rawPositions[index - 1].bestMove;
     if (uciMove === bestMove) {
       return {
-        ...rawMove,
+        ...rawPosition,
         opening: currentOpening,
         moveClassification: MoveClassification.Best,
       };
@@ -46,13 +46,13 @@ export const getMovesClassification = (
     );
 
     return {
-      ...rawMove,
+      ...rawPosition,
       opening: currentOpening,
       moveClassification,
     };
   });
 
-  return moves;
+  return positions;
 };
 
 const getMoveClassification = (

src/sections/analysis/board/evaluationBar.tsx

@@ -25,9 +25,9 @@ export default function EvaluationBar({ height }: Props) {
 
   useEffect(() => {
     const bestLine = position?.eval?.lines[0];
-    if (!bestLine || bestLine.depth < 6) return;
+    if (!position.eval || !bestLine || bestLine.depth < 6) return;
 
-    const evalBar = getEvaluationBarValue(bestLine, isWhiteToPlay);
+    const evalBar = getEvaluationBarValue(position.eval);
     setEvalBar(evalBar);
   }, [position, isWhiteToPlay]);
 

src/sections/analysis/board/squareRenderer.tsx

@@ -40,8 +40,10 @@ const SquareRenderer = forwardRef<HTMLDivElement, CustomSquareProps>(
             height={40}
             style={{
               position: "absolute",
-              top: -15,
-              right: -15,
+              top: "max(-15px, -1.8vw)",
+              right: "max(-15px, -1.8vw)",
+              maxWidth: "3.6vw",
+              maxHeight: "3.6vw",
             }}
           />
         )}