Added real frontend

Made hostname global and easy to change in docker

Dockerfile

@@ -1,17 +1,17 @@
-FROM node:lts-alpine as build_vue
+#FROM node:lts-alpine as build_vue
 
 # make the 'app' folder the current working directory
-WORKDIR /app
+#WORKDIR /app
 
 # copy both 'package.json' and 'package-lock.json' (if available)
-COPY cmd/frontend/package*.json ./
+#COPY cmd/frontend/package*.json ./
 
 # install project dependencies
-RUN npm install
+#RUN npm install
 
-COPY cmd/frontend .
+#COPY cmd/frontend .
 
-RUN npm run build
+#RUN npm run build
 
 FROM golang:1.16-alpine as build_go
 
@@ -25,25 +25,25 @@ RUN go mod download
 
 WORKDIR /music-server/cmd
 
-COPY --from=build_vue /app/dist ./frontend/dist
+#COPY --from=build_vue /app/dist ./frontend/dist
 
 RUN go build -o /music-server/MusicServer
 
 # Stage 2, distribution container
 FROM golang:1.16-alpine
-RUN apk add --no-cache bash
+RUN apk add --no-cache bash npm
 EXPOSE 8080
 VOLUME /sorted
-VOLUME /doc
 
 ENV DB_HOST ""
 ENV DB_PORT ""
 ENV DB_USERNAME ""
 ENV DB_PASSWORD ""
 ENV DB_NAME ""
+ENV HOSTNAME ""
 
 COPY --from=build_go /music-server/MusicServer .
-COPY docs/swagger.yaml .
+COPY cmd/frontend ./frontend/
 COPY ./songs/ ./songs/
 COPY ./init.sh .
 RUN chmod 777 ./init.sh

cmd/frontend/README.md

@@ -0,0 +1,24 @@
+# music-randomizer-vue
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

cmd/frontend/index.js

@@ -0,0 +1,26 @@
+const express = require("express");
+const path = require("path");
+const routes = require("./routes.js");
+const app = express();
+const cors = require("cors");
+/* const bodyParser = require("body-parser"); */
+const PORT = process.env.PORT || 5005;
+const mainUrl = "test";
+
+
+console.log(`Server started on port ${PORT}`);
+
+//app.use(bodyParser.json());
+
+//Routes
+/* app.use(express.static(path.join(__dirname, "public"))); */
+/* app.use(express.static(path.join(__dirname, "assets"))); */
+app.use(express.static(path.join(__dirname)));
+app.use(express.static(path.join(__dirname, "dist")));
+/* app.use(express.static(path.join(__dirname, "public"))); */
+
+/* console.log(__dirname); */
+app.use(cors());
+app.use(routes);
+
+app.listen(PORT, "0.0.0.0");

cmd/frontend/package.json

@@ -1,42 +1,51 @@
 {
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
+   "name": "music-randomizer-vue",
+   "version": "0.1.0",
+   "private": true,
+   "scripts": {
+      "serve": "vue-cli-service serve",
+      "build": "vue-cli-service build",
+      "lint": "vue-cli-service lint"
+   },
+   "dependencies": {
+      "axios": "^0.21.1",
+      "config.js": "^0.1.0",
+      "core-js": "^3.8.2",
+      "cors": "^2.8.5",
+      "express": "^4.17.1",
+      "nodemon": "^2.0.7",
+      "vue": "^3.0.5",
+      "vue-axios": "^3.2.2",
+      "vuex": "^4.0.0-rc.2"
+   },
+   "devDependencies": {
+      "@vue/cli-plugin-babel": "^4.5.10",
+      "@vue/cli-plugin-eslint": "^4.5.10",
+      "@vue/cli-service": "^4.5.10",
+      "@vue/compiler-sfc": "^3.0.5",
+      "babel-eslint": "^10.1.0",
+      "eslint": "^6.7.2",
+      "eslint-plugin-vue": "^7.4.1"
+   },
+   "eslintConfig": {
+      "root": true,
+      "env": {
+         "node": true
+      },
+      "extends": [
+         "plugin:vue/vue3-essential",
+         "eslint:recommended"
+      ],
+      "parserOptions": {
+         "parser": "babel-eslint"
+      },
+      "rules": {
+         "no-debugger": 1
+      }
+   },
+   "browserslist": [
+      "> 1%",
+      "last 2 versions",
+      "not dead"
+   ]
 }

cmd/frontend/public/cancel-black-36dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>

cmd/frontend/public/index.html

@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

cmd/frontend/public/keyboard_arrow_down-black-36dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>

cmd/frontend/public/keyboard_arrow_up-black-36dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><path d="M0 0h24v24H0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"/></svg>

cmd/frontend/public/person_add_alt_1-black-36dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M13,8c0-2.21-1.79-4-4-4S5,5.79,5,8s1.79,4,4,4S13,10.21,13,8z M15,10v2h3v3h2v-3h3v-2h-3V7h-2v3H15z M1,18v2h16v-2 c0-2.66-5.33-4-8-4S1,15.34,1,18z"/></g></svg>

cmd/frontend/public/person_remove-black-36dp.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24" fill="black" width="36px" height="36px"><g><rect fill="none" height="24" width="24"/></g><g><path d="M14,8c0-2.21-1.79-4-4-4S6,5.79,6,8s1.79,4,4,4S14,10.21,14,8z M17,10v2h6v-2H17z M2,18v2h16v-2c0-2.66-5.33-4-8-4 S2,15.34,2,18z"/></g></svg>

cmd/frontend/src/App.vue

