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>
<div class="select-wrapper">
<select @change="(e) => this.onChange(e.target.value)" autocomplete="off">
<div :class="disabled ? 'select-wrapper disabled' : 'select-wrapper'">
<select @change="e => this.onChange(e.target.value)" autocomplete="off" :disabled="disabled">
<option v-if="placeholder != null" selected disabled>
{{
placeholder
}}
{{ placeholder }}
</option>
<option
v-for="option in options"
:value="option.value"
:selected="selectedValue && option.value === selectedValue"
>{{ option.label }}</option>
>{{ option.label }}</option
>
</select>
</div>
</template>
@ -18,14 +17,15 @@
<script>
export default {
props: {
disabled: { type: Boolean },
selectedValue: { type: String },
placeholder: { type: String },
options: { type: Array },
onChange: { type: Function }
onChange: { type: Function },
},
data() {
return {};
}
},
};
</script>
@ -41,6 +41,12 @@ export default {
z-index: 10;
}
.select-wrapper.disabled,
.select-wrapper.disabled select {
background-color: rgb(165, 165, 165);
cursor: not-allowed;
}
select {
border: none;
outline: none;
@ -82,7 +88,7 @@ select option {
top: 3px;
width: 40px;
height: 100%;
content: "\25BC";
content: '\25BC';
text-align: center;
color: white;
font-size: 14px;

View file

@ -27,6 +27,7 @@
<div class="config">
<span>Post Game:</span>
<SelectComponent
:disabled="levelOrderSelection === 'random'"
:options="postGameOptions"
:onChange="onPostGameSelectionChanged"
:selectedValue="postGameSelection"
@ -157,6 +158,11 @@ export default {
},
onLevelOrderSelectionChanged(e) {
this.levelOrderSelection = e;
if (e === 'random') {
this.postGameSelection = '0109';
}
this.updateCode();
},
onPostGameSelectionChanged(e) {