useffect on join lobby number

src/components/Game.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { useRef, useState,useEffect } from 'react';
 import PixiGame from './PixiGame.tsx';
 
 import { useElementSize } from 'usehooks-ts';
@@ -24,7 +24,18 @@ import { LOBBY_SIZE } from '../../convex/constants';
 export const SHOW_DEBUG_UI = !!import.meta.env.VITE_SHOW_DEBUG_UI;
 
 export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined) {
-  const humans = [...game.world.playersInit.values()].filter(player => player.human).length
+  const [humans, setHumans] = useState(0);
+
+  useEffect(() => {
+    const updateHumanPlayers = () => {
+      const humanCount = [...game.world.players.values()].filter(player => player.human).length;
+      setHumans(humanCount);
+    };
+
+    // Update the count of human players when the component mounts and when game.world.players changes
+    updateHumanPlayers();
+  }, [game.world.players]);
+
   switch (game.world.gameCycle.cycleState) {
     case 'Day':
       return {