feat: improve move map + blunder meter

CSSLab · Feb 16, 2025 · 331057a · 331057a
1 parent 259f782
commit 331057a
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 12 deletions.
diff --git a/src/components/Analysis/BlunderMeter.tsx b/src/components/Analysis/BlunderMeter.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { motion } from 'framer-motion'
-import { Tooltip } from 'react-tooltip'
+
 import { BlunderMeterResult, ColorSanMapping } from 'src/types'
 
 interface Props {
@@ -18,7 +18,6 @@ export const BlunderMeter: React.FC<Props> = ({
 }: Props) => {
   return (
     <div className="flex h-64 max-h-full w-full flex-col gap-2 overflow-hidden rounded bg-background-1/60 p-3 md:h-full md:w-auto md:min-w-[40%] md:max-w-[40%]">
-      <Tooltip id="probability" />
       <p className="text-lg text-primary">Blunder Meter</p>
       <div className="flex h-full w-full flex-col overflow-hidden">
         <div className="flex h-full w-full select-none flex-col overflow-hidden rounded">
@@ -93,10 +92,6 @@ function Meter({
       }}
     >
       <motion.div
-        data-tooltip-id="probability"
-        data-tooltip-content={`Maia predicts there is a ${Math.round(
-          probability,
-        )}% chance that the player will make a good move`}
         className={`flex h-full min-h-10 min-w-8 flex-col items-center justify-start py-1 ${bgColor}`}
       >
         <motion.p className="text-xs font-bold text-black text-opacity-50">

diff --git a/src/components/Board/AnalysisMovesContainer.tsx b/src/components/Board/AnalysisMovesContainer.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { Tooltip } from 'react-tooltip'
 import { useContext, useMemo, Fragment } from 'react'
 import { AnalysisGameControllerContext, WindowSizeContext } from 'src/contexts'
 import { GameNode, AnalyzedGame, Termination, ClientBaseGame } from 'src/types'
@@ -53,7 +52,6 @@ export const AnalysisMovesContainer: React.FC<Props> = ({
 
   return (
     <div className="red-scrollbar grid h-48 auto-rows-min grid-cols-5 overflow-y-auto overflow-x-hidden whitespace-nowrap rounded-sm bg-background-1/60 md:h-full md:w-full">
-      <Tooltip id="check" />
       {moves.map(([whiteNode, blackNode], index) => {
         return (
           <>

diff --git a/src/hooks/useAnalysisController/useAnalysisController.ts b/src/hooks/useAnalysisController/useAnalysisController.ts
@@ -377,12 +377,17 @@ export const useAnalysisController = (game: AnalyzedGame) => {
     const maia = Object.fromEntries(
       Object.entries(moveEvaluation.maia.policy).slice(0, 3),
     )
-    const stockfish = Object.fromEntries(
-      Object.entries(moveEvaluation.stockfish.cp_vec).slice(0, 3),
-    )
+
+    const stockfishMoves = Object.entries(moveEvaluation.stockfish.cp_vec)
+    const topStockfish = Object.fromEntries(stockfishMoves.slice(0, 3))
+    const worstStockfish = Object.fromEntries(stockfishMoves.slice(-2))
 
     const moves = Array.from(
-      new Set(Object.keys(maia).concat(Object.keys(stockfish))),
+      new Set([
+        ...Object.keys(maia),
+        ...Object.keys(topStockfish),
+        ...Object.keys(worstStockfish),
+      ]),
     )
 
     const data = []