Add search button with modal

- Create SearchModal.vue with text field and results display
- Add Search button to extraButtons.vue
- Uses /find API endpoint for server-side search
- Modal matches existing app styling

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+.git
+dist
+.DS_Store

Dockerfile

@@ -0,0 +1,18 @@
+# Build stage
+FROM node:18-alpine AS builder
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+# Runtime stage
+FROM nginx:alpine
+RUN apk add --no-cache gettext
+COPY --from=builder /app/dist /usr/share/nginx/html
+COPY public/config.template.js /usr/share/nginx/html/
+COPY docker-entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+ENTRYPOINT ["/entrypoint.sh"]
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

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/).

docker-entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+# Generate config.js from template at runtime
+envsubst < /usr/share/nginx/html/config.template.js > /usr/share/nginx/html/config.js
+
+# Start nginx
+exec "$@"

package.json

@@ -1,42 +1,60 @@
 {
-  "name": "frontend",
+   "name": "music-randomizer-vue",
-  "version": "0.1.0",
+   "version": "0.1.0",
-  "private": true,
+   "private": true,
-  "scripts": {
+   "scripts": {
-    "serve": "vue-cli-service serve",
+      "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+      "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+      "lint": "vue-cli-service lint"
-  },
+   },
   "dependencies": {
-    "core-js": "^3.6.5",
+       "axios": "^1.7.2",
-    "vue": "^2.6.11"
+       "core-js": "^3.37.1",
-  },
+       "cors": "^2.8.5",
-  "devDependencies": {
+       "express": "^4.19.2",
-    "@vue/cli-plugin-babel": "~4.5.0",
+       "vue": "^3.4.31",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+       "vue-axios": "^3.5.2",
-    "@vue/cli-service": "~4.5.0",
+       "vuex": "^4.1.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": [
+    "devDependencies": {
-      "plugin:vue/essential",
+       "@vue/cli-plugin-babel": "^5.0.8",
-      "eslint:recommended"
+       "@vue/cli-plugin-eslint": "^5.0.8",
-    ],
+       "@vue/cli-service": "^5.0.8",
-    "parserOptions": {
+       "@vue/compiler-sfc": "^3.4.31",
-      "parser": "babel-eslint"
+       "@babel/eslint-parser": "^7.25.1",
+       "eslint": "^8.57.0",
+       "eslint-plugin-vue": "^9.27.0"
     },
-    "rules": {}
+    "eslintConfig": {
-  },
+       "root": true,
-  "browserslist": [
+       "env": {
-    "> 1%",
+          "node": true
-    "last 2 versions",
+       },
-    "not dead"
+       "extends": [
-  ]
+          "plugin:vue/vue3-essential",
+          "eslint:recommended"
+       ],
+       "parserOptions": {
+          "parser": "@babel/eslint-parser",
+          "requireConfigFile": false,
+          "ecmaVersion": 2020,
+          "sourceType": "module",
+          "ecmaFeatures": {
+             "globalReturn": false,
+             "impliedStrict": true,
+             "jsx": true
+          },
+          "babelOptions": {
+             "presets": ["@babel/preset-env"]
+          }
+       },
+       "rules": {
+          "no-debugger": 1
+       }
+    },
+   "browserslist": [
+      "> 1%",
+      "last 2 versions",
+      "not dead"
+   ]
 }

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>

public/config.template.js

@@ -0,0 +1,3 @@
+window.__RUNTIME_CONFIG__ = {
+  API_HOSTNAME: '${API_HOSTNAME}'
+};

public/index.html

@@ -1,11 +1,14 @@
 <!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>
+    <script src="<%= BASE_URL %>config.js"></script>
   </head>
   <body>
     <noscript>

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>

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>

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>

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>

src/App.vue

@@ -1,28 +1,147 @@
 <template>
-  <div id="app">
+   <the-header @start-sound-test="startSoundTest"></the-header>
-    <img alt="Vue logo" src="./assets/logo.png">
+   <the-main ref="theMain"></the-main>
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
 </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: {
-  components: {
+      TheHeader,
-    HelloWorld
+      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;
+   margin: 0;
-  -webkit-font-smoothing: antialiased;
+   padding: 0;
-  -moz-osx-font-smoothing: grayscale;
+   font-family: Helvetica;
-  text-align: center;
+}
-  color: #2c3e50;
+
-  margin-top: 60px;
+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>

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>

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>

src/components/items/InspirationWindow.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="inspirationDiv">
+        <div class="inspirationHeader">
+            <div class="inspirationTitle">
+                <h1>Inspiration</h1>
+            </div>
+            <div  class="searchInput">
+                <input
+                    v-model="searchInputText"
+                    type="text"
+                    @input="searchGame()"
+                    ref="inputField"
+                />
+            </div>
+          <button  @click="clearSearch()">Clear</button>
+        </div>
+        <transition-group
+            tag="ul"
+            name="inspirationList"
+            class="inspirationList"
+            ref="inspirationList"
+        >
+            <li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
+                {{ game }}
+            </li>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+    data() {
+        return {
+            allGamesList: [],
+            showingGamesList: [],
+            scrollDown: true,
+            searchInputText: "",
+        };
+    },
+    computed: {
+        ...mapState(["reloadGamesList"]),
+    },
+    watch: {
+        reloadGamesList(newValue) {
+            if (newValue) {
+                this.reloadGames();
+                this.$store.dispatch("reloadGamesList", false);
+            }
+        }
+    },
+    methods: {
+        clearSearch() {
+          this.searchInputText = "";
+          this.searchGame();
+        },
+        searchGame() {
+            this.showingGamesList = [];
+            for (const game of this.allGamesList) {
+                if (this.searchInputText === "" ||
+                    game.toLowerCase().replace(/\s/g, "")
+                        .includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
+                    this.showingGamesList.push(game);
+                }
+            }
+            if (this.searchInputText.replace(/\s/g, "") !== "") {
+                this.showingGamesList.sort((n1, n2) => {
+                    if (n1 > n2) {
+                        return 1;
+                    }
+                    if (n1 < n2) {
+                        return -1;
+                    }
+                    return 0;
+                });
+            }
+        },
+        scrollInspiration() {
+            let inspirationListDOM = document.querySelector(".inspirationList");
+            let scrollSpeed = 1;
+            let currentScrollLocation = 0;
+
+            currentScrollLocation = inspirationListDOM.scrollTop;
+            this.scrollDown
+                ? inspirationListDOM.scrollBy(0, scrollSpeed)
+                : inspirationListDOM.scrollBy(0, -scrollSpeed);
+
+            if (currentScrollLocation === inspirationListDOM.scrollTop) {
+                this.scrollDown = !this.scrollDown;
+            }
+        },
+        reloadGames() {
+            this.axios({
+                method: "get",
+                url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/all`,
+            })
+                .then((response) => {
+                    this.allGamesList = response.data;
+                    this.searchInputText = "";
+                    this.searchGame();
+                    this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
+                })
+                .catch(function(error) {
+                    console.log(error);
+                });
+        }
+    },
+    mounted() {
+        this.reloadGames();
+        window.setInterval(() => {
+            this.scrollInspiration();
+        }, 40);
+    },
+};
+</script>
+
+<style scoped>
+.inspirationDiv {
+    width: 38vw;
+    height: 20vh;
+    color: white;
+}
+
+.inspirationTitle {
+    display: flex;
+    flex: auto;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 5px 10px;
+}
+
+.searchInput {
+    display: flex;
+    flex: auto;
+    align-items: flex-end;
+    justify-content: flex-end;
+    padding: 0 10px;
+}
+
+.inspirationHeader {
+    display: flex;
+    background-color: #333;
+    height: 5vh;
+    justify-content: center;
+    align-items: center;
+}
+
+.inspirationList {
+    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>

src/components/items/SearchModal.vue

@@ -0,0 +1,190 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+         <div class="modalContainer">
+            <div class="modalWrapper">
+               <span class="closeModalImg" @click="closeModal">&times;</span>
+               <h1>Search Games</h1>
+               <div class="searchContainer">
+                  <input
+                     type="text"
+                     v-model="searchTerm"
+                     @input="debouncedSearch"
+                     placeholder="Search for games..."
+                     class="searchInput"
+                  />
+                  <div v-if="searchTerm.length > 0" class="searchResults">
+                     <div v-if="loading" class="loading">Searching...</div>
+                     <div v-else-if="results.length > 0" class="resultsList">
+                        <div v-for="game in results" :key="game" class="resultItem">
+                           {{ game }}
+                        </div>
+                     </div>
+                     <div v-else class="noResults">No results found</div>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+         searchTerm: "",
+         results: [],
+         loading: false,
+         searchTimeout: null,
+      };
+   },
+   methods: {
+      openModal() {
+         this.show = true;
+         this.searchTerm = "";
+         this.results = [];
+      },
+      closeModal() {
+         this.show = false;
+         this.searchTerm = "";
+         this.results = [];
+         this.loading = false;
+         if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+            this.searchTimeout = null;
+         }
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+      debouncedSearch() {
+         // Clear existing timeout
+         if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+         }
+         // Set new timeout
+         this.searchTimeout = setTimeout(() => {
+            this.performSearch();
+         }, 250);
+      },
+      async performSearch() {
+         if (this.searchTerm.length === 0) {
+            this.results = [];
+            return;
+         }
+         this.loading = true;
+         try {
+            const response = await this.axios({
+               method: "post",
+               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/find`,
+               data: new URLSearchParams({ search_term: this.searchTerm }),
+               headers: {
+                  "Content-Type": "application/x-www-form-urlencoded",
+               },
+            });
+            // Parse games from HTML response
+            this.results = this.parseGamesFromResponse(response.data);
+         } catch (error) {
+            console.error("Error searching games:", error);
+            this.results = [];
+         } finally {
+            this.loading = false;
+         }
+      },
+      parseGamesFromResponse(htmlData) {
+         // The server returns HTML from FoundGames templ component
+         // It generates divs containing game names in <p> tags
+         const games = [];
+         const parser = new DOMParser();
+         const doc = parser.parseFromString(htmlData, "text/html");
+         
+         // Find all p tags inside divs (the templ generates <div><p>{game}</p></div>)
+         const pTags = doc.querySelectorAll("div p");
+         for (const p of pTags) {
+            const gameName = p.textContent.trim();
+            if (gameName) {
+               games.push(gameName);
+            }
+         }
+         
+         return games;
+      },
+   },
+};
+</script>
+
+<style scoped>
+.searchContainer {
+   width: 100%;
+   margin-top: 20px;
+}
+
+.searchInput {
+   width: 100%;
+   padding: 12px;
+   font-size: 1.1rem;
+   border: 1px solid #ccc;
+   border-radius: 5px;
+   box-sizing: border-box;
+}
+
+.searchInput:focus {
+   outline: none;
+   border-color: #ff9c00;
+   box-shadow: 0 0 5px rgba(255, 156, 0, 0.3);
+}
+
+.searchResults {
+   margin-top: 15px;
+   max-height: 400px;
+   overflow-y: auto;
+}
+
+.loading {
+   color: #666;
+   font-style: italic;
+   text-align: center;
+   padding: 20px;
+}
+
+.resultsList {
+   width: 100%;
+}
+
+.resultItem {
+   padding: 12px;
+   margin-bottom: 8px;
+   background-color: #f8f8f8;
+   border: 1px solid #ddd;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: background-color 0.2s;
+}
+
+.resultItem:hover {
+   background-color: #e8e8e8;
+}
+
+.noResults {
+   color: #666;
+   text-align: center;
+   padding: 20px;
+   font-style: italic;
+}
+
+@media only screen and (max-width: 1000px) {
+   .searchInput {
+      font-size: 1rem;
+      padding: 10px;
+   }
+   
+   .resultItem {
+      padding: 10px;
+      font-size: 0.95rem;
+   }
+}
+</style>

