MusicFrontend/src/components/items/playersWindow.vue

<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>