phc/lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved InfoView

Browse Source
This commit is contained in:
Jon Eugster
2022-12-14 20:27:17 +01:00
parent 08c6ab897c
commit cf8aaa0673
2 changed files with 70 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/LeftPanel.tsx
+2 -2
View File
@@ -77,7 +77,7 @@ function LeftPanel({ spells, inventory, showSidePanel, setShowSidePanel }) {
<ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center' }}>
<FontAwesomeIcon icon={faHammer}></FontAwesomeIcon>
</ListItemIcon>
<ListItemText primary="Tactics" sx={{ display: showSidePanel ? null : "none" }} />
<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} >
@@ -89,7 +89,7 @@ function LeftPanel({ spells, inventory, showSidePanel, setShowSidePanel }) {
<ListItemIcon sx={{minWidth: 0, mr: open ? 3 : 'auto', justifyContent: 'center' }}>
<FontAwesomeIcon icon={faBook}></FontAwesomeIcon>
</ListItemIcon>
<ListItemText primary="Lemmas" sx={{ display: showSidePanel ? null : "none" }} />
<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} >
client/src/components/TacticState.tsx
+68 -8
View File
@@ -9,6 +9,11 @@ import { MathJax } from "better-react-mathjax";
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import { Paper, Box, Typography, Alert, FormControlLabel, FormGroup, Switch, Collapse } from '@mui/material';
import { Accordion, AccordionSummary, AccordionDetails, Divider } from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faArrowPointer } from '@fortawesome/free-solid-svg-icons'
// TODO: Dead variables (x✝) are not displayed correctly.
@@ -46,27 +51,82 @@ function Goal({ goal }) {
{hasHints &&
<FormControlLabel
control={<Switch checked={showHints} onChange={handleHintsChange} />}
label="Help"
label="More Help?"
/>}
{hints.map((hint) => <Collapse in={showHints}><Alert severity="warning" sx={{ mt: 1 }}><MathJax><ReactMarkdown>{hint.message}</ReactMarkdown></MathJax></Alert></Collapse>)}
{hints.map((hint) => <Collapse in={showHints}><Alert severity="info" sx={{ mt: 1 }}><MathJax><ReactMarkdown>{hint.message}</ReactMarkdown></MathJax></Alert></Collapse>)}
</Box>)
}
/* Function to display a goal that is not the main goal. */
function OtherGoal({ goal }) {
const hasObject = typeof goal.objects === "object" && goal.objects.length > 0
const hasAssumption = typeof goal.assumptions === "object" && goal.assumptions.length > 0
return (
<Accordion>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Typography color="primary" sx={{ ml: 0 }}>⊢ {goal.goal}</Typography>
</AccordionSummary>
<AccordionDetails sx={{ backgroundColor: "aliceblue" }}>
{hasObject &&
<Box>
<Typography>Objects</Typography>
<List>
{goal.objects.map((item) =>
<ListItem key={item.userName}>
<Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography>
</ListItem>)}
</List>
</Box>}
{hasAssumption &&
<Box>
<Typography>Assumptions</Typography>
<List>
{goal.assumptions.map((item) =>
<ListItem key={item}>
<Typography color="primary" sx={{ mr: 1 }}>{item.userName}</Typography> :
<Typography color="secondary" sx={{ ml: 1 }}>{item.type}</Typography>
</ListItem>)}
</List>
</Box>}
<Typography>Prove:</Typography>
<Typography color="primary" sx={{ ml: 2 }}>{goal.goal}</Typography>
</AccordionDetails>
</Accordion>)
}
function TacticState({ goals, diagnostics, completed }) {
const hasError = typeof diagnostics === "object" && diagnostics.length > 0
const hasGoal = goals !== null && goals.length > 0
const hasManyGoal = hasGoal && goals.length > 1
return (
<Box sx={{ height: "100%" }}>
{goals === null && <Typography variant="h6">No goals at cursor position</Typography>}
{hasGoal && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}><Typography variant="h5">Main goal at cursor</Typography> <Goal goal={goals[0]} /></Paper>}
{hasGoal &&
<Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
<Typography variant="h5">Main Goal
(at <FontAwesomeIcon icon={faArrowPointer}></FontAwesomeIcon>)
</Typography>
<Goal goal={goals[0]} />
</Paper>}
{!(hasGoal || completed) &&
<Typography variant="h6">
No goals
(at <FontAwesomeIcon icon={faArrowPointer}></FontAwesomeIcon>)
</Typography>}
{completed && <Typography variant="h6">Level completed ! 🎉</Typography>}
{hasError && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
{diagnostics.map(({severity, message}) => <Typography color={{1: "red", 2:"orange", 3:"blue", 4:"gray"}[severity]}>{message}</Typography>)}
{hasError &&
<Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
<Typography variant="h5" sx={{ mb: 2 }}>Lean says</Typography>
{diagnostics.map(({severity, message}) =>
<Alert severity={{1: "error", 2:"warning", 3:"info", 4:"success"}[severity]} sx={{ mt: 1 }}>{message}</Alert>
// TODO: When does Lean give severity=4? Had colour `gray` before. Make custom theme for that
)}
</Paper>}
{hasManyGoal && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, mt: 1 }}>
<Typography variant="h6" sx={{ mb: 2 }}>Other goals</Typography>
{goals.slice(1).map((goal, index) => <Paper><Goal key={index} goal={goal} /></Paper>)}
<Typography variant="h5" sx={{ mb: 2 }}>Further Goals</Typography>
{goals.slice(1).map((goal, index) => <Paper><OtherGoal key={index} goal={goal} /></Paper>)}
</Paper>}
</Box>
)