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 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+), 23 deletions(-)
 create mode 100644 src/components/voerBord.tsx

(limited to 'src/components')

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>
+}
-- 
cgit v1.2.3