diff --git a/client/src/components/hints.tsx b/client/src/components/hints.tsx index 93b99ff..bec14b4 100644 --- a/client/src/components/hints.tsx +++ b/client/src/components/hints.tsx @@ -2,25 +2,25 @@ import { GameHint } from "./infoview/rpc_api"; import * as React from 'react'; import Markdown from './markdown'; -export function Hint({hint, selected, toggleSelection} : {hint: GameHint, selected: boolean, toggleSelection: any}) { - return
+export function Hint({hint, step, selected, toggleSelection} : {hint: GameHint, step: number, selected: number, toggleSelection: any}) { + return
{hint.text}
} -export function AdditionalHint({hint, selected, toggleSelection} : {hint: GameHint, selected: boolean, toggleSelection: any}) { - return
+export function AdditionalHint({hint, step, selected, toggleSelection} : {hint: GameHint, step: number, selected: number, toggleSelection: any}) { + return
{hint.text}
} -export function Hints({hints, showHidden, selected, toggleSelection} : {hints: GameHint[], showHidden: boolean, selected: boolean, toggleSelection: any}) { +export function Hints({hints, showHidden, step, selected, toggleSelection} : {hints: GameHint[], showHidden: boolean, step: number, selected: number, toggleSelection: any}) { const openHints = hints.filter(hint => !hint.hidden) const hiddenHints = hints.filter(hint => hint.hidden) return <> - {openHints.map(hint => )} - {showHidden && hiddenHints.map(hint => )} + {openHints.map(hint => )} + {showHidden && hiddenHints.map(hint => )} } diff --git a/client/src/components/infoview/goals.tsx b/client/src/components/infoview/goals.tsx index 7cd67c8..08a0d36 100644 --- a/client/src/components/infoview/goals.tsx +++ b/client/src/components/infoview/goals.tsx @@ -235,7 +235,7 @@ export const OtherGoals = React.memo((props: GoalProps2) => { }) - +// TODO: deprecated export const ProofDisplay = React.memo((props : ProofDisplayProps) => { const { proof } = props const steps = proof.match(/.+/g) diff --git a/client/src/components/infoview/info.tsx b/client/src/components/infoview/info.tsx index e65a56e..1b15983 100644 --- a/client/src/components/infoview/info.tsx +++ b/client/src/components/infoview/info.tsx @@ -124,7 +124,6 @@ const InfoDisplayContent = React.memo((props: InfoDisplayContentProps) => {
{ goals && goals.goals.length > 0 && <> - }
diff --git a/client/src/components/infoview/main.tsx b/client/src/components/infoview/main.tsx index cfcd33d..f31541f 100644 --- a/client/src/components/infoview/main.tsx +++ b/client/src/components/infoview/main.tsx @@ -314,7 +314,7 @@ export function CommandLineInterface(props: {world: string, level: number, data: } } - function selectStep(line: number) { + function toggleSelectStep(line: number) { return (ev) => { if (selectedStep == line) { setSelectedStep(undefined) @@ -326,6 +326,16 @@ export function CommandLineInterface(props: {world: string, level: number, data: } } + // Scroll to element if selection changes + React.useEffect(() => { + if (selectedStep) { + Array.from(proofPanelRef.current?.getElementsByClassName(`step-${selectedStep}`)).map((elem) => { + elem.scrollIntoView({block: "center"}) + }) + } + }, [selectedStep]) + + const completed = useAppSelector(selectCompleted(gameId, props.world, props.level)) /* Set up updates to the global infoview seither you solved the level with warnings or your last command contains a syntax error Lean can't parseate on editor events. */ @@ -378,7 +388,7 @@ export function CommandLineInterface(props: {world: string, level: number, data:
} else { return <> -
+
diff --git a/client/src/components/level.tsx b/client/src/components/level.tsx index f07ced8..439aea9 100644 --- a/client/src/components/level.tsx +++ b/client/src/components/level.tsx @@ -40,6 +40,7 @@ import { changedSelection, codeEdited, selectCode, selectSelections, progressSli import { DualEditor } from './infoview/main' import { Hints } from './hints'; import { InputModeContext, MonacoEditorContext, ProofContext, ProofStep, SelectionContext } from './infoview/context'; +import { hasInteractiveErrors } from './infoview/command_line'; function Level() { @@ -106,6 +107,15 @@ function PlayableLevel({worldId, levelId}) { } }, [commandLineMode]) + // Scroll to element if selection changes + React.useEffect(() => { + if (selectedStep) { + Array.from(chatRef.current?.getElementsByClassName(`step-${selectedStep}`)).map((elem) => { + elem.scrollIntoView({block: "center"}) + }) + } + }, [selectedStep]) + /** Unused. Was implementing an undo button, which has been replaced by `deleteProof` inside * `CommandLineInterface`. */ @@ -217,7 +227,12 @@ function PlayableLevel({worldId, levelId}) {
} {proof.map((step, i) => { - return + // It the last step has errors, it will have the same hints + // as the second-to-last step. Therefore we should not display them. + if (!(i == proof.length - 1 && hasInteractiveErrors(step.errors))) { + return + } })} {completed && <>