diff options
Diffstat (limited to 'components')
| -rw-r--r-- | components/dialogBox.tsx | 2 | ||||
| -rw-r--r-- | components/gameBar.tsx | 41 | ||||
| -rw-r--r-- | components/ui.tsx | 2 | ||||
| -rw-r--r-- | components/voerBord.tsx | 50 |
4 files changed, 14 insertions, 81 deletions
diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 4ead7c5..a5b02fa 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -12,7 +12,7 @@ export function DialogBox(props: { className?: string; }) { return <Vierkant - className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' ' + className={'dialogbox bg-800 drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' ' + props.className} > <h2 className='title'>{props.title}</h2> diff --git a/components/gameBar.tsx b/components/gameBar.tsx index 0d7d4d9..a3479d5 100644 --- a/components/gameBar.tsx +++ b/components/gameBar.tsx @@ -11,14 +11,7 @@ function GameBarModule(props: { onclick?: () => void; }) { return <Vierkant - style={{ - backgroundColor: 'var(--background-alt)', - padding: 12, - borderRadius: 6, - margin: 0, - verticalAlign: 'top', - cursor: props.onclick ? 'pointer' : 'default', - }} + className={'gameBarButton bg-700 pad-m round-t valigntop ' + (props.onclick ? 'cpointer' : '')} onclick={props.onclick} > {props.children} @@ -37,33 +30,13 @@ export function GameBar(props: { active: boolean; resignFunction: () => void; }) { - return <Vierkant - className='gameBar' - style={{ - padding: 8, - width: 'calc(100% - 12px)', - }} - > - <div style={{ gridAutoColumns: 'auto' }}> + return <Vierkant className='gameBar bg-800 w100m2m pad-s'> + <div> <div style={{ ...GameBarAlignStyle, float: 'left' }}> - <div - style={{ - width: 32, - height: 32, - margin: 8, - backgroundColor: props.turn ? 'var(--disk-b)' : 'var(--disk-a)', - borderRadius: 16, - display: 'inline-block', - }} - /> - <h2 - style={{ - fontSize: 20, - margin: 12, - verticalAlign: 'top', - display: 'inline-block', - }} - > + {props.active && <div + className={'move dispinbl ' + (props.turn ? 'move-a' : 'move-b')} + />} + <h2 className='pad-m valigntop dispinbl'> {!props.active ? 'Wachten op tegenstander...' : props.turn == props.player1 diff --git a/components/ui.tsx b/components/ui.tsx index 80bfba1..11914c8 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -16,7 +16,7 @@ export function Vierkant(props: { }) { return <a href={props.href} - className={['bg-800', 'round-l', 'vierkant', props.className].join(' ')} + className={['round-l', 'vierkant', props.className].join(' ')} id={props.id} onClick={props.onclick} > 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])); |