diff options
Diffstat (limited to 'pages/index.tsx')
| -rw-r--r-- | pages/index.tsx | 198 |
1 files changed, 198 insertions, 0 deletions
diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..ff4e2b7 --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1,198 @@ +import { CSSProperties, Component } from 'react'; +import axios from 'axios'; +import { userInfo } from '../api/api'; + +import { NavBar } from '../components/navbar'; +import { CenteredPage, PageTitle } from '../components/page'; +import { Vierkant, Button } from '../components/ui'; +import { AccountAvatar } from '../components/account'; +import { ToastArea, Toast } from '../components/toast'; + +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; +import ExtensionIcon from '@material-ui/icons/Extension'; + +import Icon from '@mdi/react'; +import { mdiRobotExcited } from '@mdi/js'; + +var GameModeIconStyle: CSSProperties = { + fontSize: 64, + width: 64, + height: 64, + display: "inline-block", + position: "absolute", + top: 24, + left: "50%", + transform: "translateX(-50%)" +} + +var GameModeTextStyle: CSSProperties = { + whiteSpace: "nowrap", + display: "inline-block", + position: "absolute", + bottom: 24, + left: "50%", + transform: "translateX(-50%)", + userSelect: "none", + fontWeight: 500 +} + +var SquareSize: CSSProperties = { + width: 90, + height: 90 +} + +var LeftAlignedTableColumn: CSSProperties = { + textAlign: "left", + paddingLeft: 16 +} + +var RightAlignedTableColumn: CSSProperties = { + textAlign: "right", + paddingRight: 16 +} + +export default class HomePage extends Component { + state: { + info: userInfo, + loggedIn: boolean + } = { + info: {}, + loggedIn: false + } + + getUserInfo () { + axios.request<userInfo>({ + method: "get", + url: `/api/user/info`, + headers: {"content-type": "application/json"} + }) + .then(request => this.setState({ + info: request.data, + loggedIn: request.status == 200 + })) + .catch(console.log); + } + + constructor(props: {}) { + super(props); + this.getUserInfo(); + } + + render () { + return <div> + <NavBar/> + <ToastArea> + <Toast text="Met icoon" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/> + <Toast text="Confirmation" type="confirmation"/> + <Toast text="Error" type="error"/> + </ToastArea> + <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> + <Vierkant href={ this.state.loggedIn ? "/account" : undefined } style={{ verticalAlign: "top" }}> + <div style={{ + position: "relative", + width: 280, + height: 90, + textAlign: "center", + display: this.state.loggedIn ? "none" : "inline-block" + }}> + <span style={{ + userSelect: "none", + display: "inline-block", + position: "absolute", + 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> + </div> + <div style={{ + position: "relative", + width: 280, + height: 90, + display: this.state.loggedIn ? "inline-block" : "none" + }}> + <div style={{ + position: "absolute", + top: 0, left: 0, + ...SquareSize + }}> + <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, + fontSize: 20, + whiteSpace: "nowrap", + overflow: "hidden", + textOverflow: "ellipsis", + }}>{this.state.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> + </div> + </Vierkant> + <Vierkant width="calc(100% - 12px)" style={{ display: this.state.loggedIn ? "block" : "none" }}> + <h2>Recente partijen</h2> + <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}> + <tr> + <th style={{ width: "50%" }}>Tegenstander</th> + <th style={{ width: "20%" }}>Uitkomst</th> + <th style={{ width: "15%" }}>Zetten</th> + <th style={{ width: "15%" }}>Datum</th> + </tr> + <tr> + <td style={LeftAlignedTableColumn}>Naam hier</td> + <td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td> + <td>7</td> + <td style={RightAlignedTableColumn}>Vandaag</td> + </tr> + <tr> + <td style={LeftAlignedTableColumn}>Nog meer namen</td> + <td style={{ opacity: .6 }}>Gelijkspel</td> + <td>42</td> + <td style={RightAlignedTableColumn}>Gisteren</td> + </tr> + </table> + </Vierkant> + <Vierkant width="calc(100% - 12px)"> + <h2>Nieuws ofzo</h2> + <p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p> + </Vierkant> + </CenteredPage> + </div> + } +} + |