From 9b2d93642e2c94ed96d08858f9e0f737eeba5489 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 5 Jan 2021 20:39:59 +0100
Subject: home pagina klaar

---
 src/pages/home.tsx | 66 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 51 insertions(+), 15 deletions(-)

(limited to 'src/pages')

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>
 	);
-- 
cgit v1.2.3