Merge pull request #136 from CSSLab/copilot/fix-135

Fix GameClock to display Maia strength level (e.g., "Maia 1100")

Author: ashtonanderson

src/components/Board/GameClock.tsx

@@ -13,14 +13,13 @@ export const GameClock: React.FC<Props> = (
   props: React.PropsWithChildren<Props>,
 ) => {
   const { user } = useContext(AuthContext)
-  const { player, toPlay, whiteClock, blackClock, lastMoveTime } = useContext(
-    PlayControllerContext,
-  )
+  const { player, toPlay, whiteClock, blackClock, lastMoveTime, maiaVersion } =
+    useContext(PlayControllerContext)
 
   const [referenceTime, setReferenceTime] = useState<number>(Date.now())
 
-  const playerClock = props.player == 'white' ? whiteClock : blackClock
-  const active = toPlay == props.player
+  const playerClock = props.player === 'white' ? whiteClock : blackClock
+  const active = toPlay === props.player
 
   const clock = Math.max(
     active && lastMoveTime > 0
@@ -29,6 +28,11 @@ export const GameClock: React.FC<Props> = (
     0,
   )
 
+  // Convert maiaVersion (e.g., "maia_kdd_1100") to display name (e.g., "Maia 1100")
+  const getMaiaDisplayName = (version: string): string => {
+    return version.replace('maia_kdd_', 'Maia ')
+  }
+
   useEffect(() => {
     setReferenceTime(Date.now())
 
@@ -51,8 +55,10 @@ export const GameClock: React.FC<Props> = (
       className={`flex items-center justify-between bg-background-1 md:items-start md:justify-start ${active ? 'opacity-100' : 'opacity-50'} flex-row md:flex-col`}
     >
       <div className="px-4 py-2">
-        {props.player == 'black' ? '●' : '○'}{' '}
-        {player == props.player ? user?.displayName : 'Maia'}
+        {props.player === 'black' ? '●' : '○'}{' '}
+        {player === props.player
+          ? user?.displayName
+          : getMaiaDisplayName(maiaVersion)}
       </div>
       <div className="inline-flex self-start px-4 py-2 md:text-3xl">
         {minutes}:{('00' + seconds).slice(-2)}