feat: add clocks to livestreamed game

Author: kevinjosethomas

src/components/Analysis/StreamAnalysis.tsx

@@ -18,7 +18,7 @@ import {
   StockfishEvaluation,
   GameNode,
 } from 'src/types'
-import { StreamState } from 'src/hooks/useLichessStreamController'
+import { StreamState, ClockState } from 'src/hooks/useLichessStreamController'
 import { WindowSizeContext } from 'src/contexts'
 import { PlayerInfo } from 'src/components/Common/PlayerInfo'
 import { GameBoard } from 'src/components/Board/GameBoard'
@@ -33,6 +33,7 @@ import { MAIA_MODELS } from 'src/constants/common'
 interface Props {
   game: AnalyzedGame
   streamState: StreamState
+  clockState: ClockState
   onReconnect: () => void
   onStopStream: () => void
   analysisController: any // This should be typed properly based on your analysis controller
@@ -41,6 +42,7 @@ interface Props {
 export const StreamAnalysis: React.FC<Props> = ({
   game,
   streamState,
+  clockState,
   onReconnect,
   onStopStream,
   analysisController,
@@ -353,6 +355,21 @@ export const StreamAnalysis: React.FC<Props> = ({
                 analysisController.orientation === 'white' ? 'black' : 'white'
               }
               termination={game.termination.winner}
+              clock={
+                clockState
+                  ? analysisController.orientation === 'white'
+                    ? {
+                        timeInSeconds: clockState.blackTime,
+                        isActive: clockState.activeColor === 'black',
+                        lastUpdateTime: clockState.lastUpdateTime,
+                      }
+                    : {
+                        timeInSeconds: clockState.whiteTime,
+                        isActive: clockState.activeColor === 'white',
+                        lastUpdateTime: clockState.lastUpdateTime,
+                      }
+                  : undefined
+              }
             />
             <div className="desktop-board-container relative flex aspect-square">
               <GameBoard
@@ -396,6 +413,21 @@ export const StreamAnalysis: React.FC<Props> = ({
               }
               termination={game.termination.winner}
               showArrowLegend={true}
+              clock={
+                clockState
+                  ? analysisController.orientation === 'white'
+                    ? {
+                        timeInSeconds: clockState.whiteTime,
+                        isActive: clockState.activeColor === 'white',
+                        lastUpdateTime: clockState.lastUpdateTime,
+                      }
+                    : {
+                        timeInSeconds: clockState.blackTime,
+                        isActive: clockState.activeColor === 'black',
+                        lastUpdateTime: clockState.lastUpdateTime,
+                      }
+                  : undefined
+              }
             />
           </div>
           <ConfigurableScreens

src/components/Common/PlayerInfo.tsx

@@ -4,15 +4,55 @@ interface PlayerInfoProps {
   rating?: number
   termination?: string
   showArrowLegend?: boolean
+  clock?: {
+    timeInSeconds: number
+    isActive: boolean
+    lastUpdateTime: number
+  }
 }
 
+import { useState, useEffect } from 'react'
+
 export const PlayerInfo: React.FC<PlayerInfoProps> = ({
   name,
   rating,
   color,
   termination,
   showArrowLegend = false,
+  clock,
 }) => {
+  const [currentTime, setCurrentTime] = useState<number>(
+    clock?.timeInSeconds || 0,
+  )
+
+  // Update clock countdown every second if this clock is active
+  useEffect(() => {
+    if (!clock || !clock.isActive) return
+
+    const interval = setInterval(() => {
+      const now = Date.now()
+      const elapsedSinceUpdate = (now - clock.lastUpdateTime) / 1000
+      const newTime = Math.max(0, clock.timeInSeconds - elapsedSinceUpdate)
+      setCurrentTime(newTime)
+    }, 100) // Update every 100ms for smooth countdown
+
+    return () => clearInterval(interval)
+  }, [clock])
+
+  // Update current time when clock prop changes (new move received)
+  useEffect(() => {
+    if (clock) {
+      setCurrentTime(clock.timeInSeconds)
+    }
+  }, [clock?.timeInSeconds, clock?.lastUpdateTime])
+
+  // Format time as MM:SS
+  const formatTime = (seconds: number): string => {
+    const mins = Math.floor(seconds / 60)
+    const secs = Math.floor(seconds % 60)
+    return `${mins}:${secs.toString().padStart(2, '0')}`
+  }
+
   return (
     <div className="flex h-10 w-full items-center justify-between bg-background-1 px-4">
       <div className="flex items-center gap-1.5">
@@ -23,7 +63,16 @@ export const PlayerInfo: React.FC<PlayerInfoProps> = ({
           {name ?? 'Unknown'} {rating ? `(${rating})` : null}
         </p>
       </div>
-      <div className="flex items-center gap-10">
+      <div className="flex items-center gap-4">
+        {clock && (
+          <div
+            className={`font-mono text-sm font-medium ${
+              clock.isActive ? 'text-primary' : 'text-secondary'
+            } ${currentTime < 60 ? 'text-red-400' : ''}`}
+          >
+            {formatTime(currentTime)}
+          </div>
+        )}
         {showArrowLegend && (
           <div className="flex flex-col items-start">
             <div className="flex items-center gap-0.5">

src/hooks/useLichessStreamController.ts

@@ -14,9 +14,17 @@ export interface StreamState {
   gameStarted: boolean
 }
 
+export interface ClockState {
+  whiteTime: number // seconds
+  blackTime: number // seconds
+  activeColor: 'white' | 'black' | null
+  lastUpdateTime: number // timestamp when clocks were last updated
+}
+
 export interface LichessStreamController {
   game: AnalyzedGame | null
   streamState: StreamState
+  clockState: ClockState
   startStream: (gameId: string) => void
   stopStream: () => void
   reconnect: () => void
@@ -31,6 +39,12 @@ export const useLichessStreamController = (): LichessStreamController => {
     error: null,
     gameStarted: false,
   })
+  const [clockState, setClockState] = useState<ClockState>({
+    whiteTime: 0,
+    blackTime: 0,
+    activeColor: null,
+    lastUpdateTime: Date.now(),
+  })
 
   const abortController = useRef<AbortController | null>(null)
   const currentGameId = useRef<string | null>(null)
@@ -68,6 +82,14 @@ export const useLichessStreamController = (): LichessStreamController => {
     currentGameId.current = null
     streamMoves.current = []
     reconnectAttempts.current = 0
+
+    // Reset clock state
+    setClockState({
+      whiteTime: 0,
+      blackTime: 0,
+      activeColor: null,
+      lastUpdateTime: Date.now(),
+    })
   }, [clearReconnectTimeout])
 
   const handleGameStart = useCallback((gameData: any) => {
@@ -96,6 +118,20 @@ export const useLichessStreamController = (): LichessStreamController => {
     // Add move to our tracking array
     streamMoves.current.push(moveData)
 
+    // Update clock state if clock data is available
+    if (moveData.wc !== undefined && moveData.bc !== undefined) {
+      const currentFen = moveData.fen
+      // Determine whose turn it is from the FEN (w = white, b = black)
+      const activeColor = currentFen?.includes(' w ') ? 'white' : 'black'
+
+      setClockState({
+        whiteTime: moveData.wc,
+        blackTime: moveData.bc,
+        activeColor,
+        lastUpdateTime: Date.now(),
+      })
+    }
+
     // Update the game state with the new move
     setGame((currentGame) => {
       // If we don't have a game yet, we need to wait for the initial game state
@@ -265,10 +301,11 @@ export const useLichessStreamController = (): LichessStreamController => {
     () => ({
       game,
       streamState,
+      clockState,
       startStream,
       stopStream,
       reconnect,
     }),
-    [game, streamState], // Only depend on actual state, not functions
+    [game, streamState, clockState], // Only depend on actual state, not functions
   )
 }

src/pages/analysis/stream/[gameId].tsx

@@ -175,6 +175,7 @@ const StreamAnalysisPage: NextPage = () => {
           <StreamAnalysis
             game={streamController.game || dummyGame}
             streamState={streamController.streamState}
+            clockState={streamController.clockState}
             onReconnect={streamController.reconnect}
             onStopStream={streamController.stopStream}
             analysisController={analysisController}