improve web client

client/src/app.tsx

@@ -1,8 +1,7 @@
-/* eslint-disable no-restricted-syntax */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef, MutableRefObject, Fragment } from 'react';
 import useWebSocketModule, { ReadyState } from 'react-use-websocket';
-import { Maybe, Optional, doesExist } from '@apextoaster/js-utils';
+import { Maybe, doesExist } from '@apextoaster/js-utils';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import Divider from '@mui/material/Divider';
@@ -16,7 +15,7 @@ import Alert from '@mui/material/Alert';
 import Switch from '@mui/material/Switch';
 import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
 import { TreeItem } from '@mui/x-tree-view/TreeItem';
-import { CssBaseline, PaletteMode, ThemeProvider, createTheme } from '@mui/material';
+import { Button, CssBaseline, Dialog, DialogContent, DialogTitle, PaletteMode, ThemeProvider, createTheme } from '@mui/material';
 
 import { formatters } from './format.js';
 
@@ -74,7 +73,7 @@ export function WorldItem(props: EventItemProps) {
 
   return <ListItem alignItems="flex-start">
     <ListItemAvatar>
-      <Avatar alt={step} src="/static/images/avatar/1.jpg" />
+      <Avatar alt={step.toString()} src="/static/images/avatar/1.jpg" />
     </ListItemAvatar>
     <ListItemText
       primary={theme}
@@ -165,32 +164,94 @@ export interface World {
   theme: string;
 }
 
-export function WorldPanel(props: { world: Maybe<World> }) {
-  const { world } = props;
+export type SetDetails = (entity: Maybe<Item | Actor | Room>) => void;
 
-  return <Stack direction="column">
+export function ItemItem(props: { item: Item; setDetails: SetDetails }) {
+  const { item, setDetails } = props;
+
+  return <TreeItem itemId={item.name} label={item.name}>
+    <TreeItem itemId={`${item.name}-details`} label="Details" onClick={() => setDetails(item)} />
+  </TreeItem>;
+}
+
+export function ActorItem(props: { actor: Actor; setDetails: SetDetails }) {
+  const { actor, setDetails } = props;
+
+  return <TreeItem itemId={actor.name} label={actor.name}>
+    <TreeItem itemId={`${actor.name}-details`} label="Details" onClick={() => setDetails(actor)} />
+    <TreeItem itemId={`${actor.name}-items`} label="Items">
+      {actor.items.map((item) => <ItemItem item={item} setDetails={setDetails} />)}
+    </TreeItem>
+  </TreeItem>;
+}
+
+export function RoomItem(props: { room: Room; setDetails: SetDetails }) {
+  const { room, setDetails } = props;
+
+  return <TreeItem itemId={room.name} label={room.name}>
+    <TreeItem itemId={`${room.name}-details`} label="Details" onClick={() => setDetails(room)} />
+    <TreeItem itemId={`${room.name}-actors`} label="Actors">
+      {room.actors.map((actor) => <ActorItem actor={actor} setDetails={setDetails} />)}
+    </TreeItem>
+    <TreeItem itemId={`${room.name}-items`} label="Items">
+      {room.items.map((item) => <ItemItem item={item} setDetails={setDetails} />)}
+    </TreeItem>
+  </TreeItem>;
+}
+
+export function WorldPanel(props: { world: Maybe<World>; setDetails: SetDetails }) {
+  const { world, setDetails } = props;
+
+  // eslint-disable-next-line no-restricted-syntax
+  if (!doesExist(world)) {
+    return <Typography variant="h4">
+      No world data available
+    </Typography>;
+  }
+
+  return <Stack direction="column" sx={{ minWidth: 600 }}>
     <Typography variant="h4">
-      World: {world?.name}
+      World: {world.name}
     </Typography>
     <Typography variant="h6">
-      Theme: {world?.theme}
+      Theme: {world.theme}
     </Typography>
     <SimpleTreeView>
-      {world?.rooms.map((room) => <TreeItem itemId={room.name} label={room.name}>
-        {room.actors.map((actor) => <TreeItem itemId={actor.name} label={actor.name}>
-          {actor.items.map((item) => <TreeItem itemId={item.name} label={item.name} />
-          )}
-        </TreeItem>
-        )}
-        {room.items.map((item) => <TreeItem itemId={item.name} label={item.name} />
-        )}
-      </TreeItem>
-      )}
+      {world.rooms.map((room) => <RoomItem room={room} setDetails={setDetails} />)}
     </SimpleTreeView>
   </Stack>;
 }
 
+export function EntityDetails(props: { entity: Maybe<Item | Actor | Room>; close: () => void }) {
+  // eslint-disable-next-line no-restricted-syntax
+  if (!doesExist(props.entity)) {
+    return <Fragment />;
+  }
+
+  return <Fragment>
+    <DialogTitle>{props.entity.name}</DialogTitle>
+    <DialogContent>
+      <Typography>
+        {props.entity.description}
+      </Typography>
+      <Button onClick={() => props.close()}>Close</Button>
+    </DialogContent>
+  </Fragment>;
+}
+
+export function DetailDialog(props: { setDetails: SetDetails; details: Maybe<Item | Actor | Room> }) {
+  const { details, setDetails } = props;
+
+  return <Dialog
+    open={doesExist(details)}
+    onClose={() => setDetails(undefined)}
+  >
+    <EntityDetails entity={details} close={() => setDetails(undefined)} />
+  </Dialog>;
+}
+
 export function App(props: AppProps) {
+  const [ detailEntity, setDetailEntity ] = useState<Maybe<Item | Actor | Room>>(undefined);
   const [ world, setWorld ] = useState<Maybe<World>>(undefined);
   const [ themeMode, setThemeMode ] = useState('light');
   const [ history, setHistory ] = useState<Array<string>>([]);
@@ -220,26 +281,29 @@ export function App(props: AppProps) {
 
   return <ThemeProvider theme={theme}>
     <CssBaseline />
-    <Container maxWidth='lg'>
-      <Stack direction="row">
-        <WorldPanel world={world} />
-        <Stack direction="column">
-          <Alert icon={false} severity="success">
-            <Stack direction="row" alignItems="center" gap={4}>
-              <Typography>
-                Status: {connectionStatus}
-              </Typography>
-              <Switch
-                checked={themeMode === 'dark'}
-                onChange={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}
-                inputProps={{ 'aria-label': 'controlled' }}
-                sx={{ marginLeft: 'auto' }}
-              />
-            </Stack>
-          </Alert>
-          <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
-            {interleave(items)}
-          </List>
+    <DetailDialog details={detailEntity} setDetails={setDetailEntity} />
+    <Container maxWidth='xl'>
+      <Stack direction="column">
+        <Alert icon={false} severity="success">
+          <Stack direction="row" alignItems="center" gap={4}>
+            <Typography>
+              Status: {connectionStatus}
+            </Typography>
+            <Switch
+              checked={themeMode === 'dark'}
+              onChange={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}
+              inputProps={{ 'aria-label': 'controlled' }}
+              sx={{ marginLeft: 'auto' }}
+            />
+          </Stack>
+        </Alert>
+        <Stack direction="row">
+          <WorldPanel world={world} setDetails={setDetailEntity} />
+          <Stack direction="column" sx={{ minWidth: 800 }}>
+            <List sx={{ width: '100%', bgcolor: 'background.paper' }}>
+              {interleave(items)}
+            </List>
+          </Stack>
         </Stack>
       </Stack>
     </Container>

client/src/format.ts

@@ -26,7 +26,7 @@ export function formatWorld(data: any) {
 }
 
 export const formatters: Record<string, any> = {
-  input: formatInput,
+  action: formatInput,
   result: formatResult,
   world: formatWorld,
 };

client/src/index.html

@@ -4,8 +4,7 @@
     <title>Text World</title>
   </head>
   <body>
-    <div class="history">
-      <ol id="history"></ol>
+    <div id="history">
     </div>
     <script src="./bundle/main.js" type="module"></script>
   </body>