aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/gameSettings.tsx35
-rw-r--r--src/components/ui.tsx45
-rw-r--r--src/pages/game.tsx4
-rw-r--r--src/routes.tsx1
4 files changed, 52 insertions, 33 deletions
diff --git a/src/components/gameSettings.tsx b/src/components/gameSettings.tsx
index 9f96c52..19eadb7 100644
--- a/src/components/gameSettings.tsx
+++ b/src/components/gameSettings.tsx
@@ -1,11 +1,9 @@
-// interface CurrentGameSettingsProps {
-// gameID: string;
-// }
+import { ReactNode } from 'react';
-import { Button } from './ui';
+import { Button, Vierkant, CheckBox } from './ui';
+import { DialogBox } from './dialogBox';
import BuildRoundedIcon from '@material-ui/icons/BuildRounded';
-import {DialogBox} from './dialogBox';
export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
return <div style={{
@@ -46,7 +44,21 @@ export function CurrentGameSettings(/*props: CurrentGameSettingsProps*/) {
}}>Spelregels aanpassen</span>
</Button>
</div>;
+}
+
+interface GameSettingsSectionProps {
+ children?: ReactNode;
+ title: string;
+ state: boolean;
+}
+function GameSettingsSection(props: GameSettingsSectionProps) {
+ return <Vierkant style={{
+ backgroundColor: "var(--background-alt)",
+ width: "calc(100% - 12px)"
+ }}>
+ <div>{props.children}</div>
+ </Vierkant>
}
export function EditGameSettings() {
@@ -56,16 +68,9 @@ export function EditGameSettings() {
maxHeight: 500,
overflowY: "scroll"
}}>
- <span>Hier is een scrollende pagina in een dialoogvenster</span>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
- <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab qui, quod rerum temporibus dolorem repellendus eos pariatur velit doloribus necessitatibus dignissimos blanditiis mollitia alias expedita neque earum iure modi aspernatur.</p>
+ <CheckBox state={false}/>
+ <GameSettingsSection title="Tijdslimiet" state={false}>
+ </GameSettingsSection>
</div>
</DialogBox>;
}
diff --git a/src/components/ui.tsx b/src/components/ui.tsx
index 4b4b489..a9ca479 100644
--- a/src/components/ui.tsx
+++ b/src/components/ui.tsx
@@ -1,17 +1,17 @@
-import { CSSProperties, ReactNode } from "react";
+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';
-interface VierkantProps {
+export function Vierkant(props: {
href?: string;
width?: string;
height?: string;
style?: CSSProperties;
children?: ReactNode;
- className?: string;
-}
-
-export function Vierkant(props: VierkantProps) {
+ className?: string; })
+{
return <a style={{
padding: 24,
backgroundColor: "var(--background)",
@@ -27,14 +27,12 @@ export function Vierkant(props: VierkantProps) {
}} href={props.href} className={props.className}>{props.children}</a>
}
-interface ButtonProps {
+export function Button(props: {
text?: string;
children?: ReactNode;
style?: CSSProperties;
- onclick?: (() => void);
-}
-
-export function Button(props: ButtonProps) {
+ onclick?: (() => void); })
+{
return <div onClick={props.onclick} style={{
padding: props.text ? 8 : 16,
textAlign: props.text ? "center" : "left",
@@ -56,11 +54,7 @@ export function Button(props: ButtonProps) {
</div>;
}
-interface SearchBarProps {
- label?: string;
-}
-
-export function SearchBar(props: SearchBarProps) {
+export function Input(props: { label?: string }) {
return <div style={{
marginTop: 24,
borderRadius: 8,
@@ -96,3 +90,22 @@ export function SearchBar(props: SearchBarProps) {
</div>
}
+export class CheckBox extends Component<{
+ state?: boolean
+}> {
+ state = { on: this.props.state || false }
+ public toggle = () => this.setState({ on: !this.state.on })
+
+ render() {
+ return <div onClick={this.toggle}>
+ {
+ this.state.on ?
+ <CheckBoxIcon style={{ fontSize: 24 }}/> :
+ <CheckBoxOutlineBlankIcon style={{ fontSize: 24 }}/>
+ }
+ </div>;
+ }
+}
+
+
+
diff --git a/src/pages/game.tsx b/src/pages/game.tsx
index 18007cb..f5dfd39 100644
--- a/src/pages/game.tsx
+++ b/src/pages/game.tsx
@@ -5,7 +5,7 @@ import { CenteredPage } from '../components/page';
import { VoerBord } from '../components/voerBord';
import { DialogBox } from '../components/dialogBox';
import { CurrentGameSettings } from '../components/gameSettings';
-import { Button, SearchBar } from '../components/ui';
+import { Button, Input } from '../components/ui';
import { GameBar } from '../components/gameBar';
import WifiTetheringRoundedIcon from '@material-ui/icons/WifiTetheringRounded';
@@ -73,7 +73,7 @@ export default function GamePage() {
<h2 style={InviteButtonLabelStyle}>Uitnodigen via link</h2>
</Button>
</div>
- <SearchBar label="Zoeken in vriendenlijst"/>
+ <Input label="Zoeken in vriendenlijst"/>
</DialogBox>
</CenteredPage>
</div>
diff --git a/src/routes.tsx b/src/routes.tsx
index 5310baf..0b042d6 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,6 +1,7 @@
import { Switch, Route } from 'react-router-dom';
import './global.css';
+import './dark.css';
import HomePage from './pages/home';
import SettingsPage from './pages/settings';