84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { useState, useEffect } from 'react';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import { MathJax } from "better-react-mathjax";
|
|
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 } from '@mui/material';
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
|
|
|
|
function TacticDoc(props) {
|
|
return (
|
|
<Accordion>
|
|
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
|
<Typography>{props.tactic.name}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<MathJax>
|
|
<ReactMarkdown>{props.tactic.content}</ReactMarkdown>
|
|
</MathJax>
|
|
</AccordionDetails>
|
|
</Accordion>)
|
|
}
|
|
|
|
function LemmaDoc({ lemma }) {
|
|
return (
|
|
<Accordion>
|
|
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
|
|
<Typography>{lemma.userName}</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<MathJax>
|
|
<ReactMarkdown>{lemma.content}</ReactMarkdown>
|
|
</MathJax>
|
|
</AccordionDetails>
|
|
</Accordion>)
|
|
}
|
|
|
|
function LemmaDocs({ lemmas }) {
|
|
const [categories, setCategories] = useState(new Map())
|
|
const [curCategory, setCurCategory] = useState("")
|
|
|
|
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 (
|
|
<Paper sx={{ px: 2, py: 1, mt: 2 }}>
|
|
<Typography variant="h5">Inventory</Typography>
|
|
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
|
|
<Tabs
|
|
value={curCategory}
|
|
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} />)}
|
|
</Paper>
|
|
)
|
|
}
|
|
|
|
function LeftPanel({ spells, inventory }) {
|
|
return (
|
|
<Box>
|
|
{spells.length > 0 &&
|
|
<Paper sx={{ px: 2, py: 1 }}>
|
|
<Typography variant="h5" sx={{ mb: 2 }}>Spell book</Typography>
|
|
{spells.map((spell) => <TacticDoc key={spell.name} tactic={spell} />)}
|
|
</Paper>}
|
|
{inventory.length > 0 && <LemmaDocs lemmas={inventory} />}
|
|
</Box>)
|
|
}
|
|
|
|
export default LeftPanel;
|