diff --git a/client/src/app.tsx b/client/src/app.tsx
index ecc31c6..368376b 100644
--- a/client/src/app.tsx
+++ b/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 {a}{b};
+ case 'vertical':
+ default:
+ return {a}{b};
+ }
+ }
+
+ 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
@@ -127,15 +145,15 @@ export function App(props: AppProps) {
-
-
+ {innerLayout(
+
-
-
+ ,
+
-
+ )}
diff --git a/client/src/details.tsx b/client/src/details.tsx
index 523f027..539d7e1 100644
--- a/client/src/details.tsx
+++ b/client/src/details.tsx
@@ -105,7 +105,7 @@ export function worldGraph(world: World): string {
}
export function roomGraph(room: Room): Array {
- 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}"]`
);
}
diff --git a/client/src/models.ts b/client/src/models.ts
index 6b9aa05..1385bbf 100644
--- a/client/src/models.ts
+++ b/client/src/models.ts
@@ -12,13 +12,20 @@ export interface Actor {
items: Array- ;
}
+export interface Portal {
+ type: 'portal';
+ name: string;
+ description: string;
+ destination: string;
+}
+
export interface Room {
type: 'room';
name: string;
description: string;
- portals: Record;
actors: Array;
items: Array
- ;
+ portals: Array;
}
export interface World {
diff --git a/client/src/status.tsx b/client/src/status.tsx
index f61660c..7f25c81 100644
--- a/client/src/status.tsx
+++ b/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" />
+ setLayoutMode(layoutMode === 'vertical' ? 'horizontal' : 'vertical')}
+ inputProps={{ 'aria-label': 'controlled' }}
+ sx={{ marginLeft: 'auto' }}
+ />} label="Vertical Layout" />
;
eventHistory: Array;
+ layoutMode: LayoutMode;
readyState: ReadyState;
themeMode: PaletteMode;
@@ -20,6 +23,7 @@ export interface ClientState {
setClientId: (clientId: string) => void;
setClientName: (name: string) => void;
setDetailEntity: (entity: Maybe
- ) => void;
+ setLayoutMode: (mode: LayoutMode) => void;
setReadyState: (state: ReadyState) => void;
setThemeMode: (mode: PaletteMode) => void;
@@ -59,6 +63,7 @@ export function createClientStore(): StateCreator {
clientName: '',
detailEntity: undefined,
eventHistory: [],
+ layoutMode: 'horizontal',
readyState: ReadyState.UNINSTANTIATED,
themeMode: 'light',
setAutoScroll(autoScroll) {
@@ -73,6 +78,9 @@ export function createClientStore(): StateCreator {
setDetailEntity(detailEntity) {
set({ detailEntity });
},
+ setLayoutMode(mode) {
+ set({ layoutMode: mode });
+ },
setReadyState(state) {
set({ readyState: state });
},