diff options
| -rw-r--r-- | api/api.ts | 4 | ||||
| -rw-r--r-- | api/user/games.py | 4 | ||||
| -rw-r--r-- | components/recentGames.tsx | 79 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | pages/user.tsx | 4 | ||||
| -rw-r--r-- | yarn.lock | 5 |
6 files changed, 59 insertions, 38 deletions
@@ -38,6 +38,8 @@ export interface userGameTotals { win: number; } +export type outcome = "w" | "l" | "d"; + export interface userGames { totals: userGameTotals; games: Array<gameInfo>; @@ -49,7 +51,7 @@ export interface gameInfo { id: string; moves: Array<number>; opponent: string; - outcome: "w"|"l"|"d"; + outcome: outcome; parent?: string; private: boolean; rating?: number; diff --git a/api/user/games.py b/api/user/games.py index 6073af2..95bd38a 100644 --- a/api/user/games.py +++ b/api/user/games.py @@ -25,7 +25,7 @@ def game_info(game_id, user_id = None): ]) + " 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 "d" + "w" if game[5] == "w" and is_player_1 else "l" return { "id": game[0], "parent": game[1], @@ -70,7 +70,7 @@ def sum_games(user_id): #! SANITIZE USER_ID FIRST } def fetch_games(user_id, count): - game_ids = cursor.execute("select game_id from games where player_1_id = ? or player_2_id = ? order by created", [user_id, user_id]).fetchmany(count) + game_ids = cursor.execute("select game_id from games where player_1_id = ? or player_2_id = ? order by created desc", [user_id, user_id]).fetchmany(count) export = [] for game_id in game_ids: diff --git a/components/recentGames.tsx b/components/recentGames.tsx index a14194f..9e87b61 100644 --- a/components/recentGames.tsx +++ b/components/recentGames.tsx @@ -1,4 +1,7 @@ -import { CSSProperties, Component } from 'react'; +import { CSSProperties } from 'react'; +import friendlyTime from 'friendly-time'; + +import { gameInfo, outcome } from '../api/api'; var LeftAlignedTableColumn: CSSProperties = { textAlign: "left", @@ -10,39 +13,47 @@ var RightAlignedTableColumn: CSSProperties = { paddingRight: 16 } -export default class RecentGames extends Component { - constructor(props: { - user?: string; - }) { - super(props); - } +function GameOutcome(props: { outcome: outcome }) { + return <td style={{ + color: { + "w": "var(--disk-b-text)", + "l": "var(--disk-a-text)", + "d": "var(--text)" + }[props.outcome], + opacity: props.outcome == "d" ? 0.75 : 1.0 + }}>{ + { + "w": "Gewonnen", + "l": "Verloren", + "d": "Gelijkspel" + }[props.outcome] + }</td> +} - render () { - return <div> - <h2>Recente partijen</h2> - <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}> - <tbody> - <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> - </tbody> - </table> - </div> - } +export default function RecentGames(props: { games?: Array<gameInfo> }) { + return <div> + <h2>Recente partijen</h2> + <table width="100%" style={{ marginTop: "16px", textAlign: "center" }}> + <tbody> + <tr> + <th style={{ width: "50%" }}>Tegenstander</th> + <th style={{ width: "15%" }}>Uitkomst</th> + <th style={{ width: "15%" }}>Zetten</th> + <th style={{ width: "20%" }}>Datum</th> + </tr> + { + props.games?.map(game => <tr> + <td style={LeftAlignedTableColumn}>{game.opponent}</td> + <GameOutcome outcome={game.outcome}/> + <td>{game.moves.length -1}</td> + <td style={RightAlignedTableColumn}>{(() => { + var timeCreated = new Date(game.created); + return friendlyTime(timeCreated); + })()}</td> + </tr>) + } + </tbody> + </table> + </div> } diff --git a/package.json b/package.json index 4db6c8d..5abd5fb 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@types/uuid": "^8.3.0", "axios": "^0.21.1", "email-validator": "^2.0.4", + "friendly-time": "^1.1.1", "next": "^10.0.5", "react": "^17.0.1", "react-cookies": "^0.1.1", diff --git a/pages/user.tsx b/pages/user.tsx index a8cc9c5..280f8e2 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -109,6 +109,8 @@ export default function AccountPage() { data: { "id": id || self_id } }); + console.log(userGamesReq.data) + setGameInfo(userGamesReq.data); } else { window.history.go(-1); @@ -176,7 +178,7 @@ export default function AccountPage() { <InfoModule icon={<Icon size={1} path={mdiGamepadSquareOutline}/>} label={ gameInfo?.totals.games + " potjes" }/> </InfoSection> <Vierkant> - <RecentGames/> + <RecentGames games={gameInfo?.games}/> </Vierkant> </CenteredPage> </div> @@ -5733,6 +5733,11 @@ fresh@0.5.2: resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7" integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac= +friendly-time@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/friendly-time/-/friendly-time-1.1.1.tgz#919bdbef1a1b540f3f881dcfcdeed92c56c2361a" + integrity sha512-1hTb4ga36uONG3RKY3eWdxp3/rTAfhcmEBtyKtjOdzdMAHwb94rul5WGkLvBjy0U1jelOrt/UM4ZAxRKfSM8SA== + from2@^2.1.0: version "2.3.0" resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af" |