Merge pull request #12 from lonkaars/css-files

big redesign css move thing

1 files changed, 5 insertions, 45 deletions

diff --git a/components/voerBord.tsx b/components/voerBord.tsx
index 93e350c..ffb291b 100644
--- a/components/voerBord.tsx
+++ b/components/voerBord.tsx
@@ -1,62 +1,22 @@
-function Disc() {
-	return <div
-		className='disk'
-		style={{
-			position: 'absolute',
-			top: 0,
-			left: 0,
-			right: 0,
-			bottom: 0,
-			borderRadius: 999999,
-			margin: 3,
-		}}
-	/>;
-}
-
 export function VoerBord(props: {
 	width: number;
 	height: number;
 	onMove: (move: number) => void;
 	active: boolean;
 }) {
-	return <table
-		className='voerBord'
-		style={{
-			borderSpacing: 8,
-			width: '100%',
-		}}
-	>
+	return <table className={'voerBord fullwidth ' + (props.active ? 'active' : '')}>
 		<tbody>
 			{[...Array(props.height).keys()].map((row) => (
 				<tr key={`r-${row}`}>
 					{[...Array(props.width).keys()].map((column) => (
 						<td
-							style={{
-								position: 'relative',
-								width: '100%',
-								padding: 0,
-							}}
+							className='posrel outer cell fullwidth'
 							key={`c-${row}x${column}`}
 						>
+							<div className='dispbl square' />
+							<div className='disk posabs a0' />
 							<div
-								style={{
-									display: 'block',
-									marginTop: '100%',
-								}}
-							/>
-							<Disc />
-							<div
-								style={{
-									position: 'absolute',
-									top: 0,
-									left: 0,
-									right: 0,
-									bottom: 0,
-									borderRadius: 6,
-									border: '2px solid var(--background-alt)',
-									opacity: .5,
-									cursor: props.active ? 'pointer' : 'default',
-								}}
+								className='posabs a0 round-t inner cell'
 								id={`pos-${(props.height - row - 1) * props.width + column}`}
 								onClick={event => {
 									props.onMove(Number((event.target as HTMLElement).id.split('-')[1]));