test

src/components/Game.tsx

@@ -1,7 +1,4 @@
-import { useRef, useState } from 'react';
-import PixiGame from './PixiGame.tsx';
-
-import { useElementSize } from 'usehooks-ts';
+import React, { useRef, useState, useEffect } from 'react';
 import { Stage } from '@pixi/react';
 import { ConvexProvider, useConvex, useQuery } from 'convex/react';
 import PlayerDetails from './PlayerDetails.tsx';
@@ -20,21 +17,24 @@ import { createPortal } from 'react-dom';
 import GameVote from './GameVote.tsx';
 import { EndGame } from './EndGame.tsx';
 import { LOBBY_SIZE } from '../../convex/constants';
+import { useElementSize } from 'usehooks-ts';
 
 export const SHOW_DEBUG_UI = !!import.meta.env.VITE_SHOW_DEBUG_UI;
 
-export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined) {
+function GameStateLabel({ game, me }) {
   const [humans, setHumans] = useState(0);
 
   useEffect(() => {
     const updateHumanPlayers = () => {
-      const humanCount = [...game.world.playersInit.values()].filter(player => player.human).length;
+      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.playersInit]);
+  }, [game.world.players]);
+
+  console.log('Human player seen by lobby', game.world.players.values());
 
   switch (game.world.gameCycle.cycleState) {
     case 'Day':
@@ -45,7 +45,7 @@ export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined)
     case 'WerewolfVoting':
       return {
         label: 'Werewolf Vote',
-        desc: 'Select a player who is a warewolf',
+        desc: 'Select a player who is a werewolf',
       };
     case 'PlayerKillVoting':
       return {
@@ -55,31 +55,32 @@ export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined)
     case 'LobbyState':
       return {
         label: 'Lobby (waiting for start)',
-        desc: `Waiting  the game to start. ${ humans } out of the  ${ LOBBY_SIZE } requiered  `,
+        desc: `Waiting for the game to start. ${humans} out of the ${LOBBY_SIZE} required`,
       };
     case 'Night':
       return {
         label: 'Night',
-        desc: me?.type === 'werewolf' ? 'Discuss who to kill with other warewolves' : 'Hide in your home!!',
+        desc: me?.type === 'werewolf' ? 'Discuss who to kill with other werewolves' : 'Hide in your home!!',
       };
     case 'EndGame':
       return {
         label: 'The End',
-        desc: `Winners are ${ game.world.winner }!`,
+        desc: `Winners are ${game.world.winner}!`,
       };
+    default:
+      return null;
   }
 }
 
