updated home page

1 files changed, 81 insertions, 65 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index aedd5cf..82c6371 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -41,6 +41,76 @@ var SquareSize: CSSProperties = {
 	height: 90
 }
 
+function LoginOrRegisterBox() {
+	return <Vierkant style={{ verticalAlign: "top" }}>
+		<div style={{
+			position: "relative",
+			width: 280,
+			height: 90,
+			textAlign: "center"
+		}}>
+			<span style={{
+				userSelect: "none",
+				display: "inline-block",
+				position: "absolute",
+				fontSize: 14,
+				left: 0, right: 0, top: 0
+			}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
+			<div style={{
+				display: "grid",
+				gridGap: 24,
+				gridTemplateColumns: "1fr 1fr",
+				position: "absolute",
+				left: 0, right: 0, bottom: 0
+			}}>
+				<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/>
+				<Button href="/login" text="Inloggen"/>
+			</div>
+		</div>
+	</Vierkant>
+}
+
+function AccountBox(props: {
+	info: userInfo;
+}) {
+	return <Vierkant style={{ verticalAlign: "top" }}>
+		<div style={{
+			position: "relative",
+			width: 280,
+			height: 90
+		}}>
+			<div style={{
+				position: "absolute",
+				top: 0, left: 0,
+				...SquareSize
+			}}>
+				<AccountAvatar size={90} dummy/>
+			</div>
+			<div style={{
+				position: "absolute",
+				top: 0, left: 102,
+				width: 178, height: 90
+			}}>
+				<h2 style={{
+					maxWidth: 178,
+					fontSize: 20,
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+				}}>{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={{ margin: "0 3px" }}>/</span>
+					<span style={{ color: "var(--disk-a-text)" }}>0 V</span>
+					<span style={{ margin: "0 3px" }}>/</span>
+					<span style={{ opacity: .75 }}>0 G</span>
+				</p>
+			</div>
+		</div>
+	</Vierkant>
+}
+
 export default class HomePage extends Component {
 	state: {
 		info: userInfo,
@@ -86,71 +156,17 @@ export default class HomePage extends Component {
 					<span style={GameModeTextStyle}>Tegen computer</span>
 					<div style={SquareSize}></div>
 				</Vierkant>
-				<Vierkant href={ this.state.loggedIn ? "/account" : undefined } style={{ verticalAlign: "top" }}>
-					<div style={{
-						position: "relative",
-						width: 280,
-						height: 90,
-						textAlign: "center",
-						display: this.state.loggedIn ? "none" : "inline-block"
-					}}>
-						<span style={{
-							userSelect: "none",
-							display: "inline-block",
-							position: "absolute",
-							fontSize: 14,
-							left: 0, right: 0, top: 0
-						}}>Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies</span>
-						<div style={{
-							display: "grid",
-							gridGap: 24,
-							gridTemplateColumns: "1fr 1fr",
-							position: "absolute",
-							left: 0, right: 0, bottom: 0
-						}}>
-							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/>
-							<Button href="/login" text="Inloggen"/>
-						</div>
-					</div>
-					<div style={{
-						position: "relative",
-						width: 280,
-						height: 90,
-						display: this.state.loggedIn ? "inline-block" : "none"
-					}}>
-						<div style={{
-							position: "absolute",
-							top: 0, left: 0,
-							...SquareSize
-						}}>
-							<AccountAvatar size={90} dummy/>
-						</div>
-						<div style={{
-							position: "absolute",
-							top: 0, left: 102,
-							width: 178, height: 90
-						}}>
-							<h2 style={{
-								maxWidth: 178,
-								fontSize: 20,
-								whiteSpace: "nowrap",
-								overflow: "hidden",
-								textOverflow: "ellipsis",
-							}}>{this.state.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={{ margin: "0 3px" }}>/</span>
-								<span style={{ color: "var(--disk-a-text)" }}>0 V</span>
-								<span style={{ margin: "0 3px" }}>/</span>
-								<span style={{ opacity: .75 }}>0 G</span>
-							</p>
-						</div>
-					</div>
-				</Vierkant>
-				<Vierkant fullwidth style={{ display: this.state.loggedIn ? "block" : "none" }}>
-					<RecentGames/>
-				</Vierkant>
+				{
+					this.state.loggedIn ?
+					<AccountBox info={this.state.info}/> :
+					<LoginOrRegisterBox/>
+				}
+				{
+					this.state.loggedIn &&
+					<Vierkant fullwidth>
+						<RecentGames/>
+					</Vierkant>
+				}
 				<Vierkant fullwidth>
 					<h2>Nieuws ofzo</h2>
 					<p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>