aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/dialogBox.tsx2
-rw-r--r--components/gameBar.tsx41
-rw-r--r--components/ui.tsx2
-rw-r--r--components/voerBord.tsx50
-rw-r--r--pages/game.tsx2
-rw-r--r--pages/index.tsx12
-rw-r--r--pages/login.tsx2
-rw-r--r--pages/register.tsx2
-rw-r--r--pages/search.tsx2
-rw-r--r--pages/settings.tsx8
-rw-r--r--pages/user.tsx8
-rw-r--r--styles/disk.css4
-rw-r--r--styles/game.css36
-rw-r--r--styles/utility.css3
14 files changed, 73 insertions, 101 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]));
diff --git a/pages/game.tsx b/pages/game.tsx
index d6d7fb0..9e702ed 100644
--- a/pages/game.tsx
+++ b/pages/game.tsx
@@ -1,7 +1,7 @@
import Icon from '@mdi/react';
import axios from 'axios';
import copy from 'copy-to-clipboard';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import * as cookies from 'react-cookies';
import { Socket } from 'socket.io-client';
import { SocketContext } from '../components/socketContext';
diff --git a/pages/index.tsx b/pages/index.tsx
index 873cf8b..c4b4baf 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -93,31 +93,31 @@ export default function HomePage() {
<CenteredPage width={802}>
<PageTitle>4 op een rij</PageTitle>
<div className='topbar'>
- <Vierkant className='gamemode' href='/game'>
+ <Vierkant className='gamemode bg-800' href='/game'>
<VideogameAssetIcon className='icon' />
<span className='text'>Nieuw spel</span>
</Vierkant>
{false
- && <Vierkant className='gamemode' href='/'>
+ && <Vierkant className='gamemode bg-800' href='/'>
<ExtensionIcon className='icon' />
<span className='text'>Puzzels</span>
</Vierkant>}
{false
- && <Vierkant className='gamemode' href='/'>
+ && <Vierkant className='gamemode bg-800' href='/'>
<Icon path={mdiRobotExcited} className='icon' />
<span className='text'>Tegen computer</span>
</Vierkant>}
- <Vierkant className='loginOrRegisterBox pad-l valigntop'>
+ <Vierkant className='loginOrRegisterBox pad-l valigntop bg-800'>
{loggedIn
? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
: <LoginOrRegisterBox />}
</Vierkant>
</div>
{loggedIn
- && <Vierkant className='fullwidth pad-l'>
+ && <Vierkant className='w100m2m pad-l bg-800'>
<RecentGames games={gameInfo?.games} />
</Vierkant>}
- <Vierkant className='w100m2m pad-l'>
+ <Vierkant className='w100m2m pad-l bg-800'>
<h2>Nieuws ofzo</h2>
<p style={{ margin: '6px 0' }}>Chess.com heeft heel veel troep waar niemand naar kijkt</p>
</Vierkant>
diff --git a/pages/login.tsx b/pages/login.tsx
index 9e26b50..73fbb52 100644
--- a/pages/login.tsx
+++ b/pages/login.tsx
@@ -50,7 +50,7 @@ export default function LoginPage() {
<NavBar />
<CenteredPage width={500} style={{ height: '100vh' }}>
<div className='posrel center centeredForm'>
- <Vierkant className='pad-l'>
+ <Vierkant className='pad-l bg-800'>
<form onSubmit={(e) => submitLogin(e, toast)}>
<Input
autofocus
diff --git a/pages/register.tsx b/pages/register.tsx
index 90dab3e..63f51f7 100644
--- a/pages/register.tsx
+++ b/pages/register.tsx
@@ -90,7 +90,7 @@ export default function RegisterPage() {
<NavBar />
<CenteredPage width={500} style={{ height: '100vh' }}>
<div className='posrel center centeredForm'>
- <Vierkant className='pad-l'>
+ <Vierkant className='pad-l bg-800'>
<form onSubmit={(e) => submitRegister(e, toast)}>
<Input
autofocus
diff --git a/pages/search.tsx b/pages/search.tsx
index e0f3123..7aba29c 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -47,7 +47,7 @@ function SearchResult(props: { user: userInfo; }) {
function BigSearchBar(props: {
searchFunction: (event?: FormEvent<HTMLFormElement>) => void;
}) {
- return <Vierkant className='pad-m w100m2m bigSearchBar posrel'>
+ return <Vierkant className='pad-m bg-800 w100m2m bigSearchBar posrel'>
<form onSubmit={props.searchFunction}>
<Input
id='bigSearchBar'
diff --git a/pages/settings.tsx b/pages/settings.tsx
index 672edac..0ca2c30 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -48,7 +48,7 @@ export default function SettingsPage() {
<NavBar />
<CenteredPage width={802}>
<PageTitle>Instellingen</PageTitle>
- <Vierkant className='section account w100m2m pad-l'>
+ <Vierkant className='section account w100m2m pad-l bg-800'>
<h2>Account</h2>
<div className='subsection'>
<AccountAvatar size={100} />
@@ -92,7 +92,7 @@ export default function SettingsPage() {
</div>
</div>
</Vierkant>
- <Vierkant className='section colors w100m2m pad-l'>
+ <Vierkant className='section colors w100m2m pad-l bg-800'>
<h2>Kleuren</h2>
<div className='subsection'>
<ColorPicker />
@@ -117,13 +117,13 @@ export default function SettingsPage() {
<h3>Donkere modus</h3>
</div>
</Vierkant>
- <Vierkant className='section gamerules w100m2m pad-l'>
+ <Vierkant className='section gamerules w100m2m pad-l bg-800'>
<h2>Standaard spelregels</h2>
<div className='subsection'>
<CurrentGameSettings />
</div>
</Vierkant>
- <Vierkant className='section logout w100m2m pad-l'>
+ <Vierkant className='section logout w100m2m pad-l bg-800'>
<h2>Uitloggen</h2>
<div className='center'>
<IconLabelButton
diff --git a/pages/user.tsx b/pages/user.tsx
index e1c3674..9741275 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -125,7 +125,7 @@ export default function AccountPage() {
<NavBar />
<CenteredPage width={802}>
<PageTitle>Profiel</PageTitle>
- <Vierkant className='accountHeader w100m2m pad-l'>
+ <Vierkant className='accountHeader w100m2m pad-l bg-800'>
<div className='inner posrel'>
<AccountAvatar size={128} id={user?.id || ''} />
<div className='userInfo dispinbl valigntop'>
@@ -280,7 +280,7 @@ export default function AccountPage() {
</div>
</div>
</Vierkant>
- <Vierkant className='infosection pad-l w100m2m'>
+ <Vierkant className='infosection pad-l w100m2m bg-800'>
<div className='inner sidebyside'>
<InfoModule
icon={<Icon size={1} path={mdiCheckboxBlankCircle} className='outcome win' />}
@@ -312,7 +312,7 @@ export default function AccountPage() {
<InfoModule icon={<Icon size={1} path={mdiEarth} />} label='Nederland' />
</div>
</Vierkant>
- <Vierkant className='infosection pad-l w100m2m sidebyside'>
+ <Vierkant className='infosection pad-l w100m2m sidebyside bg-800'>
<div className='inner sidebyside'>
<InfoModule
icon={<ArrowUpwardOutlinedIcon className='outcome win' />}
@@ -340,7 +340,7 @@ export default function AccountPage() {
/>
</div>
</Vierkant>
- <Vierkant className='pad-l'>
+ <Vierkant className='pad-l bg-800'>
<RecentGames games={gameInfo?.games} />
</Vierkant>
</CenteredPage>
diff --git a/styles/disk.css b/styles/disk.css
index d858335..2646fed 100644
--- a/styles/disk.css
+++ b/styles/disk.css
@@ -1,3 +1,3 @@
.voerBord .disk.state-0 { background-color: var(--page-background); }
-.voerBord .disk.state-1 { background-color: var(--disk-a); }
-.voerBord .disk.state-2 { background-color: var(--disk-b); }
+.voerBord .disk.state-1 { background-color: var(--confirm); }
+.voerBord .disk.state-2 { background-color: var(--error); }
diff --git a/styles/game.css b/styles/game.css
index ae8c3ff..de00b1c 100644
--- a/styles/game.css
+++ b/styles/game.css
@@ -32,3 +32,39 @@
margin-top: var(--spacing-large);
}
+.voerBord {
+ border-spacing: var(--spacing-small);
+}
+
+.voerBord .cell.inner {
+ border: 2px solid var(--gray-800);
+}
+
+.voerBord .square {
+ margin-top: 100%;
+}
+
+.voerBord.active .cell.inner {
+ cursor: pointer;
+}
+
+.voerBord .disk {
+ border-radius: 999999999px;
+ margin: 3px;
+}
+
+.gameBar .gameBarButton {
+ margin: 0;
+}
+
+.gameBar .move {
+ width: 32px;
+ height: 32px;
+ border-radius: 16px;
+
+ margin: 8px;
+}
+
+.gameBar .move.move-a { background-color: var(--error); }
+.gameBar .move.move-b { background-color: var(--confirm); }
+
diff --git a/styles/utility.css b/styles/utility.css
index d3c5897..0ff6b10 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -43,6 +43,9 @@
.valigntop { vertical-align: top; }
.valignsup { vertical-align: super; }
+.cpointer { cursor: pointer; }
+.cdefault { cursor: default; }
+
.center { text-align: center; }
.floatr { float: right; }