fix player buttons

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

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,17 +57,25 @@ export function ItemItem(props: { item: Item } & BaseEntityItemProps) {
 
 export function ActorItem(props: { actor: Actor } & BaseEntityItemProps) {
   const { actor, setPlayer } = props;
-  const state = useStore(store, itemStateSelector);
+  const state = useStore(store, actorStateSelector);
-  const { character, setDetailEntity } = state;
+  const { character, players, setDetailEntity } = state;
 
-  // TODO: include other players
+  const activeSelf = doesExist(character) && actor.name === character.name;
-  const active = 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, active);
+  const label = formatLabel(actor.name, activeSelf);
 
   let playButton;
-  if (active === false) {
+  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}>
     {playButton}