removed things for school assignment (will add back later)

1 files changed, 87 insertions, 76 deletions

diff --git a/pages/index.tsx b/pages/index.tsx
index 82c6371..84f08b8 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -41,74 +41,75 @@ var SquareSize: CSSProperties = {
 	height: 90
 }
 
+var LoginOrRegisterBoxStyle: CSSProperties = {
+	verticalAlign: "top",
+	height: `calc(${SquareSize.height}px + 24px * 2)`,
+	width: "100%",
+	maxWidth: `calc(100% - ${SquareSize.width}px - 12px * 2 - 24px * 2)`
+}
+
+var InnerLoginOrRegisterBoxStyle: CSSProperties = {
+	position: "relative",
+	width: "100%",
+	height: "100%"
+}
+
 function LoginOrRegisterBox() {
-	return <Vierkant style={{ verticalAlign: "top" }}>
+	return <div style={{ ...InnerLoginOrRegisterBoxStyle, 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={{
-			position: "relative",
-			width: 280,
-			height: 90,
-			textAlign: "center"
+			display: "grid",
+			gridGap: 24,
+			gridTemplateColumns: "1fr 1fr",
+			position: "absolute",
+			left: 0, right: 0, bottom: 0
 		}}>
-			<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>
+			<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)" }}/>
+			<Button href="/login" text="Inloggen"/>
 		</div>
-	</Vierkant>
+	</div>
 }
 
 function AccountBox(props: {
 	info: userInfo;
 }) {
-	return <Vierkant style={{ verticalAlign: "top" }}>
+	return <div style={InnerLoginOrRegisterBoxStyle}>
+		<div style={{
+			position: "absolute",
+			top: 0, left: 0,
+			...SquareSize
+		}}>
+			<AccountAvatar size={90} dummy/>
+		</div>
 		<div style={{
-			position: "relative",
-			width: 280,
-			height: 90
+			position: "absolute",
+			top: 0, left: 102,
+			width: "calc(100% - 90px - 12px)",
+			height: "100%"
 		}}>
-			<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>
+			<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>
-	</Vierkant>
+	</div>
 }
 
 export default class HomePage extends Component {
@@ -141,26 +142,36 @@ export default class HomePage extends Component {
 			<NavBar/>
 			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
-				<Vierkant href="/game">
-					<VideogameAssetIcon style={GameModeIconStyle}/>
-					<span style={GameModeTextStyle}>Nieuw spel</span>
-					<div style={SquareSize}></div>
-				</Vierkant>
-				<Vierkant href="/">
-					<ExtensionIcon style={GameModeIconStyle}/>
-					<span style={GameModeTextStyle}>Puzzels</span>
-					<div style={SquareSize}></div>
-				</Vierkant>
-				<Vierkant href="/">
-					<Icon path={mdiRobotExcited} style={GameModeIconStyle}/>
-					<span style={GameModeTextStyle}>Tegen computer</span>
-					<div style={SquareSize}></div>
-				</Vierkant>
-				{
-					this.state.loggedIn ?
-					<AccountBox info={this.state.info}/> :
-					<LoginOrRegisterBox/>
-				}
+				<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="/">
+							<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>