Fixed evaluation bar issue in checkmate positions

WilliamGiorno · May 22, 2024 · 833c032 · 833c032
1 parent 094cf3e
commit 833c032
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 46 deletions.
diff --git a/src/public/pages/report/scripts/board.ts b/src/public/pages/report/scripts/board.ts
@@ -254,7 +254,10 @@ function traverseMoves(moveCount: number) {
 
  let topLine = currentPosition?.topLines?.find(line => line.id == 1);
  lastEvaluation = topLine?.evaluation ?? { type: "cp", value: 0 }
- drawEvaluationBar(topLine?.evaluation ?? { type: "cp", value: 0 }, boardFlipped);
+
+ const movedPlayer = getMovedPlayer();
+
+ drawEvaluationBar(topLine?.evaluation ?? { type: "cp", value: 0 }, boardFlipped, movedPlayer);
 
  updateClassificationMessage(positions[currentMoveIndex - 1], currentPosition);
  updateEngineSuggestions(currentPosition.topLines ?? []);
@@ -293,6 +296,10 @@ function traverseMoves(moveCount: number) {
  }
 }
 
+function getMovedPlayer() {
+ return (currentMoveIndex % 2) === 0 ? "black" : "white";
+ }
+
 $("#back-start-move-button").on("click", () => {
  traverseMoves(-Infinity);
 });
