Added option to using low played
Added Easter egg
This commit is contained in:
Sansan committed
1 parent
3fd84d7d63
commit
4e876fa28f
4 files changed
+769
-697
No files matched your search
@@ -1,171 +1,190 @@
|
||||
<template>
|
||||
<!-- Round Settings, Stop after current, Don't hide title -->
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1>Settings</h1>
|
||||
<!-- Round Settings, Stop after current, Don't hide title -->
|
||||
<transition name="modalAni">
|
||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||
<div class="modalContainer">
|
||||
<div class="modalWrapper">
|
||||
<img
|
||||
class="closeModalImg"
|
||||
src="cancel-black-36dp.svg"
|
||||
alt="closeModalIMG"
|
||||
@click="closeModal"
|
||||
/>
|
||||
<h1>Settings</h1>
|
||||
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="stopAfterCurrent"
|
||||
id="stopAfterCurrent"
|
||||
v-model="checkboxStopAfterCurrent"
|
||||
@change="updateOptionStopAfterCurrent"
|
||||
/>
|
||||
<label for="stopAfterCurrent">Stop after current</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="hideTitle"
|
||||
id="hideTitle"
|
||||
v-model="checkboxHideTitle"
|
||||
@change="updateOptionHideTitle"
|
||||
/>
|
||||
<label for="hideTitle">Hide next track</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="stopAfterCurrent"
|
||||
id="stopAfterCurrent"
|
||||
v-model="checkboxStopAfterCurrent"
|
||||
@change="updateOptionStopAfterCurrent"
|
||||
/>
|
||||
<label for="stopAfterCurrent">Stop after current</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="hideTitle"
|
||||
id="hideTitle"
|
||||
v-model="checkboxHideTitle"
|
||||
@change="updateOptionHideTitle"
|
||||
/>
|
||||
<label for="hideTitle">Hide next track</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="lowPlayed"
|
||||
id="lowPlayed"
|
||||
v-model="checkboxLowPlayed"
|
||||
@change="updateOptionLowPlayed"
|
||||
/>
|
||||
<label for="lowPlayed">Use low played mode</label>
|
||||
</div>
|
||||
|
||||
<div class="winningScoreDiv">
|
||||
<span>Winning Score: {{ winningScore }}</span>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(-1)"
|
||||
>
|
||||
-1
|
||||
</button>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(1)"
|
||||
>
|
||||
+1
|
||||
</button>
|
||||
</div>
|
||||
<div class="winningScoreDiv">
|
||||
<span>Winning Score: {{ winningScore }}</span>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(-1)"
|
||||
>
|
||||
-1
|
||||
</button>
|
||||
<button
|
||||
:class="{ disabled: roundStarted }"
|
||||
:disabled="roundStarted"
|
||||
@click="changeScore(1)"
|
||||
>
|
||||
+1
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
checkboxStopAfterCurrent: false,
|
||||
checkboxHideTitle: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack"]),
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
openModal() {
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
updateOptionHideTitle() {
|
||||
if (this.checkboxHideTitle) {
|
||||
this.$store.dispatch("updateHideNextTitle", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateHideNextTitle", false);
|
||||
}
|
||||
},
|
||||
updateOptionStopAfterCurrent() {
|
||||
if (this.checkboxStopAfterCurrent) {
|
||||
this.$store.dispatch("updateStopAfterCurrent", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateStopAfterCurrent", false);
|
||||
}
|
||||
},
|
||||
changeScore(score) {
|
||||
if (score < 0) {
|
||||
this.$store.dispatch("setWinningScore", -1);
|
||||
} else {
|
||||
this.$store.dispatch("setWinningScore", 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
||||
this.checkboxHideTitle = this.hideNextTrack;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
checkboxStopAfterCurrent: false,
|
||||
checkboxHideTitle: false,
|
||||
checkboxLowPlayed: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]),
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
this.show = false;
|
||||
},
|
||||
openModal() {
|
||||
this.show = true;
|
||||
},
|
||||
checkIfClickShouldCloseModal(event) {
|
||||
if (event.target.classList[0] === "modal") {
|
||||
this.closeModal();
|
||||
}
|
||||
},
|
||||
updateOptionHideTitle() {
|
||||
if (this.checkboxHideTitle) {
|
||||
this.$store.dispatch("updateHideNextTitle", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateHideNextTitle", false);
|
||||
}
|
||||
},
|
||||
updateOptionLowPlayed() {
|
||||
if (this.checkboxLowPlayed) {
|
||||
this.$store.dispatch("updateLowPlayed", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateLowPlayed", false);
|
||||
}
|
||||
},
|
||||
updateOptionStopAfterCurrent() {
|
||||
if (this.checkboxStopAfterCurrent) {
|
||||
this.$store.dispatch("updateStopAfterCurrent", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateStopAfterCurrent", false);
|
||||
}
|
||||
},
|
||||
changeScore(score) {
|
||||
if (score < 0) {
|
||||
this.$store.dispatch("setWinningScore", -1);
|
||||
} else {
|
||||
this.$store.dispatch("setWinningScore", 1);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
||||
this.checkboxHideTitle = this.hideNextTrack;
|
||||
this.checkboxLowPlayed = this.lowPlayed;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.winningScoreDiv {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 30px;
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: nowrap;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.checkboxDiv {
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
margin: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
.checkboxDiv:first-of-type {
|
||||
margin-top: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.checkboxDiv input {
|
||||
transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
.checkboxDiv label {
|
||||
margin-left: 10px;
|
||||
font-size: 1.5rem;
|
||||
margin-left: 10px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.7rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
font-size: 1.7rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
.winningScoreDiv button {
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
background: rgb(16, 99, 194);
|
||||
color: rgb(235, 235, 235);
|
||||
border-color: rgb(161, 161, 161);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 3px;
|
||||
display: flex;
|
||||
width: 50px;
|
||||
height: 33px;
|
||||
background: rgb(16, 99, 194);
|
||||
color: rgb(235, 235, 235);
|
||||
border-color: rgb(161, 161, 161);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 0;
|
||||
font-size: 1.5rem;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 50%;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.checkboxDiv label {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
.checkboxDiv label {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
.winningScoreDiv span {
|
||||
font-size: 1.3rem;
|
||||
margin-right: 10px;
|
||||
width: 245px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user