show portals in world tree, only show render icon for some generation events
This commit is contained in:
parent
2bb842a559
commit
ce4d60bfcd
|
@ -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={
|
||||
<IconButton edge="end" aria-label="render" onClick={() => renderEntity(entity.type, entity.name)}>
|
||||
<Camera />
|
||||
</IconButton>
|
||||
}
|
||||
secondaryAction={renderButton}
|
||||
>
|
||||
<ListItemAvatar>
|
||||
<Avatar>{name.substring(0, 1)}</Avatar>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue