add vertical layout
This commit is contained in:
parent
95c17c65d9
commit
ea5ac0cd10
|
@ -31,6 +31,7 @@ export interface AppProps {
|
|||
|
||||
export function appStateSelector(s: StoreState) {
|
||||
return {
|
||||
layoutMode: s.layoutMode,
|
||||
themeMode: s.themeMode,
|
||||
setReadyState: s.setReadyState,
|
||||
};
|
||||
|
@ -38,12 +39,11 @@ export function appStateSelector(s: StoreState) {
|
|||
|
||||
export function App(props: AppProps) {
|
||||
const state = useStore(store, appStateSelector);
|
||||
const { themeMode, setReadyState } = state;
|
||||
const { layoutMode, themeMode, setReadyState } = state;
|
||||
|
||||
// socket stuff
|
||||
const { lastMessage, readyState, sendMessage } = useWebSocket(props.socketUrl);
|
||||
|
||||
// socket senders
|
||||
function renderEntity(type: string, entity: string) {
|
||||
sendMessage(JSON.stringify({ type: 'render', [type]: entity }));
|
||||
}
|
||||
|
@ -120,6 +120,24 @@ export function App(props: AppProps) {
|
|||
setReadyState(readyState);
|
||||
}, [readyState]);
|
||||
|
||||
function innerLayout(a: React.JSX.Element, b: React.JSX.Element) {
|
||||
switch (layoutMode) {
|
||||
case 'horizontal':
|
||||
return <Allotment className='body-allotment'>{a}{b}</Allotment>;
|
||||
case 'vertical':
|
||||
default:
|
||||
return <Stack direction='column'>{a}{b}</Stack>;
|
||||
}
|
||||
}
|
||||
|
||||
const layoutWidths = {
|
||||
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||||
horizontal: [400, 600],
|
||||
// eslint-disable-next-line @typescript-eslint/no-magic-numbers
|
||||
vertical: [1000, 1000],
|
||||
};
|
||||
const [leftWidth, rightWidth] = layoutWidths[layoutMode];
|
||||
|
||||
return <ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<DetailDialog renderEntity={renderEntity} />
|
||||
|
@ -127,15 +145,15 @@ export function App(props: AppProps) {
|
|||
<Stack direction="column">
|
||||
<Statusbar setName={setName} />
|
||||
<Stack direction="row" spacing={2}>
|
||||
<Allotment className='body-allotment'>
|
||||
<Stack direction="column" spacing={2} sx={{ minWidth: 400 }} className="scroll-history">
|
||||
{innerLayout(
|
||||
<Stack direction="column" spacing={2} sx={{ minWidth: leftWidth }} className="scroll-history">
|
||||
<PlayerPanel sendInput={sendInput} />
|
||||
<WorldPanel setPlayer={setPlayer} />
|
||||
</Stack>
|
||||
<Stack direction="column" sx={{ minWidth: 600 }} className="scroll-history">
|
||||
</Stack>,
|
||||
<Stack direction="column" sx={{ minWidth: rightWidth }} className="scroll-history">
|
||||
<HistoryPanel renderEntity={renderEntity} renderEvent={renderEvent} />
|
||||
</Stack>
|
||||
</Allotment>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Container>
|
||||
|
|
|
@ -105,7 +105,7 @@ export function worldGraph(world: World): string {
|
|||
}
|
||||
|
||||
export function roomGraph(room: Room): Array<string> {
|
||||
return Object.entries(room.portals).map(([direction, destination]) =>
|
||||
`"${room.name}" -> "${destination}" [label="${direction}"]`
|
||||
return room.portals.map((portal) =>
|
||||
`"${room.name}" -> "${portal.destination}" [label="${portal.name}"]`
|
||||
);
|
||||
}
|
||||
|
|
|
@ -12,13 +12,20 @@ export interface Actor {
|
|||
items: Array<Item>;
|
||||
}
|
||||
|
||||
export interface Portal {
|
||||
type: 'portal';
|
||||
name: string;
|
||||
description: string;
|
||||
destination: string;
|
||||
}
|
||||
|
||||
export interface Room {
|
||||
type: 'room';
|
||||
name: string;
|
||||
description: string;
|
||||
portals: Record<string, string>;
|
||||
actors: Array<Actor>;
|
||||
items: Array<Item>;
|
||||
portals: Array<Portal>;
|
||||
}
|
||||
|
||||
export interface World {
|
||||
|
|
|
@ -38,10 +38,12 @@ export function statusbarStateSelector(s: StoreState) {
|
|||
return {
|
||||
autoScroll: s.autoScroll,
|
||||
clientName: s.clientName,
|
||||
layoutMode: s.layoutMode,
|
||||
readyState: s.readyState,
|
||||
themeMode: s.themeMode,
|
||||
setAutoScroll: s.setAutoScroll,
|
||||
setClientName: s.setClientName,
|
||||
setLayoutMode: s.setLayoutMode,
|
||||
setThemeMode: s.setThemeMode,
|
||||
eventHistory: s.eventHistory,
|
||||
};
|
||||
|
@ -54,7 +56,7 @@ export interface StatusbarProps {
|
|||
export function Statusbar(props: StatusbarProps) {
|
||||
const { setName } = props;
|
||||
const state = useStore(store, statusbarStateSelector);
|
||||
const { autoScroll, clientName, readyState, themeMode, setAutoScroll, setClientName, setThemeMode, eventHistory } = state;
|
||||
const { autoScroll, clientName, layoutMode, readyState, themeMode, setAutoScroll, setClientName, setLayoutMode, setThemeMode, eventHistory } = state;
|
||||
|
||||
const connectionStatus = statusStrings[readyState as ReadyState];
|
||||
|
||||
|
@ -76,6 +78,12 @@ export function Statusbar(props: StatusbarProps) {
|
|||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
sx={{ marginLeft: 'auto' }}
|
||||
/>} label="Auto Scroll" />
|
||||
<FormControlLabel control={<Switch
|
||||
checked={layoutMode === 'vertical'}
|
||||
onChange={() => setLayoutMode(layoutMode === 'vertical' ? 'horizontal' : 'vertical')}
|
||||
inputProps={{ 'aria-label': 'controlled' }}
|
||||
sx={{ marginLeft: 'auto' }}
|
||||
/>} label="Vertical Layout" />
|
||||
</FormGroup>
|
||||
<FormGroup row>
|
||||
<TextField
|
||||
|
|
|
@ -6,12 +6,15 @@ import { PaletteMode } from '@mui/material';
|
|||
import { ReadyState } from 'react-use-websocket';
|
||||
import { Actor, GameEvent, Item, Room, World } from './models';
|
||||
|
||||
export type LayoutMode = 'horizontal' | 'vertical';
|
||||
|
||||
export interface ClientState {
|
||||
autoScroll: boolean;
|
||||
clientId: string;
|
||||
clientName: string;
|
||||
detailEntity: Maybe<Item | Actor | Room | World>;
|
||||
eventHistory: Array<GameEvent>;
|
||||
layoutMode: LayoutMode;
|
||||
readyState: ReadyState;
|
||||
themeMode: PaletteMode;
|
||||
|
||||
|
@ -20,6 +23,7 @@ export interface ClientState {
|
|||
setClientId: (clientId: string) => void;
|
||||
setClientName: (name: string) => void;
|
||||
setDetailEntity: (entity: Maybe<Item | Actor | Room | World>) => void;
|
||||
setLayoutMode: (mode: LayoutMode) => void;
|
||||
setReadyState: (state: ReadyState) => void;
|
||||
setThemeMode: (mode: PaletteMode) => void;
|
||||
|
||||
|
@ -59,6 +63,7 @@ export function createClientStore(): StateCreator<ClientState> {
|
|||
clientName: '',
|
||||
detailEntity: undefined,
|
||||
eventHistory: [],
|
||||
layoutMode: 'horizontal',
|
||||
readyState: ReadyState.UNINSTANTIATED,
|
||||
themeMode: 'light',
|
||||
setAutoScroll(autoScroll) {
|
||||
|
@ -73,6 +78,9 @@ export function createClientStore(): StateCreator<ClientState> {
|
|||
setDetailEntity(detailEntity) {
|
||||
set({ detailEntity });
|
||||
},
|
||||
setLayoutMode(mode) {
|
||||
set({ layoutMode: mode });
|
||||
},
|
||||
setReadyState(state) {
|
||||
set({ readyState: state });
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue