new tactic display

client/src/components/LeftPanel.tsx

@@ -1,110 +1,25 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
 import './inventory.css'
-
-import { Paper, Box, Typography, Accordion, AccordionSummary, AccordionDetails, Tabs, Tab, Divider, Button, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
 import Markdown from './Markdown';
 
-function TacticDoc(props) {
-  return (
-    <Accordion>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>{props.tactic.name}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Markdown>{props.tactic.content}</Markdown>
-      </AccordionDetails>
-    </Accordion>)
-}
 
-function LemmaDoc({ lemma }) {
-  return (
-    <Accordion>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-        <Typography>{lemma.userName}</Typography>
-      </AccordionSummary>
-      <AccordionDetails>
-        <Markdown>{lemma.content}</Markdown>
-      </AccordionDetails>
-    </Accordion>)
-}
-
-function LemmaDocs({ lemmas }) {
-  const [categories, setCategories] = useState(new Map())
-  const [curCategory, setCurCategory] = useState("")
-
-  const changeTab = (event: React.SyntheticEvent, newValue : string) => {
-    setCurCategory(newValue);
-  };
-
-  useEffect(() => {
-    const cats = new Map()
-    lemmas.forEach(function (item) {
-      const category = item.category
-      cats.set(category, (cats.get(category) || []).concat([item]))
-    });
-    setCategories(cats)
-    setCurCategory(cats.keys().next().value)
-  }, [lemmas]);
-
-  return (
-    <div>
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs
-          value={curCategory}
-          onChange={changeTab}
-          aria-label="Categories" variant="scrollable" scrollButtons="auto">
-          {(Array.from(categories)).map(([category, _]) => <Tab value={category} label={category} key={category} wrapped />)}
-        </Tabs>
-      </Box>
-      {curCategory && categories.get(curCategory).map((lemma) => <LemmaDoc lemma={lemma} key={lemma.name} />)}
-    </div>)
-}
-
-function LeftPanel({ spells, inventory, showSidePanel, setShowSidePanel }) {
+function LeftPanel({ tactics, inventory, showSidePanel, setShowSidePanel }) {
 
   return (
     <>
     <div className="tactic-inventory">
-      {  ["rfl", "tauto", "trivial", "simp", "left", "right", "assumption", "constructor"].map ((tac) => {
-        const locked = Math.random() > 0.5
-        const disabled = Math.random() > 0.5
-        const icon = locked ? faLock : disabled ? faBan : faLockOpen
+      {  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}`}><FontAwesomeIcon icon={icon} />&nbsp;{tac}</div>
+        return <div className={`tactic ${className}`}>{icon} {name}</div>
     })}
+    {/* TODO: Click on Tactic: show info
+      TODO: click on paste icon -> paste into command line */}
     </div>
-    <List className="side">
-      <ListItem key="tactics" disablePadding sx={{ display: 'block' }}>
-        <ListItemButton sx={{ minHeight: 48, justifyContent: showSidePanel ? 'initial' : 'center', px: 2.5 }} onClick={() => setShowSidePanel(true)}>
-          <ListItemIcon sx={{minWidth: 0, mr: showSidePanel ? 3 : 'auto', justifyContent: 'center' }}>
-            <FontAwesomeIcon icon={faHammer}></FontAwesomeIcon>
-          </ListItemIcon>
-          <ListItemText primary="Known Tactics" sx={{ display: showSidePanel ? null : "none" }} />
-        </ListItemButton>
-        {spells && spells.length > 0 &&
-          <Paper sx={{ px: 2, py: 1, display: showSidePanel ? null : "none" }} elevation={0} >
-            {spells.map((spell) => <TacticDoc key={spell.name} tactic={spell} />)}
-          </Paper>}
-      </ListItem>
-      <ListItem key="lemmas" disablePadding sx={{ display: 'block' }}>
-        <ListItemButton sx={{ minHeight: 48, justifyContent: showSidePanel ? 'initial' : 'center', px: 2.5 }} >
-          <ListItemIcon sx={{minWidth: 0, mr: showSidePanel ? 3 : 'auto', justifyContent: 'center' }}>
-            <FontAwesomeIcon icon={faBook}></FontAwesomeIcon>
-          </ListItemIcon>
-          <ListItemText primary="Known Lemmas" sx={{ display: showSidePanel ? null : "none" }} />
-        </ListItemButton>
-        {inventory && inventory.length > 0 &&
-          <Paper sx={{ px: 2, py: 1, mt: 2, display: showSidePanel ? null : "none" }} elevation={0} >
-            <LemmaDocs lemmas={inventory} />
-          </Paper>}
-      </ListItem>
-    </List>
     </>
   )
 }

client/src/components/Level.tsx

@@ -184,8 +184,8 @@ function Level() {
         </EditorContext.Provider>
       </div>
       <div className="doc-panel">
-        <LeftPanel spells={level?.data?.tactics} inventory={level?.data?.lemmas}
-          showSidePanel={showSidePanel} setShowSidePanel={setShowSidePanel} />
+        {!level.isLoading && <LeftPanel tactics={level?.data?.tactics} inventory={level?.data?.lemmas}
+          showSidePanel={showSidePanel} setShowSidePanel={setShowSidePanel} />}
       </div>
     </Split>
   </>

client/src/components/inventory.css

@@ -2,6 +2,7 @@
   display: flex;
   gap: .5em;
   flex-wrap : wrap;
+  padding: 1em
 }
 
 .tactic-inventory .tactic {

client/src/state/api.ts

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