@@ -1,28 +1,147 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
+   <the-header @start-sound-test="startSoundTest"></the-header>
+   <the-main ref="theMain"></the-main>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import TheHeader from "./components/layout/TheHeader.vue";
+import TheMain from "./components/layout/TheMain.vue";
 
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
+   components: {
+      TheHeader,
+      TheMain,
+   },
+   data() {
+      return {
+         screenWidth: 1000,
+      };
+   },
+   computed: {
+      displayWhenDesktop() {
+         if (this.screenWidth > 600) {
+            return true;
+         } else {
+            return false;
+         }
+      },
+   },
+   methods: {
+      startSoundTest() {
+         this.$refs.theMain.startSoundTest();
+      },
+   },
+   mounted() {
+      this.screenWidth = window.innerWidth;
+      window.addEventListener("resize", () => (this.screenWidth = window.innerWidth));
+   },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+* {
+   margin: 0;
+   padding: 0;
+   font-family: Helvetica;
+}
+
+button {
+   background: rgb(54, 54, 54);
+   border-radius: 10px;
+   border-color: #ff9c00;
+   color: #ff9c00;
+   font-size: 1em;
+   padding: 10px;
+   outline: none;
+}
+
+.app {
+   display: flex;
+   height: 100vh;
+}
+
+body {
+   background-color: #555;
+}
+
+/* Global modal stuff */
+
+.modalAni-enter-from,
+.modalAni-leave-to {
+   opacity: 0;
+   transform: translateY(-20px);
+}
+.modalAni-enter-to,
+.modalAni-leave-from {
+   opacity: 1;
+}
+.modalAni-enter-active,
+.modalAni-leave-active {
+   transition: all 0.25s ease-out;
+}
+
+.modal {
+   position: fixed; /* Stay in place */
+   z-index: 10; /* Sit on top */
+   left: 0;
+   top: 0;
+   width: 100%; /* Full width */
+   height: 100%; /* Full height */
+   overflow: hidden;
+   background-color: rgb(0, 0, 0); /* Fallback color */
+   background-color: rgba(0, 0, 0, 0.5); /* Black w/ opacity */
+}
+.modalContainer {
+   background-color: #eeeeee;
+   margin: 10% auto; /* 15% from the top and centered */
+   border: 1px solid #888;
+   width: 50%; /* Could be more or less, depending on screen size */
+}
+.modalWrapper {
+   display: flex;
+   position: relative;
+   flex-wrap: wrap;
+   padding: 10px 40px;
+}
+
+.modalWrapper:last-child {
+   margin-bottom: 50px;
+}
+
+.closeModalImg {
+   position: absolute;
+   right: 8px;
+   top: 8px;
+   cursor: pointer;
+   opacity: 70%;
+}
+.modal h1 {
+   color: black;
+   margin-left: auto;
+   margin-right: auto;
+   padding-top: 10px;
+   font-size: 1.9rem;
+}
+.modal p {
+   color: black;
+}
+
+@media only screen and (max-width: 1000px) {
+   .modalContainer {
+      margin: 10% auto; /* 15% from the top and centered */
+      width: 93%; /* Could be more or less, depending on screen size */
+   }
+   .modalWrapper {
+      padding: 10px 10px;
+   }
+
+   .modalWrapper:last-child {
+      margin-bottom: 10px;
+   }
+
+   .modal h1 {
+      padding-top: 10px;
+      font-size: 1.6rem;
+   }
 }
 </style>

cmd/frontend/src/arne.js

@@ -0,0 +1,3 @@
+export default {
+    hostname: "$HOSTNAME",
+}

cmd/frontend/src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

cmd/frontend/src/components/items/CurrentlyPlaying.vue

@@ -0,0 +1,95 @@
+<template>
+   <!-- <div class="currentlyPlayingDiv">
+      <div class="textWrapper">
+         <transition-group name="displayingInfo" appear>
+            <p v-if="currentTrackHidden" :key="1">????????</p>
+            <p v-else :key="2">{{ currentGame }}</p>
+            <p v-if="currentTrackHidden" :key="3">??????</p>
+            <p v-else :key="4">{{ currentTrack }}</p>
+         </transition-group>
+      </div>
+   </div> -->
+   <div class="currentlyPlayingDiv">
+      <transition name="displayingInfo">
+         <div v-if="currentTrackHidden" class="textWrapper">
+            <p>????????</p>
+            <p>??????</p>
+         </div>
+         <div v-else class="textWrapper">
+            <p>{{ currentGame }}</p>
+            <p>{{ currentTrack }}</p>
+         </div>
+      </transition>
+   </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   computed: {
+      ...mapState(["currentGame", "currentTrack", "currentTrackHidden"]),
+   },
+};
+</script>
+
+<style scoped>
+.displayingInfo-enter-from,
+.displayingInfo-leave-to {
+   opacity: 0;
+}
+.displayingInfo-enter-to,
+.displayingInfo-leave-from {
+   opacity: 1;
+}
+.displayingInfo-enter-active {
+   transition: opacity 0.7s ease-out;
+}
+
+.displayingInfo-leave-active {
+   display: none;
+}
+
+.currentlyPlayingDiv {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   width: 60vw;
+   height: 27vh;
+   margin-right: 0.5vw;
+   color: #ff8800;
+   background-color: #333;
+   border-radius: 10px;
+   text-align: center;
+   overflow: hidden;
+}
+.currentlyPlayingDiv .textWrapper {
+   padding: 0.75vw;
+}
+.currentlyPlayingDiv .textWrapper p {
+   width: 100%;
+   font-size: 2.3em;
+}
+
+.currentlyPlayingDiv p:first-child {
+   margin-top: 1.5vw;
+   margin-bottom: 1.5vw;
+   font-size: 2.8em;
+}
+
+@media only screen and (max-width: 1000px) {
+   .currentlyPlayingDiv {
+      width: 100vw;
+      height: 35vw;
+      margin-right: 0;
+      border-radius: 0px;
+      align-content: center;
+   }
+   .currentlyPlayingDiv .textWrapper p {
+      font-size: 1.1em;
+   }
+   .currentlyPlayingDiv p:first-child {
+      margin-bottom: 2vw;
+      font-size: 1.4em;
+   }
+}
+</style>

cmd/frontend/src/components/items/InspirationWindow.vue

@@ -0,0 +1,99 @@
+<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>
+</template>
+
+<script>
+import arne from '../../arne.js'
+export default {
+   data() {
+      return {
+         allGamesList: [],
+         scrollDown: true,
+      };
+   },
+   methods: {
+      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);
+
+         if (currentScrollLocation === inspirationListDOM.scrollTop) {
+            this.scrollDown = !this.scrollDown;
+         }
+      },
+   },
+   mounted() {
+      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);
+         });
+      window.setInterval(() => {
+         this.scrollInspiration();
+      }, 40);
+   },
+};
+</script>
+
+<style scoped>
+.inspirationDiv {
+   width: 38vw;
+   height: 20vh;
+   color: white;
+}
+
+.inspirationTitle {
+   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;
+}
+
+.inspirationEntry {
+   width: 100%;
+   max-width: 38vw;
+   padding: 0.3vh 0.8vh;
+   font-size: 1.2rem;
+}
+
+@media only screen and (max-width: 1000px) {
+   .inspirationDiv {
+      display: none;
+   }
+}
+</style>

cmd/frontend/src/components/items/aboutModal.vue

