revert

src/components/Game.tsx

@@ -1,4 +1,7 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { useRef, useState } from 'react';
+import PixiGame from './PixiGame.tsx';
+
+import { useElementSize } from 'usehooks-ts';
 import { Stage } from '@pixi/react';
 import { ConvexProvider, useConvex, useQuery } from 'convex/react';
 import PlayerDetails from './PlayerDetails.tsx';
@@ -17,25 +20,12 @@ 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;
 
-function GameStateLabel({ game, me }) {
-  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]);
-
-  console.log('Human player seen by lobby', game.world.players.values());
-
+export function GameStateLabel(game: GameObj, me: PlayerDescription | undefined) {
+  const humans = [...game.world.playersInit.values()].filter(player => player.human).length
+  console.log(humans)
   switch (game.world.gameCycle.cycleState) {
     case 'Day':
       return {
@@ -45,7 +35,7 @@ function GameStateLabel({ game, me }) {
     case 'WerewolfVoting':
       return {
         label: 'Werewolf Vote',
-        desc: 'Select a player who is a werewolf',
+        desc: 'Select a player who is a warewolf',
       };
     case 'PlayerKillVoting':
       return {
@@ -55,32 +45,31 @@ function GameStateLabel({ game, me }) {
     case 'LobbyState':
       return {
         label: 'Lobby (waiting for start)',
-        desc: `Waiting for the game to start. ${humans} out of the ${LOBBY_SIZE} required`,
+        desc: `Waiting  the game to start. ${ humans } out of the  ${ LOBBY_SIZE } requiered  `,
       };
     case 'Night':
       return {
         label: 'Night',
-        desc: me?.type === 'werewolf' ? 'Discuss who to kill with other werewolves' : 'Hide in your home!!',
+        desc: me?.type === 'werewolf' ? 'Discuss who to kill with other warewolves' : '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, me) {
+export function canVote(game: ServerGame, me: PlayerDescription | undefined) {
   return me && (game.world.gameCycle.cycleState === "WerewolfVoting" || (game.world.gameCycle.cycleState === "PlayerKillVoting" && me.type === "werewolf"));
 }
 
-export function isEndGame(game) {
+export function isEndGame(game: ServerGame) {
   return game.world.gameCycle.cycleState === "EndGame";
 }
 
-function showMap(gameCycle, me) {
+function showMap(gameCycle: GameCycle, me: PlayerDescription | undefined) {
+  // Here also check for player description
   return (gameCycle.cycleState === "Day" || gameCycle.cycleState === "WerewolfVoting") || me?.type === "werewolf";
 }
 
@@ -96,7 +85,8 @@ 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,26 +98,24 @@ 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.
@@ -146,21 +134,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.label}</h2>
-            <p className="text-lg text-center">{gameStateLabel.desc}</p>
+            <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>
           </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}
@@ -173,10 +161,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')
       )}
     </>
   );