-export function canVote(game: ServerGame, me: PlayerDescription | undefined) {
+export function canVote(game, me) {
   return me && (game.world.gameCycle.cycleState === "WerewolfVoting" || (game.world.gameCycle.cycleState === "PlayerKillVoting" && me.type === "werewolf"));
 }
 
-export function isEndGame(game: ServerGame) {
+export function isEndGame(game) {
   return game.world.gameCycle.cycleState === "EndGame";
 }
 
-function showMap(gameCycle: GameCycle, me: PlayerDescription | undefined) {
-  // Here also check for player description
+function showMap(gameCycle, me) {
   return (gameCycle.cycleState === "Day" || gameCycle.cycleState === "WerewolfVoting") || me?.type === "werewolf";
 }
 
@@ -95,8 +96,7 @@ export default function Game() {
   const engineId = worldStatus?.engineId;
   const oauth = JSON.parse(localStorage.getItem('oauth'));
   const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
-  const humanTokenIdentifier =  useQuery(api.world.userStatus, { worldId, oauthToken });  
-
+  const humanTokenIdentifier = useQuery(api.world.userStatus, { worldId, oauthToken });
 
   const game = useServerGame(worldId);
 
@@ -108,24 +108,26 @@ export default function Game() {
 
   const scrollViewRef = useRef<HTMLDivElement>(null);
 
-  if (!worldId || !engineId || !game ) {
+  if (!worldId || !engineId || !game) {
     return null;
   }
-  //console.log(humanTokenIdentifier)
-  //console.log("game.world.players.values() :",game.world.players.values())
+
   const playerId = [...game.world.players.values()].find(
     (p) => !!p && p.human === humanTokenIdentifier,
   )?.id;
-  console.log("playerId",playerId)
+  console.log("playerId", playerId);
 
   const meDescription = playerId ? game?.playerDescriptions.get(playerId) : undefined;
+  
+  const gameStateLabel = GameStateLabel({ game: game as GameObj, me: meDescription });
+
   return (
     <>
       {SHOW_DEBUG_UI && <DebugTimeManager timeManager={timeManager} width={200} height={100} />}
       <div className="mx-auto w-full max-w grid grid-rows-[240px_1fr] lg:grid-rows-[1fr] lg:grid-cols-[1fr_auto] lg:grow max-w-[1400px] min-h-[480px] game-frame">
         {/* Game area */}
         <div className="relative overflow-hidden bg-brown-900" ref={gameWrapperRef}>
-          <div className={`absolute inset-0 ${showMap(game.world.gameCycle, meDescription) ? '' : 'invisible' }`}>
+          <div className={`absolute inset-0 ${showMap(game.world.gameCycle, meDescription) ? '' : 'invisible'}`}>
             <div className="container">
               <Stage width={width} height={height} options={{ backgroundColor: 0x7ab5ff }}>
                 {/* Re-propagate context because contexts are not shared between renderers.
@@ -144,21 +146,21 @@ https://github.com/michalochman/react-pixi-fiber/issues/145#issuecomment-5315492
               </Stage>
             </div>
           </div>
-          <div className={`absolute inset-0 ${!showMap(game.world.gameCycle, meDescription) ? '' : 'invisible' }`}>
+          <div className={`absolute inset-0 ${!showMap(game.world.gameCycle, meDescription) ? '' : 'invisible'}`}>
             <Cloud worldId={worldId} />
           </div>
         </div>
         {/* Right column area */}
         <div
-          className="flex flex-col overflow-y-auto shrink-0 px-4 py-6 sm:px-6 lg:w-96 xl:pr-6 border-t-8 sm:border-t-0 sm:border-l-8 border-brown-900  bg-brown-800 text-brown-100"
+          className="flex flex-col overflow-y-auto shrink-0 px-4 py-6 sm:px-6 lg:w-96 xl:pr-6 border-t-8 sm:border-t-0 sm:border-l-8 border-brown-900 bg-brown-800 text-brown-100"
           ref={scrollViewRef}
         >
           <div className="flex flex-col items-center mb-4 gap-4">
-            <h2 className="text-2xl font-bold">{GameStateLabel(game as GameObj, meDescription).label}</h2>
-            <p className="text-lg text-center">{GameStateLabel(game as GameObj, meDescription).desc}</p>
+            <h2 className="text-2xl font-bold">{gameStateLabel.label}</h2>
+            <p className="text-lg text-center">{gameStateLabel.desc}</p>
           </div>
           {playerId && !isEndGame(game) && canVote(game, meDescription) && <GameVote engineId={engineId} game={game} playerId={playerId} />}
-          {!isEndGame(game) && !canVote(game, meDescription) && playerId &&<PlayerDetails
+          {!isEndGame(game) && !canVote(game, meDescription) && playerId && <PlayerDetails
             worldId={worldId}
             engineId={engineId}
             game={game}
@@ -171,10 +173,10 @@ https://github.com/michalochman/react-pixi-fiber/issues/145#issuecomment-5315492
         </div>
       </div>
       {createPortal(
-          <div className="max-w-[1400px] mx-auto">
-        {playerId && <VotingPopover engineId={engineId} game={game} playerId={playerId} />}
-          </div>,
-          document.getElementById('footer-buttons')
+        <div className="max-w-[1400px] mx-auto">
+          {playerId && <VotingPopover engineId={engineId} game={game} playerId={playerId} />}
+        </div>,
+        document.getElementById('footer-buttons')
       )}
     </>
   );