feat: handle game ends + clean up components + handle edge cases

kevinjosethomas · kevinjosethomas · commit 5478882a35aa · 2025-07-30T18:03:28.000-04:00
diff --git a/src/api/lichess/streaming.ts b/src/api/lichess/streaming.ts
@@ -152,7 +152,7 @@ export const createAnalyzedGameFromLichessStream = (
   const tree = new GameTree(startingFen)
 
   return {
-    id: `stream-${id}`,
+    id,
     blackPlayer,
     whitePlayer,
     gameType: 'stream',
diff --git a/src/components/Analysis/StreamAnalysis.tsx b/src/components/Analysis/StreamAnalysis.tsx
@@ -183,6 +183,19 @@ export const StreamAnalysis: React.FC<Props> = ({
             )}
           </div>
         ))}
+        <div className="mt-1 flex items-center justify-center gap-1">
+          <span className="text-xxs text-secondary">
+            Watch on{' '}
+            <a
+              href={`https://lichess.org/${game.id}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary/60 underline hover:text-primary"
+            >
+              Lichess
+            </a>
+          </span>
+        </div>
       </div>
       <div className="flex w-full items-center justify-between text-xs md:hidden">
         <div className="flex items-center gap-1">
@@ -273,14 +286,10 @@ export const StreamAnalysis: React.FC<Props> = ({
           style={{ willChange: 'transform, opacity' }}
         >
           <GameInfo
-            title="Live Analysis"
+            title="Analysis"
             icon="live_tv"
             type="analysis"
-            streamState={{
-              isLive: streamState.isLive,
-              isConnected: streamState.isConnected,
-              error: streamState.error,
-            }}
+            streamState={streamState}
           >
             <NestedGameInfo />
           </GameInfo>
@@ -445,17 +454,13 @@ export const StreamAnalysis: React.FC<Props> = ({
           style={{ willChange: 'transform, opacity' }}
         >
           <GameInfo
-            title="Live Analysis"
+            title="Analysis"
             icon="live_tv"
             type="analysis"
             currentMaiaModel={analysisController.currentMaiaModel}
             setCurrentMaiaModel={analysisController.setCurrentMaiaModel}
             MAIA_MODELS={MAIA_MODELS}
-            streamState={{
-              isLive: streamState.isLive,
-              isConnected: streamState.isConnected,
-              error: streamState.error,
-            }}
+            streamState={streamState}
           >
             <NestedGameInfo />
           </GameInfo>
diff --git a/src/components/Common/GameInfo.tsx b/src/components/Common/GameInfo.tsx
@@ -16,6 +16,7 @@ interface Props {
     isLive: boolean
     isConnected: boolean
     error: string | null
+    gameEnded: boolean
   }
 }
 
@@ -60,9 +61,11 @@ export const GameInfo: React.FC<Props> = ({
                   ? 'LIVE'
                   : streamState.isConnected
                     ? 'Connected'
-                    : streamState.error
-                      ? 'Disconnected'
-                      : 'Connecting...'}
+                    : streamState.gameEnded
+                      ? 'Game Ended'
+                      : streamState.error
+                        ? 'Disconnected'
+                        : 'Connecting...'}
               </span>
             </div>
           )}
diff --git a/src/components/Common/PlayerInfo.tsx b/src/components/Common/PlayerInfo.tsx
@@ -59,8 +59,11 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
         <div
           className={`h-2.5 w-2.5 rounded-full ${color === 'white' ? 'bg-white' : 'border bg-black'}`}
         />
-        <p>
-          {name ?? 'Unknown'} {rating ? `(${rating})` : null}
+        <p className="text-sm">
+          {name ?? 'Unknown'}{' '}
+          <span className="text-xs text-secondary">
+            {rating ? `(${rating})` : null}
+          </span>
         </p>
       </div>
       <div className="flex items-center gap-4">
@@ -85,7 +88,7 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
             <span
               className={`font-mono text-xs font-medium ${
                 clock.isActive ? 'text-black' : 'text-black/60'
-              } ${currentTime < 60 ? 'text-red-500' : ''}`}
+              } ${currentTime < 60 ? 'text-red-700' : ''}`}
             >
               {formatTime(currentTime)}
             </span>
