From 2a0e24e24f728bbb858e11c47a08ad9d672d840e Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Wed, 17 Feb 2021 22:22:30 +0100
Subject: voerbord connector beginnings

---
 components/voerBord.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'components')

diff --git a/components/voerBord.tsx b/components/voerBord.tsx
index 3e319a1..67bc86d 100644
--- a/components/voerBord.tsx
+++ b/components/voerBord.tsx
@@ -1,18 +1,17 @@
-interface VoerBordProps {
+export function VoerBord(props: {
 	width: number;
 	height: number;
-}
-
-export function VoerBord(props: VoerBordProps) {
+	onMove: (move: string) => void;
+}) {
 	return <table style={{
 		borderSpacing: 8,
 		width: "100%"
 	}}>
 		<tbody>
 			{
-				[...Array(props.height)].map(() => (
+				[...Array(props.height).keys()].map((row) => (
 					<tr>
-						{[...Array(props.width)].map(() => (
+						{[...Array(props.width).keys()].map((column) => (
 							<td style={{
 								position: "relative",
 								width: "100%",
@@ -27,7 +26,10 @@ export function VoerBord(props: VoerBordProps) {
 									top: 0, left: 0, right: 0, bottom: 0,
 									borderRadius: 6,
 									border: "2px solid var(--background-alt)",
-									opacity: .5
+									opacity: .5,
+									cursor: "pointer"
+								}} id={`pos-${(props.height - row - 1) * props.width + column}`} onClick={event => {
+									props.onMove((event.target as HTMLElement).id.split("-")[1])
 								}}/>
 							</td>
 						))}
-- 
cgit v1.2.3