overlay inventory with doc

client/src/components/Inventory.tsx

@@ -7,17 +7,12 @@ import Markdown from './Markdown';
 import { useLoadDocQuery, InventoryTile, LevelInfo } from '../state/api';
 import { GameIdContext } from '../App';
 
-export function Inventory({levelInfo, setInventoryDoc } :
+export function Inventory({levelInfo, openDoc } :
   {
     levelInfo: LevelInfo,
-    setInventoryDoc: (inventoryDoc: {name: string, type: string}) => void,
+    openDoc: (name: string, type: string) => void,
   }) {
 
-  // TODO: This seems like a useless wrapper to me
-  function openDoc(name, type) {
-    setInventoryDoc({name, type})
-  }
-
   return (
     <div className="inventory">
     {/* TODO: Click on Tactic: show info
@@ -98,14 +93,15 @@ function InventoryItem({name, displayName, locked, disabled, newly, showDoc}) {
   return <div className={`item ${className}`} onClick={handleClick} title={title}>{icon} {displayName}</div>
 }
 
-export function Documentation({name, type}) {
+export function Documentation({name, type, handleClose}) {
   const gameId = React.useContext(GameIdContext)
   const doc = useLoadDocQuery({game: gameId, type: type, name: name})
 
-  return <>
-    <h2 className="doc">{doc.data?.displayName}</h2>
+  return <div className="documentation">
+    <div className="codicon codicon-close modal-close" onClick={handleClose}></div>
+    <h1 className="doc">{doc.data?.displayName}</h1>
     <p><code>{doc.data?.statement}</code></p>
     {/* <code>docstring: {doc.data?.docstring}</code> */}
     <Markdown>{doc.data?.content}</Markdown>
-  </>
+  </div>
 }

client/src/components/Level.tsx

@@ -188,9 +188,18 @@ function PlayableLevel({worldId, levelId}) {
     }
   }, [editor, commandLineMode])
 
-  // if this is set to a pair `(name, type)` then the according doc will be open.
+  // When clicking on an inventory item, the inventory is overlayed by the item's doc.
+  // If this state is set to a pair `(name, type)` then the according doc will be open.
   const [inventoryDoc, setInventoryDoc] = useState<{name: string, type: string}>(null)
 
+  // TODO: This seems like a useless wrapper to me
+  function openInventoryDoc(name, type) {
+    setInventoryDoc({name, type})
+  }
+
+  // Set `inventoryDoc` to `null` to close the doc
+  const closeInventoryDoc = () => setInventoryDoc(null);
+
   const levelTitle = <>{levelId && `Level ${levelId}`}{level?.data?.title && `: ${level?.data?.title}`}</>
 
   return <>
@@ -256,11 +265,13 @@ function PlayableLevel({worldId, levelId}) {
       </div>
       <div className="inventory-panel">
         {!level.isLoading &&
-          <Inventory levelInfo={level?.data} setInventoryDoc={setInventoryDoc} />}
+          <>{inventoryDoc ?
+            <Documentation name={inventoryDoc.name} type={inventoryDoc.type} handleClose={closeInventoryDoc}/>
+            :
+            <Inventory levelInfo={level?.data} openDoc={openInventoryDoc} />
+          }</>
+        }
       </div>
-      {/* <div className="doc-panel">
-        {inventoryDoc && <Documentation name={inventoryDoc.name} type={inventoryDoc.type} />}
-      </div> */}
     </Split>
   </>
 }

client/src/components/inventory.css

@@ -1,13 +1,22 @@
-.inventory {
+.inventory, .documentation {
   padding: 0 1em 1em 1em;
 }
 
-.inventory h2 {
+.inventory h2, .documentation h2, .documentation h1 {
   font-size: 1.5em;
   margin-top: 1em;
   margin-bottom: .2em;
 }
 
+.documentation h1 {
+  font-weight: 900;
+}
+
+.documentation.hidden {
+  display: none;
+  transition: display 2s;
+}
+
 .inventory-list {
   display: flex;
   gap: .5em;
@@ -55,15 +64,3 @@
   color: black;
   border-bottom: 0.3em solid var(--clr-primary);
 }
-
-
-.doc-panel {
-  padding: 0 1em;
-}
-
-.doc-panel h2 {
-  font-size: 1.5em;
-  margin-top: 1em;
-  margin-bottom: .2em;
-  font-weight: 900;
-}