src/components/items/SyncProgressModal.vue

@@ -0,0 +1,357 @@
+<template>
+    <div class="modal" v-if="isOpen">
+        <div class="modalContainer syncProgressContainer">
+            <span class="closeModalImg" @click="closeModal">&times;</span>
+            <h1>Sync in Progress</h1>
+            
+            <div v-if="!syncComplete" class="progressSection">
+                <div class="progressBarContainer">
+                    <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                </div>
+                <p class="progressText">{{ progress }}% complete</p>
+                <p class="timeText">Time spent: {{ timeSpent }}</p>
+            </div>
+            
+            <div v-else class="resultsSection">
+                <h2>Sync Complete!</h2>
+                <p>Total time: {{ syncData.total_time }}</p>
+                
+                <div v-if="syncData.games_added && syncData.games_added.length > 0" class="resultItem">
+                    <h3>Games Added: {{ syncData.games_added.length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="game in syncData.games_added" :key="game">{{ game }}</li>
+                    </ul>
+                </div>
+                
+                <div v-if="syncData.games_re_added && syncData.games_re_added.length > 0" class="resultItem">
+                    <h3>Games Re-added: {{ syncData.games_re_added.length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="game in syncData.games_re_added" :key="game">{{ game }}</li>
+                    </ul>
+                </div>
+                
+                <div v-if="syncData.games_removed && syncData.games_removed.length > 0" class="resultItem">
+                    <h3>Games Removed: {{ syncData.games_removed.length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="game in syncData.games_removed" :key="game">{{ game }}</li>
+                    </ul>
+                </div>
+                
+                <div v-if="Object.keys(syncData.games_changed_title || {}).length > 0" class="resultItem">
+                    <h3>Games with Changed Title: {{ Object.keys(syncData.games_changed_title || {}).length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="(newTitle, oldTitle) in syncData.games_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
+                    </ul>
+                </div>
+                
+                <div v-if="syncData.games_changed_content && syncData.games_changed_content.length > 0" class="resultItem">
+                    <h3>Games with Changed Content: {{ syncData.games_changed_content.length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="game in syncData.games_changed_content" :key="game">{{ game }}</li>
+                    </ul>
+                </div>
+                
+                <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
+                    <h3>Errors: {{ syncData.catched_errors.length }}</h3>
+                    <ul class="gameList">
+                        <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
+                    </ul>
+                </div>
+                
+                <p v-if="noChanges" class="noChanges">No changes detected.</p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        isOpen: {
+            type: Boolean,
+            required: true,
+        },
+        syncInProgress: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            progress: 0,
+            timeSpent: "00:00:00",
+            syncComplete: false,
+            syncData: {
+                games_added: [],
+                games_re_added: [],
+                games_changed_title: {},
+                games_changed_content: [],
+                games_removed: [],
+                catched_errors: [],
+                total_time: "",
+            },
+            pollInterval: null,
+            hasFetchedInitialData: false,
+        };
+    },
+    computed: {
+        noChanges() {
+            return (
+                this.syncData.games_added.length === 0 &&
+                this.syncData.games_re_added.length === 0 &&
+                Object.keys(this.syncData.games_changed_title).length === 0 &&
+                this.syncData.games_changed_content.length === 0 &&
+                this.syncData.games_removed.length === 0 &&
+                this.syncData.catched_errors.length === 0
+            );
+        },
+    },
+    methods: {
+        closeModal() {
+            this.$emit("close");
+        },
+        startPolling() {
+            if (this.pollInterval) {
+                clearInterval(this.pollInterval);
+            }
+            this.pollInterval = setInterval(() => {
+                this.fetchProgress();
+            }, 1000);
+        },
+        stopPolling() {
+            if (this.pollInterval) {
+                clearInterval(this.pollInterval);
+                this.pollInterval = null;
+            }
+        },
+        async fetchProgress() {
+            try {
+                const response = await this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync/progress`,
+                });
+                
+                const data = response.data;
+                
+                // Check if we got a progress response or a result response
+                if (data.progress !== undefined) {
+                    // Still syncing - update progress
+                    this.progress = parseInt(data.progress) || 0;
+                    this.timeSpent = data.time_spent || this.timeSpent;
+                    this.syncComplete = false;
+                    // If we're not actively polling but sync is in progress, start polling
+                    if (this.syncInProgress && !this.pollInterval) {
+                        this.startPolling();
+                    }
+                } else {
+                    // Sync complete - show results
+                    this.syncComplete = true;
+                    this.syncData = {
+                        games_added: data.games_added || [],
+                        games_re_added: data.games_re_added || [],
+                        games_changed_title: data.games_changed_title || {},
+                        games_changed_content: data.games_changed_content || [],
+                        games_removed: data.games_removed || [],
+                        catched_errors: data.catched_errors || [],
+                        total_time: data.total_time || "",
+                    };
+                    this.progress = 100;
+                    this.stopPolling();
+                }
+                this.hasFetchedInitialData = true;
+            } catch (error) {
+                console.error("Error fetching sync progress:", error);
+            }
+        },
+        async fetchInitialData() {
+            // Fetch once to check current state
+            await this.fetchProgress();
+            // If we got progress data, start polling
+            if (!this.syncComplete && !this.pollInterval) {
+                this.startPolling();
+            }
+        },
+    },
+    watch: {
+        isOpen(newVal) {
+            if (newVal) {
+                this.hasFetchedInitialData = false;
+                if (this.syncInProgress) {
+                    // New sync in progress - start polling
+                    this.progress = 0;
+                    this.timeSpent = "00:00:00";
+                    this.syncComplete = false;
+                    this.syncData = {
+                        games_added: [],
+                        games_re_added: [],
+                        games_changed_title: {},
+                        games_changed_content: [],
+                        games_removed: [],
+                        catched_errors: [],
+                        total_time: "",
+                    };
+                    // Small delay to ensure sync has started before first poll
+                    setTimeout(() => {
+                        this.startPolling();
+                    }, 200);
+                } else {
+                    // Check current state - might be in progress or have results
+                    this.fetchInitialData();
+                }
+            } else {
+                this.stopPolling();
+            }
+        },
+    },
+    beforeUnmount() {
+        this.stopPolling();
+    },
+};
+</script>
+
+<style scoped>
+.syncProgressContainer {
+    background-color: #eeeeee;
+    margin: 10% auto;
+    border: 1px solid #888;
+    width: 70%;
+    max-width: 800px;
+    padding: 20px;
+    border-radius: 10px;
+}
+
+.closeModalImg {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    cursor: pointer;
+    opacity: 70%;
+    font-size: 2rem;
+    color: #555;
+}
+
+.closeModalImg:hover {
+    opacity: 100%;
+}
+
+.syncProgressContainer h1 {
+    color: black;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 10px;
+    font-size: 1.9rem;
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.syncProgressContainer h2 {
+    color: black;
+    text-align: center;
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+}
+
+.syncProgressContainer p {
+    color: black;
+    text-align: center;
+}
+
+.progressSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.progressBarContainer {
+    width: 100%;
+    height: 30px;
+    background-color: #ddd;
+    border-radius: 15px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.progressBar {
+    height: 100%;
+    background: linear-gradient(90deg, #4CAF50, #8BC34A);
+    border-radius: 15px;
+    transition: width 0.3s ease;
+    text-align: center;
+    line-height: 30px;
+    color: white;
+    font-weight: bold;
+}
+
+.progressText {
+    font-size: 1.3rem;
+    font-weight: bold;
+}
+
+.timeText {
+    font-size: 1rem;
+    color: #666;
+}
+
+.resultsSection {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.resultItem {
+    margin-bottom: 20px;
+    padding: 10px;
+    background-color: #f8f8f8;
+    border-radius: 8px;
+    border-left: 4px solid #4CAF50;
+}
+
+.resultItem.errors {
+    border-left-color: #f44336;
+}
+
+.resultItem h3 {
+    color: #333;
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.gameList {
+    list-style-type: none;
+    padding: 0;
+    margin: 5px 0 0 0;
+}
+
+.gameList li {
+    padding: 3px 0;
+    color: #555;
+}
+
+.noChanges {
+    text-align: center;
+    color: #666;
+    font-style: italic;
+    padding: 20px;
+}
+
+@media only screen and (max-width: 1000px) {
+    .syncProgressContainer {
+        width: 93%;
+        margin: 5% auto;
+        padding: 15px;
+    }
+    
+    .syncProgressContainer h1 {
+        font-size: 1.6rem;
+        padding-top: 5px;
+    }
+    
+    .progressBarContainer {
+        height: 25px;
+    }
+    
+    .progressText {
+        font-size: 1.1rem;
+    }
+}
+</style>

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>

src/components/items/characterModal.vue

@@ -0,0 +1,173 @@
+<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 }}, choose your fighter!</h1>
+               <div v-if="isLoading" class="loading">Loading characters...</div>
+               <div class="fighterDiv" v-else>
+                  <div
+                     v-for="character in characters"
+                     :key="character"
+                     class="fighter"
+                     @click="chooseFighter(character)"
+                  >
+                     <img
+                        :src="getCharacterImageUrl(character)"
+                        :alt="getCharacterName(character)"
+                     />
+                     <p>{{ getCharacterName(character) }}</p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+         playerName: "",
+         characters: [],
+         isLoading: false,
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      async openModal(playerName) {
+         this.playerName = playerName;
+         this.show = true;
+         await this.fetchCharacters();
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+      async fetchCharacters() {
+         this.isLoading = true;
+         try {
+            const response = await this.axios({
+               method: "get",
+               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/characters`,
+            });
+            this.characters = response.data || [];
+         } catch (error) {
+            console.error("Failed to fetch characters:", error);
+            // Fallback to hardcoded list if API fails
+            this.characters = [
+               "Adol.png",
+               "Link.png",
+               "Barbarian.png",
+               "Layton.png",
+               "Kiryu.png",
+               "Miles.png",
+               "Lemmings.png",
+               "Samus.png",
+               "Kratos.png",
+               "Aloy.png",
+               "Sora.png",
+               "Raiden.png",
+               "PaperMario.png",
+            ];
+         } finally {
+            this.isLoading = false;
+         }
+      },
+      getCharacterImageUrl(character) {
+         return `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/character?name=${encodeURIComponent(character)}`;
+      },
+      getCharacterName(character) {
+         // Remove file extension
+         return character.replace(/\.(png|jpg|jpeg|gif)$/i, "");
+      },
+      chooseFighter(characterFilename) {
+         const apiHostname = window.__RUNTIME_CONFIG__.API_HOSTNAME;
+         const profile = `${apiHostname}/character?name=${encodeURIComponent(characterFilename)}`;
+         
+         let payload = {
+            playerName: this.playerName,
+            profile: profile,
+         };
+         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;
+   object-fit: contain;
+}
+
+.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;
+}
+
+.loading {
+   text-align: center;
+   padding: 40px;
+   font-size: 1.2rem;
+   color: #666;
+}
+
+@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;
+      object-fit: contain;
+   }
+
+   .fighter {
+      width: 25vw;
+   }
+}
+</style>

src/components/items/extraButtons.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="extraButtonsDiv">
+        <button @click="resetPlaylist">Reset playlist</button>
+        <button @click="resetPoints">Reset points</button>
+        <button @click="handleSyncButtonClick">Sync games</button>
+        <button @click="startSoundTest">Sound test</button>
+        <button @click="showSearchModal">Search</button>
+        <sync-progress-modal
+            :isOpen="showSyncModal"
+            :syncInProgress="syncInProgress"
+            @close="handleSyncComplete"
+        ></sync-progress-modal>
+        <search-modal ref="searchModal"></search-modal>
+    </div>
+</template>
+
+<script>
+import SyncProgressModal from "./SyncProgressModal.vue";
+import SearchModal from "./SearchModal.vue";
+
+export default {
+    components: {
+        SyncProgressModal,
+        SearchModal,
+    },
+    data() {
+        return {
+            emptyPlaylist: [],
+            showSyncModal: false,
+            syncInProgress: false,
+            syncCompleted: false,
+        };
+    },
+    methods: {
+        async resetPoints() {
+            this.$store.dispatch("resetPlayerScore");
+            this.$store.dispatch("resetPlayerWelcomed");
+            this.$store.dispatch("resetPlayerMatchPoint");
+            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);
+        },
+        async startSync() {
+            try {
+                // Start the sync
+                const response = await this.APIsyncGames();
+                // Check if sync was actually started or if one is in progress
+                if (response && (response.status === 423 || (response.data && response.data.includes("in progress")))) {
+                    // Sync is already in progress - show modal with polling
+                    this.syncInProgress = true;
+                } else {
+                    this.syncInProgress = true;
+                }
+                // Show the modal which will poll for progress
+                this.showSyncModal = true;
+            } catch (error) {
+                console.error("Failed to start sync:", error);
+                // If error is 423, sync is already in progress
+                if (error.response && error.response.status === 423) {
+                    this.syncInProgress = true;
+                    this.showSyncModal = true;
+                }
+            }
+        },
+        handleSyncButtonClick() {
+            // If we have a completed sync result, just show it
+            // Otherwise start a new sync
+            if (this.syncCompleted) {
+                this.showSyncResults();
+            } else {
+                this.startSync();
+            }
+        },
+        showSyncResults() {
+            // Show modal with existing results (no new sync)
+            this.syncInProgress = false;
+            this.showSyncModal = true;
+        },
+        async handleSyncComplete() {
+            this.syncInProgress = false;
+            this.syncCompleted = true;
+            this.showSyncModal = false;
+            // Refresh data after sync completes
+            await this.APIresetPlaylist();
+            this.$store.dispatch("resetPlayerScore");
+            this.$store.dispatch("resetPlayerWelcomed");
+            this.$store.dispatch("resetPlayerMatchPoint");
+            this.$store.dispatch("setRoundStarted", false);
+            this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+            this.$store.dispatch("setCurrentTrackHidden", false);
+            this.$store.dispatch("reloadGamesList", true);
+        },
+        startSoundTest() {
+            this.$emit("start-sound-test");
+        },
+        showSearchModal() {
+            this.$refs.searchModal.openModal();
+        },
+        APIresetPlaylist() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/reset`,
+                })
+                    .then(() => {
+                        resolve();
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIsyncGames() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync`,
+                })
+                    .then((response) => {
+                        resolve(response);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject(error);
+                    });
+            });
+        },
+    },
+};
+</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>

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>

