diff options
| -rw-r--r-- | src/components/account.tsx | 16 | ||||
| -rw-r--r-- | src/components/page.tsx | 4 | ||||
| -rw-r--r-- | src/pages/home.tsx | 58 | ||||
| -rw-r--r-- | src/routes.tsx | 4 |
4 files changed, 67 insertions, 15 deletions
diff --git a/src/components/account.tsx b/src/components/account.tsx new file mode 100644 index 0000000..d643ceb --- /dev/null +++ b/src/components/account.tsx @@ -0,0 +1,16 @@ +interface AccountAvatarProps { + size: number; + image: string; +} + +export function AccountAvatar(props: AccountAvatarProps) { + return <div style={{ + width: props.size, + height: props.size, + backgroundImage: props.image, + backgroundSize: "cover", + display: "inline-block" + }}></div>; +} + + diff --git a/src/components/page.tsx b/src/components/page.tsx index 045b0f7..8fea132 100644 --- a/src/components/page.tsx +++ b/src/components/page.tsx @@ -1,7 +1,7 @@ import { Component, CSSProperties } from 'react'; var CenteredPageStyle: CSSProperties = { - maxWidth: 783, + maxWidth: 802, margin: "0 auto" } @@ -14,7 +14,7 @@ export class CenteredPage extends Component { } var PageTitleStyle: CSSProperties = { - color: "var(--background)", + color: "var(--text-alt)", marginLeft: 6, marginTop: 32, marginBottom: 64, diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 4557ffa..65f9ead 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,8 +1,9 @@ -import {CSSProperties} from 'react'; +import { CSSProperties } from 'react'; import { NavBar } from '../components/navbar'; import { CenteredPage, PageTitle } from '../components/page'; import { Vierkant } from '../components/vierkant'; +import { AccountAvatar } from '../components/account'; import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import ExtensionIcon from '@material-ui/icons/Extension'; @@ -12,6 +13,8 @@ import { mdiRobotExcited } from '@mdi/js'; var GameModeIconStyle: CSSProperties = { fontSize: 64, + width: 64, + height: 64, display: "inline-block", position: "absolute", top: 24, @@ -25,12 +28,14 @@ var GameModeTextStyle: CSSProperties = { position: "absolute", bottom: 24, left: "50%", - transform: "translateX(-50%)" + transform: "translateX(-50%)", + userSelect: "none", + fontWeight: 500 } var SquareSize: CSSProperties = { - width: 100, - height: 100 + width: 90, + height: 90 } function HomePage() { @@ -39,21 +44,54 @@ function HomePage() { <NavBar /> <CenteredPage> <PageTitle>4 op een rij</PageTitle> - <Vierkant> + <a href="/"><Vierkant> <VideogameAssetIcon style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Nieuw spel</span> <div style={SquareSize}></div> - </Vierkant> - <Vierkant> + </Vierkant></a> + <a href="/"><Vierkant> <ExtensionIcon style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Puzzels</span> <div style={SquareSize}></div> - </Vierkant> - <Vierkant> + </Vierkant></a> + <a href="/"><Vierkant> <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Tegen computer</span> <div style={SquareSize}></div> - </Vierkant> + </Vierkant></a> + <a href="/" style={{ verticalAlign: "top" }}><Vierkant> + <div style={{ position: "relative", width: 280, height: 90 }}> + <div style={{ + position: "absolute", + top: 0, left: 0, + width: 90, height: 90 + }}> + <AccountAvatar size={90} image="url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblogs.agu.org%2Fwildwildscience%2Ffiles%2F2017%2F09%2FCapture-1.png&f=1&nofb=1)"/> + </div> + <div style={{ + position: "absolute", + top: 0, left: 102, + width: 178, height: 90 + }}> + <h2 style={{ + maxWidth: 178, + margin: 0, + fontSize: 20, + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }}>Gebruikersnaam</h2> + <p>Score: 400</p> + <p style={{ position: "absolute", bottom: 0, left: 0, margin: 0 }}> + <span style={{ color: "var(--disk-b-text)" }}>N W</span> + <span style={{ margin: "0 3px" }}>/</span> + <span style={{ color: "var(--disk-a-text)" }}>N V</span> + <span style={{ margin: "0 3px" }}>/</span> + <span style={{ opacity: .75 }}>N G</span> + </p> + </div> + </div> + </Vierkant></a> </CenteredPage> </div> ); diff --git a/src/routes.tsx b/src/routes.tsx index 2a1f452..91768f6 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -1,8 +1,6 @@ import { Switch, Route } from 'react-router-dom'; -import './css/nomargin.css'; -import './css/color.css'; -import './css/link.css'; +import './global.css'; import HomePage from './pages/home'; |