From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 16 Jan 2021 11:40:36 +0100
Subject: semi working next project

---
 pages/index.tsx | 198 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 198 insertions(+)
 create mode 100644 pages/index.tsx

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
new file mode 100644
index 0000000..b3e0e1f
--- /dev/null
+++ b/pages/index.tsx
@@ -0,0 +1,198 @@
+import { CSSProperties, Component, useEffect } 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: `${window.location.origin}/api/user/info`,
+			headers: {"content-type": "application/json"}
+		})
+		.then(request => this.setState({ info: request.data }))
+		.catch(console.log);
+	}
+
+	constructor(props: {}) {
+		super(props);
+
+		useEffect(() => {
+			this.setState({ loggedIn: document.cookie.includes("token") })
+			if(this.state.loggedIn) this.getUserInfo()
+		})
+	}
+
+	render () {
+		return <div>
+			<NavBar/>
+			<ToastArea>
+				<Toast text="Gert" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
+				<Toast text="Gert"/>
+			</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>
+	}
+}
+
-- 
cgit v1.2.3


From 3fc06ea736283ad38bb51b932ab0e91dae081159 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sat, 16 Jan 2021 14:51:20 +0100
Subject: home pagina "gefixt"

---
 package.json    |  1 +
 pages/index.tsx | 13 ++++++-------
 yarn.lock       | 12 ++++++++++++
 3 files changed, 19 insertions(+), 7 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/package.json b/package.json
index e97d3c1..be14a14 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^17.0.1",
     "react-router-dom": "^5.2.0",
     "react-scripts": "^4.0.1",
+    "swr": "^0.4.0",
     "typescript": "^4.1.3",
     "uuid": "^8.3.2",
     "web-vitals": "^0.2.4"
diff --git a/pages/index.tsx b/pages/index.tsx
index b3e0e1f..9c56f52 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -63,20 +63,19 @@ export default class HomePage extends Component {
 	getUserInfo () {
 		axios.request<userInfo>({
 			method: "get",
-			url: `${window.location.origin}/api/user/info`,
+			url: `/api/user/info`,
 			headers: {"content-type": "application/json"}
 		})
-		.then(request => this.setState({ info: request.data }))
+		.then(request => this.setState({
+			info: request.data,
+			loggedIn: request.data == {}
+		}))
 		.catch(console.log);
 	}
 
 	constructor(props: {}) {
 		super(props);
-
-		useEffect(() => {
-			this.setState({ loggedIn: document.cookie.includes("token") })
-			if(this.state.loggedIn) this.getUserInfo()
-		})
+		this.getUserInfo();
 	}
 
 	render () {
diff --git a/yarn.lock b/yarn.lock
index edd629e..0c61eda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4437,6 +4437,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
+dequal@2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.2.tgz#85ca22025e3a87e65ef75a7a437b35284a7e319d"
+  integrity sha512-q9K8BlJVxK7hQYqa6XISGmBZbtQQWVXSrRrWreHC94rMt1QL/Impruc+7p2CYSYuVIUr+YCt6hjrs1kkdJRTug==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -11438,6 +11443,13 @@ svgo@^1.0.0, svgo@^1.2.2:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swr@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/swr/-/swr-0.4.0.tgz#e76da9f981fe6dee0e133289e9b582fc80d9c41d"
+  integrity sha512-70qd1FHYHwIdYXW0jTpm5ktitzvPBCtyKz8ZzynWlY/rMqe4drYPgcl/H9Ipuh+Xv6ZW5viNx13ro8EKIWZcoQ==
+  dependencies:
+    dequal "2.0.2"
+
 symbol-observable@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-- 
cgit v1.2.3


From 6a4a2b900994f83ee284de7be10fbd57dc1b6cb3 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 27 Jan 2021 14:13:32 +0100
Subject: fix home page log in

---
 pages/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'pages/index.tsx')

diff --git a/pages/index.tsx b/pages/index.tsx
index 9c56f52..bd7100e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -68,7 +68,7 @@ export default class HomePage extends Component {
 		})
 		.then(request => this.setState({
 			info: request.data,
-			loggedIn: request.data == {}
+			loggedIn: request.status == 200
 		}))
 		.catch(console.log);
 	}
-- 
cgit v1.2.3


From 0c947a9f7d4ff3f9e65d01df21d6d50e9fa51095 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 31 Jan 2021 14:29:48 +0100
Subject: toast color fix

---
 components/toast.tsx | 4 ++--
 pages/index.tsx      | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

(limited to 'pages/index.tsx')

diff --git a/components/toast.tsx b/components/toast.tsx
index 1d467bd..e01683f 100644
--- a/components/toast.tsx
+++ b/components/toast.tsx
@@ -41,8 +41,8 @@ export class Toast extends Component<{
 			boxShadow: "0 8px 12px -4px #00000033",
 			backgroundColor:
 				this.props.type === "normal" ? "var(--background)" :
-				this.props.type === "confirmation" ? "var(--disk-a)" :
-				this.props.type === "error" ? "var(--disk-b)" : "var(--background)",
+				this.props.type === "confirmation" ? "var(--disk-b)" :
+				this.props.type === "error" ? "var(--disk-a)" : "var(--background)",
 			...this.props.style
 		}}>
 		{
diff --git a/pages/index.tsx b/pages/index.tsx
index bd7100e..ff4e2b7 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, Component, useEffect } from 'react';
+import { CSSProperties, Component } from 'react';
 import axios from 'axios';
 import { userInfo } from '../api/api';
 
@@ -82,8 +82,9 @@ export default class HomePage extends Component {
 		return <div>
 			<NavBar/>
 			<ToastArea>
-				<Toast text="Gert" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
-				<Toast text="Gert"/>
+				<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>
-- 
cgit v1.2.3

