From 29436b8bdcba28d0c6362a2c6a68268411be7293 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Mon, 19 Apr 2021 14:36:28 +0200 Subject: user page without inline css :tada: --- pages/user.tsx | 456 ++++++++++++++++++++++++++------------------------------- 1 file changed, 205 insertions(+), 251 deletions(-) (limited to 'pages/user.tsx') diff --git a/pages/user.tsx b/pages/user.tsx index 4f7331c..e1c3674 100644 --- a/pages/user.tsx +++ b/pages/user.tsx @@ -1,6 +1,6 @@ import Icon from '@mdi/react'; import axios from 'axios'; -import { Children, ReactNode, useContext, useEffect, useState } from 'react'; +import { ReactNode, useContext, useEffect, useState } from 'react'; import { userGames, userInfo } from '../api/api'; import { AccountAvatar } from '../components/account'; @@ -35,60 +35,18 @@ function InfoModule(props: { label: string; icon: ReactNode; }) { - return
-
+ return
+
{props.icon}
-
- +
+ {props.label}
; } -function InfoSection(props: { children: ReactNode; }) { - return -
- {props.children} -
- ; -} - export default function AccountPage() { var server = typeof window === 'undefined'; var loggedIn = !server && document.cookie.includes('token'); @@ -167,226 +125,222 @@ export default function AccountPage() { Profiel - - -
-

{user?.username}

-

- {user?.status} -

-
-
- {loggedIn &&
- {ownPage - ?
- } href='/settings' text='Instellingen' /> - {!editingStatus - ? } - text='Status bewerken' - onclick={() => setEditingStatus(true)} + +
+ +
+

{user?.username}

+

+ {user?.status} +

+
+
+ {loggedIn &&
+ {ownPage + ?
+ } + href='/settings' + text='Instellingen' /> - : } - text='Status opslaan' - onclick={() => { - setEditingStatus(false); - axios.request({ - method: 'post', - url: `/api/user/status`, - headers: { 'content-type': 'application/json' }, - data: { 'status': document.getElementById('status').innerText }, - }); - }} - />} -
- :
- {(() => { - var icon = { - 'blocked': , - }[relation] || ; + {!editingStatus + ? } + text='Status bewerken' + onclick={() => setEditingStatus(true)} + /> + : } + text='Status opslaan' + onclick={() => { + setEditingStatus(false); + axios.request({ + method: 'post', + url: `/api/user/status`, + headers: { 'content-type': 'application/json' }, + data: { 'status': document.getElementById('status').innerText }, + }); + }} + />} +
+ :
+ {(() => { + var icon = { + 'blocked': , + }[relation] || ; - var text = { - 'blocked': 'Deblokkeren', - }[relation] || 'Blokkeren'; + var text = { + 'blocked': 'Deblokkeren', + }[relation] || 'Blokkeren'; - return { - var nextRelation = { - 'blocked': { - 'endpoint': '/api/social/unblock', - 'action': `${user.username} gedeblokkeerd`, - 'relation': 'none', + return { + var nextRelation = { + 'blocked': { + 'endpoint': '/api/social/unblock', + 'action': `${user.username} gedeblokkeerd`, + 'relation': 'none', + 'icon': , + }, + }[relation] || { + 'endpoint': '/api/social/block', + 'action': `${user.username} geblokkeerd`, + 'relation': 'blocked', 'icon': , - }, - }[relation] || { - 'endpoint': '/api/social/block', - 'action': `${user.username} geblokkeerd`, - 'relation': 'blocked', - 'icon': , - }; + }; - axios.request({ - method: 'post', - url: nextRelation.endpoint, - headers: { 'content-type': 'application/json' }, - data: { 'id': user?.id }, - }) - .then(() => { - toast({ - message: nextRelation.action, - type: 'confirmation', - icon: nextRelation.icon, + axios.request({ + method: 'post', + url: nextRelation.endpoint, + headers: { 'content-type': 'application/json' }, + data: { 'id': user?.id }, + }) + .then(() => { + toast({ + message: nextRelation.action, + type: 'confirmation', + icon: nextRelation.icon, + }); + setRelation(nextRelation.relation); }); - setRelation(nextRelation.relation); - }); - }} - />; - })()} - {(() => { - var icon = { - 'friends': , - 'outgoing': , - 'incoming': , - }[relation] || ; + }} + />; + })()} + {(() => { + var icon = { + 'friends': , + 'outgoing': , + 'incoming': , + }[relation] || ; - var text = { - 'friends': 'Vriend verwijderen', - 'outgoing': 'Vriendschapsverzoek annuleren', - 'incoming': 'Vriendschapsverzoek accepteren', - }[relation] || 'Vriendschapsverzoek sturen'; + var text = { + 'friends': 'Vriend verwijderen', + 'outgoing': 'Vriendschapsverzoek annuleren', + 'incoming': 'Vriendschapsverzoek accepteren', + }[relation] || 'Vriendschapsverzoek sturen'; - return { - var nextRelation = { - 'friends': { - 'endpoint': '/api/social/remove', - 'action': `${user.username} succesvol verwijderd als vriend`, - 'relation': 'none', - 'icon': , - }, - 'outgoing': { - 'endpoint': '/api/social/remove', - 'action': `Vriendschapsverzoek naar ${user.username} geannuleerd`, - 'relation': 'none', - 'icon': , - }, - 'incoming': { - 'endpoint': '/api/social/accept', - 'action': `Vriendschapsverzoek van ${user.username} geaccepteerd`, - 'relation': 'friends', + return { + var nextRelation = { + 'friends': { + 'endpoint': '/api/social/remove', + 'action': `${user.username} succesvol verwijderd als vriend`, + 'relation': 'none', + 'icon': , + }, + 'outgoing': { + 'endpoint': '/api/social/remove', + 'action': + `Vriendschapsverzoek naar ${user.username} geannuleerd`, + 'relation': 'none', + 'icon': , + }, + 'incoming': { + 'endpoint': '/api/social/accept', + 'action': + `Vriendschapsverzoek van ${user.username} geaccepteerd`, + 'relation': 'friends', + 'icon': , + }, + }[relation] || { + 'endpoint': '/api/social/request', + 'action': `Vriendschapsverzoek gestuurd naar ${user.username}`, + 'relation': 'outgoing', 'icon': , - }, - }[relation] || { - 'endpoint': '/api/social/request', - 'action': `Vriendschapsverzoek gestuurd naar ${user.username}`, - 'relation': 'outgoing', - 'icon': , - }; + }; - axios.request({ - method: 'post', - url: nextRelation.endpoint, - headers: { 'content-type': 'application/json' }, - data: { 'id': user?.id }, - }) - .then(() => { - toast({ - message: nextRelation.action, - type: 'confirmation', - icon: nextRelation.icon, + axios.request({ + method: 'post', + url: nextRelation.endpoint, + headers: { 'content-type': 'application/json' }, + data: { 'id': user?.id }, + }) + .then(() => { + toast({ + message: nextRelation.action, + type: 'confirmation', + icon: nextRelation.icon, + }); + setRelation(nextRelation.relation); }); - setRelation(nextRelation.relation); - }); - }} - />; - })()} -
} -
} + }} + />; + })()} +
} +
} +
- - } - label='Online' - /> - } - label={(() => { - var memberSince = 'Lid sinds'; + +
+ } + label='Online' + /> + } + label={(() => { + var memberSince = 'Lid sinds'; - var registered = new Date(user?.registered); - memberSince += ' ' + registered.toLocaleString('nl-nl', { month: 'long', day: 'numeric' }); + var registered = new Date(user?.registered); + memberSince += ' ' + registered.toLocaleString('nl-nl', { month: 'long', day: 'numeric' }); - var currentYear = new Date().getFullYear(); - var memberYear = registered.getFullYear(); - if (currentYear != memberYear) memberSince += ' ' + memberYear; + var currentYear = new Date().getFullYear(); + var memberYear = registered.getFullYear(); + if (currentYear != memberYear) memberSince += ' ' + memberYear; - return memberSince; - })()} - /> - } - label={(() => { - var label = user?.friends.toString() + ' '; - label += user?.friends == 1 ? 'vriend' : 'vrienden'; - return label; - })()} - /> - } label='Nederland' /> - - - } - label={gameInfo?.totals.win + ' keer gewonnen'} - /> - } - label={gameInfo?.totals.draw + ' keer gelijkspel'} - /> - } - label={gameInfo?.totals.lose + ' keer verloren'} - /> - } label={'Score: ' + user?.rating} /> - } - label={(() => { - var label = gameInfo?.totals.games.toString() + ' '; - label += gameInfo?.totals.games == 1 ? 'potje' : 'potjes'; - return label; - })()} - /> - - + return memberSince; + })()} + /> + } + label={(() => { + var label = user?.friends.toString() + ' '; + label += user?.friends == 1 ? 'vriend' : 'vrienden'; + return label; + })()} + /> + } label='Nederland' /> +
+ + +
+ } + label={gameInfo?.totals.win + ' keer gewonnen'} + /> + } + label={gameInfo?.totals.draw + ' keer gelijkspel'} + /> + } + label={gameInfo?.totals.lose + ' keer verloren'} + /> + } + label={'Score: ' + user?.rating} + /> + } + label={(() => { + var label = gameInfo?.totals.games.toString() + ' '; + label += gameInfo?.totals.games == 1 ? 'potje' : 'potjes'; + return label; + })()} + /> +
+ + -- cgit v1.2.3 From c140e56db162755d7f85e89306236a0a09bf4e35 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 20 Apr 2021 16:14:04 +0200 Subject: site not longer broken (i think) still some inline css remains.... --- components/dialogBox.tsx | 2 +- components/gameBar.tsx | 41 +++++++-------------------------------- components/ui.tsx | 2 +- components/voerBord.tsx | 50 +++++------------------------------------------- pages/game.tsx | 2 +- pages/index.tsx | 12 ++++++------ pages/login.tsx | 2 +- pages/register.tsx | 2 +- pages/search.tsx | 2 +- pages/settings.tsx | 8 ++++---- pages/user.tsx | 8 ++++---- styles/disk.css | 4 ++-- styles/game.css | 36 ++++++++++++++++++++++++++++++++++ styles/utility.css | 3 +++ 14 files changed, 73 insertions(+), 101 deletions(-) (limited to 'pages/user.tsx') 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

