feat: add blunder indicators to move list

CSSLab · Feb 16, 2025 · 22091e9 · 22091e9
1 parent 331057a
commit 22091e9
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 5 deletions.
diff --git a/src/components/Analysis/Highlight.tsx b/src/components/Analysis/Highlight.tsx
@@ -128,7 +128,7 @@ export const Highlight: React.FC<Props> = ({
               return (
                 <button
                   key={index}
-                  className="grid cursor-default grid-cols-2 gap-3 hover:underline"
+                  className="grid cursor-pointer grid-cols-2 gap-3 hover:underline"
                   style={{
                     color: colorSanMapping[move]?.color ?? '#fff',
                   }}
@@ -159,7 +159,7 @@ export const Highlight: React.FC<Props> = ({
                 return (
                   <button
                     key={index}
-                    className="grid cursor-default grid-cols-2 gap-3 hover:underline"
+                    className="grid cursor-pointer grid-cols-2 gap-3 hover:underline"
                     style={{
                       color: colorSanMapping[move]?.color ?? '#fff',
                     }}

diff --git a/src/components/Analysis/MoveMap.tsx b/src/components/Analysis/MoveMap.tsx
@@ -154,7 +154,7 @@ export const MoveMap: React.FC<Props> = ({
                         fontSize={12}
                         textAnchor="middle"
                         dx={x < 100 ? 22 : -15}
-                        dy={y < 100 ? 8 : -25}
+                        dy={8}
                         fill={colorSanMapping[value]?.color ?? '#fff'}
                       >
                         {colorSanMapping[value]?.san ?? value}

diff --git a/src/components/Board/AnalysisMovesContainer.tsx b/src/components/Board/AnalysisMovesContainer.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { useContext, useMemo, Fragment } from 'react'
+// import { BlunderIcon } from 'src/components/Icons/icons'
 import { AnalysisGameControllerContext, WindowSizeContext } from 'src/contexts'
 import { GameNode, AnalyzedGame, Termination, ClientBaseGame } from 'src/types'
 
@@ -10,6 +11,16 @@ interface Props {
   termination?: Termination
 }
 
+function BlunderIcon() {
+  return (
+    <div className="flex h-4 w-4 items-center justify-center rounded-full bg-red-500">
+      <span className="text-[0.6rem] font-bold tracking-wide text-white">
+        ??
+      </span>
+    </div>
+  )
+}
+
 export const AnalysisMovesContainer: React.FC<Props> = ({
   game,
   highlightIndices,
@@ -66,6 +77,7 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
               className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${currentNode === whiteNode && 'bg-human-4/20'} ${highlightSet.has(index * 2 + 1) && 'bg-human-3/80'}`}
             >
               {whiteNode?.san ?? whiteNode?.move}
+              {whiteNode?.blunder && <BlunderIcon />}
             </div>
             {whiteNode?.getVariations().length ? (
               <FirstVariation
@@ -83,6 +95,7 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
               className={`col-span-2 flex h-7 flex-1 cursor-pointer flex-row items-center justify-between px-2 text-sm hover:bg-background-2 ${currentNode === blackNode && 'bg-human-4/20'} ${highlightSet.has(index * 2 + 2) && 'bg-human-3/80'}`}
             >
               {blackNode?.san ?? blackNode?.move}
+              {blackNode?.blunder && <BlunderIcon />}
             </div>
             {blackNode?.getVariations().length ? (
               <FirstVariation

diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -259,9 +259,7 @@ export const useAnalysisController = (game: AnalyzedGame) => {
       }
     for (const [move, prob] of Object.entries(maia.policy)) {
       const loss = stockfish.cp_relative_vec[move]
-
       if (loss === undefined) continue
-
       const probability = prob * 100
 
       if (loss >= -50) {

diff --git a/src/types/base/tree.ts b/src/types/base/tree.ts
@@ -97,6 +97,7 @@ export class GameNode {
   private _analysis: NodeAnalysis
   private _turn: Color
   private _check: boolean
+  private _blunder: boolean
   private _moveNumber: number
 
   constructor(
@@ -116,6 +117,7 @@ export class GameNode {
     this._analysis = {}
     this._turn = this.parseTurn(fen)
     this._check = false
+    this._blunder = false
     this._moveNumber = this.parseMoveNumber(fen, this._turn)
   }
 
@@ -149,6 +151,9 @@ export class GameNode {
   get check(): boolean {
     return this._check
   }
+  get blunder(): boolean {
+    return this._blunder
+  }
   get moveNumber(): number {
     return this._moveNumber
   }
@@ -169,6 +174,14 @@ export class GameNode {
     if (mainline) {
       this._mainChild = child
     }
+    if (
+      this._analysis.stockfish &&
+      this._analysis.stockfish.depth >= 15 &&
+      move
+    ) {
+      const relative_eval = this._analysis.stockfish.cp_relative_vec[move]
+      child._blunder = relative_eval < -150
+    }
     return child
   }
 
@@ -178,6 +191,15 @@ export class GameNode {
 
   addStockfishAnalysis(stockfishEval: StockfishEvaluation): void {
     this._analysis.stockfish = stockfishEval
+
+    if (stockfishEval.depth >= 15) {
+      for (const child of this._children) {
+        if (child.move) {
+          const relative_eval = stockfishEval.cp_relative_vec[child.move]
+          child._blunder = relative_eval < -150
+        }
+      }
+    }
   }
 
   getMainLine(): GameNode[] {