phc
/
lean4game
6
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix end-of-level-buttons for mobile

Browse Source
pull/118/head
Jon Eugster 3 years ago
parent e23a4bec64
commit 1ce68fe7fe
3 changed files with 12 additions and 10 deletions
Show Stats Download Patch File Download Diff File

12
client/src/components/infoview/main.tsx
Unescape Escape View File

@ -39,7 +39,7 @@ import { Hints } from '../hints';
/** Wrapper for the two editors. It is important that the `div` with `codeViewRef` is /** Wrapper for the two editors. It is important that the `div` with `codeViewRef` is
* always present, or the monaco editor cannot start. * always present, or the monaco editor cannot start.
*/ */
export function DualEditor({ level, codeviewRef, levelId, worldId, lastLevel = false }) { export function DualEditor({ level, codeviewRef, levelId, worldId, worldSize }) {
const ec = React.useContext(EditorContext) const ec = React.useContext(EditorContext)
const { commandLineMode } = React.useContext(InputModeContext) const { commandLineMode } = React.useContext(InputModeContext)
return <> return <>
@ -48,7 +48,7 @@ export function DualEditor({ level, codeviewRef, levelId, worldId, lastLevel = f
<div ref={codeviewRef} className={'codeview'}></div> <div ref={codeviewRef} className={'codeview'}></div>
</div> </div>
{ec ? {ec ?
<DualEditorMain worldId={worldId} levelId={levelId} level={level} lastLevel={lastLevel} /> : <DualEditorMain worldId={worldId} levelId={levelId} level={level} worldSize={worldSize} /> :
// TODO: Style this if relevant. // TODO: Style this if relevant.
<> <>
<p>Editor is starting up...</p> <p>Editor is starting up...</p>
@ -59,7 +59,7 @@ export function DualEditor({ level, codeviewRef, levelId, worldId, lastLevel = f
} }
/** The part of the two editors that needs the editor connection first */ /** The part of the two editors that needs the editor connection first */
function DualEditorMain({ worldId, levelId, level, lastLevel }: { worldId: string, levelId: number, level: LevelInfo, lastLevel: boolean }) { function DualEditorMain({ worldId, levelId, level, worldSize }: { worldId: string, levelId: number, level: LevelInfo, worldSize: number }) {
const ec = React.useContext(EditorContext) const ec = React.useContext(EditorContext)
const gameId = React.useContext(GameIdContext) const gameId = React.useContext(GameIdContext)
const { commandLineMode } = React.useContext(InputModeContext) const { commandLineMode } = React.useContext(InputModeContext)
@ -109,7 +109,7 @@ function DualEditorMain({ worldId, levelId, level, lastLevel }: { worldId: strin
<WithLspDiagnosticsContext> <WithLspDiagnosticsContext>
<ProgressContext.Provider value={allProgress}> <ProgressContext.Provider value={allProgress}>
{commandLineMode ? {commandLineMode ?
<CommandLineInterface world={worldId} level={levelId} data={level} lastLevel={lastLevel}/> <CommandLineInterface world={worldId} level={levelId} data={level} worldSize={worldSize}/>
: :
<Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} /> <Main key={`${worldId}/${levelId}`} world={worldId} level={levelId} />
} }
@ -282,7 +282,7 @@ function GoalsTab({ proofStep }: { proofStep: ProofStep }) {
} }
/** The interface in command line mode */ /** The interface in command line mode */
export function CommandLineInterface(props: { world: string, level: number, data: LevelInfo, lastLevel: boolean }) { export function CommandLineInterface(props: { world: string, level: number, data: LevelInfo, worldSize: number }) {
const ec = React.useContext(EditorContext) const ec = React.useContext(EditorContext)
const editor = React.useContext(MonacoEditorContext) const editor = React.useContext(MonacoEditorContext)
@ -456,7 +456,7 @@ export function CommandLineInterface(props: { world: string, level: number, data
)} )}
{completed && i == proof.length - 1 && {completed && i == proof.length - 1 &&
<div className="button-row"> <div className="button-row">
{props.lastLevel ? {props.level >= props.worldSize ?
<Button to={`/${gameId}`}> <Button to={`/${gameId}`}>
<FontAwesomeIcon icon={faHome} />&nbsp;Leave World <FontAwesomeIcon icon={faHome} />&nbsp;Leave World
</Button> </Button>

4
client/src/components/level.tsx
Unescape Escape View File

@ -318,7 +318,7 @@ function PlayableLevel({worldId, levelId}) {
<EditorContext.Provider value={editorConnection}> <EditorContext.Provider value={editorConnection}>
<MonacoEditorContext.Provider value={editor}> <MonacoEditorContext.Provider value={editor}>
<div className="exercise"> <div className="exercise">
<DualEditor level={level?.data} codeviewRef={codeviewRef} levelId={levelId} worldId={worldId} /> <DualEditor level={level?.data} codeviewRef={codeviewRef} levelId={levelId} worldId={worldId} worldSize={gameInfo.data?.worldSize[worldId]}/>
</div> </div>
</MonacoEditorContext.Provider> </MonacoEditorContext.Provider>
</EditorContext.Provider> </EditorContext.Provider>
@ -388,7 +388,7 @@ function PlayableLevel({worldId, levelId}) {
<EditorContext.Provider value={editorConnection}> <EditorContext.Provider value={editorConnection}>
<MonacoEditorContext.Provider value={editor}> <MonacoEditorContext.Provider value={editor}>
<div className="exercise"> <div className="exercise">
<DualEditor level={level?.data} codeviewRef={codeviewRef} levelId={levelId} worldId={worldId} /> <DualEditor level={level?.data} codeviewRef={codeviewRef} levelId={levelId} worldId={worldId} worldSize={gameInfo.data?.worldSize[worldId]}/>
</div> </div>
</MonacoEditorContext.Provider> </MonacoEditorContext.Provider>
</EditorContext.Provider> </EditorContext.Provider>

6
client/src/components/world_selection_menu.tsx
Unescape Escape View File

@ -148,8 +148,10 @@ export function WorldSelectionMenu() {
<h2>Delete Progress?</h2> <h2>Delete Progress?</h2>
<p>Do you want to delete your saved progress irreversibly?</p> <p>Do you want to delete your saved progress irreversibly?</p>
<p>(This only affects your saved proofs, no levels are ever locked. <p>
Saves from other games are not deleted.)</p> (This deletes your proofs and your collected inventory.
Saves from other games are not deleted.)
</p>
<Button onClick={eraseProgress} to="">Delete</Button> <Button onClick={eraseProgress} to="">Delete</Button>
<Button onClick={downloadAndErase} to="">Download & Delete</Button> <Button onClick={downloadAndErase} to="">Download & Delete</Button>

Write Preview
Loading…
Cancel
Save