home page w/l/d + working outcome calc

2 files changed, 76 insertions, 69 deletions

diff --git a/api/user/games.py b/api/user/games.py
index c61151a..009e5ee 100644
--- a/api/user/games.py
+++ b/api/user/games.py
@@ -7,6 +7,11 @@ from user.info import format_user
 from ruleset import resolve_ruleset
 import json
 
+def outcome(outcome_str, player_1):
+    outcome_int = { "w": 1, "l": -1, "d": 0 }[outcome_str]
+    if not player_1: outcome_int *= -1
+    return { 1: "w", -1: "l", 0: "d" }[outcome_int]
+
 def game_info(game_id, user_id = None):
     game = cursor.execute("select " + ", ".join([
         "game_id",               # 0
@@ -25,14 +30,12 @@ def game_info(game_id, user_id = None):
         "private",               # 13
         ]) + " from games where game_id = ?", [game_id]).fetchone()
     is_player_1 = game[4] != user_id
-    outcome = "d" if game[5] == "d" else \
-        "w" if game[5] == "w" and is_player_1 else "l"
     return {
         "id": game[0],
         "parent": game[1],
         "moves": [int(move) for move in str(game[2]).split(",")],
         "opponent": format_user(game[4] if is_player_1 else game[3]),
-        "outcome": outcome,
+        "outcome": outcome(game[5], is_player_1),
         "created": game[6],
         "started": game[7],
         "duration": game[8],
@@ -93,11 +96,11 @@ def index():
        not token:
            return "", 400
 
-    if not cursor.execute("select user_id from users where user_id = ?", [user_id]).fetchone(): return "", 403
-
     if token and not user_id:
         user_id = token_login(token)
 
+    if not cursor.execute("select user_id from users where user_id = ?", [user_id]).fetchone(): return "", 403
+
     export = {}
     merge(export,
           {"totals": sum_games(user_id)},
diff --git a/pages/index.tsx b/pages/index.tsx
index f341c35..2aa8243 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
-import { CSSProperties, Component } from 'react';
+import { CSSProperties, useState, useEffect } from 'react';
 import axios from 'axios';
-import { userInfo } from '../api/api';
+import { userInfo, userGameTotals, userGames } from '../api/api';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
@@ -79,6 +79,7 @@ function LoginOrRegisterBox() {
 
 function AccountBox(props: {
 	info: userInfo;
+	sumGameInfo: userGameTotals;
 }) {
 	return <div style={InnerLoginOrRegisterBoxStyle}>
 		<div style={{
@@ -100,91 +101,94 @@ function AccountBox(props: {
 				whiteSpace: "nowrap",
 				overflow: "hidden",
 				textOverflow: "ellipsis",
-			}}>{props.info.username}</h2>
+			}}>{props.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={{ color: "var(--disk-b-text)" }}>{props.sumGameInfo?.win} W</span>
 				<span style={{ margin: "0 3px" }}>/</span>
-				<span style={{ color: "var(--disk-a-text)" }}>0 V</span>
+				<span style={{ color: "var(--disk-a-text)" }}>{props.sumGameInfo?.lose} V</span>
 				<span style={{ margin: "0 3px" }}>/</span>
-				<span style={{ opacity: .75 }}>0 G</span>
+				<span style={{ opacity: .75 }}>{props.sumGameInfo?.draw} G</span>
 			</p>
 		</div>
 	</div>
 }
 
-export default class HomePage extends Component {
-	state: {
-		info: userInfo,
-		loggedIn: boolean
-	} = {
-		info: {},
-		loggedIn: false
-	}
+export default function HomePage() {
+	var [gotData, setGotData] = useState(false);
+	var [loggedIn, setLoggedIn] = useState(false);
+	var [userInfo, setUserInfo] = useState<userInfo>();
+	var [gameInfo, setGameInfo] = useState<userGames>();
 
-	constructor(props: {}) {
-		super(props);
+	useEffect(() => {( async () => {
+		if (gotData) return;
 
 		if (typeof window === "undefined") return; // return if run on server
-		this.state.loggedIn = document.cookie.includes("token");
+		setLoggedIn(document.cookie.includes("token"));
 
-		if (this.state.loggedIn == false) return; // don't request user info if not logged in
-		axios.request<userInfo>({
+		if (!loggedIn) return; // don't request user info if not logged in
+		var userInfoReq = await axios.request<userInfo>({
 			method: "get",
 			url: `/api/user/info`,
 			headers: {"content-type": "application/json"}
 		})
-		.then(request => this.setState({ info: request.data }))
-		.catch(() => {});
-	}
-
-	render () {
-		return <div>
-			<NavBar/>
-			<CenteredPage width={802}>
-				<PageTitle>4 op een rij</PageTitle>
-				<div>
-					<Vierkant href="/game">
-						<VideogameAssetIcon style={GameModeIconStyle}/>
-						<span style={GameModeTextStyle}>Nieuw spel</span>
+		setUserInfo(userInfoReq.data);
+
+		var userGamesReq = await axios.request<userGames>({
+			method: "get",
+			url: `/api/user/games`,
+			headers: {"content-type": "application/json"}
+		})
+		setGameInfo(userGamesReq.data);
+
+		setGotData(true);
+	})()})
+
+	return <div>
+		<NavBar/>
+		<CenteredPage width={802}>
+			<PageTitle>4 op een rij</PageTitle>
+			<div>
+				<Vierkant href="/game">
+					<VideogameAssetIcon style={GameModeIconStyle}/>
+					<span style={GameModeTextStyle}>Nieuw spel</span>
+					<div style={SquareSize}></div>
+				</Vierkant>
+				{
+					false &&
+					<Vierkant href="/">
+						<ExtensionIcon style={GameModeIconStyle}/>
+						<span style={GameModeTextStyle}>Puzzels</span>
 						<div style={SquareSize}></div>
 					</Vierkant>
-					{
-						false &&
-						<Vierkant href="/">
-							<ExtensionIcon style={GameModeIconStyle}/>
-							<span style={GameModeTextStyle}>Puzzels</span>
-							<div style={SquareSize}></div>
-						</Vierkant>
-					}
-					{
-						false &&
-						<Vierkant href="/">
-							<Icon path={mdiRobotExcited} style={GameModeIconStyle}/>
-							<span style={GameModeTextStyle}>Tegen computer</span>
-							<div style={SquareSize}></div>
-						</Vierkant>
-					}
-					<Vierkant style={LoginOrRegisterBoxStyle}>
-						{
-							this.state.loggedIn ?
-							<AccountBox info={this.state.info}/> :
-							<LoginOrRegisterBox/>
-						}
-					</Vierkant>
-				</div>
+				}
 				{
-					this.state.loggedIn &&
-					<Vierkant fullwidth>
-						<RecentGames/>
+					false &&
+					<Vierkant href="/">
+						<Icon path={mdiRobotExcited} style={GameModeIconStyle}/>
+						<span style={GameModeTextStyle}>Tegen computer</span>
+						<div style={SquareSize}></div>
 					</Vierkant>
 				}
+				<Vierkant style={LoginOrRegisterBoxStyle}>
+					{
+						loggedIn ?
+						<AccountBox info={userInfo} sumGameInfo={gameInfo?.totals}/> :
+						<LoginOrRegisterBox/>
+					}
+				</Vierkant>
+			</div>
+			{
+				loggedIn &&
 				<Vierkant fullwidth>
-					<h2>Nieuws ofzo</h2>
-					<p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
+					<RecentGames games={gameInfo?.games}/>
 				</Vierkant>
-			</CenteredPage>
-		</div>
-	}
+			}
+			<Vierkant fullwidth>
+				<h2>Nieuws ofzo</h2>
+				<p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
+			</Vierkant>
+		</CenteredPage>
+	</div>
 }