From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001 From: lonkaars 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({ + 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
+ + + }/> + + + + 4 op een rij + + + Nieuw spel +
+ + + + Puzzels +
+ + + + Tegen computer +
+ + +
+ Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies +
+
+
+
+
+ +
+
+

{this.state.info.username}

+

Score: 400

+

+ 0 W + / + 0 V + / + 0 G +

+
+
+ + +

Recente partijen

+ + + + + + + + + + + + + + + + + + + +
TegenstanderUitkomstZettenDatum
Naam hierGewonnen7Vandaag
Nog meer namenGelijkspel42Gisteren
+ + +

Nieuws ofzo

+

Chess.com heeft heel veel troep waar niemand naar kijkt

+ + +
+ } +} + -- cgit v1.2.3 From 3fc06ea736283ad38bb51b932ab0e91dae081159 Mon Sep 17 00:00:00 2001 From: lonkaars 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({ 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 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 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
- }/> - + }/> + + 4 op een rij -- cgit v1.2.3