@@ -0,0 +1,78 @@
+<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>Music Player Randomizer v0.1</h1>
+               <p class="descriptionText">
+                  Try your video game music knowledge with this VGM randomizer,
+                  invite your friends and see who is the best.
+               </p>
+               <p class="creditText">
+                  Back-end done by Sebastian Olsson,
+                  <a href="https://twitter.com/Raida91">Twitter</a>
+               </p>
+               <p class="creditText">
+                  Front-end done by Peter Johansson,
+                  <a href="https://twitter.com/WebDevPJ">Twitter</a>
+               </p>
+               <!-- <p class="patchNotesText">
+               Full patch notes can be found
+               <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">here</a>
+            </p> -->
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+   },
+};
+</script>
+
+<style scoped>
+p {
+   font-size: 1.2rem;
+   width: 100%;
+}
+
+.descriptionText {
+   margin-top: 35px;
+}
+
+.creditText {
+   margin-top: 30px;
+}
+.creditText:nth-child(5) {
+   margin-top: 0px;
+}
+
+.patchNotesText {
+   margin-top: 20px;
+}
+</style>

cmd/frontend/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>

cmd/frontend/src/components/items/extraButtons.vue

@@ -0,0 +1,83 @@
+<template>
+   <div class="extraButtonsDiv">
+      <button @click="resetPlaylist">Reset playlist</button>
+      <button @click="resetPoints">Reset points</button>
+      <button @click="startSoundTest">Sound test</button>
+   </div>
+</template>
+
+<script>
+import arne from '../../arne.js'
+export default {
+   data() {
+      return {
+         emptyPlaylist: [],
+      };
+   },
+   methods: {
+      async resetPoints() {
+         /* await this.APIresetPlaylist(); */
+         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);
+      },
+      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();
+               });
+         });
+      },
+   },
+};
+</script>
+
+<style scoped>
+.extraButtonsDiv {
+   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;
+}
+
+@media only screen and (max-width: 1000px) {
+   .extraButtonsDiv {
+      display: flex;
+      position: relative;
+      flex-wrap: wrap;
+      justify-content: center;
+   }
+
+   button {
+      width: 51vw;
+      height: 40px;
+      margin-bottom: 10px;
+      justify-content: center;
+   }
+}
+</style>

cmd/frontend/src/components/items/mobileMenu.vue

@@ -0,0 +1,136 @@
+<template>
+   <div
+      v-if="show"
+      class="mobileMenu"
+      @click="checkIfClickShouldCloseMobileMenu"
+   >
+      <transition name="mobileMenuAni">
+         <div v-if="showContent" class="mobileMenuContainer">
+            <div class="mobileMenuWrapper">
+               <h1>Menu</h1>
+               <button class="settingsButton" @click="showSettingsModal">
+                  Settings
+               </button>
+               <button class="statisticsButton" @click="showStatisticsModal">
+                  Statistics
+               </button>
+               <button class="aboutButton" @click="showAboutModal">
+                  About
+               </button>
+               <h1>Control</h1>
+               <extra-buttons
+                  @start-sound-test="startSoundTest"
+               ></extra-buttons>
+            </div>
+         </div>
+      </transition>
+   </div>
+</template>
+
+<script>
+import extraButtons from "./extraButtons.vue";
+
+export default {
+   components: {
+      extraButtons,
+   },
+   data() {
+      return {
+         show: false,
+         showContent: false,
+      };
+   },
+   methods: {
+      closeMobileMenu() {
+         this.showContent = false;
+         setTimeout(() => {
+            this.show = false;
+         }, 250);
+      },
+      openMobileMenu() {
+         this.show = true;
+      },
+      openMobileMenuContent() {
+         this.showContent = true;
+      },
+      checkIfClickShouldCloseMobileMenu(event) {
+         if (event.target.classList[0] === "mobileMenu") {
+            this.closeMobileMenu();
+         }
+      },
+      showSettingsModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-settings-modal");
+      },
+      showStatisticsModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-statistics-modal");
+      },
+      showAboutModal() {
+         this.show = false;
+         this.showContent = false;
+         this.$emit("show-about-modal");
+      },
+      startSoundTest() {
+         this.$emit("start-sound-test");
+      },
+   },
+};
+</script>
+
+<style scoped>
+.mobileMenuAni-enter-from,
+.mobileMenuAni-leave-to {
+   opacity: 0.6;
+   transform: translateX(80vw);
+}
+.mobileMenuAni-enter-to,
+.mobileMenuAni-leave-from {
+   opacity: 1;
+   transform: translateX(0vw);
+}
+.mobileMenuAni-enter-active,
+.mobileMenuAni-leave-active {
+   transition: all 0.3s ease-out;
+}
+
+.mobileMenu {
+   position: fixed;
+   z-index: 8;
+   right: 0;
+   bottom: 0;
+   width: 100%;
+   height: 100%;
+   overflow: hidden;
+   background-color: rgb(0, 0, 0);
+   background-color: rgba(0, 0, 0, 0.5);
+}
+
+.mobileMenuContainer {
+   background-color: #c4c4c4;
+   width: 80vw;
+   height: 100%;
+   margin-left: 20%;
+}
+
+.mobileMenuWrapper {
+   display: flex;
+   position: relative;
+   flex-wrap: wrap;
+   justify-content: center;
+}
+
+h1 {
+   margin: 10px 0px;
+   width: 100%;
+   text-align: center;
+}
+
+button {
+   width: 51vw;
+   height: 40px;
+   margin-bottom: 10px;
+}
+</style>

cmd/frontend/src/components/items/playersWindow.vue

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

cmd/frontend/src/components/items/playlistHistory.vue

