Sansan/MusicServer
1
0
Fork 0
Code Issues 9 Pull Requests Actions Packages Projects Releases Wiki Activity

Added option to not add played to database

Browse Source 
Added Search for inspiration
Added song for match point
This commit is contained in:
Sebastian
2023-01-01 01:21:37 +01:00
parent 4e876fa28f
commit 8369b5f0a1
10 changed files with 660 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files

201
cmd/frontend/src/components/items/InspirationWindow.vue
View File

@@ -1,31 +1,43 @@
<template> <template>
<div class="inspirationDiv"> <div class="inspirationDiv">
<div class="inspirationTitle"> <div class="inspirationHeader">
<h1>Inspiration</h1> <div class="inspirationTitle">
</div> <h1>Inspiration</h1>
<transition-group </div>
tag="ul" <div class="searchInput">
name="inspirationList" <input
class="inspirationList" v-model="searchInputText"
ref="inspirationList" type="text"
> @input="searchGame()"
<li v-for="game in allGamesList" class="inspirationEntry" :key="game"> ref="inputField"
{{ game }} />
</li> </div>
</transition-group> </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> </template>
<script> <script>
import arne from '../../arne.js' import arne from '../../arne.js'
import {mapState} from "vuex"; import {mapState} from "vuex";
export default { export default {
data() { data() {
return { return {
allGamesList: [], allGamesList: [],
scrollDown: true, showingGamesList: [],
}; scrollDown: true,
}, searchInputText: "",
};
},
computed: { computed: {
...mapState(["reloadGamesList"]), ...mapState(["reloadGamesList"]),
}, },
@@ -37,78 +49,117 @@ export default {
} }
} }
}, },
methods: { methods: {
scrollInspiration() { searchGame() {
let inspirationListDOM = document.querySelector(".inspirationList"); this.showingGamesList = [];
let scrollSpeed = 1; for (const game of this.allGamesList) {
let currentScrollLocation = 0; 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; currentScrollLocation = inspirationListDOM.scrollTop;
this.scrollDown this.scrollDown
? inspirationListDOM.scrollBy(0, scrollSpeed) ? inspirationListDOM.scrollBy(0, scrollSpeed)
: inspirationListDOM.scrollBy(0, -scrollSpeed); : inspirationListDOM.scrollBy(0, -scrollSpeed);
if (currentScrollLocation === inspirationListDOM.scrollTop) { if (currentScrollLocation === inspirationListDOM.scrollTop) {
this.scrollDown = !this.scrollDown; this.scrollDown = !this.scrollDown;
} }
}, },
reloadGames() { reloadGames() {
this.axios({ this.axios({
method: "get", method: "get",
url: `${arne.hostname}/music/all`, url: `${arne.hostname}/music/all`,
}) })
.then((response) => { .then((response) => {
this.allGamesList = response.data; this.allGamesList = response.data;
this.$store.dispatch("updateHowManyGames", this.allGamesList.length); this.searchInputText = "";
}) this.searchGame();
.catch(function(error) { this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
console.log(error); })
}); .catch(function(error) {
} console.log(error);
}, });
mounted() { }
this.reloadGames(); },
window.setInterval(() => { mounted() {
this.scrollInspiration(); this.reloadGames();
}, 40); window.setInterval(() => {
}, this.scrollInspiration();
}, 40);
},
}; };
</script> </script>
<style scoped> <style scoped>
.inspirationDiv { .inspirationDiv {
width: 38vw; width: 38vw;
height: 20vh; height: 20vh;
color: white; color: white;
} }
.inspirationTitle { .inspirationTitle {
display: flex; display: flex;
background-color: #333; flex: auto;
height: 5vh; align-items: flex-start;
justify-content: center; justify-content: flex-start;
align-items: center; 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 { .inspirationList {
display: inline-block; display: inline-block;
background-color: rgb(66, 66, 66); background-color: rgb(66, 66, 66);
width: 38vw; width: 38vw;
height: 22vh; height: 22vh;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
} }
.inspirationEntry { .inspirationEntry {
width: 100%; width: 100%;
max-width: 38vw; max-width: 38vw;
padding: 0.3vh 0.8vh; padding: 0.3vh 0.8vh;
font-size: 1.2rem; font-size: 1.2rem;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.inspirationDiv { .inspirationDiv {
display: none; display: none;
} }
} }
</style> </style>

180
cmd/frontend/src/components/items/extraButtons.vue
View File

@@ -1,109 +1,111 @@
<template> <template>
<div class="extraButtonsDiv"> <div class="extraButtonsDiv">
<button @click="resetPlaylist">Reset playlist</button> <button @click="resetPlaylist">Reset playlist</button>
<button @click="resetPoints">Reset points</button> <button @click="resetPoints">Reset points</button>
<button @click="syncGames">Sync games</button> <button @click="syncGames">Sync games</button>
<button @click="startSoundTest">Sound test</button> <button @click="startSoundTest">Sound test</button>
</div> </div>
</template> </template>
<script> <script>
import arne from '../../arne.js' import arne from '../../arne.js'
export default { export default {
data() { data() {
return { return {
emptyPlaylist: [], emptyPlaylist: [],
}; };
}, },
methods: { methods: {
async resetPoints() { async resetPoints() {
this.$store.dispatch("resetPlayerScore"); this.$store.dispatch("resetPlayerScore");
this.$store.dispatch("resetPlayerWelcomed"); this.$store.dispatch("resetPlayerWelcomed");
this.$store.dispatch("setRoundStarted", false); this.$store.dispatch("resetPlayerMatchPoint");
}, this.$store.dispatch("setRoundStarted", false);
async resetPlaylist() { },
await this.APIresetPlaylist(); async resetPlaylist() {
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist); await this.APIresetPlaylist();
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A"); this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
this.$store.dispatch("setCurrentTrackHidden", false); this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
}, this.$store.dispatch("setCurrentTrackHidden", false);
async syncGames() { },
await this.APIsyncGames(); async syncGames() {
await this.APIresetPlaylist(); await this.APIsyncGames();
this.$store.dispatch("resetPlayerScore"); await this.APIresetPlaylist();
this.$store.dispatch("resetPlayerWelcomed"); this.$store.dispatch("resetPlayerScore");
this.$store.dispatch("setRoundStarted", false); this.$store.dispatch("resetPlayerWelcomed");
this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist); this.$store.dispatch("resetPlayerMatchPoint");
this.$store.dispatch("setCurrentlyLoadingTrack", "N/A"); this.$store.dispatch("setRoundStarted", false);
this.$store.dispatch("setCurrentTrackHidden", false); this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
this.$store.dispatch("reloadGamesList", true); this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
}, this.$store.dispatch("setCurrentTrackHidden", false);
startSoundTest() { this.$store.dispatch("reloadGamesList", true);
this.$emit("start-sound-test"); },
}, startSoundTest() {
APIresetPlaylist() { this.$emit("start-sound-test");
return new Promise((resolve, reject) => { },
this.axios({ APIresetPlaylist() {
method: "get", return new Promise((resolve, reject) => {
url: `${arne.hostname}/music/reset`, this.axios({
}) method: "get",
.then(() => { url: `${arne.hostname}/music/reset`,
resolve(); })
}) .then(() => {
.catch(function(error) { resolve();
console.log(error); })
reject(); .catch(function(error) {
}); console.log(error);
}); reject();
}, });
APIsyncGames() { });
return new Promise((resolve, reject) => { },
this.axios({ APIsyncGames() {
method: "get", return new Promise((resolve, reject) => {
url: `${arne.hostname}/sync`, this.axios({
}) method: "get",
.then(() => { url: `${arne.hostname}/sync`,
resolve(); })
}) .then(() => {
.catch(function(error) { resolve();
console.log(error); })
reject(); .catch(function(error) {
}); console.log(error);
}); reject();
}, });
}, });
},
},
}; };
</script> </script>
<style scoped> <style scoped>
.extraButtonsDiv { .extraButtonsDiv {
display: flex; display: flex;
margin-top: 2px; margin-top: 2px;
margin-left: 10px; margin-left: 10px;
} }
button { button {
display: flex; display: flex;
align-items: center; align-items: center;
height: 65%; height: 65%;
margin-right: 0.4vw; margin-right: 0.4vw;
border-radius: 10px; border-radius: 10px;
border-width: 1px; border-width: 1px;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.extraButtonsDiv { .extraButtonsDiv {
display: flex; display: flex;
position: relative; position: relative;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
} }
button { button {
width: 51vw; width: 51vw;
height: 40px; height: 40px;
margin-bottom: 10px; margin-bottom: 10px;
justify-content: center; justify-content: center;
} }
} }
</style> </style>

