diff options
| -rw-r--r-- | components/navbar.tsx | 2 | ||||
| -rw-r--r-- | pages/index.tsx | 163 |
2 files changed, 88 insertions, 77 deletions
diff --git a/components/navbar.tsx b/components/navbar.tsx index 41db147..56d6b4b 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -40,7 +40,7 @@ export function NavBar() { <div style={NavBarItemStyle}><LogoDark/></div> <a href="/" style={NavBarItemStyle}><Home/></a> <a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a> - <a href="/" style={NavBarItemStyle}><ExtensionIcon/></a> + { false && <a href="/" style={NavBarItemStyle}><ExtensionIcon/></a> } <a href="/search" style={NavBarItemStyle}><SearchIcon/></a> <div style={{ diff --git a/pages/index.tsx b/pages/index.tsx index 82c6371..84f08b8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -41,74 +41,75 @@ var SquareSize: CSSProperties = { height: 90 } +var LoginOrRegisterBoxStyle: CSSProperties = { + verticalAlign: "top", + height: `calc(${SquareSize.height}px + 24px * 2)`, + width: "100%", + maxWidth: `calc(100% - ${SquareSize.width}px - 12px * 2 - 24px * 2)` +} + +var InnerLoginOrRegisterBoxStyle: CSSProperties = { + position: "relative", + width: "100%", + height: "100%" +} + function LoginOrRegisterBox() { - return <Vierkant style={{ verticalAlign: "top" }}> + return <div style={{ ...InnerLoginOrRegisterBoxStyle, textAlign: "center" }}> + <span style={{ + userSelect: "none", + display: "inline-block", + position: "absolute", + fontSize: 14, + left: 0, right: 0, top: 0 + }}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span> <div style={{ - position: "relative", - width: 280, - height: 90, - textAlign: "center" + display: "grid", + gridGap: 24, + gridTemplateColumns: "1fr 1fr", + position: "absolute", + left: 0, right: 0, bottom: 0 }}> - <span style={{ - userSelect: "none", - display: "inline-block", - position: "absolute", - fontSize: 14, - left: 0, right: 0, top: 0 - }}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span> - <div style={{ - display: "grid", - gridGap: 24, - gridTemplateColumns: "1fr 1fr", - position: "absolute", - left: 0, right: 0, bottom: 0 - }}> - <Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/> - <Button href="/login" text="Inloggen"/> - </div> + <Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/> + <Button href="/login" text="Inloggen"/> </div> - </Vierkant> + </div> } function AccountBox(props: { info: userInfo; }) { - return <Vierkant style={{ verticalAlign: "top" }}> + return <div style={InnerLoginOrRegisterBoxStyle}> + <div style={{ + position: "absolute", + top: 0, left: 0, + ...SquareSize + }}> + <AccountAvatar size={90} dummy/> + </div> <div style={{ - position: "relative", - width: 280, - height: 90 + position: "absolute", + top: 0, left: 102, + width: "calc(100% - 90px - 12px)", + height: "100%" }}> - <div style={{ - position: "absolute", - top: 0, left: 0, - ...SquareSize - }}> - <AccountAvatar size={90} dummy/> - </div> - <div style={{ - position: "absolute", - top: 0, left: 102, - width: 178, height: 90 - }}> - <h2 style={{ - maxWidth: 178, - fontSize: 20, - whiteSpace: "nowrap", - overflow: "hidden", - textOverflow: "ellipsis", - }}>{props.info.username}</h2> - <p style={{ marginTop: 6 }}>Score: 400</p> - <p style={{ position: "absolute", bottom: 0, left: 0 }}> - <span style={{ color: "var(--disk-b-text)" }}>0 W</span> - <span style={{ margin: "0 3px" }}>/</span> - <span style={{ color: "var(--disk-a-text)" }}>0 V</span> - <span style={{ margin: "0 3px" }}>/</span> - <span style={{ opacity: .75 }}>0 G</span> - </p> - </div> + <h2 style={{ + maxWidth: 178, + fontSize: 20, + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }}>{props.info.username}</h2> + <p style={{ marginTop: 6 }}>Score: 400</p> + <p style={{ position: "absolute", bottom: 0, left: 0 }}> + <span style={{ color: "var(--disk-b-text)" }}>0 W</span> + <span style={{ margin: "0 3px" }}>/</span> + <span style={{ color: "var(--disk-a-text)" }}>0 V</span> + <span style={{ margin: "0 3px" }}>/</span> + <span style={{ opacity: .75 }}>0 G</span> + </p> </div> - </Vierkant> + </div> } export default class HomePage extends Component { @@ -141,26 +142,36 @@ export default class HomePage extends Component { <NavBar/> <CenteredPage width={802}> <PageTitle>4 op een rij</PageTitle> - <Vierkant href="/game"> - <VideogameAssetIcon style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Nieuw spel</span> - <div style={SquareSize}></div> - </Vierkant> - <Vierkant href="/"> - <ExtensionIcon style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Puzzels</span> - <div style={SquareSize}></div> - </Vierkant> - <Vierkant href="/"> - <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> - <span style={GameModeTextStyle}>Tegen computer</span> - <div style={SquareSize}></div> - </Vierkant> - { - this.state.loggedIn ? - <AccountBox info={this.state.info}/> : - <LoginOrRegisterBox/> - } + <div> + <Vierkant href="/game"> + <VideogameAssetIcon style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Nieuw spel</span> + <div style={SquareSize}></div> + </Vierkant> + { + false && + <Vierkant href="/"> + <ExtensionIcon style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Puzzels</span> + <div style={SquareSize}></div> + </Vierkant> + } + { + false && + <Vierkant href="/"> + <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> + <span style={GameModeTextStyle}>Tegen computer</span> + <div style={SquareSize}></div> + </Vierkant> + } + <Vierkant style={LoginOrRegisterBoxStyle}> + { + this.state.loggedIn ? + <AccountBox info={this.state.info}/> : + <LoginOrRegisterBox/> + } + </Vierkant> + </div> { this.state.loggedIn && <Vierkant fullwidth> |