@@ -0,0 +1,216 @@
+<template>
+   <div class="playlistHistoryDiv">
+      <div @click="toggleDisplay" class="playlistHistoryTitle">
+         <h1>Playlist history</h1>
+         <img v-if="display" src="keyboard_arrow_up-black-36dp.svg" alt="" />
+         <img v-else src="keyboard_arrow_down-black-36dp.svg" alt="" />
+      </div>
+      <transition-group
+         tag="div"
+         v-if="display"
+         name="playlistHistory"
+         class="playlistHistory"
+         ref="playlistHistory"
+      >
+         <div
+            class="track"
+            v-for="track in playlistHistory"
+            :key="track.SongNo"
+            @click="playSelectedTrack(track, $event)"
+         >
+            <p
+               v-if="checkIfHidden(track, playlistHistory)"
+               :class="{ activeTrack: track.CurrentlyPlaying }"
+            >
+               ??? - ???
+            </p>
+            <p v-else-if="track.Game != ''" :class="{ activeTrack: track.CurrentlyPlaying }">
+               {{ track.SongNo }}. {{ track.Game }} -
+               {{ displayTrack(track.Song) }}
+            </p>
+            <span v-if="currentlyLoadingTrack === track.SongNo" class="loadingTrack">
+               -- Loading --
+            </span>
+         </div>
+      </transition-group>
+   </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   data() {
+      return {
+         display: true,
+      };
+   },
+   computed: {
+      ...mapState(["playlistHistory", "currentTrackHidden", "currentlyLoadingTrack"]),
+   },
+   methods: {
+      checkIfHidden(track, playlistHistory) {
+         if (track.SongNo == playlistHistory.length - 1 && this.currentTrackHidden) {
+            return true;
+         } else {
+            false;
+         }
+      },
+      checkIfLoading() {
+         return true;
+      },
+      displayTrack(trackName) {
+         /* Todo: Is this if-check necessary? */
+         if (trackName === undefined) {
+            return "";
+         } else {
+            return trackName.replace(".mp3", "");
+         }
+      },
+      playSelectedTrack(track, event) {
+         console.log(event.path);
+         this.$store.dispatch("setCurrentlyLoadingTrack", track.SongNo);
+         this.$emit("play-selected-track", track);
+      },
+      scrollToBottom() {
+         if (this.display) {
+            this.$nextTick(() => {
+               this.$refs.playlistHistory.$el.scrollTop = this.$refs.playlistHistory.$el.scrollHeight;
+            });
+         }
+      },
+      toggleDisplay() {
+         if (window.innerWidth < 600) {
+            this.display = !this.display;
+         }
+      },
+   },
+   created() {
+      if (window.innerWidth < 600) {
+         this.display = false;
+      }
+   },
+};
+</script>
+
+<style scoped>
+.playlistHistory-enter-from {
+   opacity: 0;
+}
+.playlistHistory-enter-to {
+   opacity: 1;
+}
+.playlistHistory-enter-active {
+   transition: all 0.5s ease-out;
+}
+.playlistHistory-move {
+   transition: 0.25s;
+   transition-property: transform, opacity;
+}
+/* End of Animation block */
+
+/* Scroll */
+
+.playlistHistory::-webkit-scrollbar {
+   width: 17px;
+}
+.playlistHistory {
+   scrollbar-color: #4f5253c2;
+}
+.playlistHistory::-webkit-scrollbar-track {
+   background: #393c4179;
+   border-radius: 5px;
+}
+.playlistHistory::-webkit-scrollbar-thumb {
+   background-color: #6d7679c2;
+   border-radius: 5px;
+   border: 2px solid #3c434e79;
+}
+
+/* End of Scroll */
+
+.playlistHistoryDiv {
+   display: inline-block;
+   width: 60vw;
+   color: white;
+   margin-right: 0.5vw;
+}
+
+.playlistHistoryTitle {
+   display: flex;
+   background-color: #333;
+   height: 5vh;
+   justify-content: center;
+   align-items: center;
+}
+.playlistHistoryTitle img {
+   display: none;
+}
+.playlistHistory {
+   background-color: rgb(66, 66, 66);
+   width: 60vw;
+   height: 37vh;
+   overflow-x: hidden;
+   overflow-y: scroll;
+}
+.playlistHistory .track {
+   display: flex;
+   flex-wrap: nowrap;
+   justify-content: flex-start;
+   width: 57vw;
+   height: auto;
+   min-height: 30px;
+   line-height: 1.5;
+   font-size: 1.1rem;
+   align-items: center;
+   padding: 0.3vh 0.6vh;
+   cursor: pointer;
+}
+.playlistHistory .track:nth-child(even) {
+   background-color: #4e4e4e;
+}
+.playlistHistory .activeTrack {
+   color: yellow;
+}
+.tracklistEmptyDiv {
+   cursor: default;
+}
+.loadingTrack {
+   color: #ff9c00;
+   margin-left: 20px;
+}
+
+@media only screen and (max-width: 1000px) {
+   .playlistHistory::-webkit-scrollbar {
+      width: 5px;
+   }
+   .playlistHistoryDiv {
+      width: 100%;
+      margin: 0;
+      margin-bottom: 0.3vw;
+   }
+
+   .playlistHistoryTitle {
+      height: 10vw;
+      font-size: 0.8rem;
+   }
+   .playlistHistoryTitle img {
+      display: block;
+      position: absolute;
+      max-height: 100%;
+      left: 0;
+      filter: invert(77%) sepia(8%) saturate(6%) hue-rotate(317deg) brightness(95%) contrast(87%);
+   }
+   .playlistHistory {
+      width: 100vw;
+      height: 56vw;
+   }
+   .playlistHistory .track {
+      width: 98vw;
+      font-size: 0.8rem;
+      padding: 1.5vw 1vw;
+   }
+   .loadingTrack {
+      display: none;
+   }
+}
+</style>

cmd/frontend/src/components/items/settingsModal.vue

