feat: add first iteration of analysis in puzzle page

Author: kevinjosethomas

src/components/Training/Feedback.tsx

@@ -1,5 +1,5 @@
 import { Chess } from 'chess.ts'
-import { useMemo, Dispatch, SetStateAction, useCallback } from 'react'
+import { useMemo, Dispatch, SetStateAction } from 'react'
 
 import { Markdown } from 'src/components'
 import { useTrainingController } from 'src/hooks'
@@ -65,11 +65,11 @@ export const Feedback: React.FC<Props> = ({
   }, [defaultContent, incorrectContent, correctContent, status, targetIndex])
 
   return (
-    <div className="flex w-screen flex-1 flex-col justify-between gap-2 rounded-sm bg-background-1 p-3 md:w-auto md:gap-0 md:p-5">
+    <div className="flex w-screen flex-1 flex-col rounded-sm bg-background-1 p-3 md:w-auto md:p-5 lg:justify-between">
       <div>
         <Markdown>{content.trim()}</Markdown>
       </div>
-      <div className="flex flex-col gap-1.5">
+      <div className="mt-2 flex min-w-32 flex-row gap-1.5 lg:mt-0 lg:flex-col">
         {status !== 'archived' && (
           <>
             {status === 'incorrect' && (
@@ -85,8 +85,13 @@ export const Feedback: React.FC<Props> = ({
             )}
             {status !== 'correct' && status !== 'incorrect' && (
               <button
-                onClick={() => controller.reset()}
-                disabled={status == 'loading'}
+                onClick={() => {
+                  controller.reset()
+                  if (status !== 'success' && status !== 'forfeit') {
+                    setStatus('default')
+                  }
+                }}
+                disabled={status == 'loading' || status == 'default'}
                 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"
               >
                 Reset

src/hooks/useTrainingController/useTrainingController.ts

@@ -30,14 +30,23 @@ const buildTrainingGameTree = (game: TrainingGame): GameTree => {
 
 export const useTrainingController = (game: TrainingGame) => {
   const gameTree = useMemo(() => buildTrainingGameTree(game), [game])
-  const initialOrientation = useMemo(
-    () => (game.targetIndex % 2 === 0 ? 'white' : 'black'),
-    [game.targetIndex],
-  )
+  const initialOrientation = useMemo(() => {
+    const puzzleFen = game.moves[game.targetIndex].board
+    const chess = new Chess(puzzleFen)
+    return chess.turn() === 'w' ? 'white' : 'black'
+  }, [game.targetIndex, game.moves])
   const controller = useTreeController(gameTree, initialOrientation)
 
   const puzzleStartingNode = useMemo(() => {
-    return gameTree.getRoot()
+    let node = gameTree.getRoot()
+    for (let i = 1; i <= game.targetIndex; i++) {
+      if (node.mainChild) {
+        node = node.mainChild
+      } else {
+        break
+      }
+    }
+    return node
   }, [gameTree, game.targetIndex])
 
   useEffect(() => {

src/pages/analysis/[...id].tsx

@@ -37,6 +37,7 @@ import {
   AuthenticatedWrapper,
   MovesContainer,
   BoardController,
+  PromotionOverlay,
 } from 'src/components'
 import Head from 'next/head'
 import toast from 'react-hot-toast'
@@ -241,6 +242,9 @@ const Analysis: React.FC<Props> = ({
   const [screen, setScreen] = useState(screens[0])
   const toastId = useRef<string>(null)
   const [currentSquare, setCurrentSquare] = useState<Key | null>(null)
+  const [promotionFromTo, setPromotionFromTo] = useState<
+    [string, string] | null
+  >(null)
 
   const controller = useAnalysisController(analyzedGame)
 
@@ -363,6 +367,51 @@ const Analysis: React.FC<Props> = ({
     }
   }
 
+  const onPlayerMakeMove = useCallback(
+    (playedMove: [string, string] | null) => {
+      if (!playedMove) return
+
+      // Check for promotions in available moves
+      const availableMoves = Array.from(controller.moves.entries()).flatMap(
+        ([from, tos]) => tos.map((to) => ({ from, to })),
+      )
+
+      const matching = availableMoves.filter((m) => {
+        return m.from === playedMove[0] && m.to === playedMove[1]
+      })
+
+      if (matching.length > 1) {
+        // Multiple matching moves (i.e. promotion)
+        setPromotionFromTo(playedMove)
+        return
+      }
+
+      // Single move
+      const moveUci = playedMove[0] + playedMove[1]
+      makeMove(moveUci)
+    },
+    [controller.moves, makeMove],
+  )
+
+  const onPlayerSelectPromotion = useCallback(
+    (piece: string) => {
+      if (!promotionFromTo) {
+        return
+      }
+      setPromotionFromTo(null)
+      const moveUci = promotionFromTo[0] + promotionFromTo[1] + piece
+      makeMove(moveUci)
+    },
+    [promotionFromTo, setPromotionFromTo, makeMove],
+  )
+
+  // Determine current player for promotion overlay
+  const currentPlayer = useMemo(() => {
+    if (!controller.currentNode) return 'white'
+    const chess = new Chess(controller.currentNode.fen)
+    return chess.turn() === 'w' ? 'white' : 'black'
+  }, [controller.currentNode])
+
   const Player = ({
     name,
     rating,
@@ -533,9 +582,17 @@ const Analysis: React.FC<Props> = ({
                 shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
                 currentNode={controller.currentNode as GameNode}
                 orientation={controller.orientation}
+                onPlayerMakeMove={onPlayerMakeMove}
                 goToNode={controller.goToNode}
                 gameTree={analyzedGame.tree}
               />
+              {promotionFromTo ? (
+                <PromotionOverlay
+                  player={currentPlayer}
+                  file={promotionFromTo[1].slice(0, 1)}
+                  onPlayerSelectPromotion={onPlayerSelectPromotion}
+                />
+              ) : null}
             </div>
             <Player
               name={
@@ -674,9 +731,17 @@ const Analysis: React.FC<Props> = ({
                 shapes={hoverArrow ? [...arrows, hoverArrow] : [...arrows]}
                 currentNode={controller.currentNode as GameNode}
                 orientation={controller.orientation}
+                onPlayerMakeMove={onPlayerMakeMove}
                 goToNode={controller.goToNode}
                 gameTree={analyzedGame.tree}
               />
+              {promotionFromTo ? (
+                <PromotionOverlay
+                  player={currentPlayer}
+                  file={promotionFromTo[1].slice(0, 1)}
+                  onPlayerSelectPromotion={onPlayerSelectPromotion}
+                />
+              ) : null}
             </div>
             <div className="flex w-full flex-col gap-0">
               <div className="w-full !flex-grow-0">