feat: improved learn from mistake behaviour + ui under game board

kevinjosethomas · kevinjosethomas · commit 45907bbc04e2 · 2025-07-26T17:53:12.000-04:00
diff --git a/src/components/Analysis/ConfigurableScreens.tsx b/src/components/Analysis/ConfigurableScreens.tsx
@@ -1,8 +1,14 @@
 import { motion } from 'framer-motion'
 import React, { useState } from 'react'
 import { ConfigureAnalysis } from 'src/components/Analysis/ConfigureAnalysis'
+import { LearnFromMistakes } from 'src/components/Analysis/LearnFromMistakes'
 import { ExportGame } from 'src/components/Common/ExportGame'
-import { AnalyzedGame, GameNode } from 'src/types'
+import {
+  AnalyzedGame,
+  GameNode,
+  LearnFromMistakesState,
+  MistakePosition,
+} from 'src/types'
 
 interface Props {
   currentMaiaModel: string
@@ -21,6 +27,17 @@ interface Props {
     isSaving: boolean
     status: 'saving' | 'unsaved' | 'saved'
   }
+  // Learn from mistakes props
+  learnFromMistakesState?: LearnFromMistakesState
+  learnFromMistakesCurrentInfo?: {
+    mistake: MistakePosition
+    progress: string
+    isLastMistake: boolean
+  } | null
+  onShowSolution?: () => void
+  onNextMistake?: () => void
+  onStopLearnFromMistakes?: () => void
+  lastMoveResult?: 'correct' | 'incorrect' | 'not-learning'
 }
 
 export const ConfigurableScreens: React.FC<Props> = ({
@@ -36,6 +53,12 @@ export const ConfigurableScreens: React.FC<Props> = ({
   isAnalysisInProgress,
   isLearnFromMistakesActive,
   autoSave,
+  learnFromMistakesState,
+  learnFromMistakesCurrentInfo,
+  onShowSolution,
+  onNextMistake,
+  onStopLearnFromMistakes,
+  lastMoveResult,
 }) => {
   const screens = [
     {
@@ -50,6 +73,44 @@ export const ConfigurableScreens: React.FC<Props> = ({
 
   const [screen, setScreen] = useState(screens[0])
 
+  // If learn from mistakes is active, show only the learning interface
+  if (
+    isLearnFromMistakesActive &&
+    learnFromMistakesState &&
+    learnFromMistakesCurrentInfo
+  ) {
+    return (
+      <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
+        <div className="red-scrollbar flex flex-1 flex-col items-start justify-start overflow-y-scroll bg-backdrop/30 p-3">
+          <LearnFromMistakes
+            state={learnFromMistakesState}
+            currentInfo={learnFromMistakesCurrentInfo}
+            onShowSolution={
+              onShowSolution ||
+              (() => {
+                /* no-op */
+              })
+            }
+            onNext={
+              onNextMistake ||
+              (() => {
+                /* no-op */
+              })
+            }
+            onStop={
+              onStopLearnFromMistakes ||
+              (() => {
+                /* no-op */
+              })
+            }
+            lastMoveResult={lastMoveResult || 'not-learning'}
+          />
+        </div>
+      </div>
+    )
+  }
+
+  // Normal state with configure/export tabs
   return (
     <div className="flex w-full flex-1 flex-col overflow-hidden bg-background-1/60 md:w-auto md:rounded">
       <div className="flex flex-row border-b border-white/10">
diff --git a/src/components/Analysis/LearnFromMistakes.tsx b/src/components/Analysis/LearnFromMistakes.tsx
@@ -29,8 +29,8 @@ export const LearnFromMistakes: React.FC<Props> = ({
   const { mistake, progress, isLastMistake } = currentInfo
 
   const getMoveDisplay = () => {
-    const moveNumber = Math.ceil((mistake.moveIndex + 1) / 2)
-    const isWhiteMove = mistake.moveIndex % 2 === 0
+    const moveNumber = Math.ceil(mistake.moveIndex / 2)
+    const isWhiteMove = mistake.playerColor === 'white'
 
     if (isWhiteMove) {
       return `${moveNumber}. ${mistake.san}`
@@ -49,7 +49,11 @@ export const LearnFromMistakes: React.FC<Props> = ({
 
   const getFeedbackText = () => {
     if (state.showSolution) {
-      return `Correct! ${mistake.bestMoveSan} was the best move.`
+      if (lastMoveResult === 'correct') {
+        return `Correct! ${mistake.bestMoveSan} was the best move.`
+      } else {
+        return `The best move was ${mistake.bestMoveSan}.`
+      }
     }
 
     if (lastMoveResult === 'incorrect') {
@@ -62,7 +66,7 @@ export const LearnFromMistakes: React.FC<Props> = ({
   }
 
   return (
-    <div className="fixed bottom-4 left-1/2 z-50 w-full max-w-2xl -translate-x-1/2 transform rounded-lg border border-white/10 bg-background-1 p-4 shadow-lg">
+    <div className="flex w-full flex-col gap-3">
       <div className="flex flex-col gap-3">
         {/* Header */}
         <div className="flex items-center justify-between">
@@ -83,7 +87,7 @@ export const LearnFromMistakes: React.FC<Props> = ({
         </div>
 
         {/* Main prompt */}
-        <div className="rounded bg-background-2/50 p-3">
+        <div>
           <p className="text-sm text-primary">{getPromptText()}</p>
           {getFeedbackText() && (
             <p
@@ -102,16 +106,29 @@ export const LearnFromMistakes: React.FC<Props> = ({
 
         {/* Action buttons */}
         <div className="flex gap-2">
-          {!state.showSolution ? (
-            <button
-              onClick={onShowSolution}
-              className="flex items-center gap-1.5 rounded bg-human-4/60 px-3 py-1.5 text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary"
-            >
-              <span className="material-symbols-outlined !text-sm">
-                lightbulb
-              </span>
-              Show me the solution
-            </button>
+          {!state.showSolution && lastMoveResult !== 'correct' ? (
+            <>
+              <button
+                onClick={onShowSolution}
+                className="flex items-center gap-1.5 rounded bg-human-4/60 px-3 py-1.5 text-sm text-primary/70 transition duration-200 hover:bg-human-4/80 hover:text-primary"
+              >
+                <span className="material-symbols-outlined !text-sm">
+                  lightbulb
+                </span>
+                Show me the solution
+              </button>
+              {!isLastMistake && (
+                <button
+                  onClick={onNext}
+                  className="flex items-center gap-1.5 rounded bg-background-2 px-3 py-1.5 text-sm text-secondary transition duration-200 hover:bg-background-3 hover:text-primary"
+                >
+                  <span className="material-symbols-outlined !text-sm">
+                    skip_next
+                  </span>
+                  Skip to next mistake
+                </button>
+              )}
+            </>
           ) : (
             <button
               onClick={onNext}
@@ -123,18 +140,6 @@ export const LearnFromMistakes: React.FC<Props> = ({
               {isLastMistake ? 'Finish' : 'Next mistake'}
             </button>
           )}
-
-          {state.showSolution && !isLastMistake && (
-            <button
-              onClick={onNext}
-              className="flex items-center gap-1.5 rounded bg-background-2 px-3 py-1.5 text-sm text-secondary transition duration-200 hover:bg-background-3 hover:text-primary"
-            >
-              <span className="material-symbols-outlined !text-sm">
-                skip_next
-              </span>
-              Skip to next
-            </button>
-          )}
         </div>
       </div>
     </div>
diff --git a/src/components/Board/MovesContainer.tsx b/src/components/Board/MovesContainer.tsx
@@ -15,6 +15,7 @@ interface AnalysisProps {
   showAnnotations?: boolean
   showVariations?: boolean
   disableKeyboardNavigation?: boolean
+  disableMoveClicking?: boolean
 }
 
 interface TuringProps {
@@ -25,6 +26,7 @@ interface TuringProps {
   showAnnotations?: boolean
   showVariations?: boolean
   disableKeyboardNavigation?: boolean
+  disableMoveClicking?: boolean
 }
 
 interface PlayProps {
@@ -35,6 +37,7 @@ interface PlayProps {
   showAnnotations?: boolean
   showVariations?: boolean
   disableKeyboardNavigation?: boolean
+  disableMoveClicking?: boolean
 }
 
 type Props = AnalysisProps | TuringProps | PlayProps
@@ -70,6 +73,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
     showAnnotations = true,
     showVariations = true,
     disableKeyboardNavigation = false,
+    disableMoveClicking = false,
   } = props
   const { isMobile } = useContext(WindowSizeContext)
   const containerRef = useRef<HTMLDivElement>(null)
@@ -224,9 +228,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
                       ? currentMoveRef
                       : null
                   }
-                  onClick={() =>
-                    baseController.goToNode(pair.whiteMove as GameNode)
-                  }
+                  onClick={() => {
+                    if (!disableMoveClicking) {
+                      baseController.goToNode(pair.whiteMove as GameNode)
+                    }
+                  }}
                   className={`flex min-w-fit cursor-pointer flex-row items-center rounded px-2 py-1 text-sm ${
                     baseController.currentNode === pair.whiteMove
                       ? 'bg-human-4/20'
@@ -262,9 +268,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
                       ? currentMoveRef
                       : null
                   }
-                  onClick={() =>
-                    baseController.goToNode(pair.blackMove as GameNode)
-                  }
+                  onClick={() => {
+                    if (!disableMoveClicking) {
+                      baseController.goToNode(pair.blackMove as GameNode)
+                    }
+                  }}
                   className={`flex min-w-fit cursor-pointer flex-row items-center rounded px-2 py-1 text-sm ${
                     baseController.currentNode === pair.blackMove
                       ? 'bg-human-4/20'
@@ -298,9 +306,13 @@ export const MovesContainer: React.FC<Props> = (props) => {
           {termination && (
             <div
               className="min-w-fit cursor-pointer border border-primary/10 bg-background-1/90 px-4 py-1 text-sm opacity-90"
-              onClick={() =>
-                baseController.goToNode(mainLineNodes[mainLineNodes.length - 1])
-              }
+              onClick={() => {
+                if (!disableMoveClicking) {
+                  baseController.goToNode(
+                    mainLineNodes[mainLineNodes.length - 1],
+                  )
+                }
+              }}
             >
               {termination.result}
               {', '}
@@ -330,7 +342,9 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 baseController.currentNode === whiteNode ? currentMoveRef : null
               }
               onClick={() => {
-                if (whiteNode) baseController.goToNode(whiteNode)
+                if (whiteNode && !disableMoveClicking) {
+                  baseController.goToNode(whiteNode)
+                }
               }}
               data-index={index * 2 + 1}
               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 ${baseController.currentNode === whiteNode && 'bg-human-4/10'} ${highlightSet.has(index * 2 + 1) && 'bg-human-3/80'}`}
@@ -363,14 +377,17 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 currentNode={baseController.currentNode}
                 goToNode={baseController.goToNode}
                 showAnnotations={showAnnotations}
+                disableMoveClicking={disableMoveClicking}
               />
             ) : null}
             <div
               ref={
                 baseController.currentNode === blackNode ? currentMoveRef : null
               }
               onClick={() => {
-                if (blackNode) baseController.goToNode(blackNode)
+                if (blackNode && !disableMoveClicking) {
+                  baseController.goToNode(blackNode)
+                }
               }}
               data-index={index * 2 + 2}
               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 ${baseController.currentNode === blackNode && 'bg-human-4/10'} ${highlightSet.has(index * 2 + 2) && 'bg-human-3/80'}`}
@@ -403,6 +420,7 @@ export const MovesContainer: React.FC<Props> = (props) => {
                 currentNode={baseController.currentNode}
                 goToNode={baseController.goToNode}
                 showAnnotations={showAnnotations}
+                disableMoveClicking={disableMoveClicking}
               />
             ) : null}
           </>
@@ -411,9 +429,11 @@ export const MovesContainer: React.FC<Props> = (props) => {
       {termination && !isMobile && (
         <div
           className="col-span-5 cursor-pointer rounded-sm border border-primary/10 bg-background-1/90 p-5 text-center opacity-90"
-          onClick={() =>
-            baseController.goToNode(mainLineNodes[mainLineNodes.length - 1])
-          }
+          onClick={() => {
+            if (!disableMoveClicking) {
+              baseController.goToNode(mainLineNodes[mainLineNodes.length - 1])
+            }
+          }}
         >
           {termination.result}
           {', '}
@@ -432,12 +452,14 @@ function FirstVariation({
   currentNode,
   goToNode,
   showAnnotations,
+  disableMoveClicking = false,
 }: {
   node: GameNode
   color: 'white' | 'black'
   currentNode: GameNode | undefined
   goToNode: (node: GameNode) => void
   showAnnotations: boolean
+  disableMoveClicking?: boolean
 }) {
   return (
     <>
@@ -452,6 +474,7 @@ function FirstVariation({
               goToNode={goToNode}
               level={0}
               showAnnotations={showAnnotations}
+              disableMoveClicking={disableMoveClicking}
             />
           ))}
         </ul>
@@ -487,7 +510,11 @@ function VariationTree({
   return (
     <li className={`tree-li ${level === 0 ? 'no-tree-connector' : ''}`}>
       <span
-        onClick={() => goToNode(node)}
+        onClick={() => {
+          if (!disableMoveClicking) {
+            goToNode(node)
+          }
+        }}
         className={`cursor-pointer px-0.5 text-xs ${
           currentNode?.fen === node?.fen
             ? 'rounded bg-human-4/20 text-primary'
@@ -520,6 +547,7 @@ function VariationTree({
             goToNode={goToNode}
             level={level}
             showAnnotations={showAnnotations}
+            disableMoveClicking={disableMoveClicking}
           />
         </span>
       ) : variations.length > 1 ? (
@@ -532,6 +560,7 @@ function VariationTree({
               goToNode={goToNode}
               level={level + 1}
               showAnnotations={showAnnotations}
+              disableMoveClicking={disableMoveClicking}
             />
           ))}
         </ul>
@@ -577,7 +606,11 @@ function InlineChain({
         {chain.map((child) => (
           <Fragment key={child.move}>
             <span
-              onClick={() => goToNode(child)}
+              onClick={() => {
+                if (!disableMoveClicking) {
+                  goToNode(child)
+                }
+              }}
               className={`cursor-pointer px-0.5 text-xs ${
                 currentNode?.fen === child?.fen
                   ? 'rounded bg-human-4/50 text-primary'
@@ -617,6 +650,7 @@ function InlineChain({
               goToNode={goToNode}
               level={level + 1}
               showAnnotations={showAnnotations}
+              disableMoveClicking={disableMoveClicking}
             />
           ))}
         </ul>
diff --git a/src/pages/analysis/[...id].tsx b/src/pages/analysis/[...id].tsx