@@ -0,0 +1,171 @@
+<template>
+   <!-- Round Settings, Stop after current, Don't hide title -->
+   <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>Settings</h1>
+
+               <div class="checkboxDiv">
+                  <input
+                     type="checkbox"
+                     name="stopAfterCurrent"
+                     id="stopAfterCurrent"
+                     v-model="checkboxStopAfterCurrent"
+                     @change="updateOptionStopAfterCurrent"
+                  />
+                  <label for="stopAfterCurrent">Stop after current</label>
+               </div>
+               <div class="checkboxDiv">
+                  <input
+                     type="checkbox"
+                     name="hideTitle"
+                     id="hideTitle"
+                     v-model="checkboxHideTitle"
+                     @change="updateOptionHideTitle"
+                  />
+                  <label for="hideTitle">Hide next track</label>
+               </div>
+
+               <div class="winningScoreDiv">
+                  <span>Winning Score: {{ winningScore }}</span>
+                  <button
+                     :class="{ disabled: roundStarted }"
+                     :disabled="roundStarted"
+                     @click="changeScore(-1)"
+                  >
+                     -1
+                  </button>
+                  <button
+                     :class="{ disabled: roundStarted }"
+                     :disabled="roundStarted"
+                     @click="changeScore(1)"
+                  >
+                     +1
+                  </button>
+               </div>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   data() {
+      return {
+         show: false,
+         checkboxStopAfterCurrent: false,
+         checkboxHideTitle: false,
+      };
+   },
+   computed: {
+      ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack"]),
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+      updateOptionHideTitle() {
+         if (this.checkboxHideTitle) {
+            this.$store.dispatch("updateHideNextTitle", true);
+         } else {
+            this.$store.dispatch("updateHideNextTitle", false);
+         }
+      },
+      updateOptionStopAfterCurrent() {
+         if (this.checkboxStopAfterCurrent) {
+            this.$store.dispatch("updateStopAfterCurrent", true);
+         } else {
+            this.$store.dispatch("updateStopAfterCurrent", false);
+         }
+      },
+      changeScore(score) {
+         if (score < 0) {
+            this.$store.dispatch("setWinningScore", -1);
+         } else {
+            this.$store.dispatch("setWinningScore", 1);
+         }
+      },
+   },
+   mounted() {
+      this.checkboxStopAfterCurrent = this.stopAfterCurrent;
+      this.checkboxHideTitle = this.hideNextTrack;
+   },
+};
+</script>
+
+<style scoped>
+.winningScoreDiv {
+   width: 100%;
+   display: inline-flex;
+   align-items: center;
+   flex-wrap: nowrap;
+   margin-top: 30px;
+}
+
+.checkboxDiv {
+   margin: 5px;
+   width: 100%;
+}
+.checkboxDiv:first-of-type {
+   margin-top: 20px;
+}
+.checkboxDiv input {
+   transform: scale(1.3);
+}
+.checkboxDiv label {
+   margin-left: 10px;
+   font-size: 1.5rem;
+}
+
+.winningScoreDiv span {
+   font-size: 1.7rem;
+   margin-right: 10px;
+   width: 245px;
+}
+.winningScoreDiv button {
+   display: flex;
+   width: 50px;
+   height: 33px;
+   background: rgb(16, 99, 194);
+   color: rgb(235, 235, 235);
+   border-color: rgb(161, 161, 161);
+   justify-content: center;
+   align-items: center;
+   line-height: 0;
+   font-size: 1.5rem;
+   margin: 3px;
+}
+
+.disabled {
+   opacity: 50%;
+}
+
+@media only screen and (max-width: 1000px) {
+   .checkboxDiv label {
+      font-size: 1.3rem;
+   }
+
+   .winningScoreDiv span {
+      font-size: 1.3rem;
+      margin-right: 10px;
+      width: 245px;
+   }
+}
+</style>

cmd/frontend/src/components/items/statisticsModal.vue

@@ -0,0 +1,68 @@
+<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>Statistics</h1>
+               <p>Total amount of games in the playlist: {{ howManyGames }}</p>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   data() {
+      return {
+         show: false,
+      };
+   },
+   computed: {
+      ...mapState(["howManyGames"]),
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+   },
+};
+</script>
+
+<style scoped>
+p {
+   font-size: 1.2rem;
+   width: 100%;
+   margin-top: 30px;
+}
+
+.descriptionText {
+   margin-top: 35px;
+}
+
+.creditText {
+   margin-top: 30px;
+}
+.creditText:nth-child(5) {
+   margin-top: 0px;
+}
+
+.patchNotesText {
+   margin-top: 20px;
+}
+</style>

cmd/frontend/src/components/items/winningModal.vue

@@ -0,0 +1,44 @@
+<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>{{ playerName }} won!!</h1>
+            </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();
+         }
+      },
+   },
+};
+</script>
+
+<style scoped></style>

cmd/frontend/src/components/layout/TheFooter.vue

