aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/recentGames.tsx20
-rw-r--r--components/ui.tsx21
-rw-r--r--pages/_app.tsx2
-rw-r--r--pages/index.tsx144
-rw-r--r--styles/global.css13
-rw-r--r--styles/index.css72
-rw-r--r--styles/index.module.css7
-rw-r--r--styles/ui.css12
-rw-r--r--styles/utility.css27
9 files changed, 161 insertions, 157 deletions
diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index 988126f..65c819a 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -28,18 +28,14 @@ function GameOutcome(props: { game: gameInfo; }) {
},
}[props.game.status]();
})();
- var outcome = props.game.outcome;
- return <td
- style={{
- color: outcome == 'w'
- ? 'var(--disk-b-text)'
- : outcome == 'l'
- ? 'var(--disk-a-text)'
- : 'var(--text)',
- opacity: !['w', 'l'].includes(outcome) ? 0.75 : 1.0,
- }}
- >
- {gameStatus}
+ return <td>
+ <span className={"outcome " + {
+ 'w': 'win',
+ 'l': 'lose',
+ 'd': 'draw',
+ }[props.game.outcome]}>
+ {gameStatus}
+ </span>
</td>;
}
diff --git a/components/ui.tsx b/components/ui.tsx
index 99479a8..db858a4 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -30,6 +30,7 @@ export function Button(props: {
children?: ReactNode;
style?: CSSProperties;
href?: string;
+ className?: string;
onclick?: (() => void);
id?: string;
}) {
@@ -37,26 +38,10 @@ export function Button(props: {
onClick={props.onclick}
href={props.href}
id={props.id}
- style={{
- padding: props.text ? 8 : 16,
- textAlign: props.text ? 'center' : 'left',
- borderRadius: 8,
- backgroundColor: 'var(--disk-a)',
- cursor: 'pointer',
- position: 'relative',
- textDecoration: 'none',
- display: 'block',
- userSelect: 'none',
- ...props.style,
- }}
+ className={"button pad-s round-t " + props.className}
>
{props.text
- ? <span
- style={{
- fontWeight: 600,
- userSelect: 'none',
- }}
- >
+ ? <span>
{props.text}
</span>
: undefined}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bf9a280..46aa8d0 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,8 @@ import '../styles/utility.css';
import '../styles/ui.css';
import '../styles/navbar.css';
+import '../styles/index.css';
+
export default function VierOpEenRijWebsite({ Component, pageProps }) {
return <div>
<Head>
diff --git a/pages/index.tsx b/pages/index.tsx
index c1b912d..c3fe955 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
import axios from 'axios';
-import { CSSProperties, useContext, useEffect, useState } from 'react';
+import { useContext, useEffect, useState } from 'react';
import { userGames, userGameTotals, userInfo } from '../api/api';
import { Footer } from '../components/footer';
import { SocketContext } from '../components/socketContext';
@@ -16,72 +16,14 @@ import VideogameAssetIcon from '@material-ui/icons/VideogameAsset';
import { mdiRobotExcited } from '@mdi/js';
import Icon from '@mdi/react';
-import styles from '../styles/index.module.css';
-
-var GameModeIconStyle: CSSProperties = {
- fontSize: 64,
- width: 64,
- height: 64,
- display: 'inline-block',
- position: 'absolute',
- top: 24,
- left: '50%',
- transform: 'translateX(-50%)',
-};
-
-var GameModeTextStyle: CSSProperties = {
- whiteSpace: 'nowrap',
- display: 'inline-block',
- position: 'absolute',
- bottom: 24,
- left: '50%',
- transform: 'translateX(-50%)',
- userSelect: 'none',
- fontWeight: 500,
-};
-
-var SquareSize: CSSProperties = {
- width: 90,
- height: 90,
-};
-
-var InnerLoginOrRegisterBoxStyle: CSSProperties = {
- position: 'relative',
- width: '100%',
- height: '100%',
-};
-
function LoginOrRegisterBox() {
- return <div style={{ ...InnerLoginOrRegisterBoxStyle, textAlign: 'center' }}>
- <span
- style={{
- userSelect: 'none',
- display: 'inline-block',
- position: 'absolute',
- fontSize: 14,
- left: 0,
- right: 0,
- top: 0,
- margin: '0 auto',
- minWidth: 240,
- maxWidth: 350,
- }}
- >
- Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies
+ return <div className="inner">
+ <span className="registerMessage posabs h0 t0">
+ Log in of maak een account aan om toegang tot meer functies te krijgen
</span>
- <div
- style={{
- display: 'grid',
- gridGap: 24,
- gridTemplateColumns: '1fr 1fr',
- position: 'absolute',
- left: 0,
- right: 0,
- bottom: 0,
- }}
- >
- <Button href='/register' text='Registreren' style={{ backgroundColor: 'var(--background-alt)' }} />
- <Button href='/login' text='Inloggen' />
+ <div className="sidebyside posabs h0 b0">
+ <Button href='/register' text='Registreren' className="register" />
+ <Button href='/login' text='Inloggen' className="login" />
</div>
</div>;
}
@@ -90,44 +32,19 @@ function AccountBox(props: {
info: userInfo;
sumGameInfo: userGameTotals;
}) {
- return <div style={InnerLoginOrRegisterBoxStyle}>
- <div
- style={{
- position: 'absolute',
- top: 0,
- left: 0,
- ...SquareSize,
- }}
- >
+ return <div className="inner profile">
+ <div className="picture posabs l0 t0">
<AccountAvatar size={90} />
</div>
- <div
- style={{
- position: 'absolute',
- top: 0,
- left: 102,
- width: 'calc(100% - 90px - 12px)',
- height: '100%',
- }}
- >
- <h2
- style={{
- maxWidth: 178,
- fontSize: 20,
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- }}
- >
- {props.info?.username}
- </h2>
- <p style={{ marginTop: 6 }}>Score: {props.info?.rating}</p>
- <p style={{ position: 'absolute', bottom: 0, left: 0 }}>
- <span style={{ color: 'var(--disk-b-text)' }}>{props.sumGameInfo?.win} W</span>
- <span style={{ margin: '0 3px' }}>/</span>
- <span style={{ color: 'var(--disk-a-text)' }}>{props.sumGameInfo?.lose} V</span>
- <span style={{ margin: '0 3px' }}>/</span>
- <span style={{ opacity: .75 }}>{props.sumGameInfo?.draw} G</span>
+ <div className="info posabs t0">
+ <h2 className="username truncate">{props.info?.username}</h2>
+ <p className="score">Score: {props.info?.rating}</p>
+ <p className="games posabs b0 l0">
+ <span className="outcome win">{props.sumGameInfo?.win} W</span>
+ <span className="divider">/</span>
+ <span className="outcome lose">{props.sumGameInfo?.lose} V</span>
+ <span className="divider">/</span>
+ <span className="outcome draw">{props.sumGameInfo?.draw} G</span>
</p>
</div>
</div>;
@@ -175,25 +92,22 @@ export default function HomePage() {
<NavBar />
<CenteredPage width={802}>
<PageTitle>4 op een rij</PageTitle>
- <div>
- <Vierkant href='/game'>
- <VideogameAssetIcon style={GameModeIconStyle} />
- <span style={GameModeTextStyle}>Nieuw spel</span>
- <div style={SquareSize}></div>
+ <div className="topbar">
+ <Vierkant className="gamemode" href='/game'>
+ <VideogameAssetIcon className="icon" />
+ <span className="text">Nieuw spel</span>
</Vierkant>
{false
- && <Vierkant href='/'>
- <ExtensionIcon style={GameModeIconStyle} />
- <span style={GameModeTextStyle}>Puzzels</span>
- <div style={SquareSize}></div>
+ && <Vierkant className="gamemode" href='/'>
+ <ExtensionIcon className="icon" />
+ <span className="text">Puzzels</span>
</Vierkant>}
{false
- && <Vierkant href='/'>
- <Icon path={mdiRobotExcited} style={GameModeIconStyle} />
- <span style={GameModeTextStyle}>Tegen computer</span>
- <div style={SquareSize}></div>
+ && <Vierkant className="gamemode" href='/'>
+ <Icon path={mdiRobotExcited} className="icon" />
+ <span className="text">Tegen computer</span>
</Vierkant>}
- <Vierkant className={styles.loginOrRegisterBox}>
+ <Vierkant className="loginOrRegisterBox">
{loggedIn
? <AccountBox info={userInfo} sumGameInfo={gameInfo?.totals} />
: <LoginOrRegisterBox />}
diff --git a/styles/global.css b/styles/global.css
index 350a2a7..3c28cfc 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -1,5 +1,5 @@
:root {
- --background: #E3E6EE;
+ --background: var(--gray-900);
--foreground: var(--gray-100);
--accent: #7E3AA6;
@@ -14,9 +14,10 @@
--gray-100: #141619;
--gray-200: #1F242D;
--gray-300: #293140;
- --gray-700: #757D92;
- --gray-800: #A9AFC0;
- --gray-900: #CED2DC;
+ --gray-600: #757D92;
+ --gray-700: #A9AFC0;
+ --gray-800: #CED2DC;
+ --gray-900: #E3E6EE;
/* box-shadow */
--drop-level-2: 0px 8px 32px 0px rgba(0, 0, 0, 0.3);
@@ -150,3 +151,7 @@ input.light::placeholder { color: var(--text-alt); }
border-width: 2px;
}
+.outcome.win { color: var(--disk-a-alt); }
+.outcome.lose { color: var(--disk-b-alt); }
+.outcome.draw { color: var(--gray-600); }
+
diff --git a/styles/index.css b/styles/index.css
new file mode 100644
index 0000000..8ba12a6
--- /dev/null
+++ b/styles/index.css
@@ -0,0 +1,72 @@
+.topbar * {
+ --squareSize: 90px;
+}
+
+.loginOrRegisterBox {
+ vertical-align: top;
+ height: calc(var(--squareSize) + 2 * var(--spacing-large));
+ width: 100%;
+ max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
+}
+
+.loginOrRegisterBox .inner {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+.loginOrRegisterBox .inner .registerMessage {
+ user-select: none;
+ display: inline-block;
+ margin: 0 auto;
+ min-width: 240px;
+ max-width: 350px;
+ text-align: center;
+}
+
+.loginOrRegisterBox .inner .button.register {
+ background-color: var(--gray-700);
+ color: var(--foreground);
+}
+
+.gamemode .icon {
+ font-size: 64px;
+ font-size: 64px;
+ height: 64px;
+ display: inline-block;
+ position: absolute;
+ top: var(--spacing-large);
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.gamemode .text {
+ white-space: nowrap;
+ display: inline-block;
+ position: absolute;
+ bottom: var(--spacing-large);
+ left: 50%;
+ transform: translateX(-50%);
+ user-select: none;
+ font-weight: 500;
+}
+
+.topbar .gamemode {
+ --size: calc(var(--squareSize) + 2 * var(--spacing-large));
+ width: var(--size);
+ height: var(--size);
+}
+
+.topbar .profile .info {
+ left: calc(90px + 12px);
+ width: calc(100% - 90px - 12px);
+ height: 100%;
+}
+
+.topbar .profile .info .username { max-width: 178px; }
+.topbar .profile .info .score { margin-top: var(--spacing-small); }
+
+.topbar .profile .info .games .divider {
+ margin: 0 3px;
+}
+
diff --git a/styles/index.module.css b/styles/index.module.css
deleted file mode 100644
index 9b518ea..0000000
--- a/styles/index.module.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.loginOrRegisterBox {
- --squareSize: 90px;
- vertical-align: top;
- height: calc(var(--squareSize) + 2 * var(--spacing-large));
- width: 100%;
- max-width: calc(100% - var(--squareSize) - var(--spacing-medium) * 2 - var(--spacing-large) * 2);
-}
diff --git a/styles/ui.css b/styles/ui.css
index d665044..f1d65e2 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -7,3 +7,15 @@
.fullwidth { width: calc(100% - var(--spacing-medium)); }
+.button {
+ background-color: var(--accent);
+ color: var(--gray-900);
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ text-decoration: none;
+ display: block;
+ user-select: none;
+ font-weight: 600;
+}
+
diff --git a/styles/utility.css b/styles/utility.css
index 753b88d..4331d3a 100644
--- a/styles/utility.css
+++ b/styles/utility.css
@@ -15,13 +15,38 @@
.bg-800 { background-color: var(--gray-800); }
.bg-900 { background-color: var(--gray-900); }
+.posabs { position: absolute; }
+.posrel { position: relative; }
+
+.t0 { top: 0; }
+.b0 { bottom: 0; }
+.r0 { right: 0; }
+.l0 { left: 0; }
+
+.h0 { left: 0; right: 0; }
+.v0 { top: 0; bottom: 0; }
+
+.a0 { top: 0; bottom: 0; left: 0; right: 0; }
+
.subtile {
color: var(--gray-300);
font-style: italic;
}
-/* no-select */
.nosel {
user-select: none;
font-weight: 600;
}
+
+.sidebyside {
+ display: grid;
+ grid-gap: var(--spacing-medium);
+ grid-auto-flow: column;
+}
+
+.truncate {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+