From e5f33be1d2a348416bb63e055365fc0dd611c885 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Tue, 5 Jan 2021 16:55:03 +0100
Subject: account ding op homepagina

---
 src/components/account.tsx | 16 +++++++++++++
 src/components/page.tsx    |  4 ++--
 src/pages/home.tsx         | 58 ++++++++++++++++++++++++++++++++++++++--------
 src/routes.tsx             |  4 +---
 4 files changed, 67 insertions(+), 15 deletions(-)
 create mode 100644 src/components/account.tsx

(limited to 'src')

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