Added option to not add played to database
Added Search for inspiration Added song for match point
This commit is contained in:
@@ -1,31 +1,43 @@
|
||||
<template>
|
||||
<div class="inspirationDiv">
|
||||
<div class="inspirationTitle">
|
||||
<h1>Inspiration</h1>
|
||||
</div>
|
||||
<transition-group
|
||||
tag="ul"
|
||||
name="inspirationList"
|
||||
class="inspirationList"
|
||||
ref="inspirationList"
|
||||
>
|
||||
<li v-for="game in allGamesList" class="inspirationEntry" :key="game">
|
||||
{{ game }}
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
<div class="inspirationDiv">
|
||||
<div class="inspirationHeader">
|
||||
<div class="inspirationTitle">
|
||||
<h1>Inspiration</h1>
|
||||
</div>
|
||||
<div class="searchInput">
|
||||
<input
|
||||
v-model="searchInputText"
|
||||
type="text"
|
||||
@input="searchGame()"
|
||||
ref="inputField"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group
|
||||
tag="ul"
|
||||
name="inspirationList"
|
||||
class="inspirationList"
|
||||
ref="inspirationList"
|
||||
>
|
||||
<li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
|
||||
{{ game }}
|
||||
</li>
|
||||
</transition-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import arne from '../../arne.js'
|
||||
import {mapState} from "vuex";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
allGamesList: [],
|
||||
scrollDown: true,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
allGamesList: [],
|
||||
showingGamesList: [],
|
||||
scrollDown: true,
|
||||
searchInputText: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["reloadGamesList"]),
|
||||
},
|
||||
@@ -37,78 +49,117 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
scrollInspiration() {
|
||||
let inspirationListDOM = document.querySelector(".inspirationList");
|
||||
let scrollSpeed = 1;
|
||||
let currentScrollLocation = 0;
|
||||
methods: {
|
||||
searchGame() {
|
||||
this.showingGamesList = [];
|
||||
for (const game of this.allGamesList) {
|
||||
if (this.searchInputText === "" ||
|
||||
game.toLowerCase().replace(/\s/g, "")
|
||||
.includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
|
||||
this.showingGamesList.push(game);
|
||||
}
|
||||
}
|
||||
if (this.searchInputText.replace(/\s/g, "") !== "") {
|
||||
this.showingGamesList.sort((n1, n2) => {
|
||||
if (n1 > n2) {
|
||||
return 1;
|
||||
}
|
||||
if (n1 < n2) {
|
||||
return -1;
|
||||
}
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
},
|
||||
scrollInspiration() {
|
||||
let inspirationListDOM = document.querySelector(".inspirationList");
|
||||
let scrollSpeed = 1;
|
||||
let currentScrollLocation = 0;
|
||||
|
||||
currentScrollLocation = inspirationListDOM.scrollTop;
|
||||
this.scrollDown
|
||||
? inspirationListDOM.scrollBy(0, scrollSpeed)
|
||||
: inspirationListDOM.scrollBy(0, -scrollSpeed);
|
||||
currentScrollLocation = inspirationListDOM.scrollTop;
|
||||
this.scrollDown
|
||||
? inspirationListDOM.scrollBy(0, scrollSpeed)
|
||||
: inspirationListDOM.scrollBy(0, -scrollSpeed);
|
||||
|
||||
if (currentScrollLocation === inspirationListDOM.scrollTop) {
|
||||
this.scrollDown = !this.scrollDown;
|
||||
}
|
||||
},
|
||||
reloadGames() {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/all`,
|
||||
})
|
||||
.then((response) => {
|
||||
this.allGamesList = response.data;
|
||||
this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reloadGames();
|
||||
window.setInterval(() => {
|
||||
this.scrollInspiration();
|
||||
}, 40);
|
||||
},
|
||||
if (currentScrollLocation === inspirationListDOM.scrollTop) {
|
||||
this.scrollDown = !this.scrollDown;
|
||||
}
|
||||
},
|
||||
reloadGames() {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/all`,
|
||||
})
|
||||
.then((response) => {
|
||||
this.allGamesList = response.data;
|
||||
this.searchInputText = "";
|
||||
this.searchGame();
|
||||
this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.reloadGames();
|
||||
window.setInterval(() => {
|
||||
this.scrollInspiration();
|
||||
}, 40);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.inspirationDiv {
|
||||
width: 38vw;
|
||||
height: 20vh;
|
||||
color: white;
|
||||
width: 38vw;
|
||||
height: 20vh;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.inspirationTitle {
|
||||
display: flex;
|
||||
background-color: #333;
|
||||
height: 5vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
display: flex;
|
||||
flex: auto;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.inspirationHeader {
|
||||
display: flex;
|
||||
background-color: #333;
|
||||
height: 5vh;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.inspirationList {
|
||||
display: inline-block;
|
||||
background-color: rgb(66, 66, 66);
|
||||
width: 38vw;
|
||||
height: 22vh;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
background-color: rgb(66, 66, 66);
|
||||
width: 38vw;
|
||||
height: 22vh;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.inspirationEntry {
|
||||
width: 100%;
|
||||
max-width: 38vw;
|
||||
padding: 0.3vh 0.8vh;
|
||||
font-size: 1.2rem;
|
||||
width: 100%;
|
||||
max-width: 38vw;
|
||||
padding: 0.3vh 0.8vh;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.inspirationDiv {
|
||||
display: none;
|
||||
}
|
||||
.inspirationDiv {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,109 +1,111 @@
|
||||
<template>
|
||||
<div class="extraButtonsDiv">
|
||||
<button @click="resetPlaylist">Reset playlist</button>
|
||||
<button @click="resetPoints">Reset points</button>
|
||||
<button @click="syncGames">Sync games</button>
|
||||
<button @click="startSoundTest">Sound test</button>
|
||||
</div>
|
||||
<div class="extraButtonsDiv">
|
||||
<button @click="resetPlaylist">Reset playlist</button>
|
||||
<button @click="resetPoints">Reset points</button>
|
||||
<button @click="syncGames">Sync games</button>
|
||||
<button @click="startSoundTest">Sound test</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import arne from '../../arne.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
emptyPlaylist: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async resetPoints() {
|
||||
this.$store.dispatch("resetPlayerScore");
|
||||
this.$store.dispatch("resetPlayerWelcomed");
|
||||
this.$store.dispatch("setRoundStarted", false);
|
||||
},
|
||||
async resetPlaylist() {
|
||||
await this.APIresetPlaylist();
|
||||
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
},
|
||||
async syncGames() {
|
||||
await this.APIsyncGames();
|
||||
await this.APIresetPlaylist();
|
||||
this.$store.dispatch("resetPlayerScore");
|
||||
this.$store.dispatch("resetPlayerWelcomed");
|
||||
this.$store.dispatch("setRoundStarted", false);
|
||||
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
this.$store.dispatch("reloadGamesList", true);
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$emit("start-sound-test");
|
||||
},
|
||||
APIresetPlaylist() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/reset`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIsyncGames() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/sync`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
emptyPlaylist: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async resetPoints() {
|
||||
this.$store.dispatch("resetPlayerScore");
|
||||
this.$store.dispatch("resetPlayerWelcomed");
|
||||
this.$store.dispatch("resetPlayerMatchPoint");
|
||||
this.$store.dispatch("setRoundStarted", false);
|
||||
},
|
||||
async resetPlaylist() {
|
||||
await this.APIresetPlaylist();
|
||||
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
},
|
||||
async syncGames() {
|
||||
await this.APIsyncGames();
|
||||
await this.APIresetPlaylist();
|
||||
this.$store.dispatch("resetPlayerScore");
|
||||
this.$store.dispatch("resetPlayerWelcomed");
|
||||
this.$store.dispatch("resetPlayerMatchPoint");
|
||||
this.$store.dispatch("setRoundStarted", false);
|
||||
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
|
||||
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
|
||||
this.$store.dispatch("setCurrentTrackHidden", false);
|
||||
this.$store.dispatch("reloadGamesList", true);
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$emit("start-sound-test");
|
||||
},
|
||||
APIresetPlaylist() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/reset`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIsyncGames() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/sync`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve();
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.extraButtonsDiv {
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
display: flex;
|
||||
margin-top: 2px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 65%;
|
||||
margin-right: 0.4vw;
|
||||
border-radius: 10px;
|
||||
border-width: 1px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 65%;
|
||||
margin-right: 0.4vw;
|
||||
border-radius: 10px;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.extraButtonsDiv {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
.extraButtonsDiv {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 51vw;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
button {
|
||||
width: 51vw;
|
||||
height: 40px;
|
||||
margin-bottom: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,46 +1,46 @@
|
||||
<template>
|
||||
<div class="playersWindowDiv">
|
||||
<div @click="toggleDisplay" class="playerListTitle">
|
||||
<img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" />
|
||||
<img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
|
||||
<h1>Players</h1>
|
||||
<img
|
||||
src="person_add_alt_1-black-36dp.svg"
|
||||
alt="addPlayer"
|
||||
class="addPlayerIMG"
|
||||
@click="toggleNewPlayerInput()"
|
||||
/>
|
||||
</div>
|
||||
<transition-group tag="div" v-if="display" name="playerList" class="playerList">
|
||||
<div class="player" v-for="player in listOfPlayers" :key="player.playerName">
|
||||
<p>{{ player.playerName }}: {{ player.score }}</p>
|
||||
<div class="playersWindowDiv">
|
||||
<div @click="toggleDisplay" class="playerListTitle">
|
||||
<img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" />
|
||||
<img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
|
||||
<h1>Players</h1>
|
||||
<img
|
||||
class="profilePicture"
|
||||
:src="player.profile"
|
||||
@click="openCharacterModal(player.playerName)"
|
||||
src="person_add_alt_1-black-36dp.svg"
|
||||
alt="addPlayer"
|
||||
class="addPlayerIMG"
|
||||
@click="toggleNewPlayerInput()"
|
||||
/>
|
||||
<button @click="changeScore(player.playerName, 1)">+1</button>
|
||||
<button @click="changeScore(player.playerName, -1)">-1</button>
|
||||
<img
|
||||
src="person_remove-black-36dp.svg"
|
||||
@click="removePlayer(player.playerName)"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="newPlayerInput" v-if="showNewPlayerInput === true">
|
||||
<input
|
||||
v-model="newPlayerInputText"
|
||||
type="text"
|
||||
@keypress.enter="addNewPlayer()"
|
||||
ref="inputField"
|
||||
placeholder="Player name"
|
||||
/>
|
||||
<button @click="addNewPlayer()">Add</button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<winning-modal ref="winningModal"></winning-modal>
|
||||
<character-modal ref="characterModal"></character-modal>
|
||||
</div>
|
||||
</div>
|
||||
<transition-group tag="div" v-if="display" name="playerList" class="playerList">
|
||||
<div class="player" v-for="player in listOfPlayers" :key="player.playerName">
|
||||
<p>{{ player.playerName }}: {{ player.score }}</p>
|
||||
<img
|
||||
class="profilePicture"
|
||||
:src="player.profile"
|
||||
@click="openCharacterModal(player.playerName)"
|
||||
/>
|
||||
<button @click="changeScore(player.playerName, 1)">+1</button>
|
||||
<button @click="changeScore(player.playerName, -1)">-1</button>
|
||||
<img
|
||||
src="person_remove-black-36dp.svg"
|
||||
@click="removePlayer(player.playerName)"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="newPlayerInput" v-if="showNewPlayerInput === true">
|
||||
<input
|
||||
v-model="newPlayerInputText"
|
||||
type="text"
|
||||
@keypress.enter="addNewPlayer()"
|
||||
ref="inputField"
|
||||
placeholder="Player name"
|
||||
/>
|
||||
<button @click="addNewPlayer()">Add</button>
|
||||
</div>
|
||||
</transition-group>
|
||||
<winning-modal ref="winningModal"></winning-modal>
|
||||
<character-modal ref="characterModal"></character-modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -48,298 +48,307 @@ import { mapState } from "vuex";
|
||||
import winningModal from "../items/winningModal.vue";
|
||||
import characterModal from "../items/characterModal.vue";
|
||||
export default {
|
||||
components: {
|
||||
winningModal,
|
||||
characterModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showNewPlayerInput: false,
|
||||
newPlayerInputText: "",
|
||||
display: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["listOfPlayers", "winningScore"]),
|
||||
},
|
||||
methods: {
|
||||
removePlayer(playerName) {
|
||||
this.$store.dispatch("removePlayer", playerName);
|
||||
},
|
||||
newPlayerValidation() {
|
||||
/* Validation variables */
|
||||
let errors = [];
|
||||
let newName = this.newPlayerInputText;
|
||||
components: {
|
||||
winningModal,
|
||||
characterModal,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showNewPlayerInput: false,
|
||||
newPlayerInputText: "",
|
||||
display: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["listOfPlayers", "winningScore"]),
|
||||
},
|
||||
methods: {
|
||||
removePlayer(playerName) {
|
||||
this.$store.dispatch("removePlayer", playerName);
|
||||
},
|
||||
newPlayerValidation() {
|
||||
/* Validation variables */
|
||||
let errors = [];
|
||||
let newName = this.newPlayerInputText;
|
||||
|
||||
/* Check for empty value */
|
||||
if (newName.trim() === "") {
|
||||
errors.push("No player name was entered");
|
||||
}
|
||||
|
||||
/* Prepare data of players and check for already entered ones */
|
||||
let copyOfPlayerList = this.listOfPlayers;
|
||||
let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
|
||||
if (arrayOfPlayers.includes(newName.toLowerCase())) {
|
||||
errors.push("This player already exists");
|
||||
}
|
||||
|
||||
/* Check amount of players */
|
||||
if (arrayOfPlayers.length > 6) {
|
||||
errors.push("Too many players already exists");
|
||||
}
|
||||
|
||||
/* If everything went fine, return an empty */
|
||||
return errors;
|
||||
},
|
||||
addNewPlayer() {
|
||||
let errors = this.newPlayerValidation();
|
||||
if (errors.length === 0) {
|
||||
this.$store.dispatch("addNewPlayer", this.newPlayerInputText);
|
||||
this.newPlayerInputText = "";
|
||||
} else {
|
||||
console.log(errors);
|
||||
}
|
||||
},
|
||||
toggleNewPlayerInput() {
|
||||
this.showNewPlayerInput = !this.showNewPlayerInput;
|
||||
if (this.showNewPlayerInput === true) {
|
||||
this.$nextTick(() => this.$refs.inputField.focus());
|
||||
}
|
||||
},
|
||||
changeScore(playerName, score) {
|
||||
let payload = {
|
||||
playerName: playerName,
|
||||
score: score,
|
||||
};
|
||||
this.$store.dispatch("changePlayerScore", payload);
|
||||
for (let i = 0; i < this.listOfPlayers.length; i++) {
|
||||
/* If a player received their first point */
|
||||
if (this.listOfPlayers[i].score == 1 && this.listOfPlayers[i].welcomed === false) {
|
||||
let payload = {
|
||||
playerName: playerName,
|
||||
welcomeSet: true,
|
||||
};
|
||||
this.$store.dispatch("changePlayerWelcomed", payload);
|
||||
this.$emit("play-welcome-sound");
|
||||
/* Check for empty value */
|
||||
if (newName.trim() === "") {
|
||||
errors.push("No player name was entered");
|
||||
}
|
||||
/* If a player won */
|
||||
if (this.listOfPlayers[i].score === this.winningScore) {
|
||||
this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
|
||||
this.$emit("play-winning-sound");
|
||||
|
||||
/* Prepare data of players and check for already entered ones */
|
||||
let copyOfPlayerList = this.listOfPlayers;
|
||||
let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
|
||||
if (arrayOfPlayers.includes(newName.toLowerCase())) {
|
||||
errors.push("This player already exists");
|
||||
}
|
||||
}
|
||||
},
|
||||
openCharacterModal(playerName) {
|
||||
this.$refs.characterModal.openModal(playerName);
|
||||
},
|
||||
getProfileSrc(profileToGet) {
|
||||
console.log(this.listOfPlayers[0]);
|
||||
let src = `characters/${profileToGet}`;
|
||||
console.log(src);
|
||||
return src;
|
||||
},
|
||||
toggleDisplay(event) {
|
||||
if (event.target.classList[0] != "addPlayerIMG") {
|
||||
if (window.innerWidth < 600) {
|
||||
this.display = !this.display;
|
||||
|
||||
/* Check amount of players */
|
||||
if (arrayOfPlayers.length > 6) {
|
||||
errors.push("Too many players already exists");
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
/* If everything went fine, return an empty */
|
||||
return errors;
|
||||
},
|
||||
addNewPlayer() {
|
||||
let errors = this.newPlayerValidation();
|
||||
if (errors.length === 0) {
|
||||
this.$store.dispatch("addNewPlayer", this.newPlayerInputText);
|
||||
this.newPlayerInputText = "";
|
||||
} else {
|
||||
console.log(errors);
|
||||
}
|
||||
},
|
||||
toggleNewPlayerInput() {
|
||||
this.showNewPlayerInput = !this.showNewPlayerInput;
|
||||
if (this.showNewPlayerInput === true) {
|
||||
this.$nextTick(() => this.$refs.inputField.focus());
|
||||
}
|
||||
},
|
||||
changeScore(playerName, score) {
|
||||
let payload = {
|
||||
playerName: playerName,
|
||||
score: score,
|
||||
};
|
||||
this.$store.dispatch("changePlayerScore", payload);
|
||||
for (let i = 0; i < this.listOfPlayers.length; i++) {
|
||||
/* If a player received their first point */
|
||||
if (this.listOfPlayers[i].score == 1 && this.listOfPlayers[i].welcomed === false) {
|
||||
let payload = {
|
||||
playerName: playerName,
|
||||
welcomeSet: true,
|
||||
};
|
||||
this.$store.dispatch("changePlayerWelcomed", payload);
|
||||
this.$emit("play-welcome-sound");
|
||||
}
|
||||
/* If a player reach match point */
|
||||
if (this.listOfPlayers[i].score === this.winningScore-1) {
|
||||
let payload = {
|
||||
playerName: playerName,
|
||||
matchPointSet: true,
|
||||
};
|
||||
this.$store.dispatch("changePlayerMatchPoint", payload);
|
||||
this.$emit("play-match-point-sound");
|
||||
}
|
||||
/* If a player won */
|
||||
if (this.listOfPlayers[i].score === this.winningScore) {
|
||||
this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
|
||||
this.$emit("play-winning-sound");
|
||||
}
|
||||
}
|
||||
},
|
||||
openCharacterModal(playerName) {
|
||||
this.$refs.characterModal.openModal(playerName);
|
||||
},
|
||||
getProfileSrc(profileToGet) {
|
||||
console.log(this.listOfPlayers[0]);
|
||||
let src = `characters/${profileToGet}`;
|
||||
console.log(src);
|
||||
return src;
|
||||
},
|
||||
toggleDisplay(event) {
|
||||
if (event.target.classList[0] != "addPlayerIMG") {
|
||||
if (window.innerWidth < 600) {
|
||||
this.display = !this.display;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.playerList-enter-from,
|
||||
.playerList-leave-to {
|
||||
opacity: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
.playerList-enter-to,
|
||||
.playerList-leave-from {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
.playerList-enter-active {
|
||||
transition: all 0.5s ease-out;
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.playerList-leave-active {
|
||||
position: absolute;
|
||||
transition: all 0.2s ease-in;
|
||||
position: absolute;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
.playerList-move {
|
||||
transition: 0.25s;
|
||||
transition-property: transform, opacity;
|
||||
transition: 0.25s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
.playerList-move.newPlayerInput {
|
||||
transition: 0.2s;
|
||||
transition-property: transform;
|
||||
transition: 0.2s;
|
||||
transition-property: transform;
|
||||
}
|
||||
/* End of Animation block */
|
||||
|
||||
.playersWindowDiv {
|
||||
display: inline-block;
|
||||
width: 38vw;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
width: 38vw;
|
||||
color: white;
|
||||
}
|
||||
.playerListTitle {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 5vh;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background-color: #333;
|
||||
height: 5vh;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.playerListTitle h1 {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-grow: 100;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
flex-grow: 100;
|
||||
}
|
||||
.playerListTitle .addPlayerIMG {
|
||||
justify-self: flex-end;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
flex-grow: 1;
|
||||
filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
|
||||
justify-self: flex-end;
|
||||
margin-left: auto;
|
||||
margin-right: 5px;
|
||||
flex-grow: 1;
|
||||
filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
|
||||
}
|
||||
.playerListTitle .arrow {
|
||||
flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.playerListTitle .arrowToggle {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.playerList {
|
||||
display: inline-block;
|
||||
background-color: rgb(66, 66, 66);
|
||||
min-height: 37vh;
|
||||
display: inline-block;
|
||||
background-color: rgb(66, 66, 66);
|
||||
min-height: 37vh;
|
||||
}
|
||||
.playerList .player {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
width: 38vw;
|
||||
height: 6vh;
|
||||
font-size: 1.8rem;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
width: 38vw;
|
||||
height: 6vh;
|
||||
font-size: 1.8rem;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.playerList .player p {
|
||||
margin-left: 5px;
|
||||
margin-right: auto;
|
||||
margin-left: 5px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.playerList .player .profilePicture {
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
margin-right: 2vw;
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background-color: red;
|
||||
margin-right: 2vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.playerList .player button {
|
||||
align-content: center;
|
||||
padding: 3px;
|
||||
width: 50px;
|
||||
height: 4vh;
|
||||
margin-right: 0.6vw;
|
||||
line-height: 0;
|
||||
align-content: center;
|
||||
padding: 3px;
|
||||
width: 50px;
|
||||
height: 4vh;
|
||||
margin-right: 0.6vw;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.playerList .player button:last-of-type {
|
||||
margin-right: 3vw;
|
||||
margin-right: 3vw;
|
||||
}
|
||||
|
||||
.playerList .player img {
|
||||
margin-right: 5px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.newPlayerInput {
|
||||
display: flex;
|
||||
width: 38vw;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
background-color: rgb(107, 106, 106);
|
||||
display: flex;
|
||||
width: 38vw;
|
||||
height: 50px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 5px 0;
|
||||
background-color: rgb(107, 106, 106);
|
||||
}
|
||||
|
||||
.newPlayerInput p {
|
||||
font-size: 1.3rem;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
font-size: 1.3rem;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newPlayerInput input {
|
||||
height: 70%;
|
||||
width: 250px;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
height: 70%;
|
||||
width: 250px;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.newPlayerInput button {
|
||||
margin: 0 10px;
|
||||
height: 80%;
|
||||
align-self: center;
|
||||
margin: 0 10px;
|
||||
height: 80%;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.playersWindowDiv {
|
||||
width: 100%;
|
||||
}
|
||||
.playerListTitle {
|
||||
height: 10vw;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.playerListTitle .addPlayerIMG {
|
||||
height: 9vw;
|
||||
}
|
||||
.playerListTitle .arrowToggle {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
left: 0;
|
||||
filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
|
||||
}
|
||||
.playerList {
|
||||
width: 100%;
|
||||
height: 60vw;
|
||||
min-height: 190px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.playerList .player {
|
||||
width: 100vw;
|
||||
height: 12vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.playerList .player .profilePicture {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin-right: 1.5vw;
|
||||
}
|
||||
.playerList .player button {
|
||||
align-content: center;
|
||||
padding: 3px;
|
||||
width: 45px;
|
||||
height: 10vw;
|
||||
margin-right: 1vw;
|
||||
line-height: 0;
|
||||
}
|
||||
.playersWindowDiv {
|
||||
width: 100%;
|
||||
}
|
||||
.playerListTitle {
|
||||
height: 10vw;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.playerListTitle .addPlayerIMG {
|
||||
height: 9vw;
|
||||
}
|
||||
.playerListTitle .arrowToggle {
|
||||
display: block;
|
||||
max-height: 100%;
|
||||
left: 0;
|
||||
filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
|
||||
}
|
||||
.playerList {
|
||||
width: 100%;
|
||||
height: 60vw;
|
||||
min-height: 190px;
|
||||
overflow: scroll;
|
||||
}
|
||||
.playerList .player {
|
||||
width: 100vw;
|
||||
height: 12vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.playerList .player .profilePicture {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
margin-right: 1.5vw;
|
||||
}
|
||||
.playerList .player button {
|
||||
align-content: center;
|
||||
padding: 3px;
|
||||
width: 45px;
|
||||
height: 10vw;
|
||||
margin-right: 1vw;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.newPlayerInput {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.newPlayerInput input {
|
||||
height: 90%;
|
||||
width: 200px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.newPlayerInput button {
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.newPlayerInput {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.newPlayerInput input {
|
||||
height: 90%;
|
||||
width: 200px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.newPlayerInput button {
|
||||
margin: 0 10px;
|
||||
height: 40px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -32,6 +32,16 @@
|
||||
/>
|
||||
<label for="hideTitle">Hide next track</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="addPlayed"
|
||||
id="addPlayed"
|
||||
v-model="checkboxAddPlayed"
|
||||
@change="updateOptionAddPlayed"
|
||||
/>
|
||||
<label for="addPlayed">Turn on played to database</label>
|
||||
</div>
|
||||
<div class="checkboxDiv">
|
||||
<input
|
||||
type="checkbox"
|
||||
@@ -74,11 +84,12 @@ export default {
|
||||
show: false,
|
||||
checkboxStopAfterCurrent: false,
|
||||
checkboxHideTitle: false,
|
||||
checkboxAddPlayed: false,
|
||||
checkboxLowPlayed: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]),
|
||||
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "addPlayed", "lowPlayed"]),
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
@@ -99,6 +110,13 @@ export default {
|
||||
this.$store.dispatch("updateHideNextTitle", false);
|
||||
}
|
||||
},
|
||||
updateOptionAddPlayed() {
|
||||
if (this.checkboxAddPlayed) {
|
||||
this.$store.dispatch("updateAddPlayed", true);
|
||||
} else {
|
||||
this.$store.dispatch("updateAddPlayed", false);
|
||||
}
|
||||
},
|
||||
updateOptionLowPlayed() {
|
||||
if (this.checkboxLowPlayed) {
|
||||
this.$store.dispatch("updateLowPlayed", true);
|
||||
@@ -124,6 +142,7 @@ export default {
|
||||
mounted() {
|
||||
this.checkboxStopAfterCurrent = this.stopAfterCurrent;
|
||||
this.checkboxHideTitle = this.hideNextTrack;
|
||||
this.checkboxAddPlayed = this.addPlayed;
|
||||
this.checkboxLowPlayed = this.lowPlayed;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -44,6 +44,7 @@ export default {
|
||||
"hideNextTrack",
|
||||
"roundStarted",
|
||||
"specialTrackIsPlaying",
|
||||
"addPlayed",
|
||||
"lowPlayed",
|
||||
]),
|
||||
},
|
||||
@@ -65,6 +66,9 @@ export default {
|
||||
} else {
|
||||
await this.APIgetRandomizedTrack();
|
||||
}
|
||||
if (this.addPlayed) {
|
||||
await this.APIaddPlayed();
|
||||
}
|
||||
await this.APIaddToQue();
|
||||
trackAddedToQue = true;
|
||||
}
|
||||
@@ -72,8 +76,9 @@ export default {
|
||||
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
|
||||
/* this.$nextTick(() => {}); */
|
||||
if (!trackAddedToQue) {
|
||||
await this.APIaddToQue();
|
||||
await this.APIaddPlayed();
|
||||
}
|
||||
await this.APIaddToQue();
|
||||
await this.APIgetPlaylistHistory();
|
||||
|
||||
this.$refs.audioPlayer.play();
|
||||
@@ -139,6 +144,15 @@ export default {
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playMatchSound() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/sound0.mp3";
|
||||
this.$store.dispatch("setSpecialTrackIsPlaying", true);
|
||||
this.$nextTick(() => {
|
||||
this.$refs.audioPlayer.currentTime = 0;
|
||||
this.$refs.audioPlayer.play();
|
||||
});
|
||||
},
|
||||
playWinningSound() {
|
||||
this.$refs.audioPlayer.pause();
|
||||
this.currentTrackSrcFile = "sounds/winning.mp3";
|
||||
@@ -208,6 +222,21 @@ export default {
|
||||
});
|
||||
});
|
||||
},
|
||||
APIaddPlayed() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
method: "get",
|
||||
url: `${arne.hostname}/music/addPlayed`,
|
||||
})
|
||||
.then(() => {
|
||||
resolve(false);
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
reject();
|
||||
});
|
||||
});
|
||||
},
|
||||
APIaddToQue() {
|
||||
return new Promise((resolve, reject) => {
|
||||
this.axios({
|
||||
|
||||
@@ -1,29 +1,30 @@
|
||||
<template>
|
||||
<div class="theMainDiv">
|
||||
<div class="mainFirstRow">
|
||||
<currently-playing></currently-playing>
|
||||
<inspiration-window></inspiration-window>
|
||||
</div>
|
||||
<div class="mainSecondRow">
|
||||
<playlist-history
|
||||
ref="playlistHistory"
|
||||
@play-selected-track="playSelectedTrack"
|
||||
></playlist-history>
|
||||
<players-window
|
||||
@play-welcome-sound="playWelcomeSound"
|
||||
@play-winning-sound="playWinningSound"
|
||||
></players-window>
|
||||
</div>
|
||||
<extra-buttons
|
||||
v-if="$parent.displayWhenDesktop"
|
||||
@start-sound-test="startSoundTest"
|
||||
></extra-buttons>
|
||||
<the-footer
|
||||
ref="theFooter"
|
||||
@scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
|
||||
></the-footer>
|
||||
<!-- <the-footer ref="theFooter"></the-footer> -->
|
||||
</div>
|
||||
<div class="theMainDiv">
|
||||
<div class="mainFirstRow">
|
||||
<currently-playing></currently-playing>
|
||||
<inspiration-window></inspiration-window>
|
||||
</div>
|
||||
<div class="mainSecondRow">
|
||||
<playlist-history
|
||||
ref="playlistHistory"
|
||||
@play-selected-track="playSelectedTrack"
|
||||
></playlist-history>
|
||||
<players-window
|
||||
@play-welcome-sound="playWelcomeSound"
|
||||
@play-match-point-sound="playMatchSound"
|
||||
@play-winning-sound="playWinningSound"
|
||||
></players-window>
|
||||
</div>
|
||||
<extra-buttons
|
||||
v-if="$parent.displayWhenDesktop"
|
||||
@start-sound-test="startSoundTest"
|
||||
></extra-buttons>
|
||||
<the-footer
|
||||
ref="theFooter"
|
||||
@scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
|
||||
></the-footer>
|
||||
<!-- <the-footer ref="theFooter"></the-footer> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -35,65 +36,68 @@ import extraButtons from "../items/extraButtons.vue";
|
||||
import theFooter from "./TheFooter.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
currentlyPlaying,
|
||||
playersWindow,
|
||||
playlistHistory,
|
||||
inspirationWindow,
|
||||
extraButtons,
|
||||
theFooter,
|
||||
},
|
||||
methods: {
|
||||
playSelectedTrack(track) {
|
||||
this.$refs.theFooter.playSpecificTrack(track);
|
||||
},
|
||||
scrollToBottomPlaylistHistory() {
|
||||
this.$refs.playlistHistory.scrollToBottom();
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$refs.theFooter.startSoundTest();
|
||||
},
|
||||
playWelcomeSound() {
|
||||
this.$refs.theFooter.playWelcomeSound();
|
||||
},
|
||||
playWinningSound() {
|
||||
this.$refs.theFooter.playWinningSound();
|
||||
},
|
||||
},
|
||||
components: {
|
||||
currentlyPlaying,
|
||||
playersWindow,
|
||||
playlistHistory,
|
||||
inspirationWindow,
|
||||
extraButtons,
|
||||
theFooter,
|
||||
},
|
||||
methods: {
|
||||
playSelectedTrack(track) {
|
||||
this.$refs.theFooter.playSpecificTrack(track);
|
||||
},
|
||||
scrollToBottomPlaylistHistory() {
|
||||
this.$refs.playlistHistory.scrollToBottom();
|
||||
},
|
||||
startSoundTest() {
|
||||
this.$refs.theFooter.startSoundTest();
|
||||
},
|
||||
playWelcomeSound() {
|
||||
this.$refs.theFooter.playWelcomeSound();
|
||||
},
|
||||
playMatchSound() {
|
||||
this.$refs.theFooter.playMatchSound();
|
||||
},
|
||||
playWinningSound() {
|
||||
this.$refs.theFooter.playWinningSound();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.theMainDiv {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mainFirstRow {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0.5vw;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0.5vw;
|
||||
}
|
||||
.mainSecondRow {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0 0.5vw;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
margin: 0 0.5vw;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1000px) {
|
||||
.mainFirstRow {
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
.mainSecondRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
.mainFirstRow {
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
.mainSecondRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
margin-top: 0.5vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user