src/components/items/playersWindow.vue

@@ -0,0 +1,354 @@
+<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 reach match point */
+                if (this.listOfPlayers[i].score === this.winningScore-1) {
+                    let payload = {
+                        playerName: playerName,
+                        matchPointSet: true,
+                    };
+                    this.$store.dispatch("changePlayerMatchPoint", payload);
+                    this.$emit("play-match-point-sound");
+                }
+                /* If a player won */
+                if (this.listOfPlayers[i].score === this.winningScore) {
+                    this.$refs.winningModal.openModal(this.listOfPlayers[i].playerName);
+                    this.$emit("play-winning-sound");
+                }
+            }
+        },
+        openCharacterModal(playerName) {
+            this.$refs.characterModal.openModal(playerName);
+        },
+        getProfileSrc(profileToGet) {
+            console.log(this.listOfPlayers[0]);
+            let src = `characters/${profileToGet}`;
+            console.log(src);
+            return src;
+        },
+        toggleDisplay(event) {
+            if (event.target.classList[0] != "addPlayerIMG") {
+                if (window.innerWidth < 600) {
+                    this.display = !this.display;
+                }
+            }
+        },
+    },
+};
+</script>
+
+<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>

src/components/items/playlistHistory.vue

@@ -0,0 +1,191 @@
+<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 + 1 }}. {{ 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) {
+            return track.SongNo === playlistHistory.length - 1 && this.currentTrackHidden;
+        },
+        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>
+
+/* 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;
+}
+.loadingTrack {
+    color: #ff9c00;
+    margin-left: 20px;
+}
+
+@media only screen and (max-width: 1000px) {
+    .playlistHistory::-webkit-scrollbar {
+        width: 5px;
+    }
+    .playlistHistoryDiv {
+        width: 100%;
+        margin: 0 0 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>

src/components/items/settingsModal.vue

@@ -0,0 +1,209 @@
+<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="checkboxDiv">
+                        <input
+                            type="checkbox"
+                            name="addPlayed"
+                            id="addPlayed"
+                            v-model="checkboxAddPlayed"
+                            @change="updateOptionAddPlayed"
+                        />
+                        <label for="addPlayed">Turn on played to database</label>
+                    </div>
+                    <div class="checkboxDiv">
+                        <input
+                            type="checkbox"
+                            name="lowPlayed"
+                            id="lowPlayed"
+                            v-model="checkboxLowPlayed"
+                            @change="updateOptionLowPlayed"
+                        />
+                        <label for="lowPlayed">Use low played mode</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,
+            checkboxAddPlayed: false,
+            checkboxLowPlayed: false,
+        };
+    },
+    computed: {
+        ...mapState(["winningScore", "roundStarted", "stopAfterCurrent", "hideNextTrack", "addPlayed", "lowPlayed"]),
+    },
+    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);
+            }
+        },
+        updateOptionAddPlayed() {
+            if (this.checkboxAddPlayed) {
+                this.$store.dispatch("updateAddPlayed", true);
+            } else {
+                this.$store.dispatch("updateAddPlayed", false);
+            }
+        },
+        updateOptionLowPlayed() {
+            if (this.checkboxLowPlayed) {
+                this.$store.dispatch("updateLowPlayed", true);
+            } else {
+                this.$store.dispatch("updateLowPlayed", 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;
+        this.checkboxAddPlayed = this.addPlayed;
+        this.checkboxLowPlayed = this.lowPlayed;
+    },
+};
+</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>

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>

src/components/items/winningModal.vue

@@ -0,0 +1,50 @@
+<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;
+        },
+        showPeter() {
+            let randomNumber = Math.floor(Math.random() * 10);
+            console.log(randomNumber);
+            console.log("Test");
+            return randomNumber < 2;
+        },
+        openModal(playerName) {
+            this.playerName = playerName;
+            this.show = true;
+        },
+        checkIfClickShouldCloseModal(event) {
+            if (event.target.classList[0] === "modal") {
+                this.closeModal();
+            }
+        },
+    },
+};
+</script>
+
+<style scoped></style>

src/components/layout/TheFooter.vue

@@ -0,0 +1,440 @@
+<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";
+export default {
+    data() {
+        return {
+            currentTrackSrcFile: "",
+            disableButtons: false,
+            loadingBar: "",
+        };
+    },
+    computed: {
+        ...mapState([
+            "stopAfterCurrent",
+            "localPlaylist",
+            "hideNextTrack",
+            "roundStarted",
+            "specialTrackIsPlaying",
+            "addPlayed",
+            "lowPlayed",
+        ]),
+    },
+    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;
+            setTimeout(() => this.isHidden = false, 2000);
+            //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");
+                if (this.lowPlayed) {
+                    await this.APIgetRandomizedLowTrack();
+                } else {
+                    await this.APIgetRandomizedTrack();
+                }
+                if (this.addPlayed) {
+                    await this.APIaddPlayed();
+                }
+                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]);
+            if (!trackAddedToQue) {
+                if (this.addPlayed) {
+                    await this.APIaddPlayed();
+                }
+                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 {
+                if (this.lowPlayed) {
+                    await this.APIgetRandomizedLowTrack();
+                } else {
+                    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();
+            });
+        },
+        playMatchSound() {
+            this.$refs.audioPlayer.pause();
+            this.currentTrackSrcFile = "sounds/sound0.mp3";
+            this.$store.dispatch("setSpecialTrackIsPlaying", true);
+            this.$nextTick(() => {
+                this.$refs.audioPlayer.currentTime = 0;
+                this.$refs.audioPlayer.play();
+            });
+        },
+        playWinningSound() {
+            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: `${window.__RUNTIME_CONFIG__.API_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();
+                    });
+            });
+        },
+        APIgetRandomizedLowTrack() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/rand/low`,
+                    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();
+                    });
+            });
+        },
+        APIaddPlayed() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addPlayed`,
+                })
+                    .then(() => {
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIaddToQue() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addQue`,
+                })
+                    .then(() => {
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIgetInfoAboutCurrentTrack() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `${window.__RUNTIME_CONFIG__.API_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: `${window.__RUNTIME_CONFIG__.API_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: `${window.__RUNTIME_CONFIG__.API_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: 0;
+    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>

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>

src/components/layout/TheMain.vue

@@ -0,0 +1,103 @@
+<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-match-point-sound="playMatchSound"
+                @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();
+        },
+        playMatchSound() {
+            this.$refs.theFooter.playMatchSound();
+        },
+        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>

src/main.js

@@ -1,8 +1,261 @@
-import Vue from 'vue'
+import { createApp } from "vue";
-import App from './App.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,
+            reloadGamesList: false,
+            listOfPlayers: [],
+            localPlaylist: [],
+            playlistHistory: [
+                {
+                    SongNo: "",
+                    Game: "",
+                    Song: "",
+                },
+            ],
+            /* Stats */
+            howManyGames: 0,
+            /* Options */
+            stopAfterCurrent: true,
+            hideNextTrack: true,
+            addPlayed: true,
+            lowPlayed: false,
+        };
+    },
+    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;
+        },
+        changePlayerMatchPoint(state, payload) {
+            state.listOfPlayers[payload.indexOfPlayer].matchPoint = payload.playerMatchPointTrueOrFalse;
+        },
+        changePlayerProfile(state, payload) {
+            state.listOfPlayers[payload.indexOfPlayer].profile = payload.profileSrc;
+        },
+        resetPlayerScore(state, payload) {
+            state.listOfPlayers = payload;
+        },
+        resetPlayerWelcomed(state, payload) {
+            state.listOfPlayers = payload;
+        },
+        resetPlayerMatchPoint(state, payload) {
+            state.listOfPlayers = payload;
+        },
+        updateLocalPlaylist(state, payload) {
+            state.localPlaylist.push(payload);
+        },
+        updatePlaylistHistory(state, payload) {
+            state.playlistHistory = payload;
+        },
+        updateHowManyGames(state, payload) {
+            state.howManyGames = payload;
+        },
+        reloadGamesList(state, payload) {
+            state.reloadGamesList = payload;
+        },
+        updateStopAfterCurrent(state, payload) {
+            state.stopAfterCurrent = payload;
+        },
+        updateHideNextTitle(state, payload) {
+            state.hideNextTrack = payload;
+        },
+        updateAddPlayed(state, payload) {
+            state.addPlayed = payload;
+        },
+        updateLowPlayed(state, payload) {
+            state.lowPlayed = 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,
+                matchPoint: 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,
+            });
+        },
+        changePlayerMatchPoint(context, payload) {
+            let copyOfPlayerList = this.state.listOfPlayers;
+            let indexOfPlayer = copyOfPlayerList.findIndex(
+                (player) => player.playerName === payload.playerName
+            );
+            let playerMatchPointTrueOrFalse = payload.matchPointSet;
+            context.commit("changePlayerMatchPoint", {
+                indexOfPlayer,
+                playerMatchPointTrueOrFalse,
+            });
+        },
+        changePlayerProfile(context, payload) {
+            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);
+        },
+        resetPlayerMatchPoint(context) {
+            /* The JSON.parse and JSON.stringify parts are used to make a copy that doesn't affect the original */
+            let copyOfPlayerList = JSON.parse(JSON.stringify(this.state.listOfPlayers));
+            for (let i = 0; i < copyOfPlayerList.length; i++) {
+                copyOfPlayerList[i].matchPoint = false;
+            }
+            context.commit("resetPlayerMatchPoint", copyOfPlayerList);
+        },
+        updateLocalPlaylist(context, payload) {
+            context.commit("updateLocalPlaylist", payload);
+        },
+        updatePlaylistHistory(context, payload) {
+            context.commit("updatePlaylistHistory", payload);
+        },
+        updateHowManyGames(context, payload) {
+            context.commit("updateHowManyGames", payload);
+        },
+        reloadGamesList(context, payload) {
+            context.commit("reloadGamesList", payload);
+        },
+        updateStopAfterCurrent(context, payload) {
+            context.commit("updateStopAfterCurrent", payload);
+        },
+        updateHideNextTitle(context, payload) {
+            context.commit("updateHideNextTitle", payload);
+        },
+        updateAddPlayed(context, payload) {
+            context.commit("updateAddPlayed", payload);
+        },
+        updateLowPlayed(context, payload) {
+            context.commit("updateLowPlayed", payload);
+        },
+    },
 
-new Vue({
+    getters: {
-  render: h => h(App),
+        /* Empty ATM */
-}).$mount('#app')
+        /* getListOfPlayers: (state) => {
+           return state.listOfPlayers;
+        }, */
+    },
+});
+
+const app = createApp(App);
+
+app.use(store);
+app.use(VueAxios, axios);
+
+app.mount("#app");