535
cmd/frontend/src/components/items/playersWindow.vue
View File

@@ -1,46 +1,46 @@
<template> <template>
<div class="playersWindowDiv"> <div class="playersWindowDiv">
<div @click="toggleDisplay" class="playerListTitle"> <div @click="toggleDisplay" class="playerListTitle">
<img v-if="display" class="arrow arrowToggle" src="keyboard_arrow_up-black-36dp.svg" /> <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" /> <img v-else class="arrow arrowToggle" src="keyboard_arrow_down-black-36dp.svg" />
<h1>Players</h1> <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>
<img <img
class="profilePicture" src="person_add_alt_1-black-36dp.svg"
:src="player.profile" alt="addPlayer"
@click="openCharacterModal(player.playerName)" class="addPlayerIMG"
@click="toggleNewPlayerInput()"
/> />
<button @click="changeScore(player.playerName, 1)">+1</button> </div>
<button @click="changeScore(player.playerName, -1)">-1</button> <transition-group tag="div" v-if="display" name="playerList" class="playerList">
<img <div class="player" v-for="player in listOfPlayers" :key="player.playerName">
src="person_remove-black-36dp.svg" <p>{{ player.playerName }}: {{ player.score }}</p>
@click="removePlayer(player.playerName)" <img
alt="" class="profilePicture"
/> :src="player.profile"
</div> @click="openCharacterModal(player.playerName)"
<div class="newPlayerInput" v-if="showNewPlayerInput === true"> />
<input <button @click="changeScore(player.playerName, 1)">+1</button>
v-model="newPlayerInputText" <button @click="changeScore(player.playerName, -1)">-1</button>
type="text" <img
@keypress.enter="addNewPlayer()" src="person_remove-black-36dp.svg"
ref="inputField" @click="removePlayer(player.playerName)"
placeholder="Player name" alt=""
/> />
<button @click="addNewPlayer()">Add</button> </div>
</div> <div class="newPlayerInput" v-if="showNewPlayerInput === true">
</transition-group> <input
<winning-modal ref="winningModal"></winning-modal> v-model="newPlayerInputText"
<character-modal ref="characterModal"></character-modal> type="text"
</div> @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> </template>
<script> <script>
@@ -48,298 +48,307 @@ import { mapState } from "vuex";
import winningModal from "../items/winningModal.vue"; import winningModal from "../items/winningModal.vue";
import characterModal from "../items/characterModal.vue"; import characterModal from "../items/characterModal.vue";
export default { export default {
components: { components: {
winningModal, winningModal,
characterModal, characterModal,
}, },
data() { data() {
return { return {
showNewPlayerInput: false, showNewPlayerInput: false,
newPlayerInputText: "", newPlayerInputText: "",
display: true, display: true,
}; };
}, },
computed: { computed: {
...mapState(["listOfPlayers", "winningScore"]), ...mapState(["listOfPlayers", "winningScore"]),
}, },
methods: { methods: {
removePlayer(playerName) { removePlayer(playerName) {
this.$store.dispatch("removePlayer", playerName); this.$store.dispatch("removePlayer", playerName);
}, },
newPlayerValidation() { newPlayerValidation() {
/* Validation variables */ /* Validation variables */
let errors = []; let errors = [];
let newName = this.newPlayerInputText; let newName = this.newPlayerInputText;
/* Check for empty value */ /* Check for empty value */
if (newName.trim() === "") { if (newName.trim() === "") {
errors.push("No player name was entered"); 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");
} }
/* If a player won */
if (this.listOfPlayers[i].score === this.winningScore) { /* Prepare data of players and check for already entered ones */
this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName); let copyOfPlayerList = this.listOfPlayers;
this.$emit("play-winning-sound"); let arrayOfPlayers = copyOfPlayerList.map((player) => player.playerName.toLowerCase());
if (arrayOfPlayers.includes(newName.toLowerCase())) {
errors.push("This player already exists");
} }
}
}, /* Check amount of players */
openCharacterModal(playerName) { if (arrayOfPlayers.length > 6) {
this.$refs.characterModal.openModal(playerName); errors.push("Too many players already exists");
},
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;
} }
}
}, /* 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> </script>
<style scoped> <style scoped>
.playerList-enter-from, .playerList-enter-from,
.playerList-leave-to { .playerList-leave-to {
opacity: 0; opacity: 0;
} }
.playerList-enter-to, .playerList-enter-to,
.playerList-leave-from { .playerList-leave-from {
opacity: 1; opacity: 1;
} }
.playerList-enter-active { .playerList-enter-active {
transition: all 0.5s ease-out; transition: all 0.5s ease-out;
} }
.playerList-leave-active { .playerList-leave-active {
position: absolute; position: absolute;
transition: all 0.2s ease-in; transition: all 0.2s ease-in;
} }
.playerList-move { .playerList-move {
transition: 0.25s; transition: 0.25s;
transition-property: transform, opacity; transition-property: transform, opacity;
} }
.playerList-move.newPlayerInput { .playerList-move.newPlayerInput {
transition: 0.2s; transition: 0.2s;
transition-property: transform; transition-property: transform;
} }
/* End of Animation block */ /* End of Animation block */
.playersWindowDiv { .playersWindowDiv {
display: inline-block; display: inline-block;
width: 38vw; width: 38vw;
color: white; color: white;
} }
.playerListTitle { .playerListTitle {
display: flex; display: flex;
width: 100%; width: 100%;
background-color: #333; background-color: #333;
height: 5vh; height: 5vh;
align-content: center; align-content: center;
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.playerListTitle h1 { .playerListTitle h1 {
text-align: center; text-align: center;
position: relative; position: relative;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
flex-grow: 100; flex-grow: 100;
} }
.playerListTitle .addPlayerIMG { .playerListTitle .addPlayerIMG {
justify-self: flex-end; justify-self: flex-end;
margin-left: auto; margin-left: auto;
margin-right: 5px; margin-right: 5px;
flex-grow: 1; flex-grow: 1;
filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%); filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
} }
.playerListTitle .arrow { .playerListTitle .arrow {
flex-grow: 1; flex-grow: 1;
} }
.playerListTitle .arrowToggle { .playerListTitle .arrowToggle {
display: none; display: none;
} }
.playerList { .playerList {
display: inline-block; display: inline-block;
background-color: rgb(66, 66, 66); background-color: rgb(66, 66, 66);
min-height: 37vh; min-height: 37vh;
} }
.playerList .player { .playerList .player {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: flex-end; justify-content: flex-end;
width: 38vw; width: 38vw;
height: 6vh; height: 6vh;
font-size: 1.8rem; font-size: 1.8rem;
align-content: center; align-content: center;
align-items: center; align-items: center;
} }
.playerList .player p { .playerList .player p {
margin-left: 5px; margin-left: 5px;
margin-right: auto; margin-right: auto;
} }
.playerList .player .profilePicture { .playerList .player .profilePicture {
width: 100px; width: 100px;
height: 50px; height: 50px;
background-color: red; background-color: red;
margin-right: 2vw; margin-right: 2vw;
cursor: pointer; cursor: pointer;
} }
.playerList .player button { .playerList .player button {
align-content: center; align-content: center;
padding: 3px; padding: 3px;
width: 50px; width: 50px;
height: 4vh; height: 4vh;
margin-right: 0.6vw; margin-right: 0.6vw;
line-height: 0; line-height: 0;
} }
.playerList .player button:last-of-type { .playerList .player button:last-of-type {
margin-right: 3vw; margin-right: 3vw;
} }
.playerList .player img { .playerList .player img {
margin-right: 5px; margin-right: 5px;
} }
.newPlayerInput { .newPlayerInput {
display: flex; display: flex;
width: 38vw; width: 38vw;
height: 50px; height: 50px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 5px 0; padding: 5px 0;
background-color: rgb(107, 106, 106); background-color: rgb(107, 106, 106);
} }
.newPlayerInput p { .newPlayerInput p {
font-size: 1.3rem; font-size: 1.3rem;
flex-grow: 1; flex-grow: 1;
text-align: center; text-align: center;
} }
.newPlayerInput input { .newPlayerInput input {
height: 70%; height: 70%;
width: 250px; width: 250px;
font-size: 1.5rem; font-size: 1.5rem;
margin: 0 5px; margin: 0 5px;
text-align: center; text-align: center;
} }
.newPlayerInput button { .newPlayerInput button {
margin: 0 10px; margin: 0 10px;
height: 80%; height: 80%;
align-self: center; align-self: center;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.playersWindowDiv { .playersWindowDiv {
width: 100%; width: 100%;
} }
.playerListTitle { .playerListTitle {
height: 10vw; height: 10vw;
font-size: 0.8rem; font-size: 0.8rem;
} }
.playerListTitle .addPlayerIMG { .playerListTitle .addPlayerIMG {
height: 9vw; height: 9vw;
} }
.playerListTitle .arrowToggle { .playerListTitle .arrowToggle {
display: block; display: block;
max-height: 100%; max-height: 100%;
left: 0; left: 0;
filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%); filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
} }
.playerList { .playerList {
width: 100%; width: 100%;
height: 60vw; height: 60vw;
min-height: 190px; min-height: 190px;
overflow: scroll; overflow: scroll;
} }
.playerList .player { .playerList .player {
width: 100vw; width: 100vw;
height: 12vw; height: 12vw;
font-size: 1rem; font-size: 1rem;
} }
.playerList .player .profilePicture { .playerList .player .profilePicture {
width: 60px; width: 60px;
height: 30px; height: 30px;
margin-right: 1.5vw; margin-right: 1.5vw;
} }
.playerList .player button { .playerList .player button {
align-content: center; align-content: center;
padding: 3px; padding: 3px;
width: 45px; width: 45px;
height: 10vw; height: 10vw;
margin-right: 1vw; margin-right: 1vw;
line-height: 0; line-height: 0;
} }
.newPlayerInput { .newPlayerInput {
width: 100%; width: 100%;
height: 30px; height: 30px;
} }
.newPlayerInput input { .newPlayerInput input {
height: 90%; height: 90%;
width: 200px; width: 200px;
font-size: 1.2rem; font-size: 1.2rem;
} }
.newPlayerInput button { .newPlayerInput button {
margin: 0 10px; margin: 0 10px;
height: 40px; height: 40px;
border-radius: 2px; border-radius: 2px;
} }
} }
</style> </style>

