improved InfoView

client/src/components/LeftPanel.tsx

@@ -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

@@ -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>
   )