diff --git a/src/hooks/useLichessStreamController.ts b/src/hooks/useLichessStreamController.ts
@@ -29,6 +29,7 @@ export const useLichessStreamController = (): LichessStreamController => {
     isLive: false,
     error: null,
     gameStarted: false,
+    gameEnded: false,
   })
   const [clockState, setClockState] = useState<ClockState>({
     whiteTime: 0,
@@ -67,6 +68,7 @@ export const useLichessStreamController = (): LichessStreamController => {
       isLive: false,
       error: null,
       gameStarted: false,
+      gameEnded: false,
     })
 
     currentGameId.current = null
@@ -84,25 +86,28 @@ export const useLichessStreamController = (): LichessStreamController => {
 
   const handleGameStart = useCallback(
     (gameData: StreamedGame) => {
-      if (game?.id === gameData.id) {
+      setGame((prev) => {
+        console.log('CHECKING FOR GAME END', prev?.id, gameData.id)
         // if the game is already loaded, this is a game termination message
-        setGame((prev) => {
-          if (!prev) return prev
+        if (prev?.id === gameData.id) {
+          console.log('GAME ENDED')
+
+          setStreamState((prev) => ({
+            ...prev,
+            gameEnded: true,
+          }))
 
           return {
             ...prev,
             termination: {
-              winner: gameData.winner ?? 'none',
-              result: gameData.winner ?? 'none',
+              winner: gameData.winner,
+              result: gameData.status?.name ?? 'none',
             },
           }
-        })
-        return
-      }
-
-      const parsedGame = createAnalyzedGameFromLichessStream(gameData)
+        }
 
-      setGame(parsedGame)
+        return createAnalyzedGameFromLichessStream(gameData)
+      })
 
       setStreamState((prev) => ({
         ...prev,
@@ -177,6 +182,7 @@ export const useLichessStreamController = (): LichessStreamController => {
       ...prev,
       isConnected: false,
       isLive: false,
+      gameEnded: true,
     }))
 
     // DO NOT automatically reconnect when stream completes
@@ -223,6 +229,7 @@ export const useLichessStreamController = (): LichessStreamController => {
           isLive: false,
           error: errorMessage,
           gameStarted: false,
+          gameEnded: false,
         })
 
         abortController.current = null
diff --git a/src/pages/analysis/stream/[gameId].tsx b/src/pages/analysis/stream/[gameId].tsx
@@ -105,9 +105,9 @@ const StreamAnalysisPage: NextPage = () => {
     }
   }, [streamController.game, analysisController])
 
+  // When we finish streaming and load the game, we want to set the current node to the last move
   useEffect(() => {
     if (streamController.game?.loaded) {
-      console.log('GAME LOADED')
       analysisController.setCurrentNode(
         streamController.game.tree.getMainLine()[
           streamController.game.tree.getMainLine().length - 1
@@ -116,48 +116,48 @@ const StreamAnalysisPage: NextPage = () => {
     }
   }, [streamController.game?.loaded])
 
-  if (
-    streamController.streamState.isConnecting &&
-    !streamController.streamState.gameStarted
-  ) {
-    return (
-      <>
-        <Head>
-          <title>Connecting to Live Game – Maia Chess</title>
-          <meta
-            name="description"
-            content="Connecting to live chess game stream for real-time analysis with Maia AI."
-          />
-        </Head>
-        <DelayedLoading isLoading={true}>
-          <div className="flex flex-col items-center justify-center gap-4">
-            <div className="text-center">
-              <h2 className="mb-2 text-xl font-semibold">
-                {streamController.streamState.error
-                  ? 'Connection Error'
-                  : 'Connecting to Live Game'}
-              </h2>
-              {streamController.streamState.error ? (
-                <div className="mb-4 text-red-400">
-                  <p>{streamController.streamState.error}</p>
-                  <button
-                    onClick={streamController.reconnect}
-                    className="mt-2 rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
-                  >
-                    Try Again
-                  </button>
-                </div>
-              ) : (
-                <p className="text-secondary">
-                  Establishing connection to Lichess game {gameId}...
-                </p>
-              )}
-            </div>
-          </div>
-        </DelayedLoading>
-      </>
-    )
-  }
+  // if (
+  //   streamController.streamState.isConnecting &&
+  //   !streamController.streamState.gameStarted
+  // ) {
+  //   return (
+  //     <>
+  //       <Head>
+  //         <title>Connecting to Live Game – Maia Chess</title>
+  //         <meta
+  //           name="description"
+  //           content="Connecting to live chess game stream for real-time analysis with Maia AI."
+  //         />
+  //       </Head>
+  //       <DelayedLoading isLoading={true}>
+  //         <div className="flex flex-col items-center justify-center gap-4">
+  //           <div className="text-center">
+  //             <h2 className="mb-2 text-xl font-semibold">
+  //               {streamController.streamState.error
+  //                 ? 'Connection Error'
+  //                 : 'Connecting to Live Game'}
+  //             </h2>
+  //             {streamController.streamState.error ? (
+  //               <div className="mb-4 text-red-400">
+  //                 <p>{streamController.streamState.error}</p>
+  //                 <button
+  //                   onClick={streamController.reconnect}
+  //                   className="mt-2 rounded bg-human-4 px-4 py-2 text-white transition hover:bg-human-4/80"
+  //                 >
+  //                   Try Again
+  //                 </button>
+  //               </div>
+  //             ) : (
+  //               <p className="text-secondary">
+  //                 Establishing connection to Lichess game {gameId}...
+  //               </p>
+  //             )}
+  //           </div>
+  //         </div>
+  //       </DelayedLoading>
+  //     </>
+  //   )
+  // }
 
   return (
     <>
@@ -184,13 +184,15 @@ const StreamAnalysisPage: NextPage = () => {
       </AnimatePresence>
 
       <TreeControllerContext.Provider value={analysisController}>
-        {!streamController.game?.loaded && streamController.game && (
+        {!streamController.game?.loaded &&
+        streamController.game &&
+        !streamController.streamState.gameEnded ? (
           <div className="absolute left-0 top-0 z-50">
             <DelayedLoading transparent isLoading={true}>
               <p>Loading...</p>
             </DelayedLoading>
           </div>
-        )}
+        ) : null}
         {analysisController && (
           <StreamAnalysis
             game={streamController.game || dummyGame}
diff --git a/src/types/stream/index.ts b/src/types/stream/index.ts
@@ -18,7 +18,7 @@ export interface StreamedGame {
       }
     }
   }
-  winner?: 'white' | 'black' | 'none'
+  winner?: 'white' | 'black'
   status?: {
     id: number
     name: string
@@ -38,6 +38,7 @@ export interface StreamState {
   isLive: boolean
   error: string | null
   gameStarted: boolean
+  gameEnded: boolean
 }
 
 export interface ClockState {

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ export interface StreamedGame {`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`	`}`
`21`		`- winner?: 'white' \| 'black' \| 'none'`
	`21`	`+ winner?: 'white' \| 'black'`
`22`	`22`	`status?: {`
`23`	`23`	`id: number`
`24`	`24`	`name: string`
`@@ -38,6 +38,7 @@ export interface StreamState {`
`38`	`38`	`isLive: boolean`
`39`	`39`	`error: string \| null`
`40`	`40`	`gameStarted: boolean`
	`41`	`+ gameEnded: boolean`
`41`	`42`	`}`
`42`	`43`
`43`	`44`	`export interface ClockState {`