Added real frontend

Made hostname global and easy to change in docker

src/components/items/characterModal.vue

@@ -0,0 +1,140 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+         <div class="modalContainer">
+            <div class="modalWrapper">
+               <img
+                  class="closeModalImg"
+                  src="cancel-black-36dp.svg"
+                  alt="closeModalIMG"
+                  @click="closeModal"
+               />
+               <h1 @click="test">{{ playerName }}, choose your fighter!</h1>
+               <div class="fighterDiv">
+                  <div class="fighter" @click="chooseFighter('Adol')">
+                     <img src="characters/Adol.png" alt="adol" />
+                     <p>Adol Christin</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Link')">
+                     <img src="characters/Link.png" alt="link" />
+                     <p>Link</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Barbarian')">
+                     <img src="characters/Barbarian.png" alt="barbarian" />
+                     <p>Barbarian</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Layton')">
+                     <img src="characters/Layton.png" alt="layton" />
+                     <p>Professor Layton</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Kiryu')">
+                     <img src="characters/Kiryu.png" alt="kiryu" />
+                     <p>Kazuma Kiryu</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Miles')">
+                     <img src="characters/Miles.png" alt="miles" />
+                     <p>Miles Edgeworth</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Lemmings')">
+                     <img src="characters/Lemmings.png" alt="lemmings" />
+                     <p>Lemmings</p>
+                  </div>
+                  <div class="fighter" @click="chooseFighter('Samus')">
+                     <img src="characters/Samus.png" alt="samus" />
+                     <p>Samus</p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+         playerName: "",
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal(playerName) {
+         this.playerName = playerName;
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+      chooseFighter(profilePicSrc) {
+         let payload = {
+            playerName: this.playerName,
+            profile: "characters/" + profilePicSrc + ".png",
+         };
+         this.$store.dispatch("changePlayerProfile", payload);
+         this.closeModal();
+      },
+   },
+};
+</script>
+
+<style scoped>
+.modalContainer {
+   width: 80%; /* Could be more or less, depending on screen size */
+}
+.fighterDiv {
+   display: flex;
+   width: 100%;
+   justify-content: center;
+   margin-top: 30px;
+   flex-wrap: wrap;
+}
+
+.fighterDiv img {
+   width: 180px;
+   height: 90px;
+}
+
+.fighter {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   text-align: center;
+   width: 14vw;
+   margin-top: 30px;
+}
+.fighter > * {
+   width: 100%;
+}
+.fighter:hover {
+   outline: 1px solid rgb(128, 83, 0);
+   outline-offset: 2px;
+   cursor: pointer;
+}
+.fighter p {
+   margin-top: 8px;
+   font-size: 1.3rem;
+}
+
+@media only screen and (max-width: 1000px) {
+   .modalContainer {
+      width: 95%; /* Could be more or less, depending on screen size */
+   }
+   .fighterDiv {
+      margin-top: 30px;
+   }
+   .fighterDiv img {
+      width: 80px;
+      height: 40px;
+   }
+
+   .fighter {
+      width: 25vw;
+   }
+}
+</style>