diff --git a/client/src/components/LeftPanel.tsx b/client/src/components/LeftPanel.tsx index 1cc3156..1e2fc88 100644 --- a/client/src/components/LeftPanel.tsx +++ b/client/src/components/LeftPanel.tsx @@ -1,16 +1,13 @@ import * as React from 'react'; import { useState, useEffect } from 'react'; import ReactMarkdown from 'react-markdown'; -import '@fontsource/roboto/300.css'; -import '@fontsource/roboto/400.css'; -import '@fontsource/roboto/500.css'; -import '@fontsource/roboto/700.css'; +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 { faUpload, faArrowRotateRight, faChevronLeft, faChevronRight, faBook, faHammer } from '@fortawesome/free-solid-svg-icons' +import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons' import Markdown from './Markdown'; function TacticDoc(props) { @@ -72,6 +69,16 @@ function LemmaDocs({ lemmas }) { function LeftPanel({ spells, inventory, showSidePanel, setShowSidePanel }) { return ( + <> +
+ { ["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 + const className = locked ? "locked" : disabled ? "disabled" : "" + return
 {tac}
+ })} +
setShowSidePanel(true)}> @@ -98,6 +105,7 @@ function LeftPanel({ spells, inventory, showSidePanel, setShowSidePanel }) { } + ) } diff --git a/client/src/components/inventory.css b/client/src/components/inventory.css new file mode 100644 index 0000000..5b04633 --- /dev/null +++ b/client/src/components/inventory.css @@ -0,0 +1,15 @@ +.tactic-inventory { + display: flex; + gap: .5em; + flex-wrap : wrap; +} + +.tactic-inventory .tactic { + border: solid 1px #aaa; + padding: .1em .5em; +} + +.tactic-inventory .tactic.locked, +.tactic-inventory .tactic.disabled { + color: #aaa; +}