Added option to using low played
Added Easter egg
This commit is contained in:
@@ -1,171 +1,190 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- Round Settings, Stop after current, Don't hide title -->
|
<!-- Round Settings, Stop after current, Don't hide title -->
|
||||||
<transition name="modalAni">
|
<transition name="modalAni">
|
||||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||||
<div class="modalContainer">
|
<div class="modalContainer">
|
||||||
<div class="modalWrapper">
|
<div class="modalWrapper">
|
||||||
<img
|
<img
|
||||||
class="closeModalImg"
|
class="closeModalImg"
|
||||||
src="cancel-black-36dp.svg"
|
src="cancel-black-36dp.svg"
|
||||||
alt="closeModalIMG"
|
alt="closeModalIMG"
|
||||||
@click="closeModal"
|
@click="closeModal"
|
||||||
/>
|
/>
|
||||||
<h1>Settings</h1>
|
<h1>Settings</h1>
|
||||||
|
|
||||||
<div class="checkboxDiv">
|
<div class="checkboxDiv">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="stopAfterCurrent"
|
name="stopAfterCurrent"
|
||||||
id="stopAfterCurrent"
|
id="stopAfterCurrent"
|
||||||
v-model="checkboxStopAfterCurrent"
|
v-model="checkboxStopAfterCurrent"
|
||||||
@change="updateOptionStopAfterCurrent"
|
@change="updateOptionStopAfterCurrent"
|
||||||
/>
|
/>
|
||||||
<label for="stopAfterCurrent">Stop after current</label>
|
<label for="stopAfterCurrent">Stop after current</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="checkboxDiv">
|
<div class="checkboxDiv">
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
name="hideTitle"
|
name="hideTitle"
|
||||||
id="hideTitle"
|
id="hideTitle"
|
||||||
v-model="checkboxHideTitle"
|
v-model="checkboxHideTitle"
|
||||||
@change="updateOptionHideTitle"
|
@change="updateOptionHideTitle"
|
||||||
/>
|
/>
|
||||||
<label for="hideTitle">Hide next track</label>
|
<label for="hideTitle">Hide next track</label>
|
||||||
</div>
|
</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">
|
<div class="winningScoreDiv">
|
||||||
<span>Winning Score: {{ winningScore }}</span>
|
<span>Winning Score: {{ winningScore }}</span>
|
||||||
<button
|
<button
|
||||||
:class="{ disabled: roundStarted }"
|
:class="{ disabled: roundStarted }"
|
||||||
:disabled="roundStarted"
|
:disabled="roundStarted"
|
||||||
@click="changeScore(-1)"
|
@click="changeScore(-1)"
|
||||||
>
|
>
|
||||||
-1
|
-1
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
:class="{ disabled: roundStarted }"
|
:class="{ disabled: roundStarted }"
|
||||||
:disabled="roundStarted"
|
:disabled="roundStarted"
|
||||||
@click="changeScore(1)"
|
@click="changeScore(1)"
|
||||||
>
|
>
|
||||||
+1
|
+1
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
checkboxStopAfterCurrent: false,
|
checkboxStopAfterCurrent: false,
|
||||||
checkboxHideTitle: false,
|
checkboxHideTitle: false,
|
||||||
};
|
checkboxLowPlayed: false,
|
||||||
},
|
};
|
||||||
computed: {
|
},
|
||||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack"]),
|
computed: {
|
||||||
},
|
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]),
|
||||||
methods: {
|
},
|
||||||
closeModal() {
|
methods: {
|
||||||
this.show = false;
|
closeModal() {
|
||||||
},
|
this.show = false;
|
||||||
openModal() {
|
},
|
||||||
this.show = true;
|
openModal() {
|
||||||
},
|
this.show = true;
|
||||||
checkIfClickShouldCloseModal(event) {
|
},
|
||||||
if (event.target.classList[0] === "modal") {
|
checkIfClickShouldCloseModal(event) {
|
||||||
this.closeModal();
|
if (event.target.classList[0] === "modal") {
|
||||||
}
|
this.closeModal();
|
||||||
},
|
}
|
||||||
updateOptionHideTitle() {
|
},
|
||||||
if (this.checkboxHideTitle) {
|
updateOptionHideTitle() {
|
||||||
this.$store.dispatch("updateHideNextTitle", true);
|
if (this.checkboxHideTitle) {
|
||||||
} else {
|
this.$store.dispatch("updateHideNextTitle", true);
|
||||||
this.$store.dispatch("updateHideNextTitle", false);
|
} else {
|
||||||
}
|
this.$store.dispatch("updateHideNextTitle", false);
|
||||||
},
|
}
|
||||||
updateOptionStopAfterCurrent() {
|
},
|
||||||
if (this.checkboxStopAfterCurrent) {
|
updateOptionLowPlayed() {
|
||||||
this.$store.dispatch("updateStopAfterCurrent", true);
|
if (this.checkboxLowPlayed) {
|
||||||
} else {
|
this.$store.dispatch("updateLowPlayed", true);
|
||||||
this.$store.dispatch("updateStopAfterCurrent", false);
|
} else {
|
||||||
}
|
this.$store.dispatch("updateLowPlayed", false);
|
||||||
},
|
}
|
||||||
changeScore(score) {
|
},
|
||||||
if (score < 0) {
|
updateOptionStopAfterCurrent() {
|
||||||
this.$store.dispatch("setWinningScore", -1);
|
if (this.checkboxStopAfterCurrent) {
|
||||||
} else {
|
this.$store.dispatch("updateStopAfterCurrent", true);
|
||||||
this.$store.dispatch("setWinningScore", 1);
|
} else {
|
||||||
}
|
this.$store.dispatch("updateStopAfterCurrent", false);
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
changeScore(score) {
|
||||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
if (score < 0) {
|
||||||
this.checkboxHideTitle = this.hideNextTrack;
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.winningScoreDiv {
|
.winningScoreDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.checkboxDiv {
|
.checkboxDiv {
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.checkboxDiv:first-of-type {
|
.checkboxDiv:first-of-type {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
.checkboxDiv input {
|
.checkboxDiv input {
|
||||||
transform: scale(1.3);
|
transform: scale(1.3);
|
||||||
}
|
}
|
||||||
.checkboxDiv label {
|
.checkboxDiv label {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.winningScoreDiv span {
|
.winningScoreDiv span {
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 245px;
|
width: 245px;
|
||||||
}
|
}
|
||||||
.winningScoreDiv button {
|
.winningScoreDiv button {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 33px;
|
height: 33px;
|
||||||
background: rgb(16, 99, 194);
|
background: rgb(16, 99, 194);
|
||||||
color: rgb(235, 235, 235);
|
color: rgb(235, 235, 235);
|
||||||
border-color: rgb(161, 161, 161);
|
border-color: rgb(161, 161, 161);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.disabled {
|
.disabled {
|
||||||
opacity: 50%;
|
opacity: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
.checkboxDiv label {
|
.checkboxDiv label {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.winningScoreDiv span {
|
.winningScoreDiv span {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
width: 245px;
|
width: 245px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,43 +1,50 @@
|
|||||||
<template>
|
<template>
|
||||||
<transition name="modalAni">
|
<transition name="modalAni">
|
||||||
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
<div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
|
||||||
<div class="modalContainer">
|
<div class="modalContainer">
|
||||||
<div class="modalWrapper">
|
<div class="modalWrapper">
|
||||||
<img
|
<img
|
||||||
class="closeModalImg"
|
class="closeModalImg"
|
||||||
src="cancel-black-36dp.svg"
|
src="cancel-black-36dp.svg"
|
||||||
alt="closeModalIMG"
|
alt="closeModalIMG"
|
||||||
@click="closeModal"
|
@click="closeModal"
|
||||||
/>
|
/>
|
||||||
<h1>{{ playerName }} won!!</h1>
|
<h1 v-if="showPeter()">Pete... I mean {{ playerName }} won!!</h1>
|
||||||
|
<h1 v-else>{{ playerName }} won!!</h1>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</transition>
|
||||||
</transition>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
show: false,
|
show: false,
|
||||||
playerName: "",
|
playerName: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
closeModal() {
|
closeModal() {
|
||||||
this.show = false;
|
this.show = false;
|
||||||
},
|
},
|
||||||
openModal(playerName) {
|
showPeter() {
|
||||||
this.playerName = playerName;
|
let randomNumber = Math.floor(Math.random() * 10);
|
||||||
this.show = true;
|
console.log(randomNumber);
|
||||||
},
|
console.log("Test");
|
||||||
checkIfClickShouldCloseModal(event) {
|
return randomNumber < 2;
|
||||||
if (event.target.classList[0] === "modal") {
|
},
|
||||||
this.closeModal();
|
openModal(playerName) {
|
||||||
}
|
this.playerName = playerName;
|
||||||
},
|
this.show = true;
|
||||||
},
|
},
|
||||||
|
checkIfClickShouldCloseModal(event) {
|
||||||
|
if (event.target.classList[0] === "modal") {
|
||||||
|
this.closeModal();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,371 +1,410 @@
|
|||||||
<template>
|
<template>
|
||||||
<footer>
|
<footer>
|
||||||
<div class="audioAndButtonsDiv">
|
<div class="audioAndButtonsDiv">
|
||||||
<div class="audioButtonsDiv">
|
<div class="audioButtonsDiv">
|
||||||
<button
|
<button
|
||||||
class="bigButton"
|
class="bigButton"
|
||||||
:class="{ disabled: disableButtons }"
|
:class="{ disabled: disableButtons }"
|
||||||
:disabled="disableButtons"
|
:disabled="disableButtons"
|
||||||
@click="randomizeTrack()"
|
@click="randomizeTrack()"
|
||||||
>
|
>
|
||||||
<p v-if="!disableButtons"><u>R</u>andomize new track</p>
|
<p v-if="!disableButtons"><u>R</u>andomize new track</p>
|
||||||
<p v-else>Loading...</p>
|
<p v-else>Loading...</p>
|
||||||
</button>
|
</button>
|
||||||
<button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
|
<button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="audioDiv">
|
<div class="audioDiv">
|
||||||
<audio
|
<audio
|
||||||
controls
|
controls
|
||||||
class="audioPlayer"
|
class="audioPlayer"
|
||||||
:src="currentTrackSrcFile"
|
:src="currentTrackSrcFile"
|
||||||
ref="audioPlayer"
|
ref="audioPlayer"
|
||||||
:onended="trackHasEnded"
|
:onended="trackHasEnded"
|
||||||
></audio>
|
></audio>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapState } from "vuex";
|
import { mapState } from "vuex";
|
||||||
import arne from "../../arne.js";
|
import arne from "../../arne.js";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
currentTrackSrcFile: "",
|
currentTrackSrcFile: "",
|
||||||
disableButtons: false,
|
disableButtons: false,
|
||||||
loadingBar: "",
|
loadingBar: "",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
...mapState([
|
...mapState([
|
||||||
"stopAfterCurrent",
|
"stopAfterCurrent",
|
||||||
"localPlaylist",
|
"localPlaylist",
|
||||||
"hideNextTrack",
|
"hideNextTrack",
|
||||||
"roundStarted",
|
"roundStarted",
|
||||||
"specialTrackIsPlaying",
|
"specialTrackIsPlaying",
|
||||||
]),
|
"lowPlayed",
|
||||||
},
|
]),
|
||||||
methods: {
|
},
|
||||||
async randomizeTrack() {
|
methods: {
|
||||||
console.log("Randomizing track");
|
async randomizeTrack() {
|
||||||
/* Prevents anyone from changing the winning score after the round has started */
|
console.log("Randomizing track");
|
||||||
if (this.roundStarted === false) {
|
/* Prevents anyone from changing the winning score after the round has started */
|
||||||
this.$store.dispatch("setRoundStarted", true);
|
if (this.roundStarted === false) {
|
||||||
}
|
this.$store.dispatch("setRoundStarted", true);
|
||||||
let trackAddedToQue = false;
|
}
|
||||||
this.disableButtons = true;
|
let trackAddedToQue = false;
|
||||||
let copyOfPlaylist = this.localPlaylist;
|
this.disableButtons = true;
|
||||||
//If the local playlist of MP3s is empty, wait for a new track to load
|
let copyOfPlaylist = this.localPlaylist;
|
||||||
if (copyOfPlaylist.length === 0) {
|
//If the local playlist of MP3s is empty, wait for a new track to load
|
||||||
console.log("No track preloaded, loading a new one");
|
if (copyOfPlaylist.length === 0) {
|
||||||
await this.APIgetRandomizedTrack();
|
console.log("No track preloaded, loading a new one");
|
||||||
await this.APIaddToQue();
|
if (this.lowPlayed) {
|
||||||
trackAddedToQue = true;
|
await this.APIgetRandomizedLowTrack();
|
||||||
}
|
} else {
|
||||||
//Update the source file for the media player (binded property to Audio tag in the template)
|
await this.APIgetRandomizedTrack();
|
||||||
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
|
}
|
||||||
/* this.$nextTick(() => {}); */
|
await this.APIaddToQue();
|
||||||
if (!trackAddedToQue) {
|
trackAddedToQue = true;
|
||||||
await this.APIaddToQue();
|
}
|
||||||
}
|
//Update the source file for the media player (binded property to Audio tag in the template)
|
||||||
await this.APIgetPlaylistHistory();
|
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
|
||||||
|
/* this.$nextTick(() => {}); */
|
||||||
|
if (!trackAddedToQue) {
|
||||||
|
await this.APIaddToQue();
|
||||||
|
}
|
||||||
|
await this.APIgetPlaylistHistory();
|
||||||
|
|
||||||
this.$refs.audioPlayer.play();
|
this.$refs.audioPlayer.play();
|
||||||
this.$emit("scroll-to-bottom-playlist-history");
|
this.$emit("scroll-to-bottom-playlist-history");
|
||||||
copyOfPlaylist.shift();
|
copyOfPlaylist.shift();
|
||||||
if (this.hideNextTrack) {
|
if (this.hideNextTrack) {
|
||||||
this.$store.dispatch("setCurrentTrackHidden", true);
|
this.$store.dispatch("setCurrentTrackHidden", true);
|
||||||
} else {
|
} else {
|
||||||
|
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||||
|
}
|
||||||
|
await this.APIgetInfoAboutCurrentTrack();
|
||||||
|
await this.randomizeTrackInAdvance();
|
||||||
|
this.disableButtons = false;
|
||||||
|
},
|
||||||
|
async randomizeTrackInAdvance() {
|
||||||
|
console.log("Randomizing track in advance");
|
||||||
|
try {
|
||||||
|
if (this.lowPlayed) {
|
||||||
|
await this.APIgetRandomizedLowTrack();
|
||||||
|
} else {
|
||||||
|
await this.APIgetRandomizedTrack();
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
console.log("Error: A track couldn't be loaded in advance");
|
||||||
|
}
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
resolve();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async playSpecificTrack(track) {
|
||||||
|
await this.APIplaySpecificTrack(track.SongNo);
|
||||||
|
this.$store.dispatch("setCurrentlyLoadingTrack", "");
|
||||||
|
await this.APIgetPlaylistHistory();
|
||||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||||
}
|
await this.APIgetInfoAboutCurrentTrack();
|
||||||
await this.APIgetInfoAboutCurrentTrack();
|
},
|
||||||
await this.randomizeTrackInAdvance();
|
showAnswer() {
|
||||||
this.disableButtons = false;
|
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||||
},
|
},
|
||||||
async randomizeTrackInAdvance() {
|
startSoundTest() {
|
||||||
console.log("Randomizing track in advance");
|
this.$refs.audioPlayer.pause();
|
||||||
try {
|
this.currentTrackSrcFile = "sounds/check.mp3";
|
||||||
await this.APIgetRandomizedTrack();
|
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||||
} catch (error) {
|
this.$nextTick(() => {
|
||||||
console.log(error);
|
this.$refs.audioPlayer.currentTime = 0;
|
||||||
console.log("Error: A track couldn't be loaded in advance");
|
this.$refs.audioPlayer.play();
|
||||||
}
|
});
|
||||||
return new Promise((resolve) => {
|
},
|
||||||
resolve();
|
playWelcomeSound() {
|
||||||
});
|
let randomNumber = Math.floor(Math.random() * 10);
|
||||||
},
|
this.$refs.audioPlayer.pause();
|
||||||
async playSpecificTrack(track) {
|
if (randomNumber == 0) {
|
||||||
await this.APIplaySpecificTrack(track.SongNo);
|
this.currentTrackSrcFile = "sounds/sound1.mp3";
|
||||||
this.$store.dispatch("setCurrentlyLoadingTrack", "");
|
} else if (randomNumber < 5) {
|
||||||
await this.APIgetPlaylistHistory();
|
this.currentTrackSrcFile = "sounds/intro_short.mp3";
|
||||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
} else {
|
||||||
await this.APIgetInfoAboutCurrentTrack();
|
this.currentTrackSrcFile = "sounds/intro_long.mp3";
|
||||||
},
|
}
|
||||||
showAnswer() {
|
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
this.$nextTick(() => {
|
||||||
},
|
this.$refs.audioPlayer.currentTime = 0;
|
||||||
startSoundTest() {
|
this.$refs.audioPlayer.play();
|
||||||
this.$refs.audioPlayer.pause();
|
});
|
||||||
this.currentTrackSrcFile = "sounds/check.mp3";
|
},
|
||||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
playWinningSound() {
|
||||||
this.$nextTick(() => {
|
this.$refs.audioPlayer.pause();
|
||||||
this.$refs.audioPlayer.currentTime = 0;
|
this.currentTrackSrcFile = "sounds/winning.mp3";
|
||||||
this.$refs.audioPlayer.play();
|
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||||
});
|
this.$nextTick(() => {
|
||||||
},
|
this.$refs.audioPlayer.currentTime = 0;
|
||||||
playWelcomeSound() {
|
this.$refs.audioPlayer.play();
|
||||||
let randomNumber = Math.floor(Math.random() * 10);
|
});
|
||||||
this.$refs.audioPlayer.pause();
|
},
|
||||||
if (randomNumber == 0) {
|
APIgetRandomizedTrack() {
|
||||||
this.currentTrackSrcFile = "sounds/sound1.mp3";
|
return new Promise((resolve, reject) => {
|
||||||
} else if (randomNumber < 5) {
|
this.axios({
|
||||||
this.currentTrackSrcFile = "sounds/intro_short.mp3";
|
method: "get",
|
||||||
} else {
|
url: `${arne.hostname}/music/rand`,
|
||||||
this.currentTrackSrcFile = "sounds/intro_long.mp3";
|
responseType: "blob",
|
||||||
}
|
onDownloadProgress: (progressEvent) => {
|
||||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
let percentCompleted = Math.round(
|
||||||
this.$nextTick(() => {
|
(progressEvent.loaded * 100) / progressEvent.total
|
||||||
this.$refs.audioPlayer.currentTime = 0;
|
);
|
||||||
this.$refs.audioPlayer.play();
|
if (percentCompleted % 10 == 0) {
|
||||||
});
|
//Debug for slow downloading
|
||||||
},
|
//console.log(percentCompleted);
|
||||||
playWinningSound() {
|
}
|
||||||
this.$refs.audioPlayer.pause();
|
},
|
||||||
this.currentTrackSrcFile = "sounds/winning.mp3";
|
})
|
||||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
.then((response) => {
|
||||||
this.$nextTick(() => {
|
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||||
this.$refs.audioPlayer.currentTime = 0;
|
this.$store.dispatch("updateLocalPlaylist", mp3);
|
||||||
this.$refs.audioPlayer.play();
|
this.$nextTick(() => {
|
||||||
});
|
resolve();
|
||||||
},
|
});
|
||||||
APIgetRandomizedTrack() {
|
})
|
||||||
return new Promise((resolve, reject) => {
|
.catch(function(error) {
|
||||||
this.axios({
|
console.log("An error happened when fetching the track");
|
||||||
method: "get",
|
console.log(error);
|
||||||
url: `${arne.hostname}/music/rand`,
|
reject();
|
||||||
responseType: "blob",
|
});
|
||||||
onDownloadProgress: (progressEvent) => {
|
});
|
||||||
let percentCompleted = Math.round(
|
},
|
||||||
(progressEvent.loaded * 100) / progressEvent.total
|
APIgetRandomizedLowTrack() {
|
||||||
);
|
return new Promise((resolve, reject) => {
|
||||||
if (percentCompleted % 10 == 0) {
|
this.axios({
|
||||||
//Debug for slow downloading
|
method: "get",
|
||||||
//console.log(percentCompleted);
|
url: `${arne.hostname}/music/rand/low`,
|
||||||
}
|
responseType: "blob",
|
||||||
},
|
onDownloadProgress: (progressEvent) => {
|
||||||
})
|
let percentCompleted = Math.round(
|
||||||
.then((response) => {
|
(progressEvent.loaded * 100) / progressEvent.total
|
||||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
);
|
||||||
this.$store.dispatch("updateLocalPlaylist", mp3);
|
if (percentCompleted % 10 == 0) {
|
||||||
this.$nextTick(() => {
|
//Debug for slow downloading
|
||||||
resolve();
|
//console.log(percentCompleted);
|
||||||
});
|
}
|
||||||
})
|
},
|
||||||
.catch(function(error) {
|
})
|
||||||
console.log("An error happened when fetching the track");
|
.then((response) => {
|
||||||
console.log(error);
|
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||||
reject();
|
this.$store.dispatch("updateLocalPlaylist", mp3);
|
||||||
});
|
this.$nextTick(() => {
|
||||||
});
|
resolve();
|
||||||
},
|
});
|
||||||
APIaddToQue() {
|
})
|
||||||
return new Promise((resolve, reject) => {
|
.catch(function(error) {
|
||||||
this.axios({
|
console.log("An error happened when fetching the track");
|
||||||
method: "get",
|
console.log(error);
|
||||||
url: `${arne.hostname}/music/addQue`,
|
reject();
|
||||||
})
|
});
|
||||||
.then(() => {
|
});
|
||||||
resolve(false);
|
},
|
||||||
})
|
APIaddToQue() {
|
||||||
.catch(function(error) {
|
return new Promise((resolve, reject) => {
|
||||||
console.log(error);
|
this.axios({
|
||||||
reject();
|
method: "get",
|
||||||
});
|
url: `${arne.hostname}/music/addQue`,
|
||||||
});
|
})
|
||||||
},
|
.then(() => {
|
||||||
APIgetInfoAboutCurrentTrack() {
|
resolve(false);
|
||||||
return new Promise((resolve, reject) => {
|
})
|
||||||
this.axios({
|
.catch(function(error) {
|
||||||
method: "get",
|
console.log(error);
|
||||||
url: `${arne.hostname}/music/info`,
|
reject();
|
||||||
})
|
});
|
||||||
.then((response) => {
|
});
|
||||||
let gameInfoObject = {
|
},
|
||||||
game: response.data.Game,
|
APIgetInfoAboutCurrentTrack() {
|
||||||
track: response.data.Song.replace(".mp3", ""),
|
return new Promise((resolve, reject) => {
|
||||||
songNo: response.data.SongNo,
|
this.axios({
|
||||||
};
|
method: "get",
|
||||||
this.$store.dispatch("setCurrentGame", gameInfoObject.game);
|
url: `${arne.hostname}/music/info`,
|
||||||
this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
|
})
|
||||||
resolve(false);
|
.then((response) => {
|
||||||
})
|
let gameInfoObject = {
|
||||||
.catch(function(error) {
|
game: response.data.Game,
|
||||||
console.log(error);
|
track: response.data.Song.replace(".mp3", ""),
|
||||||
reject();
|
songNo: response.data.SongNo,
|
||||||
});
|
};
|
||||||
});
|
this.$store.dispatch("setCurrentGame", gameInfoObject.game);
|
||||||
},
|
this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
|
||||||
APIgetPlaylistHistory() {
|
resolve(false);
|
||||||
return new Promise((resolve, reject) => {
|
})
|
||||||
this.axios({
|
.catch(function(error) {
|
||||||
method: "get",
|
console.log(error);
|
||||||
url: `${arne.hostname}/music/list`,
|
reject();
|
||||||
})
|
});
|
||||||
.then((response) => {
|
});
|
||||||
let tracklistArray = response.data;
|
},
|
||||||
this.$store.dispatch("updatePlaylistHistory", tracklistArray);
|
APIgetPlaylistHistory() {
|
||||||
resolve();
|
return new Promise((resolve, reject) => {
|
||||||
})
|
this.axios({
|
||||||
.catch(function(error) {
|
method: "get",
|
||||||
console.log(error);
|
url: `${arne.hostname}/music/list`,
|
||||||
reject();
|
})
|
||||||
});
|
.then((response) => {
|
||||||
});
|
let tracklistArray = response.data;
|
||||||
},
|
this.$store.dispatch("updatePlaylistHistory", tracklistArray);
|
||||||
APIplaySpecificTrack(trackNumber) {
|
resolve();
|
||||||
return new Promise((resolve, reject) => {
|
})
|
||||||
this.axios({
|
.catch(function(error) {
|
||||||
method: "get",
|
console.log(error);
|
||||||
url: `${arne.hostname}/music?song=${trackNumber}`,
|
reject();
|
||||||
responseType: "blob",
|
});
|
||||||
})
|
});
|
||||||
.then((response) => {
|
},
|
||||||
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
APIplaySpecificTrack(trackNumber) {
|
||||||
this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
|
return new Promise((resolve, reject) => {
|
||||||
this.$nextTick(() => {
|
this.axios({
|
||||||
this.$refs.audioPlayer.play();
|
method: "get",
|
||||||
resolve();
|
url: `${arne.hostname}/music?song=${trackNumber}`,
|
||||||
});
|
responseType: "blob",
|
||||||
})
|
})
|
||||||
.catch(function(error) {
|
.then((response) => {
|
||||||
console.log(error);
|
let mp3 = new Blob([response.data], { type: "audio/mp3" });
|
||||||
reject();
|
this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
|
||||||
});
|
this.$nextTick(() => {
|
||||||
});
|
this.$refs.audioPlayer.play();
|
||||||
},
|
resolve();
|
||||||
trackHasEnded() {
|
});
|
||||||
if (this.specialTrackIsPlaying) {
|
})
|
||||||
this.$store.dispatch("setSpecialTrackIsPlaying", false);
|
.catch(function(error) {
|
||||||
return 0;
|
console.log(error);
|
||||||
}
|
reject();
|
||||||
if (!this.stopAfterCurrent) {
|
});
|
||||||
this.randomizeTrack();
|
});
|
||||||
}
|
},
|
||||||
},
|
trackHasEnded() {
|
||||||
},
|
if (this.specialTrackIsPlaying) {
|
||||||
async mounted() {
|
this.$store.dispatch("setSpecialTrackIsPlaying", false);
|
||||||
await this.APIgetPlaylistHistory();
|
return 0;
|
||||||
},
|
}
|
||||||
|
if (!this.stopAfterCurrent) {
|
||||||
|
this.randomizeTrack();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
await this.APIgetPlaylistHistory();
|
||||||
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
footer {
|
footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioAndButtonsDiv {
|
.audioAndButtonsDiv {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
margin-right: 1vh;
|
margin-right: 1vh;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv {
|
.audioButtonsDiv {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 2vh;
|
margin-bottom: 2vh;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioButtonsDiv button:nth-child(1) {
|
.audioButtonsDiv button:nth-child(1) {
|
||||||
margin-right: 3vw;
|
margin-right: 3vw;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv button:nth-child(2) {
|
.audioButtonsDiv button:nth-child(2) {
|
||||||
margin-right: 25vw;
|
margin-right: 25vw;
|
||||||
width: 220px;
|
width: 220px;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv .bigButton {
|
.audioButtonsDiv .bigButton {
|
||||||
height: 7vh;
|
height: 7vh;
|
||||||
}
|
}
|
||||||
.disabled {
|
.disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioDiv {
|
.audioDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.audioDiv audio {
|
.audioDiv audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-panel {
|
audio::-webkit-media-controls-panel {
|
||||||
background-color: rgb(185, 185, 185);
|
background-color: rgb(185, 185, 185);
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-current-time-display {
|
audio::-webkit-media-controls-current-time-display {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-time-remaining-display {
|
audio::-webkit-media-controls-time-remaining-display {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
font-size: 4em;
|
font-size: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 1000px) {
|
@media only screen and (max-width: 1000px) {
|
||||||
footer {
|
footer {
|
||||||
position: static;
|
position: static;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioAndButtonsDiv {
|
.audioAndButtonsDiv {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv {
|
.audioButtonsDiv {
|
||||||
margin-bottom: 2vw;
|
margin-bottom: 2vw;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioButtonsDiv button:nth-child(1) {
|
.audioButtonsDiv button:nth-child(1) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv button:nth-child(2) {
|
.audioButtonsDiv button:nth-child(2) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
width: 50vw;
|
width: 50vw;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
.audioButtonsDiv .bigButton {
|
.audioButtonsDiv .bigButton {
|
||||||
height: 22vw;
|
height: 22vw;
|
||||||
}
|
}
|
||||||
.disabled {
|
.disabled {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.audioDiv {
|
.audioDiv {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.audioDiv audio {
|
.audioDiv audio {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-panel {
|
audio::-webkit-media-controls-panel {
|
||||||
background-color: rgb(185, 185, 185);
|
background-color: rgb(185, 185, 185);
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-current-time-display {
|
audio::-webkit-media-controls-current-time-display {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
audio::-webkit-media-controls-time-remaining-display {
|
audio::-webkit-media-controls-time-remaining-display {
|
||||||
color: rgb(0, 0, 0);
|
color: rgb(0, 0, 0);
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -5,212 +5,219 @@ import axios from "axios";
|
|||||||
import VueAxios from "vue-axios";
|
import VueAxios from "vue-axios";
|
||||||
|
|
||||||
const store = createStore({
|
const store = createStore({
|
||||||
state() {
|
state() {
|
||||||
return {
|
return {
|
||||||
currentGame: "",
|
currentGame: "",
|
||||||
currentTrack: ``,
|
currentTrack: ``,
|
||||||
currentTrackHidden: false,
|
currentTrackHidden: false,
|
||||||
currentlyLoadingTrack: "",
|
currentlyLoadingTrack: "",
|
||||||
specialTrackIsPlaying: false,
|
specialTrackIsPlaying: false,
|
||||||
someoneHasWon: false,
|
someoneHasWon: false,
|
||||||
winningScore: 20,
|
winningScore: 20,
|
||||||
roundStarted: false,
|
roundStarted: false,
|
||||||
reloadGamesList: false,
|
reloadGamesList: false,
|
||||||
listOfPlayers: [],
|
listOfPlayers: [],
|
||||||
localPlaylist: [],
|
localPlaylist: [],
|
||||||
playlistHistory: [
|
playlistHistory: [
|
||||||
{
|
{
|
||||||
SongNo: "",
|
SongNo: "",
|
||||||
Game: "",
|
Game: "",
|
||||||
Song: "",
|
Song: "",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
/* Stats */
|
/* Stats */
|
||||||
howManyGames: 0,
|
howManyGames: 0,
|
||||||
/* Options */
|
/* Options */
|
||||||
stopAfterCurrent: true,
|
stopAfterCurrent: true,
|
||||||
hideNextTrack: true,
|
hideNextTrack: true,
|
||||||
};
|
lowPlayed: false,
|
||||||
},
|
};
|
||||||
mutations: {
|
},
|
||||||
setCurrentGame(state, payload) {
|
mutations: {
|
||||||
state.currentGame = payload;
|
setCurrentGame(state, payload) {
|
||||||
},
|
state.currentGame = payload;
|
||||||
setCurrentTrack(state, payload) {
|
},
|
||||||
state.currentTrack = payload;
|
setCurrentTrack(state, payload) {
|
||||||
},
|
state.currentTrack = payload;
|
||||||
setCurrentTrackHidden(state, payload) {
|
},
|
||||||
state.currentTrackHidden = payload;
|
setCurrentTrackHidden(state, payload) {
|
||||||
},
|
state.currentTrackHidden = payload;
|
||||||
setCurrentlyLoadingTrack(state, payload) {
|
},
|
||||||
state.currentlyLoadingTrack = payload;
|
setCurrentlyLoadingTrack(state, payload) {
|
||||||
},
|
state.currentlyLoadingTrack = payload;
|
||||||
setSpecialTrackIsPlaying(state, payload) {
|
},
|
||||||
state.specialTrackIsPlaying = payload;
|
setSpecialTrackIsPlaying(state, payload) {
|
||||||
},
|
state.specialTrackIsPlaying = payload;
|
||||||
setSomeoneHasWon(state, payload) {
|
},
|
||||||
state.someoneHasWon = payload;
|
setSomeoneHasWon(state, payload) {
|
||||||
},
|
state.someoneHasWon = payload;
|
||||||
setWinningScore(state, payload) {
|
},
|
||||||
state.winningScore += payload;
|
setWinningScore(state, payload) {
|
||||||
},
|
state.winningScore += payload;
|
||||||
setRoundStarted(state, payload) {
|
},
|
||||||
state.roundStarted = payload;
|
setRoundStarted(state, payload) {
|
||||||
},
|
state.roundStarted = payload;
|
||||||
updateListOfPlayers(state, payload) {
|
},
|
||||||
state.listOfPlayers = payload;
|
updateListOfPlayers(state, payload) {
|
||||||
},
|
state.listOfPlayers = payload;
|
||||||
changePlayerScore(state, payload) {
|
},
|
||||||
state.listOfPlayers[payload.indexOfPlayer].score += payload.scoreToChange;
|
changePlayerScore(state, payload) {
|
||||||
},
|
state.listOfPlayers[payload.indexOfPlayer].score += payload.scoreToChange;
|
||||||
changePlayerWelcomed(state, payload) {
|
},
|
||||||
state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
|
changePlayerWelcomed(state, payload) {
|
||||||
},
|
state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
|
||||||
changePlayerProfile(state, payload) {
|
},
|
||||||
state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
|
changePlayerProfile(state, payload) {
|
||||||
},
|
state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
|
||||||
resetPlayerScore(state, payload) {
|
},
|
||||||
state.listOfPlayers = payload;
|
resetPlayerScore(state, payload) {
|
||||||
},
|
state.listOfPlayers = payload;
|
||||||
resetPlayerWelcomed(state, payload) {
|
},
|
||||||
state.listOfPlayers = payload;
|
resetPlayerWelcomed(state, payload) {
|
||||||
},
|
state.listOfPlayers = payload;
|
||||||
updateLocalPlaylist(state, payload) {
|
},
|
||||||
state.localPlaylist.push(payload);
|
updateLocalPlaylist(state, payload) {
|
||||||
},
|
state.localPlaylist.push(payload);
|
||||||
updatePlaylistHistory(state, payload) {
|
},
|
||||||
state.playlistHistory = payload;
|
updatePlaylistHistory(state, payload) {
|
||||||
},
|
state.playlistHistory = payload;
|
||||||
updateHowManyGames(state, payload) {
|
},
|
||||||
state.howManyGames = payload;
|
updateHowManyGames(state, payload) {
|
||||||
},
|
state.howManyGames = payload;
|
||||||
reloadGamesList(state, payload) {
|
},
|
||||||
state.reloadGamesList = payload;
|
reloadGamesList(state, payload) {
|
||||||
},
|
state.reloadGamesList = payload;
|
||||||
updateStopAfterCurrent(state, payload) {
|
},
|
||||||
state.stopAfterCurrent = payload;
|
updateStopAfterCurrent(state, payload) {
|
||||||
},
|
state.stopAfterCurrent = payload;
|
||||||
updateHideNextTitle(state, payload) {
|
},
|
||||||
state.hideNextTrack = payload;
|
updateHideNextTitle(state, payload) {
|
||||||
},
|
state.hideNextTrack = payload;
|
||||||
},
|
},
|
||||||
actions: {
|
updateLowPlayed(state, payload) {
|
||||||
setCurrentGame(context, payload) {
|
state.lowPlayed = payload;
|
||||||
context.commit("setCurrentGame", payload);
|
},
|
||||||
},
|
},
|
||||||
setCurrentTrack(context, payload) {
|
actions: {
|
||||||
context.commit("setCurrentTrack", payload);
|
setCurrentGame(context, payload) {
|
||||||
},
|
context.commit("setCurrentGame", payload);
|
||||||
setCurrentTrackHidden(context, payload) {
|
},
|
||||||
context.commit("setCurrentTrackHidden", payload);
|
setCurrentTrack(context, payload) {
|
||||||
},
|
context.commit("setCurrentTrack", payload);
|
||||||
setCurrentlyLoadingTrack(context, payload) {
|
},
|
||||||
context.commit("setCurrentlyLoadingTrack", payload);
|
setCurrentTrackHidden(context, payload) {
|
||||||
},
|
context.commit("setCurrentTrackHidden", payload);
|
||||||
setSpecialTrackIsPlaying(context, payload) {
|
},
|
||||||
context.commit("setSpecialTrackIsPlaying", payload);
|
setCurrentlyLoadingTrack(context, payload) {
|
||||||
},
|
context.commit("setCurrentlyLoadingTrack", payload);
|
||||||
setSomeoneHasWon(context, payload) {
|
},
|
||||||
context.commit("someoneHasWon", payload);
|
setSpecialTrackIsPlaying(context, payload) {
|
||||||
},
|
context.commit("setSpecialTrackIsPlaying", payload);
|
||||||
setWinningScore(context, payload) {
|
},
|
||||||
context.commit("setWinningScore", payload);
|
setSomeoneHasWon(context, payload) {
|
||||||
},
|
context.commit("someoneHasWon", payload);
|
||||||
setRoundStarted(context, payload) {
|
},
|
||||||
context.commit("setRoundStarted", payload);
|
setWinningScore(context, payload) {
|
||||||
},
|
context.commit("setWinningScore", payload);
|
||||||
removePlayer(context, payload) {
|
},
|
||||||
let newPlayerList = this.state.listOfPlayers.filter(
|
setRoundStarted(context, payload) {
|
||||||
(player) => player.playerName != payload
|
context.commit("setRoundStarted", payload);
|
||||||
);
|
},
|
||||||
context.commit("updateListOfPlayers", newPlayerList);
|
removePlayer(context, payload) {
|
||||||
},
|
let newPlayerList = this.state.listOfPlayers.filter(
|
||||||
addNewPlayer(context, payload) {
|
(player) => player.playerName != payload
|
||||||
let newPlayerList = this.state.listOfPlayers;
|
);
|
||||||
let newPlayer = {
|
context.commit("updateListOfPlayers", newPlayerList);
|
||||||
playerName: payload,
|
},
|
||||||
score: 0,
|
addNewPlayer(context, payload) {
|
||||||
welcomed: false,
|
let newPlayerList = this.state.listOfPlayers;
|
||||||
profile: "characters/noCharacter.png",
|
let newPlayer = {
|
||||||
};
|
playerName: payload,
|
||||||
newPlayerList.push(newPlayer);
|
score: 0,
|
||||||
context.commit("updateListOfPlayers", newPlayerList);
|
welcomed: false,
|
||||||
},
|
profile: "characters/noCharacter.png",
|
||||||
changePlayerScore(context, payload) {
|
};
|
||||||
let copyOfPlayerList = this.state.listOfPlayers;
|
newPlayerList.push(newPlayer);
|
||||||
let indexOfPlayer = copyOfPlayerList.findIndex(
|
context.commit("updateListOfPlayers", newPlayerList);
|
||||||
(player) => player.playerName === payload.playerName
|
},
|
||||||
);
|
changePlayerScore(context, payload) {
|
||||||
let scoreToChange = payload.score;
|
let copyOfPlayerList = this.state.listOfPlayers;
|
||||||
context.commit("changePlayerScore", {
|
let indexOfPlayer = copyOfPlayerList.findIndex(
|
||||||
indexOfPlayer,
|
(player) => player.playerName === payload.playerName
|
||||||
scoreToChange,
|
);
|
||||||
});
|
let scoreToChange = payload.score;
|
||||||
},
|
context.commit("changePlayerScore", {
|
||||||
changePlayerWelcomed(context, payload) {
|
indexOfPlayer,
|
||||||
let copyOfPlayerList = this.state.listOfPlayers;
|
scoreToChange,
|
||||||
let indexOfPlayer = copyOfPlayerList.findIndex(
|
});
|
||||||
(player) => player.playerName === payload.playerName
|
},
|
||||||
);
|
changePlayerWelcomed(context, payload) {
|
||||||
let playerWelcomeTrueOrFalse = payload.welcomeSet;
|
let copyOfPlayerList = this.state.listOfPlayers;
|
||||||
context.commit("changePlayerWelcomed", {
|
let indexOfPlayer = copyOfPlayerList.findIndex(
|
||||||
indexOfPlayer,
|
(player) => player.playerName === payload.playerName
|
||||||
playerWelcomeTrueOrFalse,
|
);
|
||||||
});
|
let playerWelcomeTrueOrFalse = payload.welcomeSet;
|
||||||
},
|
context.commit("changePlayerWelcomed", {
|
||||||
changePlayerProfile(context, payload) {
|
indexOfPlayer,
|
||||||
let copyOfPlayerList = this.state.listOfPlayers;
|
playerWelcomeTrueOrFalse,
|
||||||
let indexOfPlayer = copyOfPlayerList.findIndex(
|
});
|
||||||
(player) => player.playerName === payload.playerName
|
},
|
||||||
);
|
changePlayerProfile(context, payload) {
|
||||||
let profileSrc = payload.profile;
|
let copyOfPlayerList = this.state.listOfPlayers;
|
||||||
context.commit("changePlayerProfile", {
|
let indexOfPlayer = copyOfPlayerList.findIndex(
|
||||||
indexOfPlayer,
|
(player) => player.playerName === payload.playerName
|
||||||
profileSrc,
|
);
|
||||||
});
|
let profileSrc = payload.profile;
|
||||||
},
|
context.commit("changePlayerProfile", {
|
||||||
resetPlayerScore(context) {
|
indexOfPlayer,
|
||||||
/* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
|
profileSrc,
|
||||||
let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
|
});
|
||||||
for (let i = 0; i < copyOfPlayerList.length; i++) {
|
},
|
||||||
copyOfPlayerList[i].score = 0;
|
resetPlayerScore(context) {
|
||||||
}
|
/* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
|
||||||
context.commit("resetPlayerScore", copyOfPlayerList);
|
let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
|
||||||
},
|
for (let i = 0; i < copyOfPlayerList.length; i++) {
|
||||||
resetPlayerWelcomed(context) {
|
copyOfPlayerList[i].score = 0;
|
||||||
/* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
|
}
|
||||||
let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
|
context.commit("resetPlayerScore", copyOfPlayerList);
|
||||||
for (let i = 0; i < copyOfPlayerList.length; i++) {
|
},
|
||||||
copyOfPlayerList[i].welcomed = false;
|
resetPlayerWelcomed(context) {
|
||||||
}
|
/* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
|
||||||
context.commit("resetPlayerWelcomed", copyOfPlayerList);
|
let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
|
||||||
},
|
for (let i = 0; i < copyOfPlayerList.length; i++) {
|
||||||
updateLocalPlaylist(context, payload) {
|
copyOfPlayerList[i].welcomed = false;
|
||||||
context.commit("updateLocalPlaylist", payload);
|
}
|
||||||
},
|
context.commit("resetPlayerWelcomed", copyOfPlayerList);
|
||||||
updatePlaylistHistory(context, payload) {
|
},
|
||||||
context.commit("updatePlaylistHistory", payload);
|
updateLocalPlaylist(context, payload) {
|
||||||
},
|
context.commit("updateLocalPlaylist", payload);
|
||||||
updateHowManyGames(context, payload) {
|
},
|
||||||
context.commit("updateHowManyGames", payload);
|
updatePlaylistHistory(context, payload) {
|
||||||
},
|
context.commit("updatePlaylistHistory", payload);
|
||||||
reloadGamesList(context, payload) {
|
},
|
||||||
context.commit("reloadGamesList", payload);
|
updateHowManyGames(context, payload) {
|
||||||
},
|
context.commit("updateHowManyGames", payload);
|
||||||
updateStopAfterCurrent(context, payload) {
|
},
|
||||||
context.commit("updateStopAfterCurrent", payload);
|
reloadGamesList(context, payload) {
|
||||||
},
|
context.commit("reloadGamesList", payload);
|
||||||
updateHideNextTitle(context, payload) {
|
},
|
||||||
context.commit("updateHideNextTitle", payload);
|
updateStopAfterCurrent(context, payload) {
|
||||||
},
|
context.commit("updateStopAfterCurrent", payload);
|
||||||
},
|
},
|
||||||
|
updateHideNextTitle(context, payload) {
|
||||||
|
context.commit("updateHideNextTitle", payload);
|
||||||
|
},
|
||||||
|
updateLowPlayed(context, payload) {
|
||||||
|
context.commit("updateLowPlayed", payload);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
getters: {
|
getters: {
|
||||||
/* Empty ATM */
|
/* Empty ATM */
|
||||||
/* getListOfPlayers: (state) => {
|
/* getListOfPlayers: (state) => {
|
||||||
return state.listOfPlayers;
|
return state.listOfPlayers;
|
||||||
}, */
|
}, */
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const app = createApp(App);
|
const app = createApp(App);
|
||||||
|
|||||||
Reference in New Issue
Block a user