Merge branch 'main' of github.com:leanprover-community/lean4game
Jon Eugster
2 years ago
commit
e4d5010163
@ -0,0 +1,64 @@
|
|||||||
|
import * as React from 'react';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import './inventory.css'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { faLock, faLockOpen, faBook, faHammer, faBan } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import Markdown from './Markdown';
|
||||||
|
import { useLoadDocQuery } from '../state/api';
|
||||||
|
|
||||||
|
function Inventory({ tactics, lemmas } :
|
||||||
|
{lemmas: {name: string, locked: boolean, disabled: boolean}[],
|
||||||
|
tactics: {name: string, locked: boolean, disabled: boolean}[]}) {
|
||||||
|
|
||||||
|
const [docName, setDocName] = useState(null)
|
||||||
|
const [docType, setDocType] = useState(null)
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="inventory">
|
||||||
|
<h2>Tactics</h2>
|
||||||
|
<div className="inventory-list">
|
||||||
|
{ tactics.map(tac =>
|
||||||
|
<InventoryItem key={tac.name} showDoc={() => {setDocName(tac.name); setDocType("tactic")}}
|
||||||
|
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>
|
||||||
|
|
||||||
|
<h2>Lemmas</h2>
|
||||||
|
<div className="inventory-list">
|
||||||
|
{ lemmas.map(lem =>
|
||||||
|
<InventoryItem key={lem.name} showDoc={() => {setDocName(lem.name); setDocType("lemma")}}
|
||||||
|
name={lem.name} locked={lem.locked} disabled={lem.disabled} />) }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{docName && <Documentation name={docName} type={docType} />}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function InventoryItem({name, locked, disabled, showDoc}) {
|
||||||
|
const icon = locked ? <FontAwesomeIcon icon={faLock} /> :
|
||||||
|
disabled ? <FontAwesomeIcon icon={faBan} /> : ""
|
||||||
|
const className = locked ? "locked" : disabled ? "disabled" : ""
|
||||||
|
|
||||||
|
const handleClick = () => {
|
||||||
|
if (!locked && !disabled) {
|
||||||
|
showDoc()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return <div className={`item ${className}`} onClick={handleClick}>{icon} {name}</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
function Documentation({name, type}) {
|
||||||
|
|
||||||
|
const doc = useLoadDocQuery({type: type, name: name})
|
||||||
|
|
||||||
|
return <>
|
||||||
|
<h2 className="doc">{doc.data?.name}</h2>
|
||||||
|
<Markdown>{doc.data?.text}</Markdown>
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Inventory;
|
||||||
@ -1,104 +0,0 @@
|
|||||||
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 { 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 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 }) {
|
|
||||||
|
|
||||||
return (
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LeftPanel;
|
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
.inventory {
|
||||||
|
padding: 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory h2 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.inventory h2.doc {
|
||||||
|
margin-top: 1.5em;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory-list {
|
||||||
|
display: flex;
|
||||||
|
gap: .5em;
|
||||||
|
flex-wrap : wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory .item {
|
||||||
|
background: #fff;
|
||||||
|
border: solid 1px #777;
|
||||||
|
padding: .1em .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.inventory .item.locked,
|
||||||
|
.inventory .item.disabled {
|
||||||
|
border: solid 1px #ccc;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.inventory .item:not(.locked):not(.disabled) {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue