Minor Bug Fixes

src/components/Leaderboard/LeaderboardColumn.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 import { LeaderboardEntry } from 'src/components'
 
 interface Props {
-  id: 'regular' | 'train' | 'turing' | 'hand' | 'brain'
-  name: 'Regular' | 'Train' | 'Bot/Not' | 'Hand' | 'Brain'
+  id: 'regular' | 'puzzles' | 'turing' | 'hand' | 'brain'
+  name: 'Regular' | 'Puzzles' | 'Bot/Not' | 'Hand' | 'Brain'
   icon: React.JSX.Element
   ranking: {
     display_name: string

src/components/Leaderboard/LeaderboardEntry.tsx

@@ -7,8 +7,8 @@ import { useLeaderboardContext } from './LeaderboardContext'
 
 interface Props {
   index: number
-  typeId: 'regular' | 'train' | 'turing' | 'hand' | 'brain'
-  type: 'Regular' | 'Train' | 'Bot/Not' | 'Hand' | 'Brain'
+  typeId: 'regular' | 'puzzles' | 'turing' | 'hand' | 'brain'
+  type: 'Regular' | 'Puzzles' | 'Bot/Not' | 'Hand' | 'Brain'
   display_name: string
   elo: number
 }
@@ -63,7 +63,7 @@ export const LeaderboardEntry = ({
       gamesKey = 'regularGames'
       gamesWonKey = 'regularWins'
       break
-    case 'train':
+    case 'puzzles':
       ratingKey = 'trainRating'
       highestRatingKey = 'trainMax'
       gamesKey = 'trainGames'

src/components/Puzzles/Feedback.tsx

@@ -12,6 +12,8 @@ interface Props {
   getNewGame: () => Promise<void>
   setStatus: Dispatch<SetStateAction<Status>>
   controller: ReturnType<typeof useTrainingController>
+  lastAttemptedMove: string | null
+  setLastAttemptedMove: Dispatch<SetStateAction<string | null>>
 }
 
 export const Feedback: React.FC<Props> = ({
@@ -21,6 +23,8 @@ export const Feedback: React.FC<Props> = ({
   getNewGame,
   setAndGiveUp,
   controller: controller,
+  lastAttemptedMove,
+  setLastAttemptedMove,
 }: Props) => {
   const { targetIndex } = game
 
@@ -37,12 +41,12 @@ export const Feedback: React.FC<Props> = ({
   Find the best move for **${turn}**!
   `
   const incorrectContent = `
-  ##### ${controller.currentNode.san} is incorrect
+  ##### ${lastAttemptedMove || 'Move'} is incorrect
   Try again or give up to analyze the board and see the best move.
   `
 
   const correctContent = `
-  ##### Correct! ${controller.currentNode.san} is the best move.
+  ##### Correct! ${lastAttemptedMove || 'Move'} is the best move.
   You can now explore and analyze the position by making moves, or train on another position.
   `
 
@@ -93,6 +97,7 @@ export const Feedback: React.FC<Props> = ({
               <button
                 onClick={() => {
                   setStatus('default')
+                  setLastAttemptedMove(null)
                   controller.reset()
                 }}
                 className="flex w-full justify-center rounded-sm bg-engine-3 py-1.5 text-sm font-medium text-primary transition duration-300 hover:bg-engine-4 disabled:bg-backdrop disabled:text-secondary"

src/pages/leaderboard.tsx

@@ -20,8 +20,8 @@ const Leaderboard: React.FC = () => {
     {
       icon: React.JSX.Element
       ranking: { display_name: string; elo: number }[]
-      name: 'Regular' | 'Train' | 'Bot/Not' | 'Hand' | 'Brain'
-      id: 'regular' | 'train' | 'turing' | 'hand' | 'brain'
+      name: 'Regular' | 'Puzzles' | 'Bot/Not' | 'Hand' | 'Brain'
+      id: 'regular' | 'puzzles' | 'turing' | 'hand' | 'brain'
     }[]
   >()
 
@@ -55,9 +55,9 @@ const Leaderboard: React.FC = () => {
         ranking: lb.play_leaders,
       },
       {
-        id: 'train',
+        id: 'puzzles',
         icon: <TrainIcon />,
-        name: 'Train',
+        name: 'Puzzles',
         ranking: lb.puzzles_leaders,
       },
       {

src/pages/puzzles.tsx

@@ -84,6 +84,9 @@ const TrainPage: NextPage = () => {
   >([])
   const [initialTourCheck, setInitialTourCheck] = useState(false)
   const [loadingGame, setLoadingGame] = useState(false)
+  const [lastAttemptedMove, setLastAttemptedMove] = useState<string | null>(
+    null,
+  )
 
   useEffect(() => {
     if (!initialTourCheck && tourState.ready) {
@@ -108,6 +111,7 @@ const TrainPage: NextPage = () => {
 
     setStatus('default')
     setUserGuesses([])
+    setLastAttemptedMove(null)
     setCurrentIndex(trainingGames.length)
     setTrainingGames(trainingGames.concat([game]))
     setPreviousGameResults(previousGameResults.concat([{ ...game }]))
@@ -242,6 +246,8 @@ const TrainPage: NextPage = () => {
         stats={stats}
         getNewGame={getNewGame}
         logGuess={logGuess}
+        lastAttemptedMove={lastAttemptedMove}
+        setLastAttemptedMove={setLastAttemptedMove}
         gamesController={
           <>
             <div className="relative bottom-0 flex h-full min-h-[38px] flex-1 flex-col justify-end overflow-auto">
@@ -277,6 +283,8 @@ interface Props {
     setStatus: Dispatch<SetStateAction<Status>>,
     rating: number,
   ) => void
+  lastAttemptedMove: string | null
+  setLastAttemptedMove: Dispatch<SetStateAction<string | null>>
 }
 
 const Train: React.FC<Props> = ({
@@ -287,6 +295,8 @@ const Train: React.FC<Props> = ({
   setStatus,
   getNewGame,
   logGuess,
+  lastAttemptedMove,
+  setLastAttemptedMove,
 }: Props) => {
   const controller = useTrainingController(trainingGame)
 
@@ -382,10 +392,11 @@ const Train: React.FC<Props> = ({
     (square: Key) => {
       if (!analysisEnabled && !showAnalysis) {
         controller.reset()
+        setLastAttemptedMove(null)
         setStatus('default')
       }
     },
-    [controller, analysisEnabled, showAnalysis],
+    [controller, analysisEnabled, showAnalysis, setLastAttemptedMove],
   )
 
   const onPlayerMakeMove = useCallback(
@@ -449,6 +460,19 @@ const Train: React.FC<Props> = ({
         }
 
         const moveUci = playedMove[0] + playedMove[1]
+
+        // Capture the SAN notation before making the move
+        const chess = new Chess(controller.currentNode.fen)
+        const moveAttempt = chess.move({
+          from: moveUci.slice(0, 2),
+          to: moveUci.slice(2, 4),
+          promotion: moveUci[4] ? (moveUci[4] as PieceSymbol) : undefined,
+        })
+
+        if (moveAttempt) {
+          setLastAttemptedMove(moveAttempt.san)
+        }
+
         controller.onPlayerGuess(moveUci)
 
         const currentStatus = status as Status
@@ -516,6 +540,18 @@ const Train: React.FC<Props> = ({
         }
       } else {
         // In puzzle mode
+        // Capture the SAN notation before making the move
+        const chess = new Chess(controller.currentNode.fen)
+        const moveAttempt = chess.move({
+          from: moveUci.slice(0, 2),
+          to: moveUci.slice(2, 4),
+          promotion: piece as PieceSymbol,
+        })
+
+        if (moveAttempt) {
+          setLastAttemptedMove(moveAttempt.san)
+        }
+
         controller.onPlayerGuess(moveUci)
 
         const currentStatus = status as Status
@@ -817,6 +853,8 @@ const Train: React.FC<Props> = ({
               setAndGiveUp={setAndGiveUp}
               controller={controller}
               getNewGame={getNewGame}
+              lastAttemptedMove={lastAttemptedMove}
+              setLastAttemptedMove={setLastAttemptedMove}
             />
           </div>
         </motion.div>
@@ -974,6 +1012,8 @@ const Train: React.FC<Props> = ({
                 controller={controller}
                 setAndGiveUp={setAndGiveUp}
                 getNewGame={getNewGame}
+                lastAttemptedMove={lastAttemptedMove}
+                setLastAttemptedMove={setLastAttemptedMove}
               />
             </div>
             <StatsDisplay stats={stats} />