diff options
Diffstat (limited to 'components/voerBord.tsx')
| -rw-r--r-- | components/voerBord.tsx | 50 |
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])); |