blob: ffb291b0be4dec2fcc79cd7dd302233f530037d8 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
export function VoerBord(props: {
width: number;
height: number;
onMove: (move: number) => void;
active: boolean;
}) {
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
className='posrel outer cell fullwidth'
key={`c-${row}x${column}`}
>
<div className='dispbl square' />
<div className='disk posabs a0' />
<div
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]));
}}
/>
</td>
))}
</tr>
))}
</tbody>
</table>;
}
|