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 { event, renderEntity } = props;
|
||||||
const { entity, name } = event;
|
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
|
return <ListItem
|
||||||
alignItems="flex-start"
|
alignItems="flex-start"
|
||||||
ref={props.focusRef}
|
ref={props.focusRef}
|
||||||
secondaryAction={
|
secondaryAction={renderButton}
|
||||||
<IconButton edge="end" aria-label="render" onClick={() => renderEntity(entity.type, entity.name)}>
|
|
||||||
<Camera />
|
|
||||||
</IconButton>
|
|
||||||
}
|
|
||||||
>
|
>
|
||||||
<ListItemAvatar>
|
<ListItemAvatar>
|
||||||
<Avatar>{name.substring(0, 1)}</Avatar>
|
<Avatar>{name.substring(0, 1)}</Avatar>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { createStore, StateCreator } from 'zustand';
|
||||||
import { doesExist, Maybe } from '@apextoaster/js-utils';
|
import { doesExist, Maybe } from '@apextoaster/js-utils';
|
||||||
import { PaletteMode } from '@mui/material';
|
import { PaletteMode } from '@mui/material';
|
||||||
import { ReadyState } from 'react-use-websocket';
|
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';
|
export type LayoutMode = 'horizontal' | 'vertical';
|
||||||
|
|
||||||
|
@ -12,7 +12,7 @@ export interface ClientState {
|
||||||
autoScroll: boolean;
|
autoScroll: boolean;
|
||||||
clientId: string;
|
clientId: string;
|
||||||
clientName: string;
|
clientName: string;
|
||||||
detailEntity: Maybe<Item | Actor | Room | World>;
|
detailEntity: Maybe<Item | Actor | Portal | Room | World>;
|
||||||
eventHistory: Array<GameEvent>;
|
eventHistory: Array<GameEvent>;
|
||||||
layoutMode: LayoutMode;
|
layoutMode: LayoutMode;
|
||||||
readyState: ReadyState;
|
readyState: ReadyState;
|
||||||
|
@ -22,7 +22,7 @@ export interface ClientState {
|
||||||
setAutoScroll: (autoScroll: boolean) => void;
|
setAutoScroll: (autoScroll: boolean) => void;
|
||||||
setClientId: (clientId: string) => void;
|
setClientId: (clientId: string) => void;
|
||||||
setClientName: (name: 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;
|
setLayoutMode: (mode: LayoutMode) => void;
|
||||||
setReadyState: (state: ReadyState) => void;
|
setReadyState: (state: ReadyState) => void;
|
||||||
setThemeMode: (mode: PaletteMode) => void;
|
setThemeMode: (mode: PaletteMode) => void;
|
||||||
|
|
|
@ -6,7 +6,7 @@ import React from 'react';
|
||||||
|
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
import { StoreState, store } from './store';
|
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 SetDetails = (entity: Maybe<Item | Actor | Room>) => void;
|
||||||
export type SetPlayer = (actor: Maybe<Actor>) => 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) {
|
export function ItemItem(props: { item: Item } & BaseEntityItemProps) {
|
||||||
const { item } = props;
|
const { item } = props;
|
||||||
const state = useStore(store, itemStateSelector);
|
const state = useStore(store, itemStateSelector);
|
||||||
|
@ -102,6 +112,9 @@ export function RoomItem(props: { room: Room } & BaseEntityItemProps) {
|
||||||
<TreeItem itemId={`${room.name}-items`} label="Items">
|
<TreeItem itemId={`${room.name}-items`} label="Items">
|
||||||
{room.items.map((item) => <ItemItem key={item.name} item={item} setPlayer={setPlayer} />)}
|
{room.items.map((item) => <ItemItem key={item.name} item={item} setPlayer={setPlayer} />)}
|
||||||
</TreeItem>
|
</TreeItem>
|
||||||
|
<TreeItem itemId={`${room.name}-portals`} label="Portals">
|
||||||
|
{room.portals.map((portal) => <PortalItem key={portal.name} portal={portal} setPlayer={setPlayer} />)}
|
||||||
|
</TreeItem>
|
||||||
</TreeItem>;
|
</TreeItem>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue