diff options
Diffstat (limited to 'src/pages/home.tsx')
| -rw-r--r-- | src/pages/home.tsx | 66 |
1 files changed, 51 insertions, 15 deletions
diff --git a/src/pages/home.tsx b/src/pages/home.tsx index 65f9ead..853dede 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -38,33 +38,43 @@ var SquareSize: CSSProperties = { height: 90 } +var LeftAlignedTableColumn: CSSProperties = { + textAlign: "left", + paddingLeft: 16 +} + +var RightAlignedTableColumn: CSSProperties = { + textAlign: "right", + paddingRight: 16 +} + function HomePage() { return ( <div> <NavBar /> <CenteredPage> <PageTitle>4 op een rij</PageTitle> - <a href="/"><Vierkant> + <Vierkant href="/"> <VideogameAssetIcon style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Nieuw spel</span> <div style={SquareSize}></div> - </Vierkant></a> - <a href="/"><Vierkant> + </Vierkant> + <Vierkant href="/"> <ExtensionIcon style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Puzzels</span> <div style={SquareSize}></div> - </Vierkant></a> - <a href="/"><Vierkant> + </Vierkant> + <Vierkant href="/"> <Icon path={mdiRobotExcited} style={GameModeIconStyle}/> <span style={GameModeTextStyle}>Tegen computer</span> <div style={SquareSize}></div> - </Vierkant></a> - <a href="/" style={{ verticalAlign: "top" }}><Vierkant> + </Vierkant> + <Vierkant href="/"> <div style={{ position: "relative", width: 280, height: 90 }}> <div style={{ position: "absolute", top: 0, left: 0, - width: 90, height: 90 + ...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> @@ -75,23 +85,49 @@ function HomePage() { }}> <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> + <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)" }}>N V</span> + <span style={{ color: "var(--disk-a-text)" }}>0 V</span> <span style={{ margin: "0 3px" }}>/</span> - <span style={{ opacity: .75 }}>N G</span> + <span style={{ opacity: .75 }}>0 G</span> </p> </div> </div> - </Vierkant></a> + </Vierkant> + <Vierkant width="calc(100% - 12px)"> + <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> ); |