fix end-of-level-buttons for mobile
This commit is contained in:
@@ -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} /> Leave World
|
<FontAwesomeIcon icon={faHome} /> Leave World
|
||||||
</Button>
|
</Button>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user