show portals in world tree, only show render icon for some generation events

client/src/events.tsx

@@ -241,14 +241,17 @@ export function GenerateEventItem(props: EventItemProps) {
   const { event, renderEntity } = props;
   const { entity, name } = event;
 
+  let renderButton;
+  if (doesExist(entity)) {
+    renderButton = <IconButton edge="end" aria-label="render" onClick={() => renderEntity(entity.type, entity.name)}>
+      <Camera />
+    </IconButton>;
+  }
+
   return <ListItem
     alignItems="flex-start"
     ref={props.focusRef}
-    secondaryAction={
+    secondaryAction={renderButton}
-      <IconButton edge="end" aria-label="render" onClick={() => renderEntity(entity.type, entity.name)}>
-        <Camera />
-      </IconButton>
-    }
   >
     <ListItemAvatar>
       <Avatar>{name.substring(0, 1)}</Avatar>

client/src/store.ts

@@ -4,7 +4,7 @@ import { createStore, StateCreator } from 'zustand';
 import { doesExist, Maybe } from '@apextoaster/js-utils';
 import { PaletteMode } from '@mui/material';
 import { ReadyState } from 'react-use-websocket';
-import { Actor, GameEvent, Item, Room, World } from './models';
+import { Actor, GameEvent, Item, Portal, Room, World } from './models';
 
 export type LayoutMode = 'horizontal' | 'vertical';
 
@@ -12,7 +12,7 @@ export interface ClientState {
   autoScroll: boolean;
   clientId: string;
   clientName: string;
-  detailEntity: Maybe<Item | Actor | Room | World>;
+  detailEntity: Maybe<Item | Actor | Portal | Room | World>;
   eventHistory: Array<GameEvent>;
   layoutMode: LayoutMode;
   readyState: ReadyState;
@@ -22,7 +22,7 @@ export interface ClientState {
   setAutoScroll: (autoScroll: boolean) => void;
   setClientId: (clientId: string) => void;
   setClientName: (name: string) => void;
-  setDetailEntity: (entity: Maybe<Item | Actor | Room | World>) => void;
+  setDetailEntity: (entity: Maybe<Item | Actor | Portal | Room | World>) => void;
   setLayoutMode: (mode: LayoutMode) => void;
   setReadyState: (state: ReadyState) => void;
   setThemeMode: (mode: PaletteMode) => void;

client/src/world.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { useStore } from 'zustand';
 import { StoreState, store } from './store';
-import { Actor, Item, Room } from './models';
+import { Actor, Item, Portal, Room } from './models';
 
 export type SetDetails = (entity: Maybe<Item | Actor | Room>) => void;
 export type SetPlayer = (actor: Maybe<Actor>) => void;
@@ -45,6 +45,16 @@ export function worldStateSelector(s: StoreState) {
   };
 }
 
+export function PortalItem(props: { portal: Portal } & BaseEntityItemProps) {
+  const { portal } = props;
+  const state = useStore(store, itemStateSelector);
+  const { setDetailEntity } = state;
+
+  return <TreeItem itemId={`${portal.name}-portal`} label={portal.name}>
+    <TreeItem itemId={`${portal.name}-details`} label="Details" onClick={() => setDetailEntity(portal)} />
+  </TreeItem>;
+}
+
 export function ItemItem(props: { item: Item } & BaseEntityItemProps) {
   const { item } = props;
   const state = useStore(store, itemStateSelector);
@@ -102,6 +112,9 @@ export function RoomItem(props: { room: Room } & BaseEntityItemProps) {
     <TreeItem itemId={`${room.name}-items`} label="Items">
       {room.items.map((item) => <ItemItem key={item.name} item={item} setPlayer={setPlayer} />)}
     </TreeItem>
+    <TreeItem itemId={`${room.name}-portals`} label="Portals">
+      {room.portals.map((portal) => <PortalItem key={portal.name} portal={portal} setPlayer={setPlayer} />)}
+    </TreeItem>
   </TreeItem>;
 }