{props.title}

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 {props.children} @@ -37,33 +30,13 @@ export function GameBar(props: { active: boolean; resignFunction: () => void; }) { - return -
+ return +
-
-

+ {props.active &&
} +

{!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 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
; -} - export function VoerBord(props: { width: number; height: number; onMove: (move: number) => void; active: boolean; }) { - return + return
{[...Array(props.height).keys()].map((row) => ( {[...Array(props.width).keys()].map((column) => (
+
+
- -
{ 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() { 4 op een rij
- + Nieuw spel {false - && + && Puzzels } {false - && + && Tegen computer } - + {loggedIn ? : }
{loggedIn - && + && } - +

Nieuws ofzo

Chess.com heeft heel veel troep waar niemand naar kijkt

 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() {
- +
submitLogin(e, toast)}>
- + submitRegister(e, toast)}> ) => void; }) { - return + return Instellingen - +

Account

@@ -92,7 +92,7 @@ export default function SettingsPage() {
- +

Kleuren

@@ -117,13 +117,13 @@ export default function SettingsPage() {

Donkere modus

 - +

Standaard spelregels

 - +

Uitloggen

Profiel - +
@@ -280,7 +280,7 @@ export default function AccountPage() {
- +
} @@ -312,7 +312,7 @@ export default function AccountPage() { } label='Nederland' />
- +
} @@ -340,7 +340,7 @@ export default function AccountPage() { />
- + 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; } -- cgit v1.2.3