From 90d55c83cb4a6e3cf76622b0b8a2a9aa13fd2ba0 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 6 Jan 2021 13:53:56 +0100
Subject: spel pagina

---
 src/components/navbar.tsx   |  2 +-
 src/components/page.tsx     | 43 +++++++++++++++++++++----------------------
 src/components/voerBord.tsx | 43 +++++++++++++++++++++++++++++++++++++++++++
 src/pages/game.tsx          | 16 ++++++++++++++++
 src/pages/home.tsx          |  6 +++---
 src/pages/settings.tsx      |  4 ++--
 src/routes.tsx              |  2 ++
 7 files changed, 88 insertions(+), 28 deletions(-)
 create mode 100644 src/components/voerBord.tsx
 create mode 100644 src/pages/game.tsx

(limited to 'src')

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
index 141119f..d0245dc 100644
--- a/src/components/navbar.tsx
+++ b/src/components/navbar.tsx
@@ -43,7 +43,7 @@ export function NavBar() {
 		<div className="navbar" style={NavBarStyle}>
 			<div style={NavBarItemStyle}><LogoDark/></div>
 			<a href="/" style={NavBarItemStyle}><Home/></a>
-			<a href="/" style={NavBarItemStyle}><VideogameAssetIcon/></a>
+			<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
 			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
 			<a href="/" style={NavBarItemStyle}><SearchIcon/></a>
 
diff --git a/src/components/page.tsx b/src/components/page.tsx
index 44b00ba..b368eee 100644
--- a/src/components/page.tsx
+++ b/src/components/page.tsx
@@ -1,31 +1,30 @@
-import { Component, CSSProperties } from 'react';
+import { Component, ReactNode } from 'react';
 
-var CenteredPageStyle: CSSProperties = {
-	maxWidth: 802,
-	margin: "0 auto"
+interface CenteredPageProps {
+	width?: number;
+	children?: ReactNode;
 }
 
-export class CenteredPage extends Component {
-	render () {
-		return <div className="CenteredPageOuter" style={CenteredPageStyle}>
-		<div className="CenteredPageInner" style={{
-			margin: "0 6px",
-			lineHeight: 0
-		}}> {this.props.children} </div>
-		</div>;
-	}
-}
-
-var PageTitleStyle: CSSProperties = {
-	color: "var(--text-alt)",
-	marginLeft: 6,
-	marginTop: 32,
-	marginBottom: 64,
-	fontSize: 25
+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.children} </div>
+	</div>;
 }
 
 export class PageTitle extends Component {
 	render () {
-		return <h1 style={PageTitleStyle}>{this.props.children}</h1>;
+		return <h1 style={{
+			color: "var(--text-alt)",
+			marginLeft: 6,
+			marginTop: 32,
+			marginBottom: 64,
+			fontSize: 25
+		}}>{this.props.children}</h1>;
 	}
 }
diff --git a/src/components/voerBord.tsx b/src/components/voerBord.tsx
new file mode 100644
index 0000000..28de567
--- /dev/null
+++ b/src/components/voerBord.tsx
@@ -0,0 +1,43 @@
+interface VoerBordProps {
+	width: number;
+	height: number;
+}
+
+export function VoerBord(props: VoerBordProps) {
+	return <table style={{
+		borderSpacing: 8,
+		width: "100%"
+	}}>
+	{
+		[...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
+						}}/>
+						<div style={{
+							position: "absolute",
+							top: 2, left: 2, right: 2, bottom: 2,
+							backgroundColor: "var(--disk-a)",
+							borderRadius: 999999
+						}}/>
+					</td>
+				))}
+			</tr>
+		))
+	}
+	</table>
+}
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
new file mode 100644
index 0000000..b248631
--- /dev/null
+++ b/src/pages/game.tsx
@@ -0,0 +1,16 @@
+import { NavBar } from '../components/navbar';
+import { CenteredPage, PageTitle } from '../components/page';
+import { VoerBord } from '../components/voerBord';
+
+export default function GamePage() {
+	return (
+		<div>
+			<NavBar/>
+			<CenteredPage width={900}>
+				<PageTitle>Niew spel starten</PageTitle>
+				<VoerBord width={7} height={6}/>
+			</CenteredPage>
+		</div>
+	);
+}
+
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 3583cfb..7196fc4 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -51,10 +51,10 @@ var RightAlignedTableColumn: CSSProperties = {
 export default function HomePage() {
 	return (
 		<div>
-			<NavBar />
-			<CenteredPage>
+			<NavBar/>
+			<CenteredPage width={802}>
 				<PageTitle>4 op een rij</PageTitle>
-				<Vierkant href="/">
+				<Vierkant href="/game">
 					<VideogameAssetIcon style={GameModeIconStyle}/>
 					<span style={GameModeTextStyle}>Nieuw spel</span>
 					<div style={SquareSize}></div>
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index 7c886d6..7460055 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -6,8 +6,8 @@ import { Vierkant } from '../components/vierkant';
 export default function SettingsPage() {
 	return (
 		<div>
-			<NavBar />
-			<CenteredPage>
+			<NavBar/>
+			<CenteredPage width={802}>
 				<PageTitle>Instellingen</PageTitle>
 				<Vierkant width="calc(100% - 12px)">
 					<h2>Account</h2>
diff --git a/src/routes.tsx b/src/routes.tsx
index b9b39da..5310baf 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -4,11 +4,13 @@ import './global.css';
 
 import HomePage from './pages/home';
 import SettingsPage from './pages/settings';
+import GamePage from './pages/game';
 
 export default function Router() {
 	return <Switch>
 		<Route exact path='/' component={HomePage}/>
 		<Route exact path='/settings' component={SettingsPage}/>
+		<Route exact path='/game' component={GamePage}/>
 	</Switch>;
 }
 
-- 
cgit v1.2.3