1 files changed, 84 insertions, 0 deletions
diff --git a/pages/game.tsx b/pages/game.tsx
new file mode 100644
index 0000000..513fc7a
--- /dev/null
+++ b/pages/game.tsx
@@ -0,0 +1,84 @@
+import { CSSProperties } from 'react';
+
+import { NavBar } from '../components/navbar';
+import { CenteredPage } from '../components/page';
+import { VoerBord } from '../components/voerBord';
+import { DialogBox } from '../components/dialogBox';
+import { CurrentGameSettings } from '../components/gameSettings';
+import { Button, SearchBar } from '../components/ui';
+import { GameBar } from '../components/gameBar';
+
+import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
+import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
+
+var InviteButtonStyle: CSSProperties = {
+	backgroundColor: "var(--page-background)",
+	height: 160,
+	padding: 12
+}
+
+var InviteButtonIconStyle: CSSProperties = {
+	fontSize: 100,
+	position: "absolute",
+	top: 12,
+	left: "50%",
+	transform: "translateX(-50%)"
+}
+
+var InviteButtonLabelStyle: CSSProperties = {
+	position: "absolute",
+	bottom: 12,
+	left: "50%",
+	transform: "translateX(-50%)",
+	textAlign: "center",
+	color: "var(--text-alt)",
+	width: 136,
+	fontSize: 20,
+	userSelect: "none"
+}
+
+export default function GamePage() {
+	return (
+		<div>
+			<NavBar/>
+			<CenteredPage width={900} style={{ height: "100vh" }}>
+				<div style={{
+					position: "relative",
+					top: "50%",
+					transform: "translateY(-50%)",
+					maxWidth: "100vh",
+					margin: "0 auto"
+				}}>
+					<VoerBord width={7} height={6}/>
+					<GameBar/>
+				</div>
+				<DialogBox title="Nieuw spel">
+					<CurrentGameSettings/>
+					<div style={{
+						marginTop: 24,
+						display: "grid",
+						gridTemplateColumns: "1fr 1fr",
+						gridGap: 24
+					}}>
+						<Button style={InviteButtonStyle}>
+							<WifiTetheringRoundedIcon style={{
+								color: "var(--disk-b)",
+								...InviteButtonIconStyle
+							}}/>
+							<h2 style={InviteButtonLabelStyle}>Willekeurige speler</h2>
+						</Button>
+						<Button style={InviteButtonStyle}>
+							<LinkRoundedIcon style={{
+								color: "var(--disk-a)",
+								...InviteButtonIconStyle
+							}}/>
+							<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
+						</Button>
+					</div>
+					<SearchBar label="Zoeken in vriendenlijst"/>
+				</DialogBox>
+			</CenteredPage>
+		</div>
+	);
+}
+