From 21d7703c679c85929abea1ac01ef22a83ebf4404 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Thu, 11 Mar 2021 16:15:38 +0100
Subject: readme update + recent games empty case

---
 components/recentGames.tsx | 50 +++++++++++++++++++++++++++-------------------
 1 file changed, 29 insertions(+), 21 deletions(-)

(limited to 'components')

diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index 92855a1..a37f662 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -41,27 +41,35 @@ function GameOutcome(props: { game: gameInfo }) {
 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?.username}</td>
-						<GameOutcome game={game}/>
-						<td>{Math.max(0, game.moves.length -1)}</td>
-						<td style={RightAlignedTableColumn}>{(() => {
-							var timeCreated = new Date(game.created);
-							return friendlyTime(timeCreated);
-						})()}</td>
-					</tr>)
-				}
-			</tbody>
-		</table>
+		{
+			props.games?.length > 0 ?
+			<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?.username}</td>
+							<GameOutcome game={game}/>
+							<td>{Math.max(0, game.moves.length -1)}</td>
+							<td style={RightAlignedTableColumn}>{(() => {
+								var timeCreated = new Date(game.created);
+								return friendlyTime(timeCreated);
+							})()}</td>
+						</tr>)
+					}
+				</tbody>
+			</table> :
+			<h1 style={{
+				textAlign: "center",
+				opacity: .6,
+				margin: "32px 64px"
+			}}>Deze gebruiker heeft nog geen partijen gespeeld</h1>
+		}
 	</div>
 }
 
-- 
cgit v1.2.3