@@ -0,0 +1,371 @@
+<template>
+   <footer>
+      <div class="audioAndButtonsDiv">
+         <div class="audioButtonsDiv">
+            <button
+               class="bigButton"
+               :class="{ disabled: disableButtons }"
+               :disabled="disableButtons"
+               @click="randomizeTrack()"
+            >
+               <p v-if="!disableButtons"><u>R</u>andomize new track</p>
+               <p v-else>Loading...</p>
+            </button>
+            <button class="bigButton" @click="showAnswer()"><u>S</u>how answer</button>
+         </div>
+         <div class="audioDiv">
+            <audio
+               controls
+               class="audioPlayer"
+               :src="currentTrackSrcFile"
+               ref="audioPlayer"
+               :onended="trackHasEnded"
+            ></audio>
+         </div>
+      </div>
+   </footer>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import arne from "../../arne.js";
+export default {
+   data() {
+      return {
+         currentTrackSrcFile: "",
+         disableButtons: false,
+         loadingBar: "",
+      };
+   },
+   computed: {
+      ...mapState([
+         "stopAfterCurrent",
+         "localPlaylist",
+         "hideNextTrack",
+         "roundStarted",
+         "specialTrackIsPlaying",
+      ]),
+   },
+   methods: {
+      async randomizeTrack() {
+         console.log("Randomizing track");
+         /* Prevents anyone from changing the winning score after the round has started */
+         if (this.roundStarted === false) {
+            this.$store.dispatch("setRoundStarted", true);
+         }
+         let trackAddedToQue = false;
+         this.disableButtons = true;
+         let copyOfPlaylist = this.localPlaylist;
+         //If the local playlist of MP3s is empty, wait for a new track to load
+         if (copyOfPlaylist.length === 0) {
+            console.log("No track preloaded, loading a new one");
+            await this.APIgetRandomizedTrack();
+            await this.APIaddToQue();
+            trackAddedToQue = true;
+         }
+         //Update the source file for the media player (binded property to Audio tag in the template)
+         this.currentTrackSrcFile = window.URL.createObjectURL(copyOfPlaylist[0]);
+         /*          this.$nextTick(() => {}); */
+         if (!trackAddedToQue) {
+            await this.APIaddToQue();
+         }
+         await this.APIgetPlaylistHistory();
+
+         this.$refs.audioPlayer.play();
+         this.$emit("scroll-to-bottom-playlist-history");
+         copyOfPlaylist.shift();
+         if (this.hideNextTrack) {
+            this.$store.dispatch("setCurrentTrackHidden", true);
+         } else {
+            this.$store.dispatch("setCurrentTrackHidden", false);
+         }
+         await this.APIgetInfoAboutCurrentTrack();
+         await this.randomizeTrackInAdvance();
+         this.disableButtons = false;
+      },
+      async randomizeTrackInAdvance() {
+         console.log("Randomizing track in advance");
+         try {
+            await this.APIgetRandomizedTrack();
+         } catch (error) {
+            console.log(error);
+            console.log("Error: A track couldn't be loaded in advance");
+         }
+         return new Promise((resolve) => {
+            resolve();
+         });
+      },
+      async playSpecificTrack(track) {
+         await this.APIplaySpecificTrack(track.SongNo);
+         this.$store.dispatch("setCurrentlyLoadingTrack", "");
+         await this.APIgetPlaylistHistory();
+         this.$store.dispatch("setCurrentTrackHidden", false);
+         await this.APIgetInfoAboutCurrentTrack();
+      },
+      showAnswer() {
+         this.$store.dispatch("setCurrentTrackHidden", false);
+      },
+      startSoundTest() {
+         this.$refs.audioPlayer.pause();
+         this.currentTrackSrcFile = "sounds/check.mp3";
+         this.$store.dispatch("setSpecialTrackIsPlaying", true);
+         this.$nextTick(() => {
+            this.$refs.audioPlayer.currentTime = 0;
+            this.$refs.audioPlayer.play();
+         });
+      },
+      playWelcomeSound() {
+         let randomNumber = Math.floor(Math.random() * 10);
+         this.$refs.audioPlayer.pause();
+         if (randomNumber == 0) {
+            this.currentTrackSrcFile = "sounds/sound1.mp3";
+         } else if (randomNumber < 5) {
+            this.currentTrackSrcFile = "sounds/intro_short.mp3";
+         } else {
+            this.currentTrackSrcFile = "sounds/intro_long.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";
+         this.$store.dispatch("setSpecialTrackIsPlaying", true);
+         this.$nextTick(() => {
+            this.$refs.audioPlayer.currentTime = 0;
+            this.$refs.audioPlayer.play();
+         });
+      },
+      APIgetRandomizedTrack() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/rand`,
+               responseType: "blob",
+               onDownloadProgress: (progressEvent) => {
+                  let percentCompleted = Math.round(
+                     (progressEvent.loaded * 100) / progressEvent.total
+                  );
+                  if (percentCompleted % 10 == 0) {
+                     //Debug for slow downloading
+                     //console.log(percentCompleted);
+                  }
+               },
+            })
+               .then((response) => {
+                  let mp3 = new Blob([response.data], { type: "audio/mp3" });
+                  this.$store.dispatch("updateLocalPlaylist", mp3);
+                  this.$nextTick(() => {
+                     resolve();
+                  });
+               })
+               .catch(function(error) {
+                  console.log("An error happened when fetching the track");
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+      APIaddToQue() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/addQue`,
+            })
+               .then(() => {
+                  resolve(false);
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+      APIgetInfoAboutCurrentTrack() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/info`,
+            })
+               .then((response) => {
+                  let gameInfoObject = {
+                     game: response.data.Game,
+                     track: response.data.Song.replace(".mp3", ""),
+                     songNo: response.data.SongNo,
+                  };
+                  this.$store.dispatch("setCurrentGame", gameInfoObject.game);
+                  this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
+                  resolve(false);
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+      APIgetPlaylistHistory() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/list`,
+            })
+               .then((response) => {
+                  let tracklistArray = response.data;
+                  this.$store.dispatch("updatePlaylistHistory", tracklistArray);
+                  resolve();
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+      APIplaySpecificTrack(trackNumber) {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/music?song=${trackNumber}`,
+               responseType: "blob",
+            })
+               .then((response) => {
+                  let mp3 = new Blob([response.data], { type: "audio/mp3" });
+                  this.currentTrackSrcFile = window.URL.createObjectURL(mp3);
+                  this.$nextTick(() => {
+                     this.$refs.audioPlayer.play();
+                     resolve();
+                  });
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
+      trackHasEnded() {
+         if (this.specialTrackIsPlaying) {
+            this.$store.dispatch("setSpecialTrackIsPlaying", false);
+            return 0;
+         }
+         if (!this.stopAfterCurrent) {
+            this.randomizeTrack();
+         }
+      },
+   },
+   async mounted() {
+      await this.APIgetPlaylistHistory();
+   },
+};
+</script>
+
+<style scoped>
+footer {
+   display: flex;
+   position: absolute;
+   bottom: 0px;
+   justify-content: flex-end;
+   width: 100%;
+}
+
+.audioAndButtonsDiv {
+   display: flex;
+   flex-wrap: wrap;
+   width: 80vw;
+   margin-right: 1vh;
+}
+.audioButtonsDiv {
+   display: flex;
+   flex-direction: row-reverse;
+   width: 100%;
+   margin-bottom: 2vh;
+   align-items: center;
+}
+
+.audioButtonsDiv button:nth-child(1) {
+   margin-right: 3vw;
+   width: 200px;
+}
+.audioButtonsDiv button:nth-child(2) {
+   margin-right: 25vw;
+   width: 220px;
+}
+.audioButtonsDiv .bigButton {
+   height: 7vh;
+}
+.disabled {
+   opacity: 0.5;
+}
+
+.audioDiv {
+   width: 100%;
+}
+.audioDiv audio {
+   width: 100%;
+   font-size: 2rem;
+}
+audio::-webkit-media-controls-panel {
+   background-color: rgb(185, 185, 185);
+}
+audio::-webkit-media-controls-current-time-display {
+   color: rgb(0, 0, 0);
+   font-size: 4em;
+}
+audio::-webkit-media-controls-time-remaining-display {
+   color: rgb(0, 0, 0);
+   font-size: 4em;
+}
+
+@media only screen and (max-width: 1000px) {
+   footer {
+      position: static;
+      justify-content: center;
+   }
+
+   .audioAndButtonsDiv {
+      width: 100vw;
+      margin: 0;
+   }
+   .audioButtonsDiv {
+      margin-bottom: 2vw;
+      font-size: 1rem;
+   }
+
+   .audioButtonsDiv button:nth-child(1) {
+      margin: 0;
+      width: 50vw;
+      border-radius: 2px;
+   }
+   .audioButtonsDiv button:nth-child(2) {
+      margin: 0;
+      width: 50vw;
+      border-radius: 2px;
+   }
+   .audioButtonsDiv .bigButton {
+      height: 22vw;
+   }
+   .disabled {
+      opacity: 0.5;
+   }
+
+   .audioDiv {
+      width: 100%;
+   }
+   .audioDiv audio {
+      font-size: 1rem;
+   }
+   audio::-webkit-media-controls-panel {
+      background-color: rgb(185, 185, 185);
+      border-radius: 2px;
+   }
+   audio::-webkit-media-controls-current-time-display {
+      color: rgb(0, 0, 0);
+      font-size: 2em;
+   }
+   audio::-webkit-media-controls-time-remaining-display {
+      color: rgb(0, 0, 0);
+      font-size: 2em;
+   }
+}
+</style>

cmd/frontend/src/components/layout/TheHeader.vue

@@ -0,0 +1,139 @@
+<template>
+   <nav>
+      <p class="title">Music Player Randomizer</p>
+      <div class="navMenuWrapper">
+         <button class="settingsButton" @click="showSettingsModal">
+            Settings
+         </button>
+         <button class="statisticsButton" @click="showStatisticsModal">
+            Statistics
+         </button>
+         <button class="aboutButton" @click="showAboutModal">About</button>
+      </div>
+      <p v-if="!$parent.displayWhenDesktop" class="mobileMenuButton" @click="showMobileMenu">
+         Menu
+      </p>
+      <settingsModal ref="settingsModal"></settingsModal>
+      <statisticsModal ref="statisticsModal"></statisticsModal>
+      <aboutModal ref="aboutModal"></aboutModal>
+      <mobileMenu
+         ref="mobileMenu"
+         @start-sound-test="startSoundTest"
+         @show-settings-modal="showSettingsModal"
+         @show-statistics-modal="showStatisticsModal"
+         @show-about-modal="showAboutModal"
+      ></mobileMenu>
+   </nav>
+</template>
+
+<script>
+import aboutModal from "../items/aboutModal.vue";
+import statisticsModal from "../items/statisticsModal.vue";
+import settingsModal from "../items/settingsModal.vue";
+import mobileMenu from "../items/mobileMenu.vue";
+
+export default {
+   components: {
+      aboutModal,
+      settingsModal,
+      statisticsModal,
+      mobileMenu,
+   },
+   methods: {
+      playSelectedTrack(track) {
+         this.$refs.theFooter.playSpecificTrack(track);
+      },
+      scrollToBottomPlaylistHistory() {
+         this.$refs.playlistHistory.scrollToBottom();
+      },
+      showAboutModal() {
+         this.$refs.aboutModal.openModal();
+      },
+      showSettingsModal() {
+         this.$refs.settingsModal.openModal();
+      },
+      showStatisticsModal() {
+         this.$refs.statisticsModal.openModal();
+      },
+      showMobileMenu() {
+         this.$refs.mobileMenu.openMobileMenu();
+         this.showMobileMenuContent();
+      },
+      showMobileMenuContent() {
+         setTimeout(() => {
+            this.$refs.mobileMenu.openMobileMenuContent();
+         }, 20);
+      },
+      startSoundTest() {
+         this.$emit("start-sound-test");
+      },
+   },
+};
+</script>
+
+<style scoped>
+nav {
+   background: #333;
+   display: flex;
+   align-content: center;
+   align-items: center;
+   width: 100%;
+   height: 5vh;
+}
+
+.title {
+   color: #fff;
+   font-size: 2rem;
+   margin-left: 2vw;
+   font-style: normal;
+}
+
+.navMenuWrapper {
+   margin-left: auto;
+   height: 5vh;
+}
+
+.navMenuWrapper button {
+   background: #333;
+   color: #ff9c00;
+   font-size: 1.3rem;
+   outline: none;
+   cursor: pointer;
+   border: none;
+   border-radius: 3px;
+   height: 100%;
+   padding: 0 20px;
+}
+
+.navMenuWrapper button:hover {
+   background-color: #555;
+}
+
+/* Mobile */
+@media only screen and (max-width: 1000px) {
+   nav {
+      justify-content: center;
+      height: 10vw;
+   }
+   .title {
+      font-size: 1.2rem;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+      margin-left: 5px;
+      /* text-align: ; */
+   }
+
+   .navMenuWrapper {
+      display: none;
+   }
+
+   .mobileMenuButton {
+      color: white;
+      background: grey;
+      padding: 6px;
+      border-top-left-radius: 7px;
+      border-bottom-left-radius: 7px;
+   }
+}
+</style>

cmd/frontend/src/components/layout/TheMain.vue

@@ -0,0 +1,99 @@
+<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>
+</template>
+
+<script>
+import currentlyPlaying from "../items/CurrentlyPlaying.vue";
+import inspirationWindow from "../items/InspirationWindow.vue";
+import playersWindow from "../items/playersWindow.vue";
+import playlistHistory from "../items/playlistHistory.vue";
+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();
+      },
+   },
+};
+</script>
+
+<style scoped>
+.theMainDiv {
+   display: flex;
+   flex-wrap: wrap;
+   width: 100%;
+}
+
+.mainFirstRow {
+   display: flex;
+   flex-wrap: nowrap;
+   width: 100%;
+   margin: 0.5vw;
+}
+.mainSecondRow {
+   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;
+   }
+}
+</style>

cmd/frontend/src/main.js

@@ -1,8 +1,214 @@
-import Vue from 'vue'
-import App from './App.vue'
+import { createApp } from "vue";
+import { createStore } from "vuex";
+import App from "./App.vue";
+import axios from "axios";
+import VueAxios from "vue-axios";
 
-Vue.config.productionTip = false
+const store = createStore({
+   state() {
+      return {
+         currentGame: "",
+         currentTrack: ``,
+         currentTrackHidden: false,
+         currentlyLoadingTrack: "",
+         specialTrackIsPlaying: false,
+         someoneHasWon: false,
+         winningScore: 20,
+         roundStarted: false,
+         listOfPlayers: [],
+         localPlaylist: [],
+         playlistHistory: [
+            {
+               SongNo: "",
+               Game: "",
+               Song: "",
+            },
+         ],
+         /* Stats */
+         howManyGames: 0,
+         /* Options */
+         stopAfterCurrent: true,
+         hideNextTrack: true,
+      };
+   },
+   mutations: {
+      setCurrentGame(state, payload) {
+         state.currentGame = payload;
+      },
+      setCurrentTrack(state, payload) {
+         state.currentTrack = payload;
+      },
+      setCurrentTrackHidden(state, payload) {
+         state.currentTrackHidden = payload;
+      },
+      setCurrentlyLoadingTrack(state, payload) {
+         state.currentlyLoadingTrack = payload;
+      },
+      setSpecialTrackIsPlaying(state, payload) {
+         state.specialTrackIsPlaying = payload;
+      },
+      setSomeoneHasWon(state, payload) {
+         state.someoneHasWon = payload;
+      },
+      setWinningScore(state, payload) {
+         state.winningScore += payload;
+      },
+      setRoundStarted(state, payload) {
+         state.roundStarted = payload;
+      },
+      updateListOfPlayers(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      changePlayerScore(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].score += payload.scoreToChange;
+      },
+      changePlayerWelcomed(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].welcomed = payload.playerWelcomeTrueOrFalse;
+      },
+      changePlayerProfile(state, payload) {
+         state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
+      },
+      resetPlayerScore(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      resetPlayerWelcomed(state, payload) {
+         state.listOfPlayers = payload;
+      },
+      updateLocalPlaylist(state, payload) {
+         state.localPlaylist.push(payload);
+      },
+      updatePlaylistHistory(state, payload) {
+         state.playlistHistory = payload;
+      },
+      updateHowManyGames(state, payload) {
+         state.howManyGames = payload;
+      },
+      updateStopAfterCurrent(state, payload) {
+         state.stopAfterCurrent = payload;
+      },
+      updateHideNextTitle(state, payload) {
+         state.hideNextTrack = payload;
+      },
+   },
+   actions: {
+      setCurrentGame(context, payload) {
+         context.commit("setCurrentGame", payload);
+      },
+      setCurrentTrack(context, payload) {
+         context.commit("setCurrentTrack", payload);
+      },
+      setCurrentTrackHidden(context, payload) {
+         context.commit("setCurrentTrackHidden", payload);
+      },
+      setCurrentlyLoadingTrack(context, payload) {
+         context.commit("setCurrentlyLoadingTrack", payload);
+      },
+      setSpecialTrackIsPlaying(context, payload) {
+         context.commit("setSpecialTrackIsPlaying", payload);
+      },
+      setSomeoneHasWon(context, payload) {
+         context.commit("someoneHasWon", payload);
+      },
+      setWinningScore(context, payload) {
+         context.commit("setWinningScore", payload);
+      },
+      setRoundStarted(context, payload) {
+         context.commit("setRoundStarted", payload);
+      },
+      removePlayer(context, payload) {
+         let newPlayerList = this.state.listOfPlayers.filter(
+            (player) => player.playerName != payload
+         );
+         context.commit("updateListOfPlayers", newPlayerList);
+      },
+      addNewPlayer(context, payload) {
+         let newPlayerList = this.state.listOfPlayers;
+         let newPlayer = {
+            playerName: payload,
+            score: 0,
+            welcomed: false,
+            profile: "characters/noCharacter.png",
+         };
+         newPlayerList.push(newPlayer);
+         context.commit("updateListOfPlayers", newPlayerList);
+      },
+      changePlayerScore(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let scoreToChange = payload.score;
+         context.commit("changePlayerScore", {
+            indexOfPlayer,
+            scoreToChange,
+         });
+      },
+      changePlayerWelcomed(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let playerWelcomeTrueOrFalse = payload.welcomeSet;
+         context.commit("changePlayerWelcomed", {
+            indexOfPlayer,
+            playerWelcomeTrueOrFalse,
+         });
+      },
+      changePlayerProfile(context, payload) {
+         let copyOfPlayerList = this.state.listOfPlayers;
+         let indexOfPlayer = copyOfPlayerList.findIndex(
+            (player) => player.playerName === payload.playerName
+         );
+         let profileSrc = payload.profile;
+         context.commit("changePlayerProfile", {
+            indexOfPlayer,
+            profileSrc,
+         });
+      },
+      resetPlayerScore(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].score = 0;
+         }
+         context.commit("resetPlayerScore", copyOfPlayerList);
+      },
+      resetPlayerWelcomed(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].welcomed = false;
+         }
+         context.commit("resetPlayerWelcomed", copyOfPlayerList);
+      },
+      updateLocalPlaylist(context, payload) {
+         context.commit("updateLocalPlaylist", payload);
+      },
+      updatePlaylistHistory(context, payload) {
+         context.commit("updatePlaylistHistory", payload);
+      },
+      updateHowManyGames(context, payload) {
+         context.commit("updateHowManyGames", payload);
+      },
+      updateStopAfterCurrent(context, payload) {
+         context.commit("updateStopAfterCurrent", payload);
+      },
+      updateHideNextTitle(context, payload) {
+         context.commit("updateHideNextTitle", payload);
+      },
+   },
 
-new Vue({
-  render: h => h(App),
-}).$mount('#app')
+   getters: {
+      /* Empty ATM */
+      /* getListOfPlayers: (state) => {
+         return state.listOfPlayers;
+      }, */
+   },
+});
+
+const app = createApp(App);
+
+app.use(store);
+app.use(VueAxios, axios);
+
+app.mount("#app");

cmd/main.go

@@ -5,16 +5,13 @@ import (
 	"music-server/pkg/conf"
 )
 
-//go:embed frontend/dist
-var frontend embed.FS
-
 //go:embed swagger
 var swagger embed.FS
 
 func main() {
 	conf.SetupDb()
 
-	conf.SetupRestServer(frontend, swagger)
+	conf.SetupRestServer(swagger)
 
 	conf.CloseDb()
 }

init.sh

@@ -1,4 +1,17 @@
 #! /bin/sh
-mkdir /doc
-cp swagger.yaml /doc
+
+#envsubst < ./frontend/src/arne.js
+
+sed -i 's^$HOSTNAME^'"$HOSTNAME"'^g' ./frontend/src/arne.js
+
+cat ./frontend/src/arne.js
+
+cd ./frontend/
+
+npm install
+
+npm run build
+
+cd ..
+
 ./MusicServer

pkg/conf/conf.go

@@ -50,7 +50,7 @@ func CloseDb() {
 	defer db.CloseDb()
 }
 
-func SetupRestServer(frontend embed.FS, swagger embed.FS) {
+func SetupRestServer(swagger embed.FS) {
 
 	router := gin.Default()
 	router.Use(helpers.SetCorsAndNoCacheHeaders())
@@ -85,7 +85,7 @@ func SetupRestServer(frontend embed.FS, swagger embed.FS) {
 	router.GET("/version", index.GetVersion)
 	router.GET("/test", index.GetDBTest)
 	router.StaticFS("/swagger", helpers.EmbedFolder(swagger, "swagger", false))
-	router.Use(static.Serve("/", helpers.EmbedFolder(frontend, "frontend/dist", true)))
+	router.Use(static.Serve("/", static.LocalFile("frontend/dist", true)))
 
 	port := os.Getenv("PORT")
 	if port == "" {