home pagina klaar

4 files changed, 94 insertions, 39 deletions

diff --git a/src/components/page.tsx b/src/components/page.tsx
index 8fea132..44b00ba 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -7,8 +7,11 @@ var CenteredPageStyle: CSSProperties = {
 
 export class CenteredPage extends Component {
 	render () {
-		return <div style={CenteredPageStyle}>
-			<div style={{margin: "0 6px"}}> {this.props.children} </div>
+		return <div className="CenteredPageOuter" style={CenteredPageStyle}>
+		<div className="CenteredPageInner" style={{
+			margin: "0 6px",
+			lineHeight: 0
+		}}> {this.props.children} </div>
 		</div>;
 	}
 }
diff --git a/src/components/vierkant.tsx b/src/components/vierkant.tsx
index 6140e7a..588d73d 100644
--- a/src/components/vierkant.tsx
+++ b/src/components/vierkant.tsx
@@ -1,20 +1,24 @@
-import { Component, CSSProperties } from "react";
+import { ReactNode } from "react";
 
-var VierkantStyle: CSSProperties = {
-	padding: 24,
-	backgroundColor: "var(--background)",
-	borderRadius: 8,
-	color: "var(--text)",
-	margin: 6, // geen margin collapse = 12px marge
-	display: "inline-block",
-	position: "relative"
+interface VierkantProps {
+	href?: string;
+	width?: string;
+	height?: string;
+	children?: ReactNode;
 }
 
-export class Vierkant extends Component {
-	render () {
-		return <div style={VierkantStyle}>
-			{this.props.children}
-		</div>
-	}
+export function Vierkant(props: VierkantProps) {
+	return <a style={{
+		padding: 24,
+		backgroundColor: "var(--background)",
+		borderRadius: 8,
+		color: "var(--text)",
+		margin: 6, // geen margin collapse = 12px marge
+		display: "inline-block",
+		position: "relative",
+		boxSizing: "border-box",
+		width: props.width ? props.width : undefined,
+		height: props.height ? props.height : undefined,
+	}} href={props.href}>{props.children}</a>
 }
 
diff --git a/src/global.css b/src/global.css
index 9ef59d4..5787cee 100644
--- a/src/global.css
+++ b/src/global.css
@@ -25,15 +25,27 @@ body {
 }
 
 /* font size */
-html {
-	font-size: 14px;
-}
+html { font-size: 14px; }
 
 /* link color fix */
-a {
-	color: var(--text);
+a { color: var(--text); }
+
+/* centering misschien */
+.CenteredPageInner { text-align: center; }
+.CenteredPageInner > * { text-align: left; }
+
+/* line height reset */
+h1, h2, p, span, td, th {
+	margin: 0;
+	line-height: 1.2;
 }
 
-p {
-	margin: 6px 0;
+/* table groottes met percentages werkt nu */
+table { table-layout: fixed; }
+
+/* table styles */
+td, th {
+	padding: 4px;
+	font-size: 15px;
 }
+
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>
 	);