From d2c2cc62a4c2e1ac10f8434bea7bb834da820869 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sat, 16 Jan 2021 11:40:36 +0100 Subject: semi working next project --- components/account.tsx | 16 ++++++ components/dialogBox.tsx | 30 ++++++++++ components/gameBar.tsx | 88 +++++++++++++++++++++++++++++ components/gameSettings.tsx | 134 ++++++++++++++++++++++++++++++++++++++++++++ components/logo.tsx | 28 +++++++++ components/navbar.tsx | 63 +++++++++++++++++++++ components/page.tsx | 32 +++++++++++ components/toast.tsx | 78 ++++++++++++++++++++++++++ components/ui.tsx | 132 +++++++++++++++++++++++++++++++++++++++++++ components/voerBord.tsx | 39 +++++++++++++ 10 files changed, 640 insertions(+) create mode 100644 components/account.tsx create mode 100644 components/dialogBox.tsx create mode 100644 components/gameBar.tsx create mode 100644 components/gameSettings.tsx create mode 100644 components/logo.tsx create mode 100644 components/navbar.tsx create mode 100644 components/page.tsx create mode 100644 components/toast.tsx create mode 100644 components/ui.tsx create mode 100644 components/voerBord.tsx (limited to 'components') diff --git a/components/account.tsx b/components/account.tsx new file mode 100644 index 0000000..e6ec58f --- /dev/null +++ b/components/account.tsx @@ -0,0 +1,16 @@ +interface AccountAvatarProps { + size: number; + image: string; +} + +export function AccountAvatar(props: AccountAvatarProps) { + return
; +} + + diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx new file mode 100644 index 0000000..74fe99b --- /dev/null +++ b/components/dialogBox.tsx @@ -0,0 +1,30 @@ +import { ReactNode } from 'react'; + +import { Vierkant } from './ui'; + +import CancelIcon from '@material-ui/icons/Cancel'; + +interface DialogBoxProps { + children: ReactNode; + title: string; +} + +export function DialogBox(props: DialogBoxProps) { + return +

{props.title}

+ + {props.children} + +} diff --git a/components/gameBar.tsx b/components/gameBar.tsx new file mode 100644 index 0000000..53eda88 --- /dev/null +++ b/components/gameBar.tsx @@ -0,0 +1,88 @@ +import { CSSProperties, ReactNode } from 'react'; +import { 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'; + +interface GameBarModuleProps { + children?: ReactNode; +} + +function GameBarModule(props: GameBarModuleProps) { + return {props.children} +} + +var GameBarSpacer = () =>
; + +var GameBarAlignStyle: CSSProperties = { + display: "inline-block" +} + +export function GameBar() { + return +
+
+
+

Tegenstander

+
+
+ 0-0 +
+
+ + + + + + 00:00 + + + + + + + + + + + + + +
+
+ ; +} diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx new file mode 100644 index 0000000..fb5188e --- /dev/null +++ b/components/gameSettings.tsx @@ -0,0 +1,134 @@ +import { ReactNode, CSSProperties } from 'react'; + +import { Button, Vierkant, CheckBox, Input } from './ui'; +import { DialogBox } from './dialogBox'; + +import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; + +export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { + return
+

+ Geen tijdslimiet
+ Standaardregels
+ Gerangschikt +

+ +
; +} + +function GameSettingsSection(props: { + children?: ReactNode; + title: string; + state: boolean; + noMarginBottom?: boolean; +}) { + return + {props.title} + +
{props.children}
+ +} + +function GameRule(props: { + title: string; + description: string; + style?: CSSProperties; +}) { + return
+

{props.title}

+

{props.description}

+
; +} + +export function EditGameSettings() { + return +
+ +
+ + + +
+ + Timer gebruiken voor bijde spelers + + +
+ + +
+ + + + +
+ ; +} diff --git a/components/logo.tsx b/components/logo.tsx new file mode 100644 index 0000000..b0f358f --- /dev/null +++ b/components/logo.tsx @@ -0,0 +1,28 @@ +export function LogoDark() { + return ( +
+ + + + + + + +
+ ); +} + +export function LogoLight() { + return ( +
+ + + + + + + +
+ ); +} + diff --git a/components/navbar.tsx b/components/navbar.tsx new file mode 100644 index 0000000..7725ca8 --- /dev/null +++ b/components/navbar.tsx @@ -0,0 +1,63 @@ +import { CSSProperties } from "react"; + +import { LogoDark } from "../components/logo"; + +import Home from '@material-ui/icons/Home'; +import VideogameAssetIcon from '@material-ui/icons/VideogameAsset'; +import ExtensionIcon from '@material-ui/icons/Extension'; +import SearchIcon from '@material-ui/icons/Search'; +import SettingsIcon from '@material-ui/icons/Settings'; +import PersonIcon from '@material-ui/icons/Person'; + +var NavBarItemStyle: CSSProperties = { + margin: 12, + marginBottom: 16, + display: "block" +} + +export function NavBar() { + return ( +
+
+ + + + + +
+ +
+ +
+ + +
+
+ ); +} + diff --git a/components/page.tsx b/components/page.tsx new file mode 100644 index 0000000..d8a4a2b --- /dev/null +++ b/components/page.tsx @@ -0,0 +1,32 @@ +import { Component, CSSProperties, ReactNode } from 'react'; + +interface CenteredPageProps { + width?: number; + children?: ReactNode; + style?: CSSProperties; +} + +export function CenteredPage (props: CenteredPageProps) { + return
+
{props.children}
+
; +} + +export class PageTitle extends Component { + render () { + return

{this.props.children}

; + } +} diff --git a/components/toast.tsx b/components/toast.tsx new file mode 100644 index 0000000..1d467bd --- /dev/null +++ b/components/toast.tsx @@ -0,0 +1,78 @@ +import { CSSProperties, ReactNode, Component } from "react"; + +import CloseIcon from '@material-ui/icons/Close'; + +export function ToastArea(props: { + style?: CSSProperties + children?: ReactNode +}) { + return
{props.children}
+} + +export class Toast extends Component<{ + text?: string + icon?: ReactNode + children?: ReactNode + type?: "normal"|"confirmation"|"error" + style?: CSSProperties +}> { + state = { render: true } + + close = () => this.setState({ render: false }) + + render () { + if (!this.state.render) return null; + return
+ { + this.props.children ? + this.props.children : +
+
{this.props.icon}
+

{this.props.text}

+
+ +
+
+ } +
+ } +} + diff --git a/components/ui.tsx b/components/ui.tsx new file mode 100644 index 0000000..3afd97a --- /dev/null +++ b/components/ui.tsx @@ -0,0 +1,132 @@ +import { Component, CSSProperties, ReactNode } from "react"; + +import SearchIcon from '@material-ui/icons/Search'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; +import CheckBoxIcon from '@material-ui/icons/CheckBox'; + +export function Vierkant(props: { + href?: string; + width?: string; + height?: string; + style?: CSSProperties; + children?: ReactNode; + className?: string; }) +{ + return {props.children} +} + +export function Button(props: { + text?: string; + children?: ReactNode; + style?: CSSProperties; + href?: string; + onclick?: (() => void); }) +{ + return + { + props.text ? + {props.text} + : undefined + } + { props.children } + ; +} + +export function Input(props: { + label?: string, + style?: CSSProperties, + type?: string, + id?: string +}) { + return +} + +export function SearchBar(props: { label?: string }) { + return
+ +
+ +
+
+} + +export class CheckBox extends Component<{ + state?: boolean, + style?: CSSProperties +}> { + state = { on: this.props.state || false } + public toggle = () => this.setState({ on: !this.state.on }) + + render() { + return
+ { + this.state.on ? + : + + } +
; + } +} + + + diff --git a/components/voerBord.tsx b/components/voerBord.tsx new file mode 100644 index 0000000..3e319a1 --- /dev/null +++ b/components/voerBord.tsx @@ -0,0 +1,39 @@ +interface VoerBordProps { + width: number; + height: number; +} + +export function VoerBord(props: VoerBordProps) { + return + + { + [...Array(props.height)].map(() => ( + + {[...Array(props.width)].map(() => ( + + ))} + + )) + } + +
+
+
+
+} -- cgit v1.2.3 From 0c947a9f7d4ff3f9e65d01df21d6d50e9fa51095 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 31 Jan 2021 14:29:48 +0100 Subject: toast color fix --- components/toast.tsx | 4 ++-- pages/index.tsx | 7 ++++--- 2 files changed, 6 insertions(+), 5 deletions(-) (limited to 'components') diff --git a/components/toast.tsx b/components/toast.tsx index 1d467bd..e01683f 100644 --- a/components/toast.tsx +++ b/components/toast.tsx @@ -41,8 +41,8 @@ export class Toast extends Component<{ boxShadow: "0 8px 12px -4px #00000033", backgroundColor: this.props.type === "normal" ? "var(--background)" : - this.props.type === "confirmation" ? "var(--disk-a)" : - this.props.type === "error" ? "var(--disk-b)" : "var(--background)", + this.props.type === "confirmation" ? "var(--disk-b)" : + this.props.type === "error" ? "var(--disk-a)" : "var(--background)", ...this.props.style }}> { diff --git a/pages/index.tsx b/pages/index.tsx index bd7100e..ff4e2b7 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,4 @@ -import { CSSProperties, Component, useEffect } from 'react'; +import { CSSProperties, Component } from 'react'; import axios from 'axios'; import { userInfo } from '../api/api'; @@ -82,8 +82,9 @@ export default class HomePage extends Component { return
- }/> - + }/> + + 4 op een rij -- cgit v1.2.3 From d2f537f86890949a0d29a5b1761628ea87a9b3c9 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Sun, 31 Jan 2021 14:30:02 +0100 Subject: editGameSettings dialog --- components/dialogBox.tsx | 15 ++-- components/gameSettings.tsx | 212 +++++++++++++++++++++++++------------------- pages/settings.tsx | 1 - 3 files changed, 128 insertions(+), 100 deletions(-) (limited to 'components') diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx index 74fe99b..5ef5c3f 100644 --- a/components/dialogBox.tsx +++ b/components/dialogBox.tsx @@ -1,23 +1,25 @@ -import { ReactNode } from 'react'; +import { ReactNode, CSSProperties } from 'react'; import { Vierkant } from './ui'; import CancelIcon from '@material-ui/icons/Cancel'; -interface DialogBoxProps { +export function DialogBox(props: { children: ReactNode; title: string; -} - -export function DialogBox(props: DialogBoxProps) { + style?: CSSProperties; + onclick?: () => void; +}) { return

{props.title}

+ + {props.children} } diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx index fb5188e..c037fe3 100644 --- a/components/gameSettings.tsx +++ b/components/gameSettings.tsx @@ -1,49 +1,63 @@ -import { ReactNode, CSSProperties } from 'react'; +import { ReactNode, Component } from 'react'; import { Button, Vierkant, CheckBox, Input } from './ui'; import { DialogBox } from './dialogBox'; import BuildRoundedIcon from '@material-ui/icons/BuildRounded'; -export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) { - return
-

- Geen tijdslimiet
- Standaardregels
- Gerangschikt -

- -
; + left: 0, + transform: "translateY(-50%)" + }}> + Geen tijdslimiet
+ Standaardregels
+ Gerangschikt +

+ + +
; + } } function GameSettingsSection(props: { @@ -73,62 +87,74 @@ function GameSettingsSection(props: { } -function GameRule(props: { - title: string; - description: string; - style?: CSSProperties; -}) { - return
*/ +/*

{props.title}

*/ +/*

{props.description}

*/ +/*
; */ +/* } */ + +/* + +
-

{props.title}

-

{props.description}

-
; -} + + +
+ + + +*/ -export function EditGameSettings() { - return -
- -
- - - -
- - Timer gebruiken voor bijde spelers - - -
- - -
- - - - -
- ; +export class EditGameSettings extends Component<{ + parentState: { editGameRulesDialogVisible: boolean; }; + hideEditGameRules: () => void; +}> { + + render () { + return +
+ +
+ + + +
+ + Timer gebruiken voor bijde spelers + + +
+ ; + } } diff --git a/pages/settings.tsx b/pages/settings.tsx index 2daa90b..6bb7c46 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -26,7 +26,6 @@ export default function SettingsPage() {

Standaard spelregels

 -
); -- cgit v1.2.3