@@ -338,7 +345,9 @@ $("#board").on("click", event => {
 $("#flip-board-button").on("click", () => {
  boardFlipped = !boardFlipped;
 
- drawEvaluationBar(lastEvaluation, boardFlipped);
+ const movedPlayer = getMovedPlayer();
+
+ drawEvaluationBar(lastEvaluation, boardFlipped, movedPlayer);
  drawBoard(reportResults?.positions[currentMoveIndex]?.fen ?? startingPositionFen); 
  updateBoardPlayers();
 });
@@ -349,5 +358,5 @@ $("#suggestion-arrows-setting").on("input", () => {
 
 Promise.all(pieceLoaders).then(() => {
  drawBoard(startingPositionFen);
- drawEvaluationBar(lastEvaluation, boardFlipped);
+ drawEvaluationBar(lastEvaluation, boardFlipped, "black");
 });
diff --git a/src/public/pages/report/scripts/evalbar.ts b/src/public/pages/report/scripts/evalbar.ts
@@ -1,70 +1,90 @@
-async function drawEvaluationBar(evaluation: Evaluation, boardFlipped: boolean) {
- const evaluationBar = document.querySelector("#evaluation-bar") as SVGElement;
- const whiteRect = document.querySelector("#white-rect") as SVGRectElement;
- const blackRect = document.querySelector("#black-rect") as SVGRectElement;
- const whiteEvalText = document.querySelector("#white-eval-text") as SVGTextElement;
- const blackEvalText = document.querySelector("#black-eval-text") as SVGTextElement;
+const evaluationBar = document.querySelector("#evaluation-bar") as SVGElement;
+const whiteRect = document.querySelector("#white-rect") as SVGRectElement;
+const blackRect = document.querySelector("#black-rect") as SVGRectElement;
+const whiteEvalText = document.querySelector("#white-eval-text") as SVGTextElement;
+const blackEvalText = document.querySelector("#black-eval-text") as SVGTextElement;
 
- const totalHeight = evaluationBar.clientHeight;
+const totalHeight = evaluationBar.clientHeight;
 
+function setEvalBarToWinner(winnerPlayer: "white" | "black") {
+ if (boardFlipped) {
+ if (winnerPlayer === "black") {
+ whiteRect.setAttribute("y", "0");
+ whiteRect.setAttribute("height", "730");
+ blackRect.setAttribute("height", "0");
+ } else {
+ whiteRect.setAttribute("y", "730");
+ whiteRect.setAttribute("height", "0");
+ blackRect.setAttribute("height", "730");
+ }
+ } else {
+ if (winnerPlayer === "black") {
+ whiteRect.setAttribute("y", "730");
+ whiteRect.setAttribute("height", "0");
+ blackRect.setAttribute("height", "730");
+ } else {
+ whiteRect.setAttribute("y", "0");
+ whiteRect.setAttribute("height", "730");
+ blackRect.setAttribute("height", "0");
+ }
+ }
+}
+
+function setEvalTextVisible(visiblePlayer: "white" | "black") {
+ if (visiblePlayer === "white") {
+ whiteEvalText.setAttribute("visibility", boardFlipped ? "hidden" : "visible");
+ blackEvalText.setAttribute("visibility", boardFlipped ? "visible" : "hidden");
+ whiteEvalText.setAttribute("fill", boardFlipped ? "#fff" : "#000");
+ blackEvalText.setAttribute("fill", boardFlipped ? "#000" : "#fff");
+ } else {
+ whiteEvalText.setAttribute("visibility", boardFlipped ? "visible" : "hidden");
+ blackEvalText.setAttribute("visibility", boardFlipped ? "hidden" : "visible");
+ whiteEvalText.setAttribute("fill", boardFlipped ? "#000" : "#fff");
+ blackEvalText.setAttribute("fill", boardFlipped ? "#fff" : "#000");
+ }
+}
+
+async function drawEvaluationBar(evaluation: Evaluation, boardFlipped: boolean, movedPlayer: "white" | "black") {
  const blackHeight = Math.max(Math.min(totalHeight / 2 - evaluation.value / 3, totalHeight), 0);
  const whiteHeight = Math.max(Math.min(totalHeight / 2 + evaluation.value / 3, totalHeight), 0);
 
  let evaluationText: string;
+ let isCheckmated: boolean = false;
  if (evaluation.type === "cp") {
  evaluationText = (Math.abs(evaluation.value) / 100).toFixed(1);
  whiteRect.setAttribute("y", boardFlipped ? whiteHeight.toString() : blackHeight.toString());
  whiteRect.setAttribute("height", boardFlipped ? blackHeight.toString() : whiteHeight.toString());
  blackRect.setAttribute("height", boardFlipped ? whiteHeight.toString() : blackHeight.toString());
  } else {
+ // When checkmate steps 
  evaluationText = "M" + Math.abs(evaluation.value).toString();
  if (evaluation.value === 0) {
- evaluationText = "1-0";
+ isCheckmated = true;
+ evaluationText = movedPlayer === "white" ? "1-0" : "0-1";
  }
- if (!boardFlipped) {
- if (evaluation.value >= 0) {
-
- whiteRect.setAttribute("y", "0");
- whiteRect.setAttribute("height", "730");
- blackRect.setAttribute("height", "0");
- } else {
 
- whiteRect.setAttribute("y", "730");
- whiteRect.setAttribute("height", "0");
- blackRect.setAttribute("height", "730");
-
- }
- } else {
- if (evaluation.value >= 0) {
- whiteRect.setAttribute("y", "730");
- whiteRect.setAttribute("height", "0");
- blackRect.setAttribute("height", "730");
-
- } else {
-
- whiteRect.setAttribute("y", "0");
- whiteRect.setAttribute("height", "730");
- blackRect.setAttribute("height", "0");
- }
+ // Set eval bar for winner
+ if (evaluation.value > 0) {
+ setEvalBarToWinner("white");
+ } else if (evaluation.value < 0) {
+ setEvalBarToWinner("black");
+ } else if (evaluation.value === 0) {
+ setEvalBarToWinner(movedPlayer);
  }
  }
  whiteEvalText.textContent = evaluationText;
  blackEvalText.textContent = evaluationText;
 
-
-
- if (evaluation.value >= 0) {
- whiteEvalText.setAttribute("visibility", boardFlipped ? "hidden" : "visible");
- blackEvalText.setAttribute("visibility", boardFlipped ? "visible" : "hidden");
- whiteEvalText.setAttribute("fill", boardFlipped ? "#fff" : "#000");
- blackEvalText.setAttribute("fill", boardFlipped ? "#000" : "#fff");
+ // Set eval text visibility
+ if (isCheckmated) {
+ setEvalTextVisible(movedPlayer);
+ } else if (evaluation.value >= 0) {
+ setEvalTextVisible("white");
  } else {
- whiteEvalText.setAttribute("visibility", boardFlipped ? "visible" : "hidden");
- blackEvalText.setAttribute("visibility", boardFlipped ? "hidden" : "visible");
- whiteEvalText.setAttribute("fill", boardFlipped ? "#000" : "#fff");
- blackEvalText.setAttribute("fill", boardFlipped ? "#fff" : "#000");
+ setEvalTextVisible("black");
  }
 
+ // Fill evalbar with isBoardFlipped
  if (boardFlipped) {
  whiteEvalText.setAttribute("fill", "#fff");
  blackEvalText.setAttribute("fill", "#000");