diff options
author | lonkaars <l.leblansch@gmail.com> | 2021-04-09 17:10:50 +0200 |
---|---|---|
committer | lonkaars <l.leblansch@gmail.com> | 2021-04-09 17:10:50 +0200 |
commit | 5856e80fcb78446be37456ec1e5c47b2ab02201f (patch) | |
tree | eb600e49b8e5884c8ffc7d96719a9bd0b9764120 /components/voerBord.tsx | |
parent | 24a90a67674d52dd3569cf5289b3f4b2f35f23ad (diff) |
dprint format :tada:
Diffstat (limited to 'components/voerBord.tsx')
-rw-r--r-- | components/voerBord.tsx | 95 |
1 files changed, 57 insertions, 38 deletions
diff --git a/components/voerBord.tsx b/components/voerBord.tsx index 946aa9c..93e350c 100644 --- a/components/voerBord.tsx +++ b/components/voerBord.tsx @@ -1,10 +1,16 @@ function Disc() { - return <div className="disk" style={{ - position: "absolute", - top: 0, left: 0, right: 0, bottom: 0, - borderRadius: 999999, - margin: 3 - }}/> + return <div + className='disk' + style={{ + position: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + borderRadius: 999999, + margin: 3, + }} + />; } export function VoerBord(props: { @@ -13,40 +19,53 @@ export function VoerBord(props: { onMove: (move: number) => void; active: boolean; }) { - return <table className="voerBord" style={{ - borderSpacing: 8, - width: "100%" - }}> + return <table + className='voerBord' + style={{ + borderSpacing: 8, + width: '100%', + }} + > <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 - }} key={`c-${row}x${column}`}> - <div style={{ - display: "block", - marginTop: "100%" - }}/> - <Disc/> - <div style={{ - position: "absolute", - top: 0, left: 0, right: 0, bottom: 0, + {[...Array(props.height).keys()].map((row) => ( + <tr key={`r-${row}`}> + {[...Array(props.width).keys()].map((column) => ( + <td + style={{ + position: 'relative', + width: '100%', + padding: 0, + }} + key={`c-${row}x${column}`} + > + <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)", + border: '2px solid var(--background-alt)', opacity: .5, - cursor: props.active ? "pointer" : "default" - }} id={`pos-${(props.height - row - 1) * props.width + column}`} onClick={event => { - props.onMove(Number((event.target as HTMLElement).id.split("-")[1])) - }}/> - </td> - ))} - </tr> - )) - } + cursor: props.active ? 'pointer' : 'default', + }} + 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> + </table>; } |