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

refactor LevelAppBar

Browse Source
This commit is contained in:
Alexander Bentkamp
2023-03-10 16:11:11 +01:00
parent 5dfa7b56ec
commit 35eb6c3ec0
2 changed files with 38 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Level.tsx
+37 -54
View File
@@ -138,32 +138,15 @@ function Level() {
// for each world. // for each world.
if (levelId == 0) { if (levelId == 0) {
return <> return <>
<div className="app-bar"> <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
<div> <LevelAppBar isLoading={gameInfo.isLoading} levelTitle="Einführung" worldId={worldId} levelId={levelId} />
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button> <div style={gameInfo.isLoading ? {display: "none"} : null} className="exercise-panel">
<span className="app-bar-title"> <div ref={introductionPanelRef} className="introduction-panel">
{gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`} <Alert severity="info" sx={{ mt: 1 }}>
</span> <Markdown>
</div> {gameInfo.data?.worlds.nodes[worldId].introduction}
<div> </Markdown>
<span className="app-bar-title"> </Alert>
{`Einführung`}
</span>
<Button disabled={levelId <= 1} inverted={true}
to={`/world/${worldId}/level/0`}
><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
to={`/world/${worldId}/level/1`}
>Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
</div>
</div>
<div className="exercise-panel">
<div ref={introductionPanelRef} className="introduction-panel">
<Alert severity="info" sx={{ mt: 1 }}>
<Markdown>
{gameInfo.data?.worlds.nodes[worldId].introduction}
</Markdown>
</Alert>
<div ref={codeviewRef} className={`codeview ${commandLineMode ? 'hidden' : ''}`}></div> <div ref={codeviewRef} className={`codeview ${commandLineMode ? 'hidden' : ''}`}></div>
</div> </div>
<div className="conclusion"> <div className="conclusion">
@@ -177,36 +160,11 @@ function Level() {
</> </>
} }
const levelTitle = <>{levelId && `Level ${levelId}`}{level?.data?.title && `: ${level?.data?.title}`}</>
return <> return <>
<div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div> <div style={level.isLoading ? null : {display: "none"}} className="app-content loading"><CircularProgress /></div>
<div style={level.isLoading ? {display: "none"} : null} className="app-bar"> <LevelAppBar isLoading={level.isLoading} levelTitle={levelTitle} worldId={worldId} levelId={levelId} />
<div> <Split minSize={0} snapOffset={200} sizes={[50, 25, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button>
<span className="app-bar-title">
{gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
</span>
</div>
<div>
<span className="app-bar-title">
{levelId && `Level ${levelId}`}{level?.data?.title && `: ${level?.data?.title}`}
</span>
<Button disabled={levelId <= 0} inverted={true}
to={`/world/${worldId}/level/${levelId - 1}`}
><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
to={`/world/${worldId}/level/${levelId + 1}`}
>Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
</div>
</div>
<Split minSize={0} snapOffset={200} sizes={[0, 50, 25, 25]} className={`app-content level ${level.isLoading ? 'hidden' : ''}`}>
<div className="side-panel">
{/*
<div ref={introductionPanelRef} className="introduction-panel">
<Markdown>{level?.data?.introduction}</Markdown>
</div>
*/}
</div>
<div className="exercise-panel"> <div className="exercise-panel">
<div ref={introductionPanelRef} className="introduction-panel"> <div ref={introductionPanelRef} className="introduction-panel">
<Alert severity="info" sx={{ mt: 1 }}> <Alert severity="info" sx={{ mt: 1 }}>
@@ -258,6 +216,31 @@ function Level() {
export default Level export default Level
function LevelAppBar ({isLoading, levelId, worldId, levelTitle}) {
const gameInfo = useGetGameInfoQuery()
return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
<div>
<Button to={`/`}><FontAwesomeIcon icon={faHome} /></Button>
<span className="app-bar-title">
{gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`}
</span>
</div>
<div>
<span className="app-bar-title">
{levelTitle}
</span>
<Button disabled={levelId <= 0} inverted={true}
to={`/world/${worldId}/level/${levelId - 1}`}
><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
to={`/world/${worldId}/level/${levelId + 1}`}
>Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
</div>
</div>
}
function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, onDidChangeContent) { function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, onDidChangeContent) {
const connection = React.useContext(ConnectionContext) const connection = React.useContext(ConnectionContext)
client/src/components/level.css
+1 -7
View File
@@ -24,17 +24,11 @@
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
} }
.side-panel, .exercise-panel, .doc-panel { .inventory-panel, .exercise-panel, .doc-panel {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.side-panel {
display: flex;
flex-flow: column;
background-color: #e9f2fb;
}
.introduction-panel, .infoview, .exercise, .conclusion { .introduction-panel, .infoview, .exercise, .conclusion {
padding-top: 1em; padding-top: 1em;
padding-left: 1em; padding-left: 1em;