disable post-game selection on random level order
This commit is contained in:
parent
fb34d9d99e
commit
dd9d0b38e0
2 changed files with 21 additions and 9 deletions
|
@ -1,16 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="select-wrapper">
|
<div :class="disabled ? 'select-wrapper disabled' : 'select-wrapper'">
|
||||||
<select @change="(e) => this.onChange(e.target.value)" autocomplete="off">
|
<select @change="e => this.onChange(e.target.value)" autocomplete="off" :disabled="disabled">
|
||||||
<option v-if="placeholder != null" selected disabled>
|
<option v-if="placeholder != null" selected disabled>
|
||||||
{{
|
{{ placeholder }}
|
||||||
placeholder
|
|
||||||
}}
|
|
||||||
</option>
|
</option>
|
||||||
<option
|
<option
|
||||||
v-for="option in options"
|
v-for="option in options"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
:selected="selectedValue && option.value === selectedValue"
|
:selected="selectedValue && option.value === selectedValue"
|
||||||
>{{ option.label }}</option>
|
>{{ option.label }}</option
|
||||||
|
>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -18,14 +17,15 @@
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
|
disabled: { type: Boolean },
|
||||||
selectedValue: { type: String },
|
selectedValue: { type: String },
|
||||||
placeholder: { type: String },
|
placeholder: { type: String },
|
||||||
options: { type: Array },
|
options: { type: Array },
|
||||||
onChange: { type: Function }
|
onChange: { type: Function },
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {};
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -41,6 +41,12 @@ export default {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.select-wrapper.disabled,
|
||||||
|
.select-wrapper.disabled select {
|
||||||
|
background-color: rgb(165, 165, 165);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
border: none;
|
border: none;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -82,7 +88,7 @@ select option {
|
||||||
top: 3px;
|
top: 3px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
content: "\25BC";
|
content: '\25BC';
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
@ -27,6 +27,7 @@
|
||||||
<div class="config">
|
<div class="config">
|
||||||
<span>Post Game:</span>
|
<span>Post Game:</span>
|
||||||
<SelectComponent
|
<SelectComponent
|
||||||
|
:disabled="levelOrderSelection === 'random'"
|
||||||
:options="postGameOptions"
|
:options="postGameOptions"
|
||||||
:onChange="onPostGameSelectionChanged"
|
:onChange="onPostGameSelectionChanged"
|
||||||
:selectedValue="postGameSelection"
|
:selectedValue="postGameSelection"
|
||||||
|
@ -157,6 +158,11 @@ export default {
|
||||||
},
|
},
|
||||||
onLevelOrderSelectionChanged(e) {
|
onLevelOrderSelectionChanged(e) {
|
||||||
this.levelOrderSelection = e;
|
this.levelOrderSelection = e;
|
||||||
|
|
||||||
|
if (e === 'random') {
|
||||||
|
this.postGameSelection = '0109';
|
||||||
|
}
|
||||||
|
|
||||||
this.updateCode();
|
this.updateCode();
|
||||||
},
|
},
|
||||||
onPostGameSelectionChanged(e) {
|
onPostGameSelectionChanged(e) {
|
||||||
|
|
Loading…
Reference in a new issue