feat: top human move quality badges + show/hide badges setting

ashtonanderson · ashtonanderson · commit f82e2fae24ca · 2026-02-18T13:28:27.000-05:00
diff --git a/src/components/Analysis/BroadcastAnalysis.tsx b/src/components/Analysis/BroadcastAnalysis.tsx
@@ -45,6 +45,24 @@ export const BroadcastAnalysis: React.FC<Props> = ({
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
   >(null)
+  const destinationBadges = useMemo(() => {
+    if (
+      !analysisController.showTopMoveBadges ||
+      !analysisController.topHumanMoveBadge
+    ) {
+      return []
+    }
+
+    return [
+      {
+        square: analysisController.topHumanMoveBadge.square,
+        classification: analysisController.topHumanMoveBadge.classification,
+      },
+    ]
+  }, [
+    analysisController.showTopMoveBadges,
+    analysisController.topHumanMoveBadge,
+  ])
 
   useEffect(() => {
     setHoverArrow(null)
@@ -379,6 +397,7 @@ export const BroadcastAnalysis: React.FC<Props> = ({
                 onPlayerMakeMove={onPlayerMakeMove}
                 goToNode={analysisController.goToNode}
                 gameTree={game.tree}
+                destinationBadges={destinationBadges}
               />
               {promotionFromTo ? (
                 <PromotionOverlay
@@ -416,6 +435,8 @@ export const BroadcastAnalysis: React.FC<Props> = ({
           <ConfigurableScreens
             currentMaiaModel={analysisController.currentMaiaModel}
             setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            showTopMoveBadges={analysisController.showTopMoveBadges}
+            setShowTopMoveBadges={analysisController.setShowTopMoveBadges}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
             game={game}
@@ -479,6 +500,7 @@ export const BroadcastAnalysis: React.FC<Props> = ({
               onPlayerMakeMove={onPlayerMakeMove}
               goToNode={analysisController.goToNode}
               gameTree={game.tree}
+              destinationBadges={destinationBadges}
             />
             {promotionFromTo ? (
               <PromotionOverlay
@@ -518,6 +540,8 @@ export const BroadcastAnalysis: React.FC<Props> = ({
           <ConfigurableScreens
             currentMaiaModel={analysisController.currentMaiaModel}
             setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            showTopMoveBadges={analysisController.showTopMoveBadges}
+            setShowTopMoveBadges={analysisController.setShowTopMoveBadges}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
             game={game}
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
@@ -13,6 +13,8 @@ import {
 interface Props {
   currentMaiaModel: string
   setCurrentMaiaModel: (model: string) => void
+  showTopMoveBadges: boolean
+  setShowTopMoveBadges: (show: boolean) => void
   launchContinue: () => void
   MAIA_MODELS: string[]
   game: AnalyzedGame
@@ -44,6 +46,8 @@ interface Props {
 export const ConfigurableScreens: React.FC<Props> = ({
   currentMaiaModel,
   setCurrentMaiaModel,
+  showTopMoveBadges,
+  setShowTopMoveBadges,
   launchContinue,
   MAIA_MODELS,
   game,
@@ -154,6 +158,8 @@ export const ConfigurableScreens: React.FC<Props> = ({
           <ConfigureAnalysis
             currentMaiaModel={currentMaiaModel}
             setCurrentMaiaModel={setCurrentMaiaModel}
+            showTopMoveBadges={showTopMoveBadges}
+            setShowTopMoveBadges={setShowTopMoveBadges}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
             game={game}
diff --git a/src/components/Analysis/ConfigureAnalysis.tsx b/src/components/Analysis/ConfigureAnalysis.tsx
@@ -6,6 +6,8 @@ import { ContinueAgainstMaia } from 'src/components'
 interface Props {
   currentMaiaModel: string
   setCurrentMaiaModel: (model: string) => void
+  showTopMoveBadges: boolean
+  setShowTopMoveBadges: (show: boolean) => void
   launchContinue: () => void
   MAIA_MODELS: string[]
   game: AnalyzedGame
@@ -24,6 +26,8 @@ interface Props {
 export const ConfigureAnalysis: React.FC<Props> = ({
   currentMaiaModel,
   setCurrentMaiaModel,
+  showTopMoveBadges,
+  setShowTopMoveBadges,
   launchContinue,
   MAIA_MODELS,
   game,
@@ -59,6 +63,28 @@ export const ConfigureAnalysis: React.FC<Props> = ({
           </span>
         </div>
       </div>
+      <div className="mt-1 flex w-full items-center justify-between rounded border border-glass-border bg-glass px-2.5 py-2">
+        <div className="flex flex-col">
+          <span className="text-xs text-white/90">Show board badges</span>
+          <span className="text-[11px] text-white/60">
+            Show ? / ?? marker on top human move destination
+          </span>
+        </div>
+        <label
+          htmlFor="analysis-top-move-badges-toggle"
+          className="relative inline-flex cursor-pointer items-center"
+        >
+          <input
+            id="analysis-top-move-badges-toggle"
+            type="checkbox"
+            checked={showTopMoveBadges}
+            onChange={() => setShowTopMoveBadges(!showTopMoveBadges)}
+            className="peer sr-only"
+          />
+          <div className="peer h-5 w-9 rounded-full bg-white/10 after:absolute after:left-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-white/20 after:bg-white after:transition-all after:content-[''] peer-checked:bg-red-500/40 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-red-400"></div>
+          <span className="sr-only">Toggle top move board badges</span>
+        </label>
+      </div>
       {onAnalyzeEntireGame && (
         <button
           onClick={onAnalyzeEntireGame}
diff --git a/src/components/Analysis/StreamAnalysis.tsx b/src/components/Analysis/StreamAnalysis.tsx
@@ -48,6 +48,24 @@ export const StreamAnalysis: React.FC<Props> = ({
   const [promotionFromTo, setPromotionFromTo] = useState<
     [string, string] | null
   >(null)
+  const destinationBadges = useMemo(() => {
+    if (
+      !analysisController.showTopMoveBadges ||
+      !analysisController.topHumanMoveBadge
+    ) {
+      return []
+    }
+
+    return [
+      {
+        square: analysisController.topHumanMoveBadge.square,
+        classification: analysisController.topHumanMoveBadge.classification,
+      },
+    ]
+  }, [
+    analysisController.showTopMoveBadges,
+    analysisController.topHumanMoveBadge,
+  ])
 
   useEffect(() => {
     setHoverArrow(null)
@@ -381,6 +399,7 @@ export const StreamAnalysis: React.FC<Props> = ({
                 onPlayerMakeMove={onPlayerMakeMove}
                 goToNode={analysisController.goToNode}
                 gameTree={game.tree}
+                destinationBadges={destinationBadges}
               />
               {promotionFromTo ? (
                 <PromotionOverlay
@@ -428,6 +447,8 @@ export const StreamAnalysis: React.FC<Props> = ({
           <ConfigurableScreens
             currentMaiaModel={analysisController.currentMaiaModel}
             setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            showTopMoveBadges={analysisController.showTopMoveBadges}
+            setShowTopMoveBadges={analysisController.setShowTopMoveBadges}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
             game={game}
@@ -491,6 +512,7 @@ export const StreamAnalysis: React.FC<Props> = ({
               onPlayerMakeMove={onPlayerMakeMove}
               goToNode={analysisController.goToNode}
               gameTree={game.tree}
+              destinationBadges={destinationBadges}
             />
             {promotionFromTo ? (
               <PromotionOverlay
@@ -530,6 +552,8 @@ export const StreamAnalysis: React.FC<Props> = ({
           <ConfigurableScreens
             currentMaiaModel={analysisController.currentMaiaModel}
             setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
+            showTopMoveBadges={analysisController.showTopMoveBadges}
+            setShowTopMoveBadges={analysisController.setShowTopMoveBadges}
             launchContinue={launchContinue}
             MAIA_MODELS={MAIA_MODELS}
             game={game}
diff --git a/src/components/Board/GameBoard.tsx b/src/components/Board/GameBoard.tsx
@@ -5,9 +5,22 @@ import { defaults } from 'chessground/state'
 import type { Key } from 'chessground/types'
 import Chessground from '@react-chess/chessground'
 import { BaseGame, GameNode, Color } from 'src/types'
+import { MoveClassificationIcon } from 'src/components/Common/MoveIcons'
 import type { DrawBrushes, DrawShape } from 'chessground/draw'
 import { useCallback, useMemo, Dispatch, SetStateAction } from 'react'
 
+interface MoveClassification {
+  blunder: boolean
+  inaccuracy: boolean
+  excellent: boolean
+  bestMove: boolean
+}
+
+interface DestinationBadge {
+  square: string
+  classification: MoveClassification
+}
+
 interface Props {
   game?: BaseGame
   currentNode: GameNode
@@ -20,6 +33,25 @@ interface Props {
   brushes?: DrawBrushes
   goToNode?: (node: GameNode) => void
   gameTree?: any
+  destinationBadges?: DestinationBadge[]
+}
+
+const getBoardSquarePosition = (square: string, orientation: Color) => {
+  if (!/^[a-h][1-8]$/.test(square)) {
+    return null
+  }
+
+  const file = square.charCodeAt(0) - 'a'.charCodeAt(0)
+  const rank = parseInt(square[1], 10)
+
+  if (Number.isNaN(rank)) {
+    return null
+  }
+
+  return {
+    left: orientation === 'white' ? file : 7 - file,
+    top: orientation === 'white' ? 8 - rank : rank - 1,
+  }
 }
 
 export const GameBoard: React.FC<Props> = ({
@@ -34,8 +66,10 @@ export const GameBoard: React.FC<Props> = ({
   onPlayerMakeMove,
   setCurrentSquare,
   onSelectSquare,
+  destinationBadges = [],
 }: Props) => {
   const { playMoveSound } = useSound()
+
   const after = useCallback(
     (from: string, to: string) => {
       if (onPlayerMakeMove) onPlayerMakeMove([from, to])
@@ -113,31 +147,65 @@ export const GameBoard: React.FC<Props> = ({
   }, [currentNode, game, orientation])
 
   return (
-    <Chessground
-      contained
-      config={{
-        movable: {
-          free: false,
-          dests: availableMoves as any,
+    <div className="relative h-full w-full">
+      <Chessground
+        contained
+        config={{
+          movable: {
+            free: false,
+            dests: availableMoves as any,
+            events: {
+              after,
+            },
+          },
           events: {
-            after,
+            select: (key) => {
+              onSelectSquare && onSelectSquare(key)
+              setCurrentSquare && setCurrentSquare(key)
+            },
           },
-        },
-        events: {
-          select: (key) => {
-            onSelectSquare && onSelectSquare(key)
-            setCurrentSquare && setCurrentSquare(key)
+          drawable: {
+            autoShapes: shapes || [],
+            brushes: { ...defaults().drawable.brushes, ...brushes },
           },
-        },
-        drawable: {
-          autoShapes: shapes || [],
-          brushes: { ...defaults().drawable.brushes, ...brushes },
-        },
-        fen: boardConfig.fen,
-        lastMove: boardConfig.lastMove as Key[],
-        check: boardConfig.check,
-        orientation: boardConfig.orientation,
-      }}
-    />
+          fen: boardConfig.fen,
+          lastMove: boardConfig.lastMove as Key[],
+          check: boardConfig.check,
+          orientation: boardConfig.orientation,
+        }}
+      />
+      {destinationBadges.length > 0 ? (
+        <div className="pointer-events-none absolute inset-0 z-[40]">
+          {destinationBadges.map((badge, index) => {
+            const squarePosition = getBoardSquarePosition(
+              badge.square,
+              orientation,
+            )
+            if (!squarePosition) {
+              return null
+            }
+
+            return (
+              <div
+                key={`${badge.square}-${index}`}
+                className="absolute h-[12.5%] w-[12.5%] overflow-hidden"
+                style={{
+                  left: `${squarePosition.left * 12.5}%`,
+                  top: `${squarePosition.top * 12.5}%`,
+                }}
+              >
+                <div className="absolute right-0 top-0">
+                  <MoveClassificationIcon
+                    classification={badge.classification}
+                    size="small"
+                    className="!ml-0 !h-3.5 !w-3.5 !text-[9px] pointer-events-none"
+                  />
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : null}
+    </div>
   )
 }
diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
