aboutsummaryrefslogtreecommitdiff
path: root/components/voerBord.tsx
diff options
context:
space:
mode:
authorlonkaars <l.leblansch@gmail.com>2021-04-09 17:10:50 +0200
committerlonkaars <l.leblansch@gmail.com>2021-04-09 17:10:50 +0200
commit5856e80fcb78446be37456ec1e5c47b2ab02201f (patch)
treeeb600e49b8e5884c8ffc7d96719a9bd0b9764120 /components/voerBord.tsx
parent24a90a67674d52dd3569cf5289b3f4b2f35f23ad (diff)
dprint format :tada:
Diffstat (limited to 'components/voerBord.tsx')
-rw-r--r--components/voerBord.tsx95
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>;
}