add vertical layout

client/src/app.tsx

@@ -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'>
+          {innerLayout(
-            <Stack direction="column" spacing={2} sx={{ minWidth: 400 }} className="scroll-history">
+            <Stack direction="column" spacing={2} sx={{ minWidth: leftWidth }} className="scroll-history">
               <PlayerPanel sendInput={sendInput} />
               <WorldPanel setPlayer={setPlayer} />
-            </Stack>
+            </Stack>,
-            <Stack direction="column" sx={{ minWidth: 600 }} className="scroll-history">
+            <Stack direction="column" sx={{ minWidth: rightWidth }} className="scroll-history">
               <HistoryPanel renderEntity={renderEntity} renderEvent={renderEvent} />
             </Stack>
-          </Allotment>
+          )}
         </Stack>
       </Stack>
     </Container>

client/src/details.tsx

@@ -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]) =>
+  return room.portals.map((portal) =>
-    `"${room.name}" -> "${destination}" [label="${direction}"]`
+    `"${room.name}" -> "${portal.destination}" [label="${portal.name}"]`
   );
 }

client/src/models.ts

@@ -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 {

client/src/status.tsx

@@ -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

client/src/store.ts

@@ -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 });
     },