Added real frontend
Made hostname global and easy to change in docker
This commit is contained in:
@@ -0,0 +1,345 @@
|
||||
<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>
|
||||
<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>
|
||||
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;
|
||||
|
||||
/* 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");
|
||||
}
|
||||
/* 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;
|
||||
}
|
||||
.playerList-enter-to,
|
||||
.playerList-leave-from {
|
||||
opacity: 1;
|
||||
}
|
||||
.playerList-enter-active {
|
||||
transition: all 0.5s ease-out;
|
||||
}
|
||||
.playerList-leave-active {
|
||||
position: absolute;
|
||||
transition: all 0.2s ease-in;
|
||||
}
|
||||
.playerList-move {
|
||||
transition: 0.25s;
|
||||
transition-property: transform, opacity;
|
||||
}
|
||||
.playerList-move.newPlayerInput {
|
||||
transition: 0.2s;
|
||||
transition-property: transform;
|
||||
}
|
||||
/* End of Animation block */
|
||||
|
||||
.playersWindowDiv {
|
||||
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;
|
||||
}
|
||||
.playerListTitle h1 {
|
||||
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%);
|
||||
}
|
||||
.playerListTitle .arrow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.playerListTitle .arrowToggle {
|
||||
display: none;
|
||||
}
|
||||
.playerList {
|
||||
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;
|
||||
}
|
||||
|
||||
.playerList .player p {
|
||||
margin-left: 5px;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.playerList .player .profilePicture {
|
||||
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;
|
||||
}
|
||||
|
||||
.playerList .player button:last-of-type {
|
||||
margin-right: 3vw;
|
||||
}
|
||||
|
||||
.playerList .player img {
|
||||
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);
|
||||
}
|
||||
|
||||
.newPlayerInput p {
|
||||
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;
|
||||
}
|
||||
|
||||
.newPlayerInput button {
|
||||
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;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user