From dd77d6bb276f6a70b36f69d11cde7f5c8995f5e1 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 17 Apr 2021 17:24:59 +0200 Subject: home page without inline react styles :tada: --- components/recentGames.tsx | 20 +++---- components/ui.tsx | 21 +------ pages/_app.tsx | 2 + pages/index.tsx | 144 +++++++++------------------------------------ styles/global.css | 13 ++-- styles/index.css | 72 +++++++++++++++++++++++ styles/index.module.css | 7 --- styles/ui.css | 12 ++++ styles/utility.css | 27 ++++++++- 9 files changed, 161 insertions(+), 157 deletions(-) create mode 100644 styles/index.css delete mode 100644 styles/index.module.css 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 - {gameStatus} + return + + {gameStatus} + ; } 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 - ? + ? {props.text} : 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
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
- - Log in of maak een account aan om je scores op te slaan en toegang te krijgen tot meer functies + return
+ + Log in of maak een account aan om toegang tot meer functies te krijgen -
-
; } @@ -90,44 +32,19 @@ function AccountBox(props: { info: userInfo; sumGameInfo: userGameTotals; }) { - return
-
+ return
+
-
-

- {props.info?.username} -

-

Score: {props.info?.rating}

-

- {props.sumGameInfo?.win} W - / - {props.sumGameInfo?.lose} V - / - {props.sumGameInfo?.draw} G +

+

{props.info?.username}

+

Score: {props.info?.rating}

+

+ {props.sumGameInfo?.win} W + / + {props.sumGameInfo?.lose} V + / + {props.sumGameInfo?.draw} G

; @@ -175,25 +92,22 @@ export default function HomePage() { 4 op een rij -
- - - Nieuw spel -
+
+ + + Nieuw spel {false - && - - Puzzels -
+ && + + Puzzels } {false - && - - Tegen computer -
+ && + + Tegen computer } - + {loggedIn ? : } 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; +} + -- cgit v1.2.3