From 5856e80fcb78446be37456ec1e5c47b2ab02201f Mon Sep 17 00:00:00 2001 From: lonkaars Date: Fri, 9 Apr 2021 17:10:50 +0200 Subject: dprint format :tada: --- components/account.tsx | 33 +-- components/dialogBox.tsx | 40 ++-- components/footer.tsx | 52 ++--- components/gameBar.tsx | 148 ++++++++------ components/gameSettings.tsx | 358 +++++++++++++++++++------------- components/globalState.tsx | 6 +- components/logo.tsx | 29 ++- components/navbar.tsx | 192 ++++++++++-------- components/notificationsArea.tsx | 254 ++++++++++++----------- components/page.tsx | 48 +++-- components/preferencesContext.tsx | 66 +++--- components/recentGames.tsx | 123 ++++++----- components/socketContext.tsx | 11 +- components/toast.tsx | 192 ++++++++++-------- components/ui.tsx | 415 ++++++++++++++++++++++---------------- components/voerBord.tsx | 95 +++++---- 16 files changed, 1176 insertions(+), 886 deletions(-) (limited to 'components') diff --git a/components/account.tsx b/components/account.tsx index 7b825cd..f24135f 100644 --- a/components/account.tsx +++ b/components/account.tsx @@ -1,4 +1,5 @@ -var dummy = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg=="; +var dummy = + 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg=='; export function AccountAvatar(props: { size: number; @@ -8,24 +9,24 @@ export function AccountAvatar(props: { id?: string; }) { - var image = ""; - image += "/api/user/avatar"; - if (typeof props.id === "string") { - if (!props.id) image = ""; + var image = ''; + image += '/api/user/avatar'; + if (typeof props.id === 'string') { + if (!props.id) image = ''; else image += `?id=${props.id}`; } if (props.dummy) image = dummy; - return
; + return
; } - - diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 5ef5c3f..7abbded 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -1,4 +1,4 @@ -import { ReactNode, CSSProperties } from 'react'; +import { CSSProperties, ReactNode } from 'react'; import { Vierkant } from './ui'; @@ -10,24 +10,30 @@ export function DialogBox(props: { style?: CSSProperties; onclick?: () => void; }) { - return + return

{props.title}

- + {props.children} - + ; } diff --git a/components/footer.tsx b/components/footer.tsx index 2d84a1c..36ebef3 100644 --- a/components/footer.tsx +++ b/components/footer.tsx @@ -1,49 +1,49 @@ -import { LogoDark } from "../components/logo"; import { ReactNode } from 'react'; +import { LogoDark } from '../components/logo'; -import Home from '@material-ui/icons/Home'; -import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; +import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; import ExtensionIcon from '@material-ui/icons/Extension'; +import GitHubIcon from '@material-ui/icons/GitHub'; +import Home from '@material-ui/icons/Home'; +import LockIcon from '@material-ui/icons/Lock'; +import PersonIcon from '@material-ui/icons/Person'; import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; -import PersonIcon from '@material-ui/icons/Person'; -import ExitToAppOutlinedIcon from '@material-ui/icons/ExitToAppOutlined'; -import LockIcon from '@material-ui/icons/Lock'; -import GitHubIcon from '@material-ui/icons/GitHub'; +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; function PageLink(props: { icon: ReactNode; href: string; children: string; }) { - return + return {props.icon} {props.children} - + ; } export function Footer() { - return
-
- + return
+
+

4 op een rij

-
-
- } href="/" children="Home"/> - } href="/game" children="Spelen"/> - } href="/" children="Puzzels"/> - } href="/search" children="Zoeken"/> +
+
+ } href='/' children='Home' /> + } href='/game' children='Spelen' /> + } href='/' children='Puzzels' /> + } href='/search' children='Zoeken' />
-
- } href="/privacy" children="Privacy"/> - } href="https://github.com/lonkaars/connect-4" children="Broncode"/> +
+ } href='/privacy' children='Privacy' /> + } href='https://github.com/lonkaars/connect-4' children='Broncode' />
-
- } href="/settings" children="Instellingen"/> - } href="/user" children="Profiel"/> - } href="/logout" children="Uitloggen"/> +
+ } href='/settings' children='Instellingen' /> + } href='/user' children='Profiel' /> + } href='/logout' children='Uitloggen' />
-
+
; } diff --git a/components/gameBar.tsx b/components/gameBar.tsx index 67712e2..0d7d4d9 100644 --- a/components/gameBar.tsx +++ b/components/gameBar.tsx @@ -1,30 +1,35 @@ import { CSSProperties, ReactNode } from 'react'; -import { Vierkant, Bubble } from './ui'; +import { Bubble, Vierkant } from './ui'; -import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded'; import ExitToAppRoundedIcon from '@material-ui/icons/ExitToAppRounded'; -import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded'; +import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; +import SettingsRoundedIcon from '@material-ui/icons/SettingsRounded'; function GameBarModule(props: { children?: ReactNode; onclick?: () => void; }) { - return {props.children} + return + {props.children} + ; } -var GameBarSpacer = () =>
; +var GameBarSpacer = () =>
; var GameBarAlignStyle: CSSProperties = { - display: "inline-block" -} + display: 'inline-block', +}; export function GameBar(props: { turn: boolean; @@ -32,64 +37,85 @@ export function GameBar(props: { active: boolean; resignFunction: () => void; }) { - return -
-
-
-

{ - !props.active ? "Wachten op tegenstander..." : - props.turn == props.player1 ? - "Jouw beurt" : "Tegenstander" - }

+ return +
+
+
+

+ {!props.active + ? 'Wachten op tegenstander...' + : props.turn == props.player1 + ? 'Jouw beurt' + : 'Tegenstander'} +

-
- 0-0 +
+ + 0-0 +
-
+
- + - + - 00:00 + + 00:00 + - + - + - + - + - + - +
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index be45112..f562e5d 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -1,17 +1,16 @@ -import { ReactNode, Component, CSSProperties } from 'react'; import axios from 'axios'; +import { Component, CSSProperties, ReactNode } from 'react'; -import { Button, Vierkant, CheckBox, Input } from './ui'; -import { DialogBox } from './dialogBox'; import { ruleset, userPreferences } from '../api/api'; +import { DialogBox } from './dialogBox'; +import { Button, CheckBox, Input, Vierkant } from './ui'; import BuildOutlinedIcon from '@material-ui/icons/BuildOutlined'; - type CurrentGameSettingsStateType = { editGameRulesDialogVisible: boolean; ruleset: ruleset; -} +}; export class CurrentGameSettings extends Component { state: CurrentGameSettingsStateType = { @@ -19,25 +18,25 @@ export class CurrentGameSettings extends Component { ruleset: { timelimit: { enabled: false, - shared: false + shared: false, }, - ranked: false - } - } + ranked: false, + }, + }; constructor(props: {}) { super(props); - if (typeof window === "undefined") return; // return if run on server + if (typeof window === 'undefined') return; // return if run on server axios.request({ - method: "get", + method: 'get', url: `/api/user/preferences`, - headers: {"content-type": "application/json"} + headers: { 'content-type': 'application/json' }, }) - //FIXME: this assumes the request ruleset has all properties of a ruleset - .then(request => this.setState({ ruleset: request.data.ruleset || this.state.ruleset })) - .catch(() => {}); + // FIXME: this assumes the request ruleset has all properties of a ruleset + .then(request => this.setState({ ruleset: request.data.ruleset || this.state.ruleset })) + .catch(() => {}); } showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); @@ -45,51 +44,67 @@ export class CurrentGameSettings extends Component { setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); render() { - var timelimit_str = this.state.ruleset.timelimit.enabled ? - `${this.state.ruleset.timelimit.minutes}m${this.state.ruleset.timelimit.seconds}s plus ${this.state.ruleset.timelimit.addmove}` : - "Geen tijdslimiet" - var ranked_str = this.state.ruleset.ranked ? - "Gerangschikt" : - "Niet gerangschikt" - return
-

- {timelimit_str}
+ var timelimit_str = this.state.ruleset.timelimit.enabled + ? `${this.state.ruleset.timelimit.minutes}m${this.state.ruleset.timelimit.seconds}s plus ${this.state.ruleset.timelimit.addmove}` + : 'Geen tijdslimiet'; + var ranked_str = this.state.ruleset.ranked + ? 'Gerangschikt' + : 'Niet gerangschikt'; + return

+

+ {timelimit_str} +
{ranked_str}

- - +
; } } @@ -101,25 +116,36 @@ function GameSettingsSection(props: { noMarginBottom?: boolean; id: string; }) { - return - {props.title} - -
{props.children}
- + return + + {props.title} + + +
{props.children}
+ ; } function GameRule(props: { @@ -127,15 +153,17 @@ function GameRule(props: { description: string; style?: CSSProperties; }) { - return
-

{props.title}

-

{props.description}

+ return
+

{props.title}

+

{props.description}

; } @@ -146,66 +174,114 @@ type editGameSettingsProps = { }; export class EditGameSettings extends Component { - render () { - return -
- -
- - - + render() { + return +
+ +
+ + +
- - Timer gebruiken voor bijde spelers + + + Timer gebruiken voor bijde spelers + - { false && -
- - + {false && +
+ +
- - - } - + + + } +
- + ; } } diff --git a/components/globalState.tsx b/components/globalState.tsx index 5b01947..0ec7838 100644 --- a/components/globalState.tsx +++ b/components/globalState.tsx @@ -6,9 +6,9 @@ type globalState = { on: boolean; time: number; useForBoth: boolean; - } + }; rankedGame: boolean; - } -} + }; +}; export var GlobalStateContext = React.createContext(); diff --git a/components/logo.tsx b/components/logo.tsx index b0f358f..e43aa88 100644 --- a/components/logo.tsx +++ b/components/logo.tsx @@ -1,12 +1,12 @@ export function LogoDark() { return ( -
- - - - - - +
+ + + + + +
); @@ -14,15 +14,14 @@ export function LogoDark() { export function LogoLight() { return ( -
- - - - - - +
+ + + + + +
); } - diff --git a/components/navbar.tsx b/components/navbar.tsx index d6775ee..70de574 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -1,121 +1,147 @@ -import { CSSProperties, useEffect, useState, useContext } from "react"; -import axios from "axios"; +import axios from 'axios'; +import { CSSProperties, useContext, useEffect, useState } from 'react'; -import { LogoDark } from "../components/logo"; -import { AccountAvatar } from "./account"; -import { userInfo } from "../api/api"; -import { NotificationsArea } from "./notificationsArea"; -import { SocketContext } from "./socketContext"; +import { userInfo } from '../api/api'; +import { LogoDark } from '../components/logo'; +import { AccountAvatar } from './account'; +import { NotificationsArea } from './notificationsArea'; +import { SocketContext } from './socketContext'; -import Home from '@material-ui/icons/Home'; -import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; import ExtensionIcon from '@material-ui/icons/Extension'; +import Home from '@material-ui/icons/Home'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import PersonIcon from '@material-ui/icons/Person'; import SearchIcon from '@material-ui/icons/Search'; import SettingsIcon from '@material-ui/icons/Settings'; -import PersonIcon from '@material-ui/icons/Person'; -import NotificationsIcon from '@material-ui/icons/Notifications'; +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; var NavBarItemStyle: CSSProperties = { margin: 12, marginBottom: 16, - display: "block" -} + display: 'block', +}; export function NavBar() { - var [ loggedIn, setLoggedIn ] = useState(false); - var [ gotData, setGotData ] = useState(false); + var [loggedIn, setLoggedIn] = useState(false); + var [gotData, setGotData] = useState(false); - var [ friendRequests, setFriendRequests ] = useState>(null); + var [friendRequests, setFriendRequests] = useState>(null); - var [ notificationsAreaVisible, setNotificationsAreaVisible ] = useState(false); - var [ gotNotifications, setGotNotifications ] = useState(false); + var [notificationsAreaVisible, setNotificationsAreaVisible] = useState(false); + var [gotNotifications, setGotNotifications] = useState(false); var { io } = useContext(SocketContext); async function getNotifications() { - var friendRequestsReq = await axios.request<{ requests: Array }>({ - method: "get", - url: `/api/social/list/requests` + var friendRequestsReq = await axios.request<{ requests: Array; }>({ + method: 'get', + url: `/api/social/list/requests`, }); setFriendRequests(friendRequestsReq.data.requests); setGotNotifications(friendRequestsReq.data.requests.length > 0); } - useEffect(() => {(async () => { - if (gotData) return; - if (typeof window === "undefined") return; - - var loggedIn = document.cookie.includes("token"); - setLoggedIn(loggedIn); - - if (loggedIn) { - await getNotifications(); - io.on("incomingFriendRequest", getNotifications); - io.on("changedRelation", getNotifications); - } + useEffect(() => { + (async () => { + if (gotData) return; + if (typeof window === 'undefined') return; - setGotData(true); - })()}, []); + var loggedIn = document.cookie.includes('token'); + setLoggedIn(loggedIn); - return
-
- - - { false && } - + backgroundColor: 'var(--background)', + display: 'inline-block', -
- { loggedIn && -
setNotificationsAreaVisible(!notificationsAreaVisible)}> - - { gotNotifications && ; } - diff --git a/components/notificationsArea.tsx b/components/notificationsArea.tsx index b427941..9573b72 100644 --- a/components/notificationsArea.tsx +++ b/components/notificationsArea.tsx @@ -1,13 +1,13 @@ -import { CSSProperties, ReactNode, useState, useContext, useEffect } from 'react'; import axios from 'axios'; +import { CSSProperties, ReactNode, useContext, useEffect, useState } from 'react'; -import { userInfo, gameInfo } from "../api/api"; -import { AccountAvatar } from "./account"; -import { Bubble, Vierkant, IconLabelButton } from './ui'; +import { gameInfo, userInfo } from '../api/api'; +import { AccountAvatar } from './account'; import { ToastContext } from './toast'; +import { Bubble, IconLabelButton, Vierkant } from './ui'; -import DoneIcon from '@material-ui/icons/Done'; import CloseIcon from '@material-ui/icons/Close'; +import DoneIcon from '@material-ui/icons/Done'; import NotificationsActiveOutlinedIcon from '@material-ui/icons/NotificationsActiveOutlined'; export function NotificationsArea(props: { @@ -17,71 +17,82 @@ export function NotificationsArea(props: { rerender: () => void; }) { var { toast } = useContext(ToastContext); - var [ previousMessages, setPreviousMessages ] = useState(0); + var [previousMessages, setPreviousMessages] = useState(0); var messages = ( - (props.friendRequests ? props.friendRequests.length : 0) + - (props.gameInvites ? props.gameInvites.length : 0) - ) + (props.friendRequests ? props.friendRequests.length : 0) + + (props.gameInvites ? props.gameInvites.length : 0) + ); useEffect(() => { - if(messages > previousMessages) { - toast({ message: "Je hebt nieuwe meldingen!", - type: "confirmation", - icon: }); + if (messages > previousMessages) { + toast({ + message: 'Je hebt nieuwe meldingen!', + type: 'confirmation', + icon: , + }); } setPreviousMessages(messages); - }) + }); - return props.visible && + return props.visible &&

Meldingen

-
- { props.gameInvites?.map(game => ) } - { props.friendRequests?.map(user => ) } - { - messages == 0 && -
-

Geen meldingen

-
- } +
+ {props.gameInvites?.map(game => )} + {props.friendRequests?.map(user => )} + {messages == 0 + &&
+

+ Geen meldingen +

+
}
- + ; } var FriendRequestButtonStyle: CSSProperties = { borderRadius: 6, - display: "inline-block", + display: 'inline-block', marginLeft: 0, - textAlign: "center" + textAlign: 'center', }; function Acceptable(props: { @@ -89,78 +100,89 @@ function Acceptable(props: { onAccept?: () => void; onDeny?: () => void; }) { - return -
+ return +
{props.children} -
+
} - text="Accepteren"/> + icon={} + text='Accepteren' + /> } - text="Verwijderen"/> + icon={} + text='Verwijderen' + />
- + ; } function FriendRequest(props: { user: userInfo; hide: () => void; }) { - var [ gone, setGone ] = useState(false); + var [gone, setGone] = useState(false); var hide = () => { setGone(true); props.hide(); - } + }; - return !gone && { - axios.request({ - method: "post", - url: "/api/social/accept", - headers: {"content-type": "application/json"}, - data: { "id": props.user?.id } - }) - .then(hide); - }} onDeny={() => { - axios.request({ - method: "post", - url: "/api/social/remove", - headers: {"content-type": "application/json"}, - data: { "id": props.user?.id } - }) - .then(hide); - }}> - - -
- Vriendschapsverzoek + return !gone && { + axios.request({ + method: 'post', + url: '/api/social/accept', + headers: { 'content-type': 'application/json' }, + data: { 'id': props.user?.id }, + }) + .then(hide); + }} + onDeny={() => { + axios.request({ + method: 'post', + url: '/api/social/remove', + headers: { 'content-type': 'application/json' }, + data: { 'id': props.user?.id }, + }) + .then(hide); + }} + > + + +
+ Vriendschapsverzoek {props.user.username}
- + ; } function GameInvite(props: { @@ -169,14 +191,20 @@ function GameInvite(props: { }) { return -
- Partijuitnodiging -

{props.game.opponent?.username} wil een potje 4 op een rij spelen!

+
+ Partijuitnodiging +

+ + {props.game.opponent?.username} + {" "} + wil een potje 4 op een rij spelen! +

- + ; } - diff --git a/components/page.tsx b/components/page.tsx index d8a4a2b..506e2db 100644 --- a/components/page.tsx +++ b/components/page.tsx @@ -6,27 +6,39 @@ interface CenteredPageProps { style?: CSSProperties; } -export function CenteredPage (props: CenteredPageProps) { - return
-
{props.children}
+export function CenteredPage(props: CenteredPageProps) { + return
+
+ {props.children} +
; } export class PageTitle extends Component { - render () { - return

{this.props.children}

; + render() { + return

+ {this.props.children} +

; } } diff --git a/components/preferencesContext.tsx b/components/preferencesContext.tsx index 1b58a4f..a169be6 100644 --- a/components/preferencesContext.tsx +++ b/components/preferencesContext.tsx @@ -1,43 +1,48 @@ -import { useState, useEffect, createContext, ReactNode } from 'react'; import axios from 'axios'; +import { createContext, ReactNode, useEffect, useState } from 'react'; import { userPreferences } from '../api/api'; function applyPreferences(preferences: userPreferences) { - if(typeof preferences === "undefined") return; - if(typeof preferences.darkMode !== "undefined") - document.getElementsByTagName("html")[0].classList[preferences.darkMode ? "add" : "remove"]("dark"); + if (typeof preferences === 'undefined') return; + if (typeof preferences.darkMode !== 'undefined') { + document.getElementsByTagName('html')[0].classList[preferences.darkMode ? 'add' : 'remove']('dark'); + } } -var PreferencesContext = createContext<{ preferences?: userPreferences; updatePreference?: (newPreference: userPreferences) => void }>({}); +var PreferencesContext = createContext< + { preferences?: userPreferences; updatePreference?: (newPreference: userPreferences) => void; } +>({}); -export function PreferencesContextWrapper(props: { children?: ReactNode }) { - var server = typeof window === "undefined"; - var loggedIn = !server && document.cookie.includes("token"); +export function PreferencesContextWrapper(props: { children?: ReactNode; }) { + var server = typeof window === 'undefined'; + var loggedIn = !server && document.cookie.includes('token'); var [preferences, setPreferences] = useState(); - useEffect(() => {(async() => { - if (!loggedIn) return; + useEffect(() => { + (async () => { + if (!loggedIn) return; - var local_prefs = window.localStorage.getItem("preferences"); - if (local_prefs) { - var local_prefs_json = JSON.parse(local_prefs) as userPreferences; - setPreferences(local_prefs_json); - applyPreferences(local_prefs_json); - } + var local_prefs = window.localStorage.getItem('preferences'); + if (local_prefs) { + var local_prefs_json = JSON.parse(local_prefs) as userPreferences; + setPreferences(local_prefs_json); + applyPreferences(local_prefs_json); + } - if (!preferences) { - var preferencesReq = await axios.request<{ preferences: userPreferences; }>({ - method: "get", - url: `/api/user/preferences`, - headers: {"content-type": "application/json"} - }); + if (!preferences) { + var preferencesReq = await axios.request<{ preferences: userPreferences; }>({ + method: 'get', + url: `/api/user/preferences`, + headers: { 'content-type': 'application/json' }, + }); - window.localStorage.setItem("preferences", JSON.stringify(preferencesReq.data.preferences)); - setPreferences(preferencesReq.data.preferences); - } - })()}, []); + window.localStorage.setItem('preferences', JSON.stringify(preferencesReq.data.preferences)); + setPreferences(preferencesReq.data.preferences); + } + })(); + }, []); useEffect(() => applyPreferences(preferences), [preferences]); @@ -46,17 +51,16 @@ export function PreferencesContextWrapper(props: { children?: ReactNode }) { setPreferences(prefs); applyPreferences(prefs); axios.request({ - method: "post", + method: 'post', url: `/api/user/preferences`, - headers: {"content-type": "application/json"}, - data: { "newPreferences": prefs } + headers: { 'content-type': 'application/json' }, + data: { 'newPreferences': prefs }, }); } return {props.children} - + ; } export default PreferencesContext; - diff --git a/components/recentGames.tsx b/components/recentGames.tsx index 150520c..988126f 100644 --- a/components/recentGames.tsx +++ b/components/recentGames.tsx @@ -1,79 +1,92 @@ -import { CSSProperties } from 'react'; import friendlyTime from 'friendly-time'; +import { CSSProperties } from 'react'; import { gameInfo } from '../api/api'; var LeftAlignedTableColumn: CSSProperties = { - textAlign: "left", - paddingLeft: 16 -} + textAlign: 'left', + paddingLeft: 16, +}; var RightAlignedTableColumn: CSSProperties = { - textAlign: "right", - paddingRight: 16 -} + textAlign: 'right', + paddingRight: 16, +}; -function GameOutcome(props: { game: gameInfo }) { +function GameOutcome(props: { game: gameInfo; }) { var gameStatus = (() => { return { - "resign": () => "Opgegeven", - "wait_for_opponent": () => "Aan het wachten op een tegenstander", - "in_progress": () => "Bezig", - "finished": () => { + 'resign': () => 'Opgegeven', + 'wait_for_opponent': () => 'Aan het wachten op een tegenstander', + 'in_progress': () => 'Bezig', + 'finished': () => { return { - "w": "Gewonnen", - "l": "Verloren", - "d": "Gelijkspel" - }[props.game.outcome] + 'w': 'Gewonnen', + 'l': 'Verloren', + 'd': 'Gelijkspel', + }[props.game.outcome]; }, }[props.game.status](); })(); var outcome = props.game.outcome; - return {gameStatus} + return + {gameStatus} + ; } -export default function RecentGames(props: { games?: Array }) { +export default function RecentGames(props: { games?: Array; }) { return

Recente partijen

- { - props.games?.length > 0 ? - + {props.games?.length > 0 + ?
- - - - + + + + - { - props.games?.map(game => - - - - - ) - } + {props.games?.map(game => + + + + + + + )} -
TegenstanderUitkomstZettenDatumTegenstanderUitkomstZettenDatum
- {game.opponent?.username} - {Math.max(0, game.moves.length -1)}{(() => { - var timeCreated = new Date(game.created); - return friendlyTime(timeCreated); - })()}
+ + {game.opponent?.username} + + {Math.max(0, game.moves.length - 1)} + {(() => { + var timeCreated = new Date(game.created); + return friendlyTime(timeCreated); + })()} +
: -

Deze gebruiker heeft nog geen partijen gespeeld

- } -
+ + :

+ Deze gebruiker heeft nog geen partijen gespeeld +

} +
; } - diff --git a/components/socketContext.tsx b/components/socketContext.tsx index f493d73..435f4a7 100644 --- a/components/socketContext.tsx +++ b/components/socketContext.tsx @@ -1,12 +1,11 @@ -import { ReactNode, createContext } from 'react'; +import { createContext, ReactNode } from 'react'; import { io as socket, Socket } from 'socket.io-client'; -export var SocketContext = createContext<{ io?: Socket }>({}); -export function SocketContextWrapper(props: { children?: ReactNode }) { +export var SocketContext = createContext<{ io?: Socket; }>({}); +export function SocketContextWrapper(props: { children?: ReactNode; }) { var io = socket(); return - { props.children } - + {props.children} + ; } - diff --git a/components/toast.tsx b/components/toast.tsx index 91e67f7..97e17e6 100644 --- a/components/toast.tsx +++ b/components/toast.tsx @@ -1,114 +1,138 @@ -import { CSSProperties, ReactNode, useState, createContext } from "react"; +import { createContext, CSSProperties, ReactNode, useState } from 'react'; import CloseIcon from '@material-ui/icons/Close'; function ToastArea(props: { - style?: CSSProperties - children?: ReactNode + style?: CSSProperties; + children?: ReactNode; rerender?: boolean; }) { - return
{props.children}
+ return
+ {props.children} +
; } function Toast(props: { - text?: string - description?: string - icon?: ReactNode - children?: ReactNode - type?: "normal"|"confirmation"|"error" - style?: CSSProperties + text?: string; + description?: string; + icon?: ReactNode; + children?: ReactNode; + type?: 'normal' | 'confirmation' | 'error'; + style?: CSSProperties; }) { var [visible, setVisibility] = useState(true); setTimeout(() => setVisibility(false), 10e3); - return visible &&
- { - props.children || -
-
{props.icon}
-
+ return visible &&
+ {props.children + ||
+
+ {props.icon} +
+

{props.text}

{props.description}

-
setVisibility(false)}> - +
setVisibility(false)} + > +
-
- } -
+
} +
; } export type toastSettings = { - message: string, - description?: string, - type: "confirmation"|"normal"|"error", - icon?: ReactNode -} + message: string; + description?: string; + type: 'confirmation' | 'normal' | 'error'; + icon?: ReactNode; +}; export type toastType = (settings: toastSettings) => void; -export var ToastContext = createContext<{ toast?: toastType }>({}); +export var ToastContext = createContext<{ toast?: toastType; }>({}); var toasts: Array = []; -export function ToastContextWrapper(props: { children?: ReactNode }) { +export function ToastContextWrapper(props: { children?: ReactNode; }) { var [dummyState, rerender] = useState(false); - return { - toasts.push(); - rerender(!dummyState); - } }}> - { props.children } + return { + toasts.push( + , + ); + rerender(!dummyState); + }, + }} + > + {props.children} {toasts} - + ; } - diff --git a/components/ui.tsx b/components/ui.tsx index 9d532f8..c3f950b 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -1,9 +1,9 @@ -import { Component, CSSProperties, ReactNode, useState, useEffect } from "react"; +import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react'; -import SearchIcon from '@material-ui/icons/Search'; -import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; +import SearchIcon from '@material-ui/icons/Search'; export function Vierkant(props: { href?: string; @@ -16,27 +16,31 @@ export function Vierkant(props: { fullwidth?: boolean; onclick?: () => void; }) { - return {props.children} + return + {props.children} + ; } export function Button(props: { @@ -47,27 +51,34 @@ export function Button(props: { onclick?: (() => void); id?: string; }) { - return - { - props.text ? - {props.text} - : undefined - } - { props.children } + return + {props.text + ? + {props.text} + + : undefined} + {props.children} ; } @@ -78,23 +89,33 @@ export function IconLabelButton(props: { style?: CSSProperties; href?: string; }) { - return + + {props.text} + + ; } export function Input(props: { @@ -104,61 +125,73 @@ export function Input(props: { id?: string; min?: number; max?: number; - value?: string|number; + value?: string | number; dark?: boolean; autocomplete?: string; autofocus?: boolean; }) { return + id={props.id} + type={props.type || 'text'} + min={props.min} + max={props.max} + placeholder={props.label} + spellCheck={false} + defaultValue={props.value ? String(props.value) : ''} + className={props.dark ? 'dark' : 'light'} + autoComplete={props.autocomplete} + autoFocus={props.autofocus} + style={{ + padding: 12, + border: 0, + width: 'calc(100% - 24px)', + fontSize: 14, + backgroundColor: 'var(--page-background)', + color: 'var(--text-alt)', + borderRadius: 8, + fontFamily: 'Inter', + ...props.style, + }} + />; } -export function SearchBar(props: { label?: string }) { - return
- -
- +export function SearchBar(props: { label?: string; }) { + return
+ +
+
-
+
; } export function CheckBox(props: { @@ -173,25 +206,28 @@ export function CheckBox(props: { useEffect(() => { if (gotDefaultState) return; setOn(props.state); - if (typeof props.state !== "undefined") setGotDefaultState(true); + if (typeof props.state !== 'undefined') setGotDefaultState(true); }); var toggle = () => { setOn(!on); props.onclick && props.onclick(!on); - } + }; - return
- { - on ? - : - - } -
+ return
+ {on + ? + : } +
; } export class ColorPicker extends Component<{ @@ -201,44 +237,53 @@ export class ColorPicker extends Component<{ color: string; dark: boolean; } = { - color: "#012345", - dark: true - } + color: '#012345', + dark: true, + }; render() { - return + ; } } @@ -246,12 +291,21 @@ export function Tuitje(props: { style?: CSSProperties; rotation?: number; }) { - return - - + return + + ; } export function Bubble(props: { @@ -259,24 +313,27 @@ export function Bubble(props: { style?: CSSProperties; tuitjeStyle?: CSSProperties; }) { - return + return {props.children} - - + + ; } - diff --git a/components/voerBord.tsx b/components/voerBord.tsx index 946aa9c..93e350c 100644 --- a/components/voerBord.tsx +++ b/components/voerBord.tsx @@ -1,10 +1,16 @@ function Disc() { - return
+ return
; } export function VoerBord(props: { @@ -13,40 +19,53 @@ export function VoerBord(props: { onMove: (move: number) => void; active: boolean; }) { - return + return
- { - [...Array(props.height).keys()].map((row) => ( - - {[...Array(props.width).keys()].map((column) => ( - + {[...Array(props.width).keys()].map((column) => ( + - ))} - - )) - } + cursor: props.active ? 'pointer' : 'default', + }} + id={`pos-${(props.height - row - 1) * props.width + column}`} + onClick={event => { + props.onMove(Number((event.target as HTMLElement).id.split('-')[1])); + }} + /> + + ))} + + ))} -
-
- -
( +
+
+ +
{ - props.onMove(Number((event.target as HTMLElement).id.split("-")[1])) - }}/> -
+ ; } -- cgit v1.2.3