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