|
|
|
@ -9,6 +9,11 @@ import { MathJax } from "better-react-mathjax";
|
|
|
|
import List from '@mui/material/List';
|
|
|
|
import List from '@mui/material/List';
|
|
|
|
import ListItem from '@mui/material/ListItem';
|
|
|
|
import ListItem from '@mui/material/ListItem';
|
|
|
|
import { Paper, Box, Typography, Alert, FormControlLabel, FormGroup, Switch, Collapse } from '@mui/material';
|
|
|
|
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.
|
|
|
|
// TODO: Dead variables (x✝) are not displayed correctly.
|
|
|
|
|
|
|
|
|
|
|
|
@ -46,27 +51,82 @@ function Goal({ goal }) {
|
|
|
|
{hasHints &&
|
|
|
|
{hasHints &&
|
|
|
|
<FormControlLabel
|
|
|
|
<FormControlLabel
|
|
|
|
control={<Switch checked={showHints} onChange={handleHintsChange} />}
|
|
|
|
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>)
|
|
|
|
</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 }) {
|
|
|
|
function TacticState({ goals, diagnostics, completed }) {
|
|
|
|
const hasError = typeof diagnostics === "object" && diagnostics.length > 0
|
|
|
|
const hasError = typeof diagnostics === "object" && diagnostics.length > 0
|
|
|
|
const hasGoal = goals !== null && goals.length > 0
|
|
|
|
const hasGoal = goals !== null && goals.length > 0
|
|
|
|
const hasManyGoal = hasGoal && goals.length > 1
|
|
|
|
const hasManyGoal = hasGoal && goals.length > 1
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<Box sx={{ height: "100%" }}>
|
|
|
|
<Box sx={{ height: "100%" }}>
|
|
|
|
{goals === null && <Typography variant="h6">No goals at cursor position</Typography>}
|
|
|
|
{hasGoal &&
|
|
|
|
{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>}
|
|
|
|
<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>}
|
|
|
|
{completed && <Typography variant="h6">Level completed ! 🎉</Typography>}
|
|
|
|
{hasError && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, height: "100%" }}>
|
|
|
|
{hasError &&
|
|
|
|
{diagnostics.map(({severity, message}) => <Typography color={{1: "red", 2:"orange", 3:"blue", 4:"gray"}[severity]}>{message}</Typography>)}
|
|
|
|
<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>}
|
|
|
|
</Paper>}
|
|
|
|
{hasManyGoal && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, mt: 1 }}>
|
|
|
|
{hasManyGoal && <Paper sx={{ pt: 1, pl: 2, pr: 3, pb: 1, mt: 1 }}>
|
|
|
|
<Typography variant="h6" sx={{ mb: 2 }}>Other goals</Typography>
|
|
|
|
<Typography variant="h5" sx={{ mb: 2 }}>Further Goals</Typography>
|
|
|
|
{goals.slice(1).map((goal, index) => <Paper><Goal key={index} goal={goal} /></Paper>)}
|
|
|
|
{goals.slice(1).map((goal, index) => <Paper><OtherGoal key={index} goal={goal} /></Paper>)}
|
|
|
|
</Paper>}
|
|
|
|
</Paper>}
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
)
|
|
|
|
)
|
|
|
|
|
Alexander Bentkamp
4 years ago