diff options
Diffstat (limited to 'components/gameSettings.tsx')
| -rw-r--r-- | components/gameSettings.tsx | 358 |
1 files changed, 217 insertions, 141 deletions
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<userPreferences>({ - 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 <div style={{ - position: "relative", - height: 80, - overflow: "visible", - zIndex: 1 - }}> - <p style={{ - opacity: .75, - fontStyle: "italic", - userSelect: "none", - position: "absolute", - top: "50%", - left: 0, - transform: "translateY(-50%)" - }}> - {timelimit_str}<br/> + 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 <div + style={{ + position: 'relative', + height: 80, + overflow: 'visible', + zIndex: 1, + }} + > + <p + style={{ + opacity: .75, + fontStyle: 'italic', + userSelect: 'none', + position: 'absolute', + top: '50%', + left: 0, + transform: 'translateY(-50%)', + }} + > + {timelimit_str} + <br /> {ranked_str} </p> - <Button style={{ - width: 150, - position: "absolute", - top: "50%", - right: 0, - transform: "translateY(-50%)" - }} onclick={this.showEditGameRules}> - <BuildOutlinedIcon style={{ fontSize: 48 }}/> - <span style={{ - fontWeight: 600, - position: "absolute", - right: 24, - top: "50%", - width: 85, - verticalAlign: "middle", - textAlign: "center", - transform: "translateY(-50%)", - userSelect: "none" - }}>Spelregels aanpassen</span> + <Button + style={{ + width: 150, + position: 'absolute', + top: '50%', + right: 0, + transform: 'translateY(-50%)', + }} + onclick={this.showEditGameRules} + > + <BuildOutlinedIcon style={{ fontSize: 48 }} /> + <span + style={{ + fontWeight: 600, + position: 'absolute', + right: 24, + top: '50%', + width: 85, + verticalAlign: 'middle', + textAlign: 'center', + transform: 'translateY(-50%)', + userSelect: 'none', + }} + > + Spelregels aanpassen + </span> </Button> - <EditGameSettings parentState={this.state} hideEditGameRules={this.hideEditGameRules} setGameRules={this.setGameRules}/> + <EditGameSettings + parentState={this.state} + hideEditGameRules={this.hideEditGameRules} + setGameRules={this.setGameRules} + /> </div>; } } @@ -101,25 +116,36 @@ function GameSettingsSection(props: { noMarginBottom?: boolean; id: string; }) { - return <Vierkant id={props.id} style={{ - backgroundColor: "var(--background-alt)", - width: "100%", - padding: 16, - margin: 0, - marginBottom: props.noMarginBottom ? 0 : 24 - }}> - <span style={{ - verticalAlign: "top", - fontSize: 14, - fontWeight: 600 - }}>{props.title}</span> - <CheckBox state={props.state} id={`${props.id}_enabled`} style={{ - verticalAlign: "top", - float: "right", - margin: -3 - }}/> - <div>{props.children}</div> - </Vierkant> + return <Vierkant + id={props.id} + style={{ + backgroundColor: 'var(--background-alt)', + width: '100%', + padding: 16, + margin: 0, + marginBottom: props.noMarginBottom ? 0 : 24, + }} + > + <span + style={{ + verticalAlign: 'top', + fontSize: 14, + fontWeight: 600, + }} + > + {props.title} + </span> + <CheckBox + state={props.state} + id={`${props.id}_enabled`} + style={{ + verticalAlign: 'top', + float: 'right', + margin: -3, + }} + /> + <div>{props.children}</div> + </Vierkant>; } function GameRule(props: { @@ -127,15 +153,17 @@ function GameRule(props: { description: string; style?: CSSProperties; }) { - return <div style={{ - backgroundColor: "var(--page-background)", - borderRadius: 8, - padding: "16px 0", - textAlign: "center", - ...props.style - }}> - <h1 style={{ color: "var(--disk-a)", fontSize: 42 }}>{props.title}</h1> - <p style={{ color: "var(--text-alt)", maxWidth: 250, margin: "0 auto" }}>{props.description}</p> + return <div + style={{ + backgroundColor: 'var(--page-background)', + borderRadius: 8, + padding: '16px 0', + textAlign: 'center', + ...props.style, + }} + > + <h1 style={{ color: 'var(--disk-a)', fontSize: 42 }}>{props.title}</h1> + <p style={{ color: 'var(--text-alt)', maxWidth: 250, margin: '0 auto' }}>{props.description}</p> </div>; } @@ -146,66 +174,114 @@ type editGameSettingsProps = { }; export class EditGameSettings extends Component<editGameSettingsProps> { - render () { - return <DialogBox title="Spelregels aanpassen" style={{ - margin: 0, - display: this.props.parentState.editGameRulesDialogVisible ? "block" : "none" - }} onclick={this.props.hideEditGameRules}> - <div style={{ - marginTop: 24, - maxHeight: 500, - overflowY: "scroll", - borderRadius: 8, - }}> - <GameSettingsSection title="Tijdslimiet" state={this.props.parentState.ruleset.timelimit.enabled} id="timelimit"> - <div style={{ - display: "grid", - gridTemplateColumns: "1fr 1fr 1fr", - gridGap: 16, - margin: "16px 0" - }}> - <Input id="timelimit_minutes" type="number" label="min" min={0} max={60} value={this.props.parentState.ruleset.timelimit.minutes}/> - <Input id="timelimit_seconds" type="number" label="sec" min={0} max={60} value={this.props.parentState.ruleset.timelimit.seconds}/> - <Input id="timelimit_addmove" type="number" label="plus" min={0} value={this.props.parentState.ruleset.timelimit.addmove}/> + render() { + return <DialogBox + title='Spelregels aanpassen' + style={{ + margin: 0, + display: this.props.parentState.editGameRulesDialogVisible ? 'block' : 'none', + }} + onclick={this.props.hideEditGameRules} + > + <div + style={{ + marginTop: 24, + maxHeight: 500, + overflowY: 'scroll', + borderRadius: 8, + }} + > + <GameSettingsSection + title='Tijdslimiet' + state={this.props.parentState.ruleset.timelimit.enabled} + id='timelimit' + > + <div + style={{ + display: 'grid', + gridTemplateColumns: '1fr 1fr 1fr', + gridGap: 16, + margin: '16px 0', + }} + > + <Input + id='timelimit_minutes' + type='number' + label='min' + min={0} + max={60} + value={this.props.parentState.ruleset.timelimit.minutes} + /> + <Input + id='timelimit_seconds' + type='number' + label='sec' + min={0} + max={60} + value={this.props.parentState.ruleset.timelimit.seconds} + /> + <Input + id='timelimit_addmove' + type='number' + label='plus' + min={0} + value={this.props.parentState.ruleset.timelimit.addmove} + /> </div> - <CheckBox id="timelimit_shared" state={this.props.parentState.ruleset.timelimit.shared}/> - <span style={{ - verticalAlign: "super", - marginLeft: 4 - }}>Timer gebruiken voor bijde spelers</span> + <CheckBox id='timelimit_shared' state={this.props.parentState.ruleset.timelimit.shared} /> + <span + style={{ + verticalAlign: 'super', + marginLeft: 4, + }} + > + Timer gebruiken voor bijde spelers + </span> </GameSettingsSection> - { false && <GameSettingsSection title="Regelset" state={false}> - <div style={{ - display: "grid", - gridTemplateColumns: "1fr 1fr", - gridGap: 16, - margin: "16px 0" - }}> - <GameRule title="+2" description="Extra kolommen"/> - <GameRule title="+4" description="Extra kolommen"/> + {false && <GameSettingsSection title='Regelset' state={false}> + <div + style={{ + display: 'grid', + gridTemplateColumns: '1fr 1fr', + gridGap: 16, + margin: '16px 0', + }} + > + <GameRule title='+2' description='Extra kolommen' /> + <GameRule title='+4' description='Extra kolommen' /> </div> - <GameRule style={{ marginBottom: 16 }} title="Gravity" description="De zwaartekracht draait soms"/> - <GameRule title="Flashlight" description="Het veld wordt opgelicht door de vallende fiches"/> - </GameSettingsSection> } - <GameSettingsSection title="Gerangschikt spel" state={this.props.parentState.ruleset.ranked} id="ranked" noMarginBottom/> + <GameRule style={{ marginBottom: 16 }} title='Gravity' description='De zwaartekracht draait soms' /> + <GameRule title='Flashlight' description='Het veld wordt opgelicht door de vallende fiches' /> + </GameSettingsSection>} + <GameSettingsSection + title='Gerangschikt spel' + state={this.props.parentState.ruleset.ranked} + id='ranked' + noMarginBottom + /> </div> - <Button style={{ - textAlign: "center", - marginTop: 24 - }} onclick={() => { - var rules: ruleset = { - timelimit: { - enabled: document.getElementById("timelimit_enabled").classList.contains("on"), - minutes: Number((document.getElementById("timelimit_minutes") as HTMLInputElement).value), - seconds: Number((document.getElementById("timelimit_seconds") as HTMLInputElement).value), - addmove: Number((document.getElementById("timelimit_addmove") as HTMLInputElement).value), - shared: document.getElementById("timelimit_shared").classList.contains("on"), - }, - ranked: document.getElementById("ranked_enabled").classList.contains("on") - } - this.props.setGameRules(rules); - this.props.hideEditGameRules(); - }}>Instellingen opslaan</Button> + <Button + style={{ + textAlign: 'center', + marginTop: 24, + }} + onclick={() => { + var rules: ruleset = { + timelimit: { + enabled: document.getElementById('timelimit_enabled').classList.contains('on'), + minutes: Number((document.getElementById('timelimit_minutes') as HTMLInputElement).value), + seconds: Number((document.getElementById('timelimit_seconds') as HTMLInputElement).value), + addmove: Number((document.getElementById('timelimit_addmove') as HTMLInputElement).value), + shared: document.getElementById('timelimit_shared').classList.contains('on'), + }, + ranked: document.getElementById('ranked_enabled').classList.contains('on'), + }; + this.props.setGameRules(rules); + this.props.hideEditGameRules(); + }} + > + Instellingen opslaan + </Button> </DialogBox>; } } |