From 95c17c65d9057cdad8a9e11599df00dd04b715a8 Mon Sep 17 00:00:00 2001
From: Sean Sube <seansube@gmail.com>
Date: Sat, 18 May 2024 17:48:40 -0500
Subject: [PATCH] fix player buttons

---
 client/src/app.tsx   |  2 +-
 client/src/world.tsx | 30 +++++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/client/src/app.tsx b/client/src/app.tsx
index 4151506..ecc31c6 100644
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -88,7 +88,7 @@ export function App(props: AppProps) {
       switch (event.type) {
         case 'id':
           // unicast the client id to the player, do not append to history
-          setClientId(event.id);
+          setClientId(event.client);
           return;
         case 'prompt':
           // prompts are broadcast to all players
diff --git a/client/src/world.tsx b/client/src/world.tsx
index 4fb799a..8f04961 100644
--- a/client/src/world.tsx
+++ b/client/src/world.tsx
@@ -30,6 +30,14 @@ export function itemStateSelector(s: StoreState) {
   };
 }
 
+export function actorStateSelector(s: StoreState) {
+  return {
+    character: s.character,
+    players: s.players,
+    setDetailEntity: s.setDetailEntity,
+  };
+}
+
 export function worldStateSelector(s: StoreState) {
   return {
     world: s.world,
@@ -49,16 +57,24 @@ export function ItemItem(props: { item: Item } & BaseEntityItemProps) {
 
 export function ActorItem(props: { actor: Actor } & BaseEntityItemProps) {
   const { actor, setPlayer } = props;
-  const state = useStore(store, itemStateSelector);
-  const { character, setDetailEntity } = state;
+  const state = useStore(store, actorStateSelector);
+  const { character, players, setDetailEntity } = state;
 
-  // TODO: include other players
-  const active = doesExist(character) && actor.name === character.name;
-  const label = formatLabel(actor.name, active);
+  const activeSelf = doesExist(character) && actor.name === character.name;
+  const activeOther = Object.values(players).some((it) => it === actor.name); // TODO: are these the keys or the values?
+  const label = formatLabel(actor.name, activeSelf);
 
   let playButton;
-  if (active === false) {
-    playButton = <TreeItem itemId={`${actor.name}-play`} label="Play!" onClick={() => setPlayer(actor)} />;
+  if (activeSelf) {
+    playButton = <TreeItem itemId={`${actor.name}-stop`} label="Stop playing" onClick={() => setPlayer(undefined)} />;
+  } else {
+    if (activeOther) {
+      // eslint-disable-next-line no-restricted-syntax
+      const player = Object.entries(players).find((it) => it[1] === actor.name)?.[0];
+      playButton = <TreeItem itemId={`${actor.name}-taken`} label={`Played by ${player}`} />;
+    } else {
+      playButton = <TreeItem itemId={`${actor.name}-play`} label="Play!" onClick={() => setPlayer(actor)} />;
+    }
   }
 
   return <TreeItem itemId={actor.name} label={label}>