refactor

client/src/app.test.js

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import App from './App';
+import App from './app';
 
 test('renders learn react link', () => {
   render(<App />);

client/src/app.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useState, useEffect } from 'react';
 import { Outlet, useParams } from "react-router-dom";
 
 import '@fontsource/roboto/300.css';
@@ -9,8 +8,7 @@ import '@fontsource/roboto/700.css';
 
 import './reset.css';
 import './app.css';
-
+import { GameIdContext } from './components/infoview/context';
-export const GameIdContext = React.createContext<string>(undefined);
 
 function App() {
   const params = useParams();

client/src/components/game_menu.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react'
-import { Button } from './Button'
+import { useStore, useSelector } from 'react-redux';
-import { GameIdContext } from '../App';
-import { useStore } from 'react-redux';
-import { useAppDispatch, useAppSelector } from '../hooks';
-import { useSelector } from 'react-redux';
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faDownload, faUpload, faEraser } from '@fortawesome/free-solid-svg-icons'
 
+import { Button } from './button'
+import { GameIdContext } from './infoview/context';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
 import { deleteProgress, selectProgress, loadProgress, GameProgressState } from '../state/progress';
 
 const downloadFile = ({ data, fileName, fileType }) => {

client/src/components/hints.tsx

@@ -1,7 +1,6 @@
-import { GameHint } from "./rpcApi";
+import { GameHint } from "./infoview/rpc_api";
 import * as React from 'react';
-import { Alert, FormControlLabel, Switch } from '@mui/material';
+import Markdown from './markdown';
-import Markdown from '../Markdown';
 
 export function Hint({hint} : {hint: GameHint}) {
   return <div className="message info"><Markdown>{hint.text}</Markdown></div>

client/src/components/infoview/command_line.tsx

@@ -1,24 +1,20 @@
 import * as React from 'react'
 import { useRef, useState, useEffect } from 'react'
-import { LspDiagnosticsContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
-import { useServerNotificationEffect } from '../../../../node_modules/lean4-infoview/src/infoview/util';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-import { DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol';
-import { InputModeContext, MonacoEditorContext } from '../Level'
-
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faWandMagicSparkles } from '@fortawesome/free-solid-svg-icons'
-import { AbbreviationRewriter } from 'lean4web/client/src/editor/abbreviation/rewriter/AbbreviationRewriter';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
-import { AbbreviationProvider } from 'lean4web/client/src/editor/abbreviation/AbbreviationProvider';
-
 import { Registry } from 'monaco-textmate' // peer dependency
 import { wireTmGrammars } from 'monaco-editor-textmate'
-import * as lightPlusTheme from 'lean4web/client/src/lightPlus.json'
+import { DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol';
+import { useServerNotificationEffect } from '../../../../node_modules/lean4-infoview/src/infoview/util';
+import { AbbreviationRewriter } from 'lean4web/client/src/editor/abbreviation/rewriter/AbbreviationRewriter';
+import { AbbreviationProvider } from 'lean4web/client/src/editor/abbreviation/AbbreviationProvider';
 import * as leanSyntax from 'lean4web/client/src/syntaxes/lean.json'
 import * as leanMarkdownSyntax from 'lean4web/client/src/syntaxes/lean-markdown.json'
 import * as codeblockSyntax from 'lean4web/client/src/syntaxes/codeblock.json'
 import languageConfig from 'lean4/language-configuration.json';
 
+import { InputModeContext, MonacoEditorContext } from './context'
 
 /* We register a new language `leancmd` that looks like lean4, but does not use the lsp server. */
 

client/src/components/infoview/context.ts

@@ -0,0 +1,77 @@
+/**
+ *  @fileOverview This file contains the the react contexts used in the project.
+ */
+import * as React from 'react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { InteractiveDiagnostic, InteractiveTermGoal } from '@leanprover/infoview-api';
+import { InteractiveGoals } from './rpc_api';
+
+export const GameIdContext = React.createContext<string>(undefined);
+
+export const MonacoEditorContext = React.createContext<monaco.editor.IStandaloneCodeEditor>(
+  null as any)
+
+// TODO: Is this still used?
+export const HintContext = React.createContext<{
+  showHiddenHints : boolean,
+  setShowHiddenHints: React.Dispatch<React.SetStateAction<boolean>>
+}>({
+  showHiddenHints: true,
+  setShowHiddenHints: () => {},
+});
+
+export type InfoStatus = 'updating' | 'error' | 'ready';
+
+export type ProofStep = {
+  // TODO: Add correct types
+  command : string
+  goals: string
+  hints: string
+  errors: string
+}
+
+export const ProofContext = React.createContext<{
+  // The first entry will always have an empty/undefined command
+  proof: ProofStep[],
+  setProof: React.Dispatch<React.SetStateAction<Array<ProofStep>>>
+}>({
+  proof: [],
+  setProof: () => {}
+})
+
+export interface ProofStateProps {
+  // pos: DocumentPosition;
+  status: InfoStatus;
+  messages: InteractiveDiagnostic[];
+  goals?: InteractiveGoals;
+  termGoal?: InteractiveTermGoal;
+  error?: string;
+  // userWidgets: UserWidgetInstance[];
+  // rpcSess: RpcSessionAtPos;
+  // triggerUpdate: () => Promise<void>;
+}
+
+export const ProofStateContext = React.createContext<{
+  proofState : ProofStateProps,
+  setProofState: React.Dispatch<React.SetStateAction<ProofStateProps>>
+}>({
+  proofState : {
+    status: 'updating',
+    messages: [],
+    goals: undefined,
+    termGoal: undefined,
+    error: undefined},
+  setProofState: () => {},
+});
+
+export const InputModeContext = React.createContext<{
+  commandLineMode: boolean,
+  setCommandLineMode: React.Dispatch<React.SetStateAction<boolean>>,
+  commandLineInput: string,
+  setCommandLineInput: React.Dispatch<React.SetStateAction<string>>
+}>({
+  commandLineMode: true,
+  setCommandLineMode: () => {},
+  commandLineInput: "",
+  setCommandLineInput: () => {},
+});

client/src/components/infoview/goals.tsx

@@ -6,10 +6,9 @@ import { InteractiveHypothesisBundle_nonAnonymousNames, MVarId, TaggedText_strip
 import { WithTooltipOnHover } from '../../../../node_modules/lean4-infoview/src/infoview/tooltips';
 import { EditorContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { Locations, LocationsContext, SelectableLocation } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation';
-import { InteractiveGoal, InteractiveGoals, InteractiveHypothesisBundle } from './rpcApi';
+import { InteractiveGoal, InteractiveGoals, InteractiveHypothesisBundle } from './rpc_api';
-import { Hints } from './hints';
+import { InputModeContext } from './context';
-import { CommandLine } from './CommandLine';
+
-import { InputModeContext } from '../Level';
 
 /** Returns true if `h` is inaccessible according to Lean's default name rendering. */
 function isInaccessibleName(h: string): boolean {
@@ -231,6 +230,7 @@ export const OtherGoals = React.memo((props: GoalProps2) => {
   </>
 })
 
+
 export const ProofDisplay = React.memo((props : ProofDisplayProps) => {
   const { proof } = props
   const steps = proof.match(/.+/g)

client/src/components/infoview/info.tsx

@@ -1,24 +1,25 @@
 /* Mostly copied from https://github.com/leanprover/vscode-lean4/blob/master/lean4-infoview/src/infoview/info.tsx */
 
 import * as React from 'react';
+import { CircularProgress } from '@mui/material';
+
+
 import type { Location, Diagnostic } from 'vscode-languageserver-protocol';
 
-import { goalsToString, Goal, MainAssumptions, OtherGoals, FilteredGoals, ProofDisplay } from './goals'
-import { basename, DocumentPosition, RangeHelpers, useEvent, usePausableState, discardMethodNotFound,
-    mapRpcError, useAsyncWithTrigger, PausableProps } from '../../../../node_modules/lean4-infoview/src/infoview/util';
-import { ConfigContext, EditorContext, LspDiagnosticsContext, ProgressContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
-import { AllMessages, lspDiagToInteractive, MessagesList } from './messages';
 import { getInteractiveTermGoal, InteractiveDiagnostic,
     UserWidgetInstance, Widget_getWidgets, RpcSessionAtPos, isRpcError,
     RpcErrorCode, getInteractiveDiagnostics, InteractiveTermGoal } from '@leanprover/infoview-api';
-import { InteractiveGoal, InteractiveGoals } from './rpcApi';
+import { basename, DocumentPosition, RangeHelpers, useEvent, usePausableState, discardMethodNotFound,
+    mapRpcError, useAsyncWithTrigger, PausableProps } from '../../../../node_modules/lean4-infoview/src/infoview/util';
+import { ConfigContext, EditorContext, LspDiagnosticsContext, ProgressContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { PanelWidgetDisplay } from '../../../../node_modules/lean4-infoview/src/infoview/userWidget'
 import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
 import { GoalsLocation, Locations, LocationsContext } from '../../../../node_modules/lean4-infoview/src/infoview/goalLocation';
-import { InteractiveCode } from '../../../../node_modules/lean4-infoview/src/infoview/interactiveCode'
+
-import { CircularProgress } from '@mui/material';
+import { AllMessages, lspDiagToInteractive, MessagesList } from './messages';
-import { InputModeContext, MonacoEditorContext, HintContext, ProofStateProps, InfoStatus, ProofStateContext } from '../Level'
+import { goalsToString, Goal, MainAssumptions, OtherGoals, FilteredGoals, ProofDisplay } from './goals'
-import { Hint } from './hints';
+import { InteractiveGoal, InteractiveGoals } from './rpc_api';
+import { InputModeContext, MonacoEditorContext, HintContext, ProofStateProps, InfoStatus, ProofStateContext } from './context'
 
 
 type InfoKind = 'cursor' | 'pin';
@@ -127,7 +128,7 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
           <div className="goals-section">
             { goals &&  goals.goals.length > 0 && <>
               <MainAssumptions filter={goalFilter} key='mainGoal' goals={goals.goals} />
-              {/* <ProofDisplay proof={proof}/> */}
+              <ProofDisplay proof={proof}/>
               <OtherGoals filter={goalFilter} goals={goals.goals} />
             </>}
           </div>

client/src/components/infoview/infoview.css

@@ -64,7 +64,7 @@
   flex-direction: column;
 }
 
-.command-line .command-line-input{
+.command-line .command-line-input {
   flex: 1;
 }
 
@@ -128,3 +128,14 @@
   border-radius: 1em;
   padding: 0.6em;
 }
+
+
+/* Push the goals to the bottom for now, until we insert the proof history above. */
+.commandline-interface .content {
+  display: flex;
+  flex-direction: column;
+}
+
+.commandline-interface .content .tmp-pusher {
+  flex: 1;
+}

client/src/components/infoview/main.tsx

@@ -4,26 +4,28 @@ import * as React from 'react';
 import type { DidCloseTextDocumentParams, DidChangeTextDocumentParams, Location, DocumentUri } from 'vscode-languageserver-protocol';
 
 import 'tachyons/css/tachyons.css';
-// import '@vscode/codicons/dist/codicon.ttf';
 import '@vscode/codicons/dist/codicon.css';
 import '../../../../node_modules/lean4-infoview/src/infoview/index.css';
 import './infoview.css'
 
 import { LeanFileProgressParams, LeanFileProgressProcessingInfo, defaultInfoviewConfig, EditorApi, InfoviewApi } from '@leanprover/infoview-api';
-
-import { Infos } from './infos';
-import { AllMessages, WithLspDiagnosticsContext } from './messages';
 import { useClientNotificationEffect, useServerNotificationEffect, useEventResult, useServerNotificationState } from '../../../../node_modules/lean4-infoview/src/infoview/util';
 import { EditorContext, ConfigContext, ProgressContext, VersionContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
 import { WithRpcSessions } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
 import { ServerVersion } from '../../../../node_modules/lean4-infoview/src/infoview/serverVersion';
-import { useAppDispatch, useAppSelector } from '../../hooks';
+
-import { levelCompleted, selectCompleted } from '../../state/progress';
+import { GameIdContext } from './context';
-import { GameIdContext } from '../../App';
+import { useAppDispatch, useAppSelector } from '../../state/hooks';
-import { InputModeContext } from '../Level';
-import { CommandLine } from './CommandLine';
-import Markdown from '../Markdown';
 import { LevelInfo } from '../../state/api';
+import { levelCompleted, selectCompleted } from '../../state/progress';
+import Markdown from '../markdown';
+
+import { Infos } from './infos';
+import { AllMessages, WithLspDiagnosticsContext } from './messages';
+import { Goal } from './goals';
+import { InputModeContext, ProofStateContext } from './context';
+import { CommandLine } from './command_line';
+
 
 // The mathematical formulation of the statement, supporting e.g. Latex
 // It takes three forms, depending on the precence of name and description:
@@ -138,6 +140,10 @@ export function CommandLineInterface(props: {world: string, level: number, data:
   const ec = React.useContext(EditorContext);
   const gameId = React.useContext(GameIdContext)
 
+  const proofStateContext = React.useContext(ProofStateContext)
+
+  const [selectedGoal, setSelectedGoal] = React.useState<number>(0)
+
   const dispatch = useAppDispatch()
 
   // Mark level as completed when server gives notification
@@ -181,6 +187,8 @@ export function CommandLineInterface(props: {world: string, level: number, data:
       []
   );
 
+  const goalFilter = { reverse: false, showType: true, showInstance: true, showHiddenAssumption: true, showLetValue: true }
+
   const serverVersion =
       useEventResult(ec.events.serverRestarted, result => new ServerVersion(result.serverInfo?.version ?? ''))
   const serverStoppedResult = useEventResult(ec.events.serverStopped);
@@ -199,6 +207,19 @@ export function CommandLineInterface(props: {world: string, level: number, data:
           <div className="content">
             <ExerciseStatement data={props.data} />
             <Infos />
+            <div className="tmp-pusher"></div>
+            <div className="tab-bar">
+              {proofStateContext.proofState.goals?.goals.map((goal, i) =>
+                <div className={`tab ${i == (selectedGoal) ? "active": ""}`}
+                    onClick={() => { setSelectedGoal(i) }}>
+                  {i ? `Goal ${i+1}` : "Active Goal"}
+                </div>)}
+            </div>
+            <div className="goal-tab vscode-light">
+              {proofStateContext.proofState.goals?.goals?.length &&
+                <Goal commandLine={false} filter={goalFilter} goal={proofStateContext.proofState.goals.goals[selectedGoal]} />
+              }
+            </div>
           </div>
           <CommandLine />
       </div>

client/src/components/infoview/messages.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import * as React from 'react'
-import fastIsEqual from 'react-fast-compare';
+import fastIsEqual from 'react-fast-compare'
-import { Location, DocumentUri, Diagnostic, DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol';
+import { Location, DocumentUri, Diagnostic, DiagnosticSeverity, PublishDiagnosticsParams } from 'vscode-languageserver-protocol'
 
-import { LeanDiagnostic, RpcErrorCode } from '@leanprover/infoview-api';
+import { LeanDiagnostic, RpcErrorCode, getInteractiveDiagnostics, InteractiveDiagnostic, TaggedText_stripTags } from '@leanprover/infoview-api'
 
-import { basename, escapeHtml, usePausableState, useEvent, addUniqueKeys, DocumentPosition, useServerNotificationState, useEventResult } from '../../../../node_modules/lean4-infoview/src/infoview/util';
+import { basename, escapeHtml, usePausableState, useEvent, addUniqueKeys, DocumentPosition, useServerNotificationState, useEventResult } from '../../../../node_modules/lean4-infoview/src/infoview/util'
-import { ConfigContext, EditorContext, LspDiagnosticsContext, VersionContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts';
+import { ConfigContext, EditorContext, LspDiagnosticsContext, VersionContext } from '../../../../node_modules/lean4-infoview/src/infoview/contexts'
-import { Details } from '../../../../node_modules/lean4-infoview/src/infoview/collapsing';
+import { Details } from '../../../../node_modules/lean4-infoview/src/infoview/collapsing'
-import { InteractiveMessage } from '../../../../node_modules/lean4-infoview/src/infoview/traceExplorer';
+import { InteractiveMessage } from '../../../../node_modules/lean4-infoview/src/infoview/traceExplorer'
-import { getInteractiveDiagnostics, InteractiveDiagnostic, TaggedText_stripTags } from '@leanprover/infoview-api';
+import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions'
-import { RpcContext, useRpcSessionAtPos } from '../../../../node_modules/lean4-infoview/src/infoview/rpcSessions';
+
-import { InputModeContext } from '../Level';
+import { InputModeContext } from './context'
 
 interface MessageViewProps {
     uri: DocumentUri;

client/src/components/infoview/rpc_api.ts

@@ -1,5 +1,8 @@
-/* This file is based on `vscode-lean4/vscode-lean4/src/rpcApi.ts ` */
+/**
-
+ *  @fileOverview Defines the interface for the communication with the server.
+ *
+ * This file is based on `vscode-lean4/vscode-lean4/src/rpcApi.ts`
+ */
 import { ContextInfo, FVarId, CodeWithInfos, MVarId } from '@leanprover/infoview-api';
 
 export interface GameHint {

client/src/components/inventory.tsx

@@ -3,9 +3,9 @@ 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 { GameIdContext } from './infoview/context';
+import Markdown from './markdown';
 import { useLoadDocQuery, InventoryTile, LevelInfo } from '../state/api';
-import { GameIdContext } from '../App';
 
 export function Inventory({levelInfo, openDoc } :
   {

client/src/components/landing_page.tsx

@@ -1,19 +1,18 @@
 import * as React from 'react';
-import { useNavigate } from "react-router-dom";
+import { useNavigate, Link } from "react-router-dom";
-import { Link } from 'react-router-dom';
-import Markdown from './Markdown';
 
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
-import './LandingPage.css'
+import './landing_page.css'
-import {PrivacyPolicyPopup} from './PrivacyPolicy'
-
 import coverRobo from '../assets/covers/formaloversum.png'
 import bgImage from '../assets/bg.jpg'
 
+import Markdown from './markdown';
+import {PrivacyPolicyPopup} from './privacy_policy'
+
 const flag = {
   'Dutch': '🇳🇱',
   'English': '🇬🇧',

client/src/components/level.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 import { useEffect, useState, useRef } from 'react';
+import Split from 'react-split'
+import { Alert } from '@mui/material';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
@@ -26,74 +28,19 @@ import type { Location } from 'vscode-languageserver-protocol';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faHome, faArrowRight, faArrowLeft, faRotateLeft } from '@fortawesome/free-solid-svg-icons'
 import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles';
-import Split from 'react-split'
+import { DocumentPosition } from '../../../node_modules/lean4-infoview/src/infoview/util';
-import { Alert } from '@mui/material';
 
-import { Button } from './Button'
+import { GameIdContext } from './infoview/context';
-import {Inventory, Documentation} from './Inventory';
+import { ConnectionContext, useLeanClient } from '../state/connection';
-import Markdown from './Markdown';
+import { useAppDispatch, useAppSelector } from '../state/hooks';
-import { EditorInterface, CommandLineInterface } from './infoview/main'
+import { Button } from './button'
-import { Hints } from './infoview/hints';
+import Markdown from './markdown';
-import { GameHint, InteractiveGoals } from './infoview/rpcApi';
+import {Inventory, Documentation} from './inventory';
-import { GameIdContext } from '../App';
-import { ConnectionContext, useLeanClient } from '../connection';
-import { useAppDispatch, useAppSelector } from '../hooks';
 import { useGetGameInfoQuery, useLoadLevelQuery } from '../state/api';
 import { changedSelection, codeEdited, selectCode, selectSelections, progressSlice, selectCompleted } from '../state/progress';
-import { DocumentPosition } from '../../../node_modules/lean4-infoview/src/infoview/util';
+import { EditorInterface, CommandLineInterface } from './infoview/main'
-import { getInteractiveTermGoal, InteractiveDiagnostic,
+import { Hints } from './hints';
-  UserWidgetInstance, Widget_getWidgets, RpcSessionAtPos, isRpcError,
+import { HintContext, InputModeContext, MonacoEditorContext, ProofContext, ProofStateContext, ProofStateProps, ProofStep } from './infoview/context';
-  RpcErrorCode, getInteractiveDiagnostics, InteractiveTermGoal } from '@leanprover/infoview-api';
-
-export const MonacoEditorContext = React.createContext<monaco.editor.IStandaloneCodeEditor>(null as any);
-
-export const HintContext = React.createContext<{
-  showHiddenHints : boolean,
-  setShowHiddenHints: React.Dispatch<React.SetStateAction<boolean>>
-}>({
-  showHiddenHints: true,
-  setShowHiddenHints: () => {},
-});
-
-export type InfoStatus = 'updating' | 'error' | 'ready';
-
-export interface ProofStateProps {
-  // pos: DocumentPosition;
-  status: InfoStatus;
-  messages: InteractiveDiagnostic[];
-  goals?: InteractiveGoals;
-  termGoal?: InteractiveTermGoal;
-  error?: string;
-  // userWidgets: UserWidgetInstance[];
-  // rpcSess: RpcSessionAtPos;
-  // triggerUpdate: () => Promise<void>;
-}
-
-export const ProofStateContext = React.createContext<{
-  proofState : ProofStateProps,
-  setProofState: React.Dispatch<React.SetStateAction<ProofStateProps>>
-}>({
-  proofState : {
-    status: 'updating',
-    messages: [],
-    goals: undefined,
-    termGoal: undefined,
-    error: undefined},
-  setProofState: () => {},
-});
-
-
-export const InputModeContext = React.createContext<{
-  commandLineMode: boolean,
-  setCommandLineMode: React.Dispatch<React.SetStateAction<boolean>>,
-  commandLineInput: string,
-  setCommandLineInput: React.Dispatch<React.SetStateAction<string>>
-}>({
-  commandLineMode: true,
-  setCommandLineMode: () => {},
-  commandLineInput: "",
-  setCommandLineInput: () => {},
-});
 
 function Level() {
 
@@ -124,6 +71,8 @@ function PlayableLevel({worldId, levelId}) {
 
   const [showHiddenHints, setShowHiddenHints] = useState(false)
 
+  const [proof, setProof] = useState<Array<ProofStep>>([])
+
   const [proofState, setProofState] = React.useState<ProofStateProps>({
     status: 'updating',
     messages: [],
@@ -238,6 +187,7 @@ function PlayableLevel({worldId, levelId}) {
     <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
     <ProofStateContext.Provider value={{proofState, setProofState}}>
     <InputModeContext.Provider value={{commandLineMode, setCommandLineMode, commandLineInput, setCommandLineInput}}>
+    <ProofContext.Provider value={{proof, setProof}}>
     <HintContext.Provider value={{showHiddenHints, setShowHiddenHints}}>
       <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
       <Split minSize={0} snapOffset={200} sizes={[25, 50, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
@@ -307,6 +257,7 @@ function PlayableLevel({worldId, levelId}) {
         </div>
       </Split>
     </HintContext.Provider>
+    </ProofContext.Provider>
     </InputModeContext.Provider>
     </ProofStateContext.Provider>
   </>

client/src/components/message.tsx

@@ -5,7 +5,7 @@ import '@fontsource/roboto/500.css';
 import '@fontsource/roboto/700.css';
 
 import { Button, Dialog, DialogContent, DialogContentText, DialogActions } from '@mui/material';
-import Markdown from './Markdown';
+import Markdown from './markdown';
 
 function Message({ isOpen, content, close }) {
 

client/src/components/welcome.tsx

@@ -1,29 +1,22 @@
 import * as React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import './welcome.css'
+import { Link } from 'react-router-dom';
-import cytoscape, { LayoutOptions } from 'cytoscape'
-import klay from 'cytoscape-klay';
 import { useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import Split from 'react-split'
-
+import { Box, Typography, CircularProgress } from '@mui/material';
-import GameMenu from './GameMenu';
+import cytoscape, { LayoutOptions } from 'cytoscape'
-import {PrivacyPolicy} from './PrivacyPolicy';
+import klay from 'cytoscape-klay';
+import './welcome.css'
+import { GameIdContext } from './infoview/context';
+import { selectCompleted } from '../state/progress';
+import { useGetGameInfoQuery } from '../state/api';
+import Markdown from './markdown';
+import GameMenu from './game_menu';
+import {PrivacyPolicy} from './privacy_policy';
 
 cytoscape.use( klay );
 
-import { Box, Typography, CircularProgress } from '@mui/material';
-import { useGetGameInfoQuery } from '../state/api';
-import { Link } from 'react-router-dom';
-import Markdown from './Markdown';
-import { selectCompleted } from '../state/progress';
-import { GameIdContext } from '../App';
-import { Button } from './Button';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDownload, faUpload, faEraser } from '@fortawesome/free-solid-svg-icons'
-
-
 const N = 24          // max number of levels per world
 const R = 800         // radius of a world
 const r = 110          // radius of a level

client/src/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import App from './App';
+import App from './app';
-import { ConnectionContext, connection } from './connection'
+import { ConnectionContext, connection } from './state/connection'
 import { store } from './state/store';
 import { Provider } from 'react-redux';
 import {
@@ -9,10 +9,10 @@ import {
   RouterProvider,
   Route,
 } from "react-router-dom";
-import ErrorPage from './ErrorPage';
+import ErrorPage from './components/error_page';
-import Welcome from './components/Welcome';
+import Welcome from './components/welcome';
-import LandingPage from './components/LandingPage';
+import LandingPage from './components/landing_page';
-import Level from './components/Level';
+import Level from './components/level';
 import { monacoSetup } from 'lean4web/client/src/monacoSetup';
 import { redirect } from 'react-router-dom';
 

client/src/state/api.ts

@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
-import { Connection } from '../connection'
+import { Connection } from './connection'
 
 interface GameInfo {
   title: null|string,

client/src/state/connection.ts

@@ -1,9 +1,10 @@
+/**
+ *  @fileOverview todo
+ */
 
+import * as React from 'react';
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { LeanClient } from 'lean4web/client/src/editor/leanclient';
-import * as React from 'react';
-import { useState } from 'react';
-
 
 export class Connection {
   private game: string = undefined // We only keep a connection to a single game at a time
@@ -54,7 +55,7 @@ export const ConnectionContext = React.createContext(null);
 
 export const useLeanClient = (gameId) => {
   const leanClient = connection.getLeanClient(gameId)
-  const [leanClientStarted, setLeanClientStarted] = useState(leanClient.isStarted())
+  const [leanClientStarted, setLeanClientStarted] = React.useState(leanClient.isStarted())
 
   React.useEffect(() => {
     const t1 = leanClient.restarted(() => { console.log("START"); setLeanClientStarted(true) })

client/src/state/hooks.ts

@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
-import type { RootState, AppDispatch } from './state/store'
+import type { RootState, AppDispatch } from './store'
 
 // Use throughout your app instead of plain `useDispatch` and `useSelector`
 export const useAppDispatch: () => AppDispatch = useDispatch

client/src/state/progress.ts

@@ -1,6 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit'
 import type { PayloadAction } from '@reduxjs/toolkit'
-import { loadState } from "./localStorage";
+import { loadState } from "./local_storage";
 
 export interface GameProgressState {
   [world: string] : {[level: number]: LevelProgressState}

client/src/state/store.ts

@@ -1,10 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { connection } from '../connection'
+import { debounce } from "debounce";
-import thunkMiddleware from 'redux-thunk'
+
+import { connection } from './connection'
 import { apiSlice } from './api'
 import { progressSlice } from './progress'
-import { saveState } from "./localStorage";
+import { saveState } from "./local_storage";
-import { debounce } from "debounce";
+
 
 export const store = configureStore({
   reducer: {

package-lock.json

@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.10.5",
         "@fontsource/roboto": "^4.5.8",
         "@fontsource/roboto-mono": "^4.5.8",
+        "@leanprover/infoview": "^0.4.3",
         "@mui/icons-material": "^5.11.0",
         "@mui/material": "^5.11.1",
         "@reduxjs/toolkit": "^1.9.1",
@@ -2095,9 +2096,9 @@
       }
     },
     "node_modules/@leanprover/infoview": {
-      "version": "0.4.2",
+      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@leanprover/infoview/-/infoview-0.4.2.tgz",
+      "resolved": "https://registry.npmjs.org/@leanprover/infoview/-/infoview-0.4.3.tgz",
-      "integrity": "sha512-Bj+q/7n1xlnpRd4xsJ75uikZPwW5id/G4G1JPqhbbfMacTwAgzLNFaqJhzBrIUuF5nxJYGKRqRIeFtkalGxJ0g==",
+      "integrity": "sha512-SufdOr2myHAbZNUmobfQdAhsEC5H9ddi3KS0z1v/8riWSMm+yJk3u4LxVuzCmmSmV2QxFqtFzn5z+HQqj1Vo7g==",
       "dependencies": {
         "@leanprover/infoview-api": "~0.2.1",
         "@vscode/codicons": "^0.0.32",

package.json

@@ -8,6 +8,7 @@
     "@emotion/styled": "^11.10.5",
     "@fontsource/roboto": "^4.5.8",
     "@fontsource/roboto-mono": "^4.5.8",
+    "@leanprover/infoview": "^0.4.3",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.11.1",
     "@reduxjs/toolkit": "^1.9.1",