diff --git a/client/src/events.tsx b/client/src/events.tsx
index 2a8af84..89ccb75 100644
--- a/client/src/events.tsx
+++ b/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 = renderEntity(entity.type, entity.name)}>
+
+ ;
+ }
+
return renderEntity(entity.type, entity.name)}>
-
-
- }
+ secondaryAction={renderButton}
>
{name.substring(0, 1)}
diff --git a/client/src/store.ts b/client/src/store.ts
index 928d027..8930c85 100644
--- a/client/src/store.ts
+++ b/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- ;
+ detailEntity: Maybe
- ;
eventHistory: Array;
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
- ) => void;
+ setDetailEntity: (entity: Maybe
- ) => void;
setLayoutMode: (mode: LayoutMode) => void;
setReadyState: (state: ReadyState) => void;
setThemeMode: (mode: PaletteMode) => void;
diff --git a/client/src/world.tsx b/client/src/world.tsx
index 8f04961..5068fc6 100644
--- a/client/src/world.tsx
+++ b/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
- ) => void;
export type SetPlayer = (actor: Maybe) => 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
+ setDetailEntity(portal)} />
+ ;
+}
+
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) {
{room.items.map((item) => )}
+
+ {room.portals.map((portal) => )}
+
;
}