pray

src/components/Game.tsx

@@ -144,13 +144,14 @@ https://github.com/michalochman/react-pixi-fiber/issues/145#issuecomment-5315492
             <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) && <PlayerDetails
+          {!isEndGame(game) && !canVote(game, meDescription) && playerId &&<PlayerDetails
             worldId={worldId}
             engineId={engineId}
             game={game}
             playerId={selectedElement?.id}
             setSelectedElement={setSelectedElement}
             scrollViewRef={scrollViewRef}
+            currentPlayerId={playerId}
           />}
           {playerId && isEndGame(game) && <EndGame game={game} playerId={playerId} />}
         </div>

src/components/PlayerDetails.tsx

@@ -14,9 +14,10 @@ export default function PlayerDetails({
   worldId,
   engineId,
   game,
-  playerId,
+  playerId: SelectedPlayerId,
   setSelectedElement,
   scrollViewRef,
+  currentPlayerId,
 }: {
   worldId: Id<'worlds'>;
   engineId: Id<'engines'>;
@@ -24,12 +25,12 @@ export default function PlayerDetails({
   playerId?: GameId<'players'>;
   setSelectedElement: SelectElement;
   scrollViewRef: React.RefObject<HTMLDivElement>;
+  currentPlayerId:GameId<'players'>;
 }) {
   const oauth = JSON.parse(localStorage.getItem('oauth'));
   const oauthToken = oauth ? oauth.userInfo.fullname : undefined;
   const humanTokenIdentifier = useQuery(api.world.userStatus, { worldId, oauthToken });  
 
-  const players = [...game.world.players.values()];
   const humanPlayer = [...game.world.players.values()].find(
     (p) => game.playerDescriptions.get(p.id)?.name === humanTokenIdentifier,
   );
@@ -39,25 +40,25 @@ export default function PlayerDetails({
     const otherPlayerIds = [...humanConversation.participants.keys()].filter(
       (p) => !!p && p !== humanPlayer.id,
     );
-    playerId = otherPlayerIds[0];
+    SelectedPlayerId = otherPlayerIds[0];
   }
 
-  const player = playerId && game.world.players.get(playerId);
+  const player = SelectedPlayerId && game.world.players.get(SelectedPlayerId);
   const playerConversation = player && game.world.playerConversation(player);
 
   const previousConversation = useQuery(
     api.world.previousConversation,
-    playerId ? { worldId, playerId } : 'skip',
+    SelectedPlayerId ? { worldId, playerId: SelectedPlayerId } : 'skip',
   );
 
-  const playerDescription = playerId && game.playerDescriptions.get(playerId);
+  const playerDescription = SelectedPlayerId && game.playerDescriptions.get(SelectedPlayerId);
 
   const startConversation = useSendInput(engineId, 'startConversation');
   const acceptInvite = useSendInput(engineId, 'acceptInvite');
   const rejectInvite = useSendInput(engineId, 'rejectInvite');
   const leaveConversation = useSendInput(engineId, 'leaveConversation');
 
-  if (!playerId) {
+  if (!SelectedPlayerId) {
     return (
       <div className="h-full text-xl flex text-center items-center p-4">
         Click on an agent on the map to see chat history.
@@ -67,7 +68,7 @@ export default function PlayerDetails({
   if (!player) {
     return null;
   }
-  const isMe = humanPlayer && player.id === humanPlayer.id;
+  const isMe = humanPlayer && SelectedPlayerId === currentPlayerId;
   const canInvite = !isMe && !playerConversation && humanPlayer && !humanConversation;
   const sameConversation =
     !isMe &&
@@ -78,10 +79,10 @@ export default function PlayerDetails({
   
   const humanStatus =
     humanPlayer && humanConversation && humanConversation.participants.get(humanPlayer.id)?.status;
-  const playerStatus = playerConversation && playerConversation.participants.get(playerId)?.status;
+  const playerStatus = playerConversation && playerConversation.participants.get(SelectedPlayerId)?.status;
   const haveInvite = sameConversation && humanStatus?.kind === 'invited';
   const waitingForAccept =
-    sameConversation && playerConversation.participants.get(playerId)?.status.kind === 'invited';
+    sameConversation && playerConversation.participants.get(SelectedPlayerId)?.status.kind === 'invited';
   const waitingForNearby =
     sameConversation && playerStatus?.kind === 'walkingOver' && humanStatus?.kind === 'walkingOver';
 
@@ -91,14 +92,14 @@ export default function PlayerDetails({
     humanStatus?.kind === 'participating';
 
   const onStartConversation = async () => {
-    if (!humanPlayer || !playerId) {
+    if (!humanPlayer || !SelectedPlayerId) {
       return;
     }
     console.log(`Starting conversation`);
-    await toastOnError(startConversation({ playerId: humanPlayer.id, invitee: playerId }));
+    await toastOnError(startConversation({ playerId: humanPlayer.id, invitee: SelectedPlayerId }));
   };
   const onAcceptInvite = async () => {
-    if (!humanPlayer || !humanConversation || !playerId) {
+    if (!humanPlayer || !humanConversation || !SelectedPlayerId) {
       return;
     }
     await toastOnError(