disable post-game selection on random level order

This commit is contained in:
Matteias Collet 2020-06-29 22:17:42 +02:00
parent fb34d9d99e
commit dd9d0b38e0
2 changed files with 21 additions and 9 deletions

View file

@ -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;

View file

@ -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) {