invite knopjes klaar

1 files changed, 52 insertions, 0 deletions

diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index 728fcdc..b17c12a 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -1,8 +1,39 @@
+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 } from '../components/ui';
+
+import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
+import LinkRoundedIcon from '@material-ui/icons/LinkRounded';
+
+var InviteButtonStyle: CSSProperties = {
+	backgroundColor: "var(--text)",
+	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(--background)",
+	width: 136,
+	fontSize: 20
+}
 
 export default function GamePage() {
 	return (
@@ -12,6 +43,27 @@ export default function GamePage() {
 				<VoerBord width={7} height={6}/>
 				<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>
 				</DialogBox>
 			</CenteredPage>
 		</div>