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

change nav-bar on desktop

Browse Source
This commit is contained in:
Jon Eugster
2023-08-02 11:02:13 +02:00
parent 5e4a959c8a
commit e429946046
2 changed files with 102 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/level.css
+7 -4
View File
@@ -300,12 +300,15 @@ td code {
#menu-btn { #menu-btn {
padding: 0; padding: 0;
font-size: 1.3rem; font-size: 1.3rem;
margin-left: .5em;
margin-right: 0;
}
#home-btn {
margin-right: .5em;
margin-left: 0;
} }
.menu.dropdown .svg-inline--fa { .menu.dropdown .svg-inline--fa {
width: 1.8rem; width: 1.8rem;
} }
.nav-btns .btn {
margin-left: .5em;
}
client/src/components/level.tsx
+95 -57
View File
@@ -464,65 +464,103 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle, toggleImpressum,
const [navOpen, setNavOpen] = React.useState(false) const [navOpen, setNavOpen] = React.useState(false)
return <div className="app-bar" style={isLoading ? {display: "none"} : null} > return <div className="app-bar" style={isLoading ? {display: "none"} : null} >
{!mobile && {mobile ?
<div> <>
<span className="app-bar-title"> <div>
{gameInfo.data?.worlds.nodes[worldId].title && `World: ${gameInfo.data?.worlds.nodes[worldId].title}`} <span className="app-bar-title">
</span> {levelTitle}
</div> </span>
} </div>
<div> <div className="nav-btns">
<span className="app-bar-title"> {mobile && pageNumber == 0 ?
{levelTitle} <Button to=""
</span> title="show inventory" inverted="true" onClick={() => {setPageNumber(1)}}>
</div> <FontAwesomeIcon icon={faBook}/>
<div className="nav-btns"> </Button>
{pageNumber == 0 ? : pageNumber == 1 &&
<Button to="" <Button to=""
title="show inventory" inverted="true" onClick={() => {setPageNumber(1)}}> title="show inventory" inverted="true" onClick={() => {setPageNumber(0)}}>
<FontAwesomeIcon icon={faBook}/> <FontAwesomeIcon icon={faArrowLeft}/>
</Button> </Button>
: pageNumber == 1 && }
<Button to="" <Button to="" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}} >
title="show inventory" inverted="true" onClick={() => {setPageNumber(0)}}> {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
<FontAwesomeIcon icon={faArrowLeft}/>
</Button>
}
<Button to="" id="menu-btn" onClick={(ev) => {setNavOpen(!navOpen)}} >
{navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
</Button>
</div>
<div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
{levelId < gameInfo.data?.worldSize[worldId] &&
<Button inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
disabled={difficulty >= 2 && !(completed || levelId == 0)}
onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
</Button>
}
{levelId > 0 && <>
<Button disabled={levelId <= 0} inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
title="previous level"
onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
</Button> </Button>
</>} </div>
<Button to={`/${gameId}`} inverted="true" title="back to world selection"> <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
<FontAwesomeIcon icon={faHome} />&nbsp;Home {levelId < gameInfo.data?.worldSize[worldId] &&
</Button> <Button inverted="true"
<Button disabled={levelId <= 0} inverted="true" to="" to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }} disabled={difficulty >= 2 && !(completed || levelId == 0)}
title="toggle Editor mode"> onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor <FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
</Button> </Button>
<Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}> }
<FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info &amp; Impressum {levelId > 0 && <>
</Button> <Button disabled={levelId <= 0} inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
title="previous level"
onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
</Button>
</>}
<Button to={`/${gameId}`} inverted="true" title="back to world selection">
<FontAwesomeIcon icon={faHome} />&nbsp;Home
</Button>
<Button disabled={levelId <= 0} inverted="true" to=""
onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
title="toggle Editor mode">
<FontAwesomeIcon icon={faCode} />&nbsp;Toggle Editor
</Button>
<Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
<FontAwesomeIcon icon={faCircleInfo} />&nbsp;Info &amp; Impressum
</Button>
</div>
</>
:
<>
<div>
<Button to={`/${gameId}`} inverted="true" title="back to world selection" id="home-btn">
<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>
</div>
<div className="nav-btns">
{levelId > 0 && <>
<Button disabled={levelId <= 0} inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
title="previous level"
onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous
</Button>
</>}
{levelId < gameInfo.data?.worldSize[worldId] &&
<Button inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId + 1}`} title="next level"
disabled={difficulty >= 2 && !(completed || levelId == 0)}
onClick={() => setNavOpen(false)}>
<FontAwesomeIcon icon={faArrowRight} />&nbsp;{levelId ? "Next" : "Start"}
</Button>
}
<Button disabled={levelId <= 0} inverted="true" to=""
onClick={(ev) => { setCommandLineMode(!commandLineMode); setNavOpen(false) }}
title="toggle Editor mode">
<FontAwesomeIcon icon={faCode} />
</Button>
<Button title="information, Impressum, privacy policy" inverted="true" to="" onClick={(ev) => {toggleImpressum(ev); setNavOpen(false)}}>
<FontAwesomeIcon icon={faCircleInfo} />
</Button>
</div>
</>
}
</div> </div>
</div>
} }
function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) { function useLevelEditor(worldId: string, levelId: number, codeviewRef, initialCode, initialSelections, onDidChangeContent, onDidChangeSelection) {