diff --git a/client/src/components/Level.tsx b/client/src/components/Level.tsx index d8e02d4..f008905 100644 --- a/client/src/components/Level.tsx +++ b/client/src/components/Level.tsx @@ -9,7 +9,6 @@ import { Link, useParams } from 'react-router-dom'; import { Box, CircularProgress, FormControlLabel, FormGroup, Switch, IconButton } from '@mui/material'; import MuiDrawer from '@mui/material/Drawer'; import Grid from '@mui/material/Unstable_Grid2'; -import {Inventory, Documentation} from './Inventory'; import { LeanTaskGutter } from 'lean4web/client/src/editor/taskgutter'; import { AbbreviationProvider } from 'lean4web/client/src/editor/abbreviation/AbbreviationProvider'; import 'lean4web/client/src/editor/vscode.css'; @@ -19,31 +18,29 @@ import { InfoProvider } from 'lean4web/client/src/editor/infoview'; import 'lean4web/client/src/editor/infoview.css' import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js' import './level.css' -import { Button } from './Button' -import { ConnectionContext, useLeanClient } from '../connection'; -import { useGetGameInfoQuery, useLoadLevelQuery } from '../state/api'; -import { changedSelection, codeEdited, selectCode, selectSelections, progressSlice, selectCompleted } from '../state/progress'; -import { useAppDispatch, useAppSelector } from '../hooks'; import { useStore } from 'react-redux'; - import { EditorContext, ConfigContext, ProgressContext, VersionContext } from '../../../node_modules/lean4-infoview/src/infoview/contexts'; import { EditorConnection, EditorEvents } from '../../../node_modules/lean4-infoview/src/infoview/editorConnection'; import { EventEmitter } from '../../../node_modules/lean4-infoview/src/infoview/event'; -import { EditorInterface, CommandLineInterface } from './infoview/main' 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 Markdown from './Markdown'; - import Split from 'react-split' import { Alert } from '@mui/material'; -import { GameIdContext } from '../App'; -import { GameHint } from './infoview/rpcApi'; +import { Button } from './Button' +import {Inventory, Documentation} from './Inventory'; +import Markdown from './Markdown'; +import { EditorInterface, CommandLineInterface } from './infoview/main' import { Hints } from './infoview/hints'; +import { GameHint } from './infoview/rpcApi'; +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'; + export const MonacoEditorContext = React.createContext(null as any); @@ -59,6 +56,7 @@ export const HintContext = React.createContext<{ setHints: () => {}, }); + export const InputModeContext = React.createContext<{ commandLineMode: boolean, setCommandLineMode: React.Dispatch>, @@ -86,17 +84,6 @@ function Level() { } } -// The mathematical formulation of the statement, supporting e.g. Latex -// It takes three forms, depending on the precence of name and description: -// - Theorem xyz: description -// - Theorem xyz -// - Exercises: description -function ExerciseStatement({data}) { - return
- {(data?.statementName ? `**Theorem** \`${data?.statementName}\`: ` : data?.descrText && "**Exercise**: ") + `${data?.descrText}` } -
-} - function PlayableLevel({worldId, levelId}) { const codeviewRef = useRef(null) const chatPanelRef = useRef(null) @@ -271,7 +258,6 @@ function PlayableLevel({worldId, levelId}) {
-
{/* We need the editor to always there and hidden because the command line edits its content */} @@ -280,7 +266,7 @@ function PlayableLevel({worldId, levelId}) { { // TODO: Is there any possibility that the editor connection takes a while // and we should show a circular progress here? commandLineMode && editorConnection && - + }
diff --git a/client/src/components/infoview/goals.tsx b/client/src/components/infoview/goals.tsx index 9851c30..e83888c 100644 --- a/client/src/components/infoview/goals.tsx +++ b/client/src/components/infoview/goals.tsx @@ -170,7 +170,7 @@ export const Goal = React.memo((props: GoalProps) => { {!commandLine && assumptionHyps.length > 0 &&
Assumptions:
{assumptionHyps.map((h, i) => )}
} - {commandLine && commandLineMode && } + {/* {commandLine && commandLineMode && } */} {!filter.reverse && goalLi} {/* {showHints && hints} */}
diff --git a/client/src/components/infoview/info.tsx b/client/src/components/infoview/info.tsx index ad7e2f8..0c15c7d 100644 --- a/client/src/components/infoview/info.tsx +++ b/client/src/components/infoview/info.tsx @@ -128,7 +128,7 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
{ goals && goals.goals.length > 0 && <> - + {/* */} }
diff --git a/client/src/components/infoview/infoview.css b/client/src/components/infoview/infoview.css index c8d072a..8fa999f 100644 --- a/client/src/components/infoview/infoview.css +++ b/client/src/components/infoview/infoview.css @@ -41,7 +41,7 @@ padding: 0.5em; font-family: var(--ff-primary); border-radius: 0.2em; - margin: 0.2em 0; + margin: 0.2em 0 0; } .command-line form { diff --git a/client/src/components/infoview/main.tsx b/client/src/components/infoview/main.tsx index 5c151ed..fc91391 100644 --- a/client/src/components/infoview/main.tsx +++ b/client/src/components/infoview/main.tsx @@ -21,6 +21,20 @@ import { useAppDispatch, useAppSelector } from '../../hooks'; import { levelCompleted, selectCompleted } from '../../state/progress'; import { GameIdContext } from '../../App'; import { InputModeContext } from '../Level'; +import { CommandLine } from './CommandLine'; +import Markdown from '../Markdown'; +import { LevelInfo } from '../../state/api'; + +// The mathematical formulation of the statement, supporting e.g. Latex +// It takes three forms, depending on the precence of name and description: +// - Theorem xyz: description +// - Theorem xyz +// - Exercises: description +function ExerciseStatement({data}) { + return
+ {(data?.statementName ? `**Theorem** \`${data?.statementName}\`: ` : data?.descrText && "**Exercise**: ") + `${data?.descrText}` } +
+} // TODO: This is only used in `EditorInterface` // while `CommandLineInterface` has this copy-pasted in. @@ -110,6 +124,7 @@ export function EditorInterface({data, codeviewRef, hidden, worldId, levelId, ed const { commandLineMode, setCommandLineMode } = React.useContext(InputModeContext) return
+
{data?.descrFormat}
{editorConnection &&
} @@ -117,7 +132,7 @@ export function EditorInterface({data, codeviewRef, hidden, worldId, levelId, ed
} -export function CommandLineInterface(props: {world: string, level: number}) { +export function CommandLineInterface(props: {world: string, level: number, data: LevelInfo}) { const ec = React.useContext(EditorContext); const gameId = React.useContext(GameIdContext) @@ -177,13 +192,18 @@ export function CommandLineInterface(props: {world: string, level: number}) { } else if (serverStoppedResult){ ret =

{serverStoppedResult.message}

{serverStoppedResult.reason}

} else { - ret =
- {completed &&
Level completed! 🎉
} - + //className="infoview vscode-light" + ret =
+ {/* {completed &&
Level completed! 🎉
} */} +
+ + +
+
} - return
+ return <> {/* */} @@ -196,7 +216,7 @@ export function CommandLineInterface(props: {world: string, level: number}) { -
+ } diff --git a/client/src/components/level.css b/client/src/components/level.css index a95460d..ad99469 100644 --- a/client/src/components/level.css +++ b/client/src/components/level.css @@ -29,11 +29,14 @@ overflow: auto; } -.chat-panel, .infoview, .exercise, .exercise-statement { +.chat-panel, .infoview, .exercise { padding-top: 1em; + padding-bottom: 0; +} + +.chat-panel, .infoview, .exercise-statement { padding-left: 1em; padding-right: 1em; - padding-bottom: 0; } .conclusion { @@ -172,6 +175,10 @@ td code { margin: 1px; } */ +.exercise { + height: 100%; +} + .chat { height: calc(100% - 3.5em); overflow-y: scroll; @@ -182,3 +189,24 @@ td code { height: 3.5em; border-top: 0.1em solid #aaa; } + +/* .exercise-panel { + display: flex; + flex-flow: column; + height: 100%; +} */ + +.commandline-interface { + display: flex; + flex-flow: column; + height: 100%; +} + +.command-line { + flex: 0 1 auto; +} + +.commandline-interface .content { + flex: 1 1 auto; + overflow-y: scroll; +}