semi working next project

20 files changed, 0 insertions, 1241 deletions

diff --git a/src/api.ts b/src/api.ts
deleted file mode 100644
index e2e3d93..0000000
--- a/src/api.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface userInfo {
-	avatar?: string|null,
-	coutry?: string|null,
-	id?: string,
-	registered?: number,
-	type?: string,
-	username?: string,
-};
-
diff --git a/src/components/account.tsx b/src/components/account.tsx
deleted file mode 100644
index e6ec58f..0000000
--- a/src/components/account.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-interface AccountAvatarProps {
-	size: number;
-	image: string;
-}
-
-export function AccountAvatar(props: AccountAvatarProps) {
-	return <div style={{
-		width: props.size,
-		height: props.size,
-		backgroundImage: props.image,
-		backgroundSize: "cover",
-		display: "inline-block"
-	}}/>;
-}
-
-
diff --git a/src/components/dialogBox.tsx b/src/components/dialogBox.tsx
deleted file mode 100644
index 74fe99b..0000000
--- a/src/components/dialogBox.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { ReactNode } from 'react';
-
-import { Vierkant } from './ui';
-
-import CancelIcon from '@material-ui/icons/Cancel';
-
-interface DialogBoxProps {
-	children: ReactNode;
-	title: string;
-}
-
-export function DialogBox(props: DialogBoxProps) {
-	return <Vierkant style={{
-		position: "fixed",
-		top: "50%", left: "50%",
-		transform: "translate(-50%, -50%)",
-		boxShadow: "0 8px 32px -5px #0007",
-		width: 392
-	}}>
-		<h2 style={{ marginBottom: 24 }}>{props.title}</h2>
-		<CancelIcon style={{
-			position: "absolute",
-			top: 25, right: 25,
-			color: "var(--text)",
-			opacity: .85,
-			cursor: "pointer"
-		}}/>
-		{props.children}
-	</Vierkant>
-}
diff --git a/src/components/gameBar.tsx b/src/components/gameBar.tsx
deleted file mode 100644
index 53eda88..0000000
--- a/src/components/gameBar.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { CSSProperties, ReactNode } from 'react';
-import { Vierkant } from './ui';
-
-import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded';
-import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded';
-import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded';
-import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded';
-
-interface GameBarModuleProps {
-	children?: ReactNode;
-}
-
-function GameBarModule(props: GameBarModuleProps) {
-	return <Vierkant style={{
-		backgroundColor: "var(--background-alt)",
-		padding: 12,
-		borderRadius: 6,
-		margin: 0,
-		verticalAlign: "top"
-	}}>{props.children}</Vierkant>
-}
-
-var GameBarSpacer = () => <div style={{ width: 8, display: "inline-block" }}></div>;
-
-var GameBarAlignStyle: CSSProperties = {
-	display: "inline-block"
-}
-
-export function GameBar() {
-	return <Vierkant className="gameBar" style={{
-		padding: 8,
-		width: "calc(100% - 12px)"
-	}}>
-		<div style={{ gridAutoColumns: "auto" }}>
-			<div style={{ ...GameBarAlignStyle, float: "left" }}>
-				<div style={{
-					width: 32, height: 32,
-					margin: 8,
-					backgroundColor: "var(--disk-b)",
-					borderRadius: 16,
-					display: "inline-block"
-				}}/>
-				<h2 style={{
-					fontSize: 20,
-					margin: 12,
-					verticalAlign: "top",
-					display: "inline-block"
-				}}>Tegenstander</h2>
-			</div>
-			<div style={{
-				...GameBarAlignStyle,
-				position: "absolute",
-				top: "50%", left: "50%",
-				transform: "translate(-50%, -50%)"
-			}}>
-				<span style={{
-					color: "var(--text)",
-					fontSize: 20,
-					opacity: .75
-				}}>0-0</span>
-			</div>
-			<div style={{ ...GameBarAlignStyle, float: "right" }}>
-				<GameBarModule>
-					<SettingsRoundedIcon/>
-				</GameBarModule>
-				<GameBarSpacer/>
-				<GameBarModule>
-					<span style={{
-						margin: "0 4px",
-						fontSize: 20
-					}}>00:00</span>
-				</GameBarModule>
-				<GameBarSpacer/>
-				<GameBarModule>
-					<ExitToAppRoundedIcon/>
-				</GameBarModule>
-				<GameBarSpacer/>
-				<GameBarModule>
-					<NavigateBeforeRoundedIcon/>
-				</GameBarModule>
-				<GameBarSpacer/>
-				<GameBarModule>
-					<NavigateNextRoundedIcon/>
-				</GameBarModule>
-			</div>
-		</div>
-	</Vierkant>;
-}
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
deleted file mode 100644
index fb5188e..0000000
--- a/src/components/gameSettings.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import { ReactNode, CSSProperties } from 'react';
-
-import { Button, Vierkant, CheckBox, Input } from './ui';
-import { DialogBox } from './dialogBox';
-
-import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
-
-export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
-	return <div style={{
-		position: "relative",
-		height: 80
-	}}>
-		<p style={{
-			opacity: .75,
-			fontStyle: "italic",
-			userSelect: "none",
-			position: "absolute",
-			top: "50%",
-			left: 0,
-			transform: "translateY(-50%)"
-		}}>
-			Geen tijdslimiet<br/>
-			Standaardregels<br/>
-			Gerangschikt
-		</p>
-		<Button style={{
-			width: 150,
-			position: "absolute",
-			top: "50%",
-			right: 0,
-			transform: "translateY(-50%)"
-		}}>
-			<BuildRoundedIcon style={{ fontSize: 48 }}/>
-			<span style={{
-				fontWeight: 600,
-				position: "absolute",
-				right: 24,
-				top: "50%",
-				width: 85,
-				verticalAlign: "middle",
-				textAlign: "center",
-				transform: "translateY(-50%)",
-				userSelect: "none"
-			}}>Spelregels aanpassen</span>
-		</Button>
-	</div>;
-}
-
-function GameSettingsSection(props: {
-	children?: ReactNode;
-	title: string;
-	state: boolean;
-	noMarginBottom?: boolean;
-}) {
-	return <Vierkant style={{
-		backgroundColor: "var(--background-alt)",
-		width: "100%",
-		padding: 16,
-		margin: 0,
-		marginBottom: props.noMarginBottom ? 0 : 24
-	}}>
-	<span style={{
-		verticalAlign: "top",
-		fontSize: 14,
-		fontWeight: 600
-	}}>{props.title}</span>
-	<CheckBox state={props.state} style={{
-		verticalAlign: "top",
-		float: "right",
-		margin: -3
-	}}/>
-	<div>{props.children}</div>
-	</Vierkant>
-}
-
-function GameRule(props: {
-	title: string;
-	description: string;
-	style?: CSSProperties;
-}) {
-	return <div style={{
-		backgroundColor: "var(--page-background)",
-		borderRadius: 8,
-		padding: "16px 0",
-		textAlign: "center",
-		...props.style
-	}}>
-		<h1 style={{ color: "var(--disk-a)", fontSize: 42 }}>{props.title}</h1>
-		<p style={{ color: "var(--text-alt)", maxWidth: 250, margin: "0 auto" }}>{props.description}</p>
-	</div>;
-}
-
-export function EditGameSettings() {
-	return <DialogBox title="Spelregels aanpassen">
-		<div style={{
-			marginTop: 24,
-			maxHeight: 500,
-			overflowY: "scroll",
-			borderRadius: 8
-		}}>
-			<GameSettingsSection title="Tijdslimiet" state={false}>
-				<div style={{
-					display: "grid",
-					gridTemplateColumns: "1fr 1fr 1fr",
-					gridGap: 16,
-					margin: "16px 0"
-				}}>
-					<Input type="number" label="min"/>
-					<Input type="number" label="sec"/>
-					<Input type="number" label="plus"/>
-				</div>
-				<CheckBox state={false}/>
-				<span style={{
-					verticalAlign: "super",
-					marginLeft: 4
-				}}>Timer gebruiken voor bijde spelers</span>
-			</GameSettingsSection>
-			<GameSettingsSection title="Regelset" state={false}>
-				<div style={{
-					display: "grid",
-					gridTemplateColumns: "1fr 1fr",
-					gridGap: 16,
-					margin: "16px 0"
-				}}>
-					<GameRule title="+2" description="Extra kolommen"/>
-					<GameRule title="+4" description="Extra kolommen"/>
-				</div>
-				<GameRule style={{ marginBottom: 16 }} title="Gravity" description="De zwaartekracht draait soms"/>
-				<GameRule title="Flashlight" description="Het veld wordt opgelicht door de vallende fiches"/>
-			</GameSettingsSection>
-			<GameSettingsSection title="Gerangschikt spel" state={true} noMarginBottom/>
-		</div>
-	</DialogBox>;
-}
diff --git a/src/components/logo.tsx b/src/components/logo.tsx
deleted file mode 100644
index b0f358f..0000000
--- a/src/components/logo.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-export function LogoDark() {
-	return (
-		<div className="noclick">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<rect width="24" height="24" fill="var(--background)"/>
-				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
-				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--text)" strokeWidth="2"/>
-			</svg>
-		</div>
-	);
-}
-
-export function LogoLight() {
-	return (
-		<div className="noclick">
-			<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-				<rect width="24" height="24" fill="var(--page-background)"/>
-				<circle cx="6.5" cy="6.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="6.5" cy="17.5" r="4.5" fill="var(--disk-a)"/>
-				<circle cx="17.5" cy="17.5" r="4.5" fill="var(--disk-b)"/>
-				<circle cx="17.5" cy="6.5" r="3.5" stroke="var(--background)" strokeWidth="2"/>
-			</svg>
-		</div>
-	);
-}
-
diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
deleted file mode 100644
index 7725ca8..0000000
--- a/src/components/navbar.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CSSProperties } from "react";
-
-import { LogoDark } from "../components/logo";
-
-import Home from '@material-ui/icons/Home';
-import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
-import ExtensionIcon from '@material-ui/icons/Extension';
-import SearchIcon from '@material-ui/icons/Search';
-import SettingsIcon from '@material-ui/icons/Settings';
-import PersonIcon from '@material-ui/icons/Person';
-
-var NavBarItemStyle: CSSProperties = {
-	margin: 12,
-	marginBottom: 16,
-	display: "block"
-}
-
-export function NavBar() {
-	return (
-		<div className="navbar" style={{
-			width: 48,
-			height: "100%",
-
-			lineHeight: 0,
-
-			backgroundColor: "var(--background)",
-			display: "inline-block",
-
-			position: "fixed",
-			top: 0,
-			left: 0,
-
-			overflow: "hidden",
-			whiteSpace: "nowrap"
-		}}>
-			<div style={NavBarItemStyle}><LogoDark/></div>
-			<a href="/" style={NavBarItemStyle}><Home/></a>
-			<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
-			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
-			<a href="/" style={NavBarItemStyle}><SearchIcon/></a>
-
-			<div style={{
-				position: "absolute",
-				bottom: -4,
-				left: 0,
-				backgroundColor: "var(--background)"
-			}}>
-			<a href="/login" style={NavBarItemStyle}>
-				<div style={{
-					width: 24,
-					height: 24,
-					/* background: "#888888", */
-					borderRadius: 12
-				}}>
-					<PersonIcon/>
-				</div>
-			</a>
-				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
-			</div>
-		</div>
-	);
-}
-
diff --git a/src/components/page.tsx b/src/components/page.tsx
deleted file mode 100644
index d8a4a2b..0000000
--- a/src/components/page.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Component, CSSProperties, ReactNode } from 'react';
-
-interface CenteredPageProps {
-	width?: number;
-	children?: ReactNode;
-	style?: CSSProperties;
-}
-
-export function CenteredPage (props: CenteredPageProps) {
-	return <div className="CenteredPageOuter" style={{
-		maxWidth: props.width,
-		margin: "0 auto"
-	}}>
-		<div className="CenteredPageInner" style={{
-			margin: "0 6px",
-			lineHeight: 0,
-			...props.style
-		}}>{props.children}</div>
-	</div>;
-}
-
-export class PageTitle extends Component {
-	render () {
-		return <h1 style={{
-			color: "var(--text-alt)",
-			marginLeft: 6,
-			marginTop: 32,
-			marginBottom: 64,
-			fontSize: 25,
-		}}>{this.props.children}</h1>;
-	}
-}
diff --git a/src/components/toast.tsx b/src/components/toast.tsx
deleted file mode 100644
index 1d467bd..0000000
--- a/src/components/toast.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { CSSProperties, ReactNode, Component } from "react";
-
-import CloseIcon from '@material-ui/icons/Close';
-
-export function ToastArea(props: {
-	style?: CSSProperties
-	children?: ReactNode
-}) {
-	return <div id="ToastArea" style={{
-		position: "fixed",
-		whiteSpace: "nowrap",
-		bottom: 12,
-		left: "50%",
-		transform: "translateX(-50%)",
-		zIndex: 1,
-		maxWidth: 600,
-		width: "calc(100% - 48px - 48px)",
-		margin: "0 24px",
-		...props.style
-	}}>{props.children}</div>
-}
-
-export class Toast extends Component<{
-	text?: string
-	icon?: ReactNode
-	children?: ReactNode
-	type?: "normal"|"confirmation"|"error"
-	style?: CSSProperties
-}> {
-	state = { render: true }
-
-	close = () => this.setState({ render: false })
-
-	render () {
-		if (!this.state.render) return null;
-		return <div style={{
-			padding: 0,
-			marginBottom: 12,
-			borderRadius: 8,
-			color: "var(--text)",
-			boxShadow: "0 8px 12px -4px #00000033",
-			backgroundColor:
-				this.props.type === "normal" ? "var(--background)" :
-				this.props.type === "confirmation" ? "var(--disk-a)" :
-				this.props.type === "error" ? "var(--disk-b)" : "var(--background)",
-			...this.props.style
-		}}>
-		{
-			this.props.children ?
-			this.props.children :
-			<div style={{ lineHeight: 0 }}>
-				<div style={{
-					fontSize: 0,
-					margin: 16,
-					display: "inline-block",
-					verticalAlign: "top",
-					width: 32, height: 32
-				}}>{this.props.icon}</div>
-				<h2 style={{
-					margin: "20px 0",
-					display: "inline-block",
-					width: "calc(100% - 128px)",
-					verticalAlign: "top",
-					fontSize: 20
-				}}>{this.props.text}</h2>
-				<div style={{
-					padding: 20,
-					display: "inline-block",
-					cursor: "pointer"
-				}} onClick={this.close}>
-					<CloseIcon style={{ fontSize: 24 }}/>
-				</div>
-			</div>
-		}
-		</div>
-	}
-}
-
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
deleted file mode 100644
index 3afd97a..0000000
--- a/src/components/ui.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Component, CSSProperties, ReactNode } from "react";
-
-import SearchIcon from '@material-ui/icons/Search';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-
-export function Vierkant(props: {
-	href?: string;
-	width?: string;
-	height?: string;
-	style?: CSSProperties;
-	children?: ReactNode;
-	className?: string; })
-{
-	return <a style={{
-		padding: 24,
-		backgroundColor: "var(--background)",
-		borderRadius: 8,
-		color: "var(--text)",
-		margin: 6, // geen margin collapse = 12px marge
-		display: "inline-block",
-		position: "relative",
-		boxSizing: "border-box",
-		width: props.width ? props.width : undefined,
-		height: props.height ? props.height : undefined,
-		...props.style
-	}} href={props.href} className={props.className}>{props.children}</a>
-}
-
-export function Button(props: {
-	text?: string;
-	children?: ReactNode;
-	style?: CSSProperties;
-	href?: string;
-	onclick?: (() => void); })
-{
-	return <a onClick={props.onclick} href={props.href} style={{
-		padding: props.text ? 8 : 16,
-		textAlign: props.text ? "center" : "left",
-		borderRadius: 8,
-		backgroundColor: "var(--disk-a)",
-		cursor: "pointer",
-		position: "relative",
-		textDecoration: "none",
-		display: "block",
-		...props.style
-	}}>
-	{ 
-		props.text ?
-			<span style={{
-				fontWeight: 600,
-				userSelect: "none"
-			}}>{props.text}</span>
-			: undefined
-	}
-	{ props.children }
-	</a>;
-}
-
-export function Input(props: {
-	label?: string,
-	style?: CSSProperties,
-	type?: string,
-	id?: string
-}) {
-	return <input id={props.id} type={props.type || "text"} placeholder={props.label} spellCheck={false} style={{
-		padding: 12,
-		border: 0,
-		width: "calc(100% - 24px)",
-		fontSize: 14,
-		backgroundColor: "var(--page-background)",
-		color: "var(--text-alt)",
-		borderRadius: 8,
-		fontFamily: "Inter",
-		...props.style
-	}}/>
-}
-
-export function SearchBar(props: { label?: string }) {
-	return <div style={{
-		marginTop: 24,
-		borderRadius: 8,
-		overflow: "hidden",
-		width: "100%"
-	}}>
-		<Input label={props.label} style={{
-			width: "calc(100% - 24px - 41px)",
-			borderTopRightRadius: 0,
-			borderBottomRightRadius: 0
-		}}/>
-		<div style={{
-			width: 41,
-			height: 41,
-			backgroundColor: "var(--disk-a)",
-			display: "inline-block",
-			verticalAlign: "top",
-			position: "relative"
-		}}>
-			<SearchIcon style={{
-				fontSize: 24,
-				position: "absolute",
-				top: "50%", left: "50%",
-				transform: "translate(-50%, -50%)"
-			}}/>
-		</div>
-	</div>
-}
-
-export class CheckBox extends Component<{
-	state?: boolean,
-	style?: CSSProperties
-}> {
-	state = { on: this.props.state || false }
-	public toggle = () => this.setState({ on: !this.state.on })
-
-	render() {
-		return <div onClick={this.toggle} style={{
-			...this.props.style,
-			display: "inline-block",
-			cursor: "pointer"
-		}}>
-		{
-			this.state.on ?
-			<CheckBoxIcon style={{ fontSize: 24 }}/> :
-			<CheckBoxOutlineBlankIcon style={{ fontSize: 24 }}/>
-		}
-		</div>;
-	}
-}
-
-
-
diff --git a/src/components/voerBord.tsx b/src/components/voerBord.tsx
deleted file mode 100644
index 3e319a1..0000000
--- a/src/components/voerBord.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-interface VoerBordProps {
-	width: number;
-	height: number;
-}
-
-export function VoerBord(props: VoerBordProps) {
-	return <table style={{
-		borderSpacing: 8,
-		width: "100%"
-	}}>
-		<tbody>
-			{
-				[...Array(props.height)].map(() => (
-					<tr>
-						{[...Array(props.width)].map(() => (
-							<td style={{
-								position: "relative",
-								width: "100%",
-								padding: 0
-							}}>
-								<div style={{
-									display: "block",
-									marginTop: "100%"
-								}}/>
-								<div style={{
-									position: "absolute",
-									top: 0, left: 0, right: 0, bottom: 0,
-									borderRadius: 6,
-									border: "2px solid var(--background-alt)",
-									opacity: .5
-								}}/>
-							</td>
-						))}
-					</tr>
-				))
-			}
-		</tbody>
-	</table>
-}
diff --git a/src/dark.css b/src/dark.css
deleted file mode 100644
index a0f652e..0000000
--- a/src/dark.css
+++ /dev/null
@@ -1,9 +0,0 @@
-:root {
-    --text: #FCFFFD;
-    --text-alt: var(--text);
-
-    --page-background: #11171a;
-    --background: #222d33;
-    --background-alt: #344047;
-}
-
diff --git a/src/global.css b/src/global.css
deleted file mode 100644
index d851131..0000000
--- a/src/global.css
+++ /dev/null
@@ -1,69 +0,0 @@
-:root {
-	--text: #FCFFFD;
-	--page-background: var(--text);
-
-	--background: #5D737E;
-	--text-alt: var(--background);
-	--background-alt: #81949E;
-
-	--disk-a: #E16D82;
-	--disk-a-text: #FDC0C4;
-	--disk-b: #73D0C5;
-	--disk-b-text: #C0FDEB;
-}
-
-/* default margin */
-html, body {
-	margin: 0;
-	padding: 0;
-}
-
-/* navbar fix */
-body { padding-left: 48px; }
-
-/* font */
-html {
-	font-size: 14px;
-	font-family: "Inter";
-}
-
-/* background color */
-html { background-color: var(--page-background); }
-
-/* link color fix */
-a { color: var(--text); }
-
-/* centering misschien */
-.CenteredPageInner { text-align: center; }
-.CenteredPageInner > * { text-align: left; }
-
-/* line height reset */
-h1, h2, p, span, td, th {
-	margin: 0;
-	line-height: 1.2;
-}
-
-/* table groottes met percentages werkt nu */
-table { table-layout: fixed; }
-
-/* table styles */
-td, th {
-	padding: 4px;
-	font-size: 15px;
-}
-
-input::placeholder {
-	font-style: italic;
-	opacity: .8;
-}
-
-/* remove chrome's ugly :focus outline */
-:focus { outline: none; }
-
-/* icon size fix */
-.navbar svg,
-.gameBar svg { font-size: 24px; }
-
-/* scroll balken */
-::-webkit-scrollbar { width: 0 !important; }
-
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 5ca3ea1..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import ReactDOM from 'react-dom';
-import { BrowserRouter } from 'react-router-dom';
-import Router from "./routes";
-
-ReactDOM.render(
-	<BrowserRouter>
-		<Router/>
-	</BrowserRouter>,
-	document.getElementById('root')
-);
-
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
deleted file mode 100644
index 513fc7a..0000000
--- a/src/pages/game.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-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>
-	);
-}
-
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
deleted file mode 100644
index f298846..0000000
--- a/src/pages/home.tsx
+++ /dev/null
@@ -1,195 +0,0 @@
-import { CSSProperties, Component } from 'react';
-import axios from 'axios';
-import { userInfo } from '../api';
-
-import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant, Button } from '../components/ui';
-import { AccountAvatar } from '../components/account';
-import { ToastArea, Toast } from '../components/toast';
-
-import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
-import ExtensionIcon from '@material-ui/icons/Extension';
-
-import Icon from '@mdi/react';
-import { mdiRobotExcited } from '@mdi/js';
-
-var GameModeIconStyle: CSSProperties = {
-	fontSize: 64,
-	width: 64,
-	height: 64,
-	display: "inline-block",
-	position: "absolute",
-	top: 24,
-	left: "50%",
-	transform: "translateX(-50%)"
-}
-
-var GameModeTextStyle: CSSProperties = {
-	whiteSpace: "nowrap",
-	display: "inline-block",
-	position: "absolute",
-	bottom: 24,
-	left: "50%",
-	transform: "translateX(-50%)",
-	userSelect: "none",
-	fontWeight: 500
-}
-
-var SquareSize: CSSProperties = {
-	width: 90,
-	height: 90
-}
-
-var LeftAlignedTableColumn: CSSProperties = {
-	textAlign: "left",
-	paddingLeft: 16
-}
-
-var RightAlignedTableColumn: CSSProperties = {
-	textAlign: "right",
-	paddingRight: 16
-}
-
-export default class HomePage extends Component {
-	state: {
-		info: userInfo,
-		loggedIn: boolean
-	} = {
-		info: {},
-		loggedIn: document.cookie.includes("token")
-	}
-	
-	getUserInfo () {
-		axios.request<userInfo>({
-			method: "get",
-			url: `${window.location.origin}/api/user/info`,
-			headers: {"content-type": "application/json"}
-		})
-		.then(request => this.setState({ info: request.data }))
-		.catch(console.log);
-	}
-
-	constructor(props: {}) {
-		super(props);
-
-		if(this.state.loggedIn) this.getUserInfo()
-	}
-
-	render () {
-		return <div>
-			<NavBar/>
-			<ToastArea>
-				<Toast text="Gert" icon={<VideogameAssetIcon style={{ fontSize: 32 }}/>}/>
-				<Toast text="Gert"/>
-			</ToastArea>
-			<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>
-				<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",
-							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} image="url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblogs.agu.org%2Fwildwildscience%2Ffiles%2F2017%2F09%2FCapture-1.png&f=1&nofb=1)"/>
-						</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 width="calc(100% - 12px)" style={{ display: this.state.loggedIn ? "block" : "none" }}>
-					<h2>Recente partijen</h2>
-					<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
-						<tr>
-							<th style={{ width: "50%" }}>Tegenstander</th>
-							<th style={{ width: "20%" }}>Uitkomst</th>
-							<th style={{ width: "15%" }}>Zetten</th>
-							<th style={{ width: "15%" }}>Datum</th>
-						</tr>
-						<tr>
-							<td style={LeftAlignedTableColumn}>Naam hier</td>
-							<td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
-							<td>7</td>
-							<td style={RightAlignedTableColumn}>Vandaag</td>
-						</tr>
-						<tr>
-							<td style={LeftAlignedTableColumn}>Nog meer namen</td>
-							<td style={{ opacity: .6 }}>Gelijkspel</td>
-							<td>42</td>
-							<td style={RightAlignedTableColumn}>Gisteren</td>
-						</tr>
-					</table>
-				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
-					<h2>Nieuws ofzo</h2>
-					<p style={{ margin: "6px 0" }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
-				</Vierkant>
-			</CenteredPage>
-		</div>
-	}
-}
-
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
deleted file mode 100644
index 8528a39..0000000
--- a/src/pages/login.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { v4 as uuidv4 } from 'uuid';
-import axios from 'axios';
-
-import { NavBar } from '../components/navbar';
-import { CenteredPage } from '../components/page';
-import { Vierkant, Input, Button } from '../components/ui';
-
-var ids = {
-	email: uuidv4(),
-	password: uuidv4()
-}
-
-function submitLogin() {
-	var formData = {
-		email: (document.getElementById(ids.email) as HTMLInputElement).value,
-		password: (document.getElementById(ids.password) as HTMLInputElement).value
-	}
-
-	if ( !formData.email ||
-		 !formData.password ) {
-		alert("Vul alsjeblieft alle velden in!");
-		return;
-	}
-
-	axios({
-		method: "post",
-		url: `${window.location.origin}/api/auth/login`,
-		headers: {"content-type": "application/json"},
-		data: formData
-	})
-	.then(() => window.location.pathname = "/")
-	.catch(error => {
-		if (error.response.status === 401) {
-			alert("Verkeerde gebruikersnaam/wachtwoord combinatie!")
-			return;
-		}
-		alert("Er is iets fout gegaan!");
-	});
-}
-
-export default function LoginPage() {
-	return (
-		<div>
-			<NavBar/>
-			<CenteredPage width={500} style={{ height: "100vh" }}>
-				<div style={{
-					position: "relative",
-					top: "50%",
-					transform: "translateY(-50%)",
-					margin: "0 auto",
-					textAlign: "center"
-				}}>
-					<Vierkant>
-						<Input id={ids.email} label="email of gebruikersnaam" style={{ marginBottom: 12 }}></Input>
-						<Input id={ids.password} label="wachtwoord" type="password"></Input>
-						<div style={{
-							marginTop: 24,
-							gridGap: 24,
-							display: "grid",
-							gridTemplateColumns: "1fr 1fr"
-						}}>
-							<Button href="/register" text="Registreren" style={{ backgroundColor: "var(--background-alt)"}}></Button>
-							<Button text="Inloggen" onclick={submitLogin}></Button>
-						</div>
-					</Vierkant>
-				</div>
-			</CenteredPage>
-		</div>
-	);
-}
-
diff --git a/src/pages/register.tsx b/src/pages/register.tsx
deleted file mode 100644
index e0f98de..0000000
--- a/src/pages/register.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { NavBar } from '../components/navbar';
-import { CenteredPage } from '../components/page';
-import { Vierkant, Input, Button } from '../components/ui';
-
-import { v4 as uuidv4 } from 'uuid';
-import { validate as validateEmail } from 'email-validator';
-import axios from 'axios';
-
-var ids = {
-	username: uuidv4(),
-	email: uuidv4(),
-	password: uuidv4()
-}
-
-function submitRegister() {
-	var formData = {
-		username: (document.getElementById(ids.username) as HTMLInputElement).value,
-		email: (document.getElementById(ids.email) as HTMLInputElement).value,
-		password: (document.getElementById(ids.password) as HTMLInputElement).value
-	}
-
-	if ( !formData.username ||
-	   	 !formData.email ||
-		 !formData.password ) {
-		alert("Vul alsjeblieft alle velden in!");
-		return;
-	}
-
-	var passwordRegex: RegExp = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/;
-	/*
-	 * ^ 				Begin string
-	 * (?=.*[A-Z]) 		Minimaal één hoofdletter
-	 * (?=.*[a-z]) 		Minimaal één kleine letter
-	 * (?=.*[0-9]) 		Minimaal één getal
-	 * .{8,} 			Minimaal acht tekens in lengte
-	 * $ 				Ende string
-	 * https://stackoverflow.com/questions/5142103/regex-to-validate-password-strength
-	 */
-
-	//TODO: alert -> react toast / material-ui snackbar
-	if ( formData.username.length > 35 ) {
-		alert("Je gebruikersnaam kan maximaal 35 tekens lang zijn!");
-		return;
-	}
-
-	if ( !validateEmail(formData.email) ) {
-		alert("Voer alsjeblieft een geldig e-mail adres in!");
-		return;
-	}
-
-	//TODO: wachtwoord max 72 tekens ivm bcrypt
-	if ( !formData.password.match(passwordRegex) ) {
-		alert("Je wachtwoord moet minimaal 8 tekens lang zijn en een hoofdletter, kleine letter, en een nummer bevatten!");
-		return;
-	}
-	
-	axios({
-		method: "post",
-		url: `${window.location.origin}/api/auth/signup`,
-		headers: {"content-type": "application/json"},
-		data: formData
-	})
-	.then(() => {
-		//TODO: email verificatie
-		// redirect naar home, automatische login
-		window.location.pathname = "/";
-	})
-	.catch(error => {
-		alert("Er is iets fout gegaan!");
-		console.log(error);
-	});
-}
-
-export default function RegisterPage() {
-	return (
-		<div>
-			<NavBar/>
-			<CenteredPage width={500} style={{ height: "100vh" }}>
-				<div style={{
-					position: "relative",
-					top: "50%",
-					transform: "translateY(-50%)",
-					margin: "0 auto",
-					textAlign: "center"
-				}}>
-					<Vierkant>
-						<form>
-							<Input id={ids.username} label="gebruikersnaam" style={{ marginBottom: 12 }}></Input>
-							<Input id={ids.email} label="email" style={{ marginBottom: 12 }}></Input>
-							<Input id={ids.password} label="wachtwoord" type="password"></Input>
-							<Button text="Registreren" style={{ marginTop: 24 }} onclick={submitRegister}></Button>
-						</form>
-					</Vierkant>
-				</div>
-			</CenteredPage>
-		</div>
-	);
-}
-
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
deleted file mode 100644
index 2daa90b..0000000
--- a/src/pages/settings.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { CSSProperties } from 'react';
-
-import { NavBar } from '../components/navbar';
-import { CenteredPage, PageTitle } from '../components/page';
-import { Vierkant } from '../components/ui';
-/* import { AccountAvatar } from '../components/account'; */
-import { CurrentGameSettings, EditGameSettings } from '../components/gameSettings';
-
-var SettingsSectionHeaderStyle: CSSProperties = {
-	marginBottom: 24
-}
-
-export default function SettingsPage() {
-	return (
-		<div>
-			<NavBar/>
-			<CenteredPage width={802}>
-				<PageTitle>Instellingen</PageTitle>
-				<Vierkant width="calc(100% - 12px)">
-					<h2 style={SettingsSectionHeaderStyle}>Account</h2>
-				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
-					<h2 style={SettingsSectionHeaderStyle}>Kleuren</h2>
-				</Vierkant>
-				<Vierkant width="calc(100% - 12px)">
-					<h2 style={SettingsSectionHeaderStyle}>Standaard spelregels</h2>
-					<CurrentGameSettings/>
-				</Vierkant>
-				<EditGameSettings/>
-			</CenteredPage>
-		</div>
-	);
-}
-
diff --git a/src/routes.tsx b/src/routes.tsx
deleted file mode 100644
index baff382..0000000
--- a/src/routes.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Switch, Route } from 'react-router-dom';
-
-import './global.css';
-
-import HomePage from './pages/home';
-import SettingsPage from './pages/settings';
-import GamePage from './pages/game';
-import LoginPage from './pages/login';
-import RegisterPage from './pages/register';
-
-export default function Router() {
-	return <Switch>
-		<Route exact path='/' component={HomePage}/>
-		<Route exact path='/settings' component={SettingsPage}/>
-		<Route exact path='/game' component={GamePage}/>
-		<Route exact path='/login' component={LoginPage}/>
-		<Route exact path='/register' component={RegisterPage}/>
-	</Switch>;
-}
-