aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--api/user/games.py13
-rw-r--r--pages/index.tsx132
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>
}