21
cmd/frontend/src/components/items/settingsModal.vue
View File

@@ -32,6 +32,16 @@
/> />
<label for="hideTitle">Hide next track</label> <label for="hideTitle">Hide next track</label>
</div> </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"> <div class="checkboxDiv">
<input <input
type="checkbox" type="checkbox"
@@ -74,11 +84,12 @@ export default {
show: false, show: false,
checkboxStopAfterCurrent: false, checkboxStopAfterCurrent: false,
checkboxHideTitle: false, checkboxHideTitle: false,
checkboxAddPlayed: false,
checkboxLowPlayed: false, checkboxLowPlayed: false,
}; };
}, },
computed: { computed: {
...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "lowPlayed"]), ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "addPlayed", "lowPlayed"]),
}, },
methods: { methods: {
closeModal() { closeModal() {
@@ -99,6 +110,13 @@ export default {
this.$store.dispatch("updateHideNextTitle", false); this.$store.dispatch("updateHideNextTitle", false);
} }
}, },
updateOptionAddPlayed() {
if (this.checkboxAddPlayed) {
this.$store.dispatch("updateAddPlayed", true);
} else {
this.$store.dispatch("updateAddPlayed", false);
}
},
updateOptionLowPlayed() { updateOptionLowPlayed() {
if (this.checkboxLowPlayed) { if (this.checkboxLowPlayed) {
this.$store.dispatch("updateLowPlayed", true); this.$store.dispatch("updateLowPlayed", true);
@@ -124,6 +142,7 @@ export default {
mounted() { mounted() {
this.checkboxStopAfterCurrent = this.stopAfterCurrent; this.checkboxStopAfterCurrent = this.stopAfterCurrent;
this.checkboxHideTitle = this.hideNextTrack; this.checkboxHideTitle = this.hideNextTrack;
this.checkboxAddPlayed = this.addPlayed;
this.checkboxLowPlayed = this.lowPlayed; this.checkboxLowPlayed = this.lowPlayed;
}, },
}; };

31
cmd/frontend/src/components/layout/TheFooter.vue
View File

@@ -44,6 +44,7 @@ export default {
"hideNextTrack", "hideNextTrack",
"roundStarted", "roundStarted",
"specialTrackIsPlaying", "specialTrackIsPlaying",
"addPlayed",
"lowPlayed", "lowPlayed",
]), ]),
}, },
@@ -65,6 +66,9 @@ export default {
} else { } else {
await this.APIgetRandomizedTrack(); await this.APIgetRandomizedTrack();
} }
if (this.addPlayed) {
await this.APIaddPlayed();
}
await this.APIaddToQue(); await this.APIaddToQue();
trackAddedToQue = true; trackAddedToQue = true;
} }
@@ -72,8 +76,9 @@ export default {
this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]); this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
/* this.$nextTick(() => {}); */ /* this.$nextTick(() => {}); */
if (!trackAddedToQue) { if (!trackAddedToQue) {
await this.APIaddToQue(); await this.APIaddPlayed();
} }
await this.APIaddToQue();
await this.APIgetPlaylistHistory(); await this.APIgetPlaylistHistory();
this.$refs.audioPlayer.play(); this.$refs.audioPlayer.play();
@@ -139,6 +144,15 @@ export default {
this.$refs.audioPlayer.play(); 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() { playWinningSound() {
this.$refs.audioPlayer.pause(); this.$refs.audioPlayer.pause();
this.currentTrackSrcFile = "sounds/winning.mp3"; 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() { APIaddToQue() {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.axios({ this.axios({

148
cmd/frontend/src/components/layout/TheMain.vue
View File

@@ -1,29 +1,30 @@
<template> <template>
<div class="theMainDiv"> <div class="theMainDiv">
<div class="mainFirstRow"> <div class="mainFirstRow">
<currently-playing></currently-playing> <currently-playing></currently-playing>
<inspiration-window></inspiration-window> <inspiration-window></inspiration-window>
</div> </div>
<div class="mainSecondRow"> <div class="mainSecondRow">
<playlist-history <playlist-history
ref="playlistHistory" ref="playlistHistory"
@play-selected-track="playSelectedTrack" @play-selected-track="playSelectedTrack"
></playlist-history> ></playlist-history>
<players-window <players-window
@play-welcome-sound="playWelcomeSound" @play-welcome-sound="playWelcomeSound"
@play-winning-sound="playWinningSound" @play-match-point-sound="playMatchSound"
></players-window> @play-winning-sound="playWinningSound"
</div> ></players-window>
<extra-buttons </div>
v-if="$parent.displayWhenDesktop" <extra-buttons
@start-sound-test="startSoundTest" v-if="$parent.displayWhenDesktop"
></extra-buttons> @start-sound-test="startSoundTest"
<the-footer ></extra-buttons>
ref="theFooter" <the-footer
@scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory" ref="theFooter"
></the-footer> @scroll-to-bottom-playlist-history="scrollToBottomPlaylistHistory"
<!-- <the-footer ref="theFooter"></the-footer> --> ></the-footer>
</div> <!-- <the-footer ref="theFooter"></the-footer> -->
</div>
</template> </template>
<script> <script>
@@ -35,65 +36,68 @@ import extraButtons from "../items/extraButtons.vue";
import theFooter from "./TheFooter.vue"; import theFooter from "./TheFooter.vue";
export default { export default {
components: { components: {
currentlyPlaying, currentlyPlaying,
playersWindow, playersWindow,
playlistHistory, playlistHistory,
inspirationWindow, inspirationWindow,
extraButtons, extraButtons,
theFooter, theFooter,
}, },
methods: { methods: {
playSelectedTrack(track) { playSelectedTrack(track) {
this.$refs.theFooter.playSpecificTrack(track); this.$refs.theFooter.playSpecificTrack(track);
}, },
scrollToBottomPlaylistHistory() { scrollToBottomPlaylistHistory() {
this.$refs.playlistHistory.scrollToBottom(); this.$refs.playlistHistory.scrollToBottom();
}, },
startSoundTest() { startSoundTest() {
this.$refs.theFooter.startSoundTest(); this.$refs.theFooter.startSoundTest();
}, },
playWelcomeSound() { playWelcomeSound() {
this.$refs.theFooter.playWelcomeSound(); this.$refs.theFooter.playWelcomeSound();
}, },
playWinningSound() { playMatchSound() {
this.$refs.theFooter.playWinningSound(); this.$refs.theFooter.playMatchSound();
}, },
}, playWinningSound() {
this.$refs.theFooter.playWinningSound();
},
},
}; };
</script> </script>
<style scoped> <style scoped>
.theMainDiv { .theMainDiv {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
} }
.mainFirstRow { .mainFirstRow {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
margin: 0.5vw; margin: 0.5vw;
} }
.mainSecondRow { .mainSecondRow {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 100%; width: 100%;
margin: 0 0.5vw; margin: 0 0.5vw;
} }
@media only screen and (max-width: 1000px) { @media only screen and (max-width: 1000px) {
.mainFirstRow { .mainFirstRow {
margin: 0; margin: 0;
margin-top: 0.5vw; margin-top: 0.5vw;
} }
.mainSecondRow { .mainSecondRow {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; width: 100%;
margin: 0; margin: 0;
margin-top: 0.5vw; margin-top: 0.5vw;
} }
} }
</style> </style>

33
cmd/frontend/src/main.js
View File

@@ -30,6 +30,7 @@ const store = createStore({
/* Options */ /* Options */
stopAfterCurrent: true, stopAfterCurrent: true,
hideNextTrack: true, hideNextTrack: true,
addPlayed: true,
lowPlayed: false, lowPlayed: false,
}; };
}, },
@@ -67,6 +68,9 @@ const store = createStore({
changePlayerWelcomed(state, payload) { changePlayerWelcomed(state, payload) {
state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse; state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
}, },
changePlayerMatchPoint(state, payload) {
state.listOfPlayers[payload.indexOfPlayer].matchPoint = payload.playerMatchPointTrueOrFalse;
},
changePlayerProfile(state, payload) { changePlayerProfile(state, payload) {
state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc; state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
}, },
@@ -76,6 +80,9 @@ const store = createStore({
resetPlayerWelcomed(state, payload) { resetPlayerWelcomed(state, payload) {
state.listOfPlayers = payload; state.listOfPlayers = payload;
}, },
resetPlayerMatchPoint(state, payload) {
state.listOfPlayers = payload;
},
updateLocalPlaylist(state, payload) { updateLocalPlaylist(state, payload) {
state.localPlaylist.push(payload); state.localPlaylist.push(payload);
}, },
@@ -94,6 +101,9 @@ const store = createStore({
updateHideNextTitle(state, payload) { updateHideNextTitle(state, payload) {
state.hideNextTrack = payload; state.hideNextTrack = payload;
}, },
updateAddPlayed(state, payload) {
state.addPlayed = payload;
},
updateLowPlayed(state, payload) { updateLowPlayed(state, payload) {
state.lowPlayed = payload; state.lowPlayed = payload;
}, },
@@ -135,6 +145,7 @@ const store = createStore({
playerName: payload, playerName: payload,
score: 0, score: 0,
welcomed: false, welcomed: false,
matchPoint: false,
profile: "characters/noCharacter.png", profile: "characters/noCharacter.png",
}; };
newPlayerList.push(newPlayer); newPlayerList.push(newPlayer);
@@ -162,6 +173,17 @@ const store = createStore({
playerWelcomeTrueOrFalse, playerWelcomeTrueOrFalse,
}); });
}, },
changePlayerMatchPoint(context, payload) {
let copyOfPlayerList = this.state.listOfPlayers;
let indexOfPlayer = copyOfPlayerList.findIndex(
(player) => player.playerName === payload.playerName
);
let playerMatchPointTrueOrFalse = payload.matchPointSet;
context.commit("changePlayerMatchPoint", {
indexOfPlayer,
playerMatchPointTrueOrFalse,
});
},
changePlayerProfile(context, payload) { changePlayerProfile(context, payload) {
let copyOfPlayerList = this.state.listOfPlayers; let copyOfPlayerList = this.state.listOfPlayers;
let indexOfPlayer = copyOfPlayerList.findIndex( let indexOfPlayer = copyOfPlayerList.findIndex(
@@ -189,6 +211,14 @@ const store = createStore({
} }
context.commit("resetPlayerWelcomed", copyOfPlayerList); context.commit("resetPlayerWelcomed", copyOfPlayerList);
}, },
resetPlayerMatchPoint(context) {
/* 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));
for (let i = 0; i < copyOfPlayerList.length; i++) {
copyOfPlayerList[i].matchPoint = false;
}
context.commit("resetPlayerMatchPoint", copyOfPlayerList);
},
updateLocalPlaylist(context, payload) { updateLocalPlaylist(context, payload) {
context.commit("updateLocalPlaylist", payload); context.commit("updateLocalPlaylist", payload);
}, },
@@ -207,6 +237,9 @@ const store = createStore({
updateHideNextTitle(context, payload) { updateHideNextTitle(context, payload) {
context.commit("updateHideNextTitle", payload); context.commit("updateHideNextTitle", payload);
}, },
updateAddPlayed(context, payload) {
context.commit("updateAddPlayed", payload);
},
updateLowPlayed(context, payload) { updateLowPlayed(context, payload) {
context.commit("updateLowPlayed", payload); context.commit("updateLowPlayed", payload);
}, },

5
pkg/api/music.go
View File

@@ -88,3 +88,8 @@ func (m *Music) AddLatestToQue(ctx *gin.Context) {
server.AddLatestToQue() server.AddLatestToQue()
ctx.Status(http.StatusOK) ctx.Status(http.StatusOK)
} }
func (m *Music) AddLatestPlayed(ctx *gin.Context) {
server.AddLatestPlayed()
ctx.Status(http.StatusOK)
}

1
pkg/conf/conf.go
View File

@@ -79,6 +79,7 @@ func SetupRestServer(swagger embed.FS) {
musicGroup.GET("all/random", music.GetAllGamesRandom) musicGroup.GET("all/random", music.GetAllGamesRandom)
musicGroup.PUT("played", music.PutPlayed) musicGroup.PUT("played", music.PutPlayed)
musicGroup.GET("addQue", music.AddLatestToQue) musicGroup.GET("addQue", music.AddLatestToQue)
musicGroup.GET("addPlayed", music.AddLatestPlayed)
} }
index := api.NewIndex() index := api.NewIndex()

7
pkg/server/music.go
View File

@@ -36,12 +36,17 @@ func Reset() {
func AddLatestToQue() { func AddLatestToQue() {
if lastFetched.Path != "" { if lastFetched.Path != "" {
currentSong = len(songQue) currentSong = len(songQue)
db.AddGamePlayed(lastFetched.GameId)
songQue = append(songQue, lastFetched) songQue = append(songQue, lastFetched)
lastFetched = models.SongData{} lastFetched = models.SongData{}
} }
} }
func AddLatestPlayed() {
if lastFetched.Path != "" {
db.AddGamePlayed(lastFetched.GameId)
}
}
func GetRandomSong() string { func GetRandomSong() string {
if games == nil || len(games) == 0 { if games == nil || len(games) == 0 {
games = db.FindAllGames() games = db.FindAllGames()