aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--components/dialogBox.tsx19
-rw-r--r--components/gameSettings.tsx85
-rw-r--r--pages/_app.tsx1
-rw-r--r--styles/gameSettings.css59
-rw-r--r--styles/ui.css10
5 files changed, 92 insertions, 82 deletions
diff --git a/components/dialogBox.tsx b/components/dialogBox.tsx
index 0a61762..4ead7c5 100644
--- a/components/dialogBox.tsx
+++ b/components/dialogBox.tsx
@@ -9,20 +9,15 @@ export function DialogBox(props: {
title: string;
onclick?: () => void;
hidden?: boolean;
+ className?: string;
}) {
- return <Vierkant className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '')}>
- <h2 style={{ marginBottom: 24 }}>{props.title}</h2>
+ return <Vierkant
+ className={'dialogbox drop-2 pad-l posfix abscenter ' + (props.hidden ? 'dispnone' : '') + ' '
+ + props.className}
+ >
+ <h2 className='title'>{props.title}</h2>
<span onClick={props.onclick}>
- <CancelIcon
- style={{
- position: 'absolute',
- top: 25,
- right: 25,
- color: 'var(--text)',
- opacity: .85,
- cursor: 'pointer',
- }}
- />
+ <CancelIcon className='posabs close icon subtile' />
</span>
{props.children}
</Vierkant>;
diff --git a/components/gameSettings.tsx b/components/gameSettings.tsx
index 3c3a699..bb01284 100644
--- a/components/gameSettings.tsx
+++ b/components/gameSettings.tsx
@@ -30,60 +30,24 @@ export function CurrentGameSettings() {
.catch(() => {});
}, []);
- /* showEditGameRules = () => this.setState({ editGameRulesDialogVisible: true }); */
- /* hideEditGameRules = () => this.setState({ editGameRulesDialogVisible: false }); */
- /* setGameRules = (newRules: ruleset) => this.setState({ ruleset: newRules }); */
-
var timelimit_str = ruleset.timelimit.enabled
? `${ruleset.timelimit.minutes}m${ruleset.timelimit.seconds}s plus ${ruleset.timelimit.addmove}`
: 'Geen tijdslimiet';
var ranked_str = ruleset.ranked
? 'Gerangschikt'
: 'Niet gerangschikt';
- return <div
- style={{
- position: 'relative',
- height: 80,
- overflow: 'visible',
- zIndex: 1,
- }}
- >
- <p
- className='subtile nosel posabs'
- style={{
- top: '50%',
- left: 0,
- transform: 'translateY(-50%)',
- }}
- >
+ return <div className='editGameSettings posrel'>
+ <p className='currentRules subtile nosel posabs l0'>
{timelimit_str}
<br />
{ranked_str}
</p>
<Button
- style={{
- width: 150,
- position: 'absolute',
- top: '50%',
- right: 0,
- transform: 'translateY(-50%)',
- }}
+ className='posabs r0 pad-m'
onclick={() => setEditGameRulesDialogVisible(true)}
>
- <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',
- }}
- >
+ <BuildOutlinedIcon className='icon' />
+ <span className='posabs center nosel text'>
Spelregels aanpassen
</span>
</Button>
@@ -105,13 +69,7 @@ function GameSettingsSection(props: {
}) {
return <Vierkant
id={props.id}
- style={{
- backgroundColor: 'var(--background-alt)',
- width: '100%',
- padding: 16,
- margin: 0,
- marginBottom: props.noMarginBottom ? 0 : 24,
- }}
+ className='pad-m editableRulesSection'
>
<span
style={{
@@ -166,28 +124,15 @@ export function EditGameSettings(props: editGameSettingsProps) {
title='Spelregels aanpassen'
hidden={!props.visible}
onclick={props.hideEditGameRules}
+ className='gameRuleEdit'
>
- <div
- style={{
- marginTop: 24,
- maxHeight: 500,
- overflowY: 'scroll',
- borderRadius: 8,
- }}
- >
+ <div className='editableRules round-t'>
<GameSettingsSection
title='Tijdslimiet'
state={props.ruleset.timelimit.enabled}
id='timelimit'
>
- <div
- style={{
- display: 'grid',
- gridTemplateColumns: '1fr 1fr 1fr',
- gridGap: 16,
- margin: '16px 0',
- }}
- >
+ <div className='sidebyside timeControls'>
<Input
id='timelimit_minutes'
type='number'
@@ -195,6 +140,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
min={0}
max={60}
value={props.ruleset.timelimit.minutes}
+ className='pad-m round-t'
/>
<Input
id='timelimit_seconds'
@@ -203,6 +149,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
min={0}
max={60}
value={props.ruleset.timelimit.seconds}
+ className='pad-m round-t'
/>
<Input
id='timelimit_addmove'
@@ -210,19 +157,20 @@ export function EditGameSettings(props: editGameSettingsProps) {
label='plus'
min={0}
value={props.ruleset.timelimit.addmove}
+ className='pad-m round-t'
/>
</div>
<CheckBox id='timelimit_shared' state={props.ruleset.timelimit.shared} />
<span
+ className='valignsup'
style={{
- verticalAlign: 'super',
marginLeft: 4,
}}
>
Timer gebruiken voor bijde spelers
</span>
</GameSettingsSection>
- {false && <GameSettingsSection title='Regelset' state={false}>
+ {false && <GameSettingsSection id='gamemodes' title='Regelset' state={false}>
<div
style={{
display: 'grid',
@@ -245,10 +193,7 @@ export function EditGameSettings(props: editGameSettingsProps) {
/>
</div>
<Button
- style={{
- textAlign: 'center',
- marginTop: 24,
- }}
+ className='save'
onclick={() => {
var rules: ruleset = {
timelimit: {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index bbdbae8..9521d58 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,6 +11,7 @@ import '../styles/navbar.css';
import '../styles/ui.css';
import '../styles/utility.css';
+import '../styles/gameSettings.css';
import '../styles/index.css';
import '../styles/search.css';
import '../styles/settings.css';
diff --git a/styles/gameSettings.css b/styles/gameSettings.css
new file mode 100644
index 0000000..533cea0
--- /dev/null
+++ b/styles/gameSettings.css
@@ -0,0 +1,59 @@
+.editGameSettings {
+ height: 80px;
+ overflow: visible;
+ z-index: 1;
+}
+
+.editGameSettings .currentRules {
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.editGameSettings > .button {
+ width: 150px;
+ top: 50%;
+ transform: translateY(-50%);
+ text-align: left;
+}
+
+.editGameSettings > .button .icon {
+ font-size: 48px;
+}
+
+.editGameSettings > .button .text {
+ right: var(--spacing-medium);
+ width: 85px;
+ top: 50%;
+ vertical-align: middle;
+ transform: translateY(-50%);
+}
+
+.editGameSettings .editableRules {
+ margin-top: var(--spacing-large);
+ max-height: 500px;
+ overflow-y: scroll;
+}
+
+.editGameSettings .editableRules .editableRulesSection {
+ width: 100%;
+ background-color: var(--gray-700);
+ margin: 0;
+ margin-bottom: var(--spacing-medium);
+}
+
+.editGameSettings .button {
+ line-height: normal;
+}
+
+.editGameSettings .editableRules .editableRulesSection .timeControls {
+ margin: var(--spacing-medium);
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.editGameSettings .editableRules .editableRulesSection .timeControls input {
+ background-color: var(--background);
+
+ width: calc(100% - 2 * var(--spacing-medium));
+}
+
diff --git a/styles/ui.css b/styles/ui.css
index efc96b7..55b24e2 100644
--- a/styles/ui.css
+++ b/styles/ui.css
@@ -70,3 +70,13 @@
width: 392px;
}
+.dialogbox > .title {
+ margin-bottom: var(--spacing-large);
+}
+
+.dialogbox .icon.close {
+ top: 25px;
+ right: 25px;
+ cursor: pointer;
+}
+