lemma inventory

client/src/components/LeftPanel.tsx

@@ -5,23 +5,30 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
 import Markdown from './Markdown';
 
-
-function LeftPanel({ tactics, inventory, showSidePanel, setShowSidePanel }) {
+function LeftPanel({ tactics, lemmas } :
+  {lemmas: {name: string, locked: boolean, disabled: boolean}[],
+   tactics: {name: string, locked: boolean, disabled: boolean}[]}) {
 
   return (
     <>
-    <div className="tactic-inventory">
-      {  tactics.map (({name, locked, disabled}) => {
-        const icon = locked ? <FontAwesomeIcon icon={faLock} /> :
-                     disabled ? <FontAwesomeIcon icon={faBan} /> : ""
-        const className = locked ? "locked" : disabled ? "disabled" : ""
-        return <div className={`tactic ${className}`}>{icon} {name}</div>
-    })}
+    <div className="inventory">
+      { tactics.map(tac => <InventoryItem name={tac.name} locked={tac.locked} disabled={tac.disabled} />) }
     {/* TODO: Click on Tactic: show info
       TODO: click on paste icon -> paste into command line */}
     </div>
+
+    <div className="inventory">
+      { lemmas.map(lem => <InventoryItem name={lem.name} locked={lem.locked} disabled={lem.disabled} />) }
+    </div>
     </>
   )
 }
 
+function InventoryItem({name, locked, disabled}) {
+  const icon = locked ? <FontAwesomeIcon icon={faLock} /> :
+               disabled ? <FontAwesomeIcon icon={faBan} /> : ""
+  const className = locked ? "locked" : disabled ? "disabled" : ""
+  return <div className={`item ${className}`}>{icon} {name}</div>
+}
+
 export default LeftPanel;

client/src/components/Level.tsx

@@ -67,13 +67,8 @@ function Level() {
 
   const [commandLineMode, setCommandLineMode] = useState(true)
   const [commandLineInput, setCommandLineInput] = useState("")
-  const [showSidePanel, setShowSidePanel] = useState(true)
   const [canUndo, setCanUndo] = useState(initialCode.trim() !== "")
 
-  const toggleSidePanel = () => {
-    setShowSidePanel(!showSidePanel)
-  }
-
   const theme = useTheme();
 
   useEffect(() => {
@@ -184,8 +179,7 @@ function Level() {
         </EditorContext.Provider>
       </div>
       <div className="doc-panel">
-        {!level.isLoading && <LeftPanel tactics={level?.data?.tactics} inventory={level?.data?.lemmas}
-          showSidePanel={showSidePanel} setShowSidePanel={setShowSidePanel} />}
+        {!level.isLoading && <LeftPanel tactics={level?.data?.tactics} lemmas={level?.data?.lemmas} />}
       </div>
     </Split>
   </>

client/src/components/inventory.css

@@ -1,16 +1,16 @@
-.tactic-inventory {
+.inventory {
   display: flex;
   gap: .5em;
   flex-wrap : wrap;
   padding: 1em
 }
 
-.tactic-inventory .tactic {
+.inventory .item {
   border: solid 1px #aaa;
   padding: .1em .5em;
 }
 
-.tactic-inventory .tactic.locked,
-.tactic-inventory .tactic.disabled {
+.inventory .item.locked,
+.inventory .item.disabled {
   color: #aaa;
 }

client/src/state/api.ts

@@ -15,7 +15,7 @@ interface LevelInfo {
   introduction: null|string,
   index: number,
   tactics: {name: string, disabled: boolean, locked: boolean}[],
-  lemmas: any[],
+  lemmas: {name: string, disabled: boolean, locked: boolean}[],
   descrText: null|string,
   descrFormat: null|string,
 }