Use /api/v1 with token authentication

All server calls go through a shared axios instance (src/api.js) that gets a token
with API_PASSWORD from the runtime config, renews it before it expires and retries
once on 401. Character images are loaded with the token as blobs. Removes the
unused express and cors dependencies and bumps the version to 1.2.0.

Closes #2

.dockerignore

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

.gitea/workflows/build.yaml

@@ -0,0 +1,108 @@
+name: Build and Release
+
+# Releases are driven by the version in package.json: bump it (e.g.
+# `npm version patch --no-git-tag-version`) and push to main. If no tag
+# v<version> exists yet, the release job pushes the Docker image and creates
+# the tag and Gitea release. Build and release run in sequence in one
+# workflow, so they never race for the runner's action cache.
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: https://github.com/docker/setup-buildx-action@v3
+        with:
+          config-inline: |
+            [registry."gitea.sanplex.xyz/sansan"]
+              http = true
+              insecure = true
+
+      - name: Build Docker image
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          push: false
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+  release:
+    needs: build
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: https://github.com/actions/checkout@v4
+        with:
+          fetch-depth: 0
+          fetch-tags: true
+
+      - name: Check version
+        id: version
+        run: |
+          VERSION="v$(node -p "require('./package.json').version")"
+          echo "tag=$VERSION" >> "$GITHUB_OUTPUT"
+          if git rev-parse -q --verify "refs/tags/$VERSION" >/dev/null; then
+            echo "$VERSION already released, nothing to do"
+            echo "release=false" >> "$GITHUB_OUTPUT"
+          else
+            echo "Releasing $VERSION"
+            echo "release=true" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Set up QEMU
+        if: steps.version.outputs.release == 'true'
+        uses: https://github.com/docker/setup-qemu-action@v3
+
+      - name: Set up Docker Buildx
+        if: steps.version.outputs.release == 'true'
+        uses: https://github.com/docker/setup-buildx-action@v3
+        with:
+          config-inline: |
+            [registry."gitea.sanplex.xyz/sansan"]
+              http = true
+              insecure = true
+
+      - name: Login to Gitea Container Registry
+        if: steps.version.outputs.release == 'true'
+        uses: docker/login-action@v3
+        with:
+          registry: gitea.sanplex.xyz
+          username: sansan
+          password: ${{ secrets.TOKEN }}
+
+      - name: Build and push multi-arch image
+        if: steps.version.outputs.release == 'true'
+        uses: docker/build-push-action@v5
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64
+          push: true
+          tags: |
+            gitea.sanplex.xyz/sansan/musicfrontend:${{ steps.version.outputs.tag }}
+            gitea.sanplex.xyz/sansan/musicfrontend:latest
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Create Release
+        if: steps.version.outputs.release == 'true'
+        uses: akkuman/gitea-release-action@v1
+        env:
+          NODE_OPTIONS: '--experimental-fetch' # if nodejs < 18
+        with:
+          tag_name: ${{ steps.version.outputs.tag }}
+          target_commitish: ${{ github.sha }}
+          body: |
+            Docker image: `gitea.sanplex.xyz/sansan/musicfrontend:${{ steps.version.outputs.tag }}`

.gitignore

@@ -19,3 +19,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Local runtime config for npm run serve
+/public/config.js

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,39 @@
+# 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
+```
+
+## Configuration
+The Docker image writes `config.js` from `public/config.template.js` when the container starts, using these environment variables:
+
+| Variable | Description |
+|---|---|
+| `API_HOSTNAME` | URL of the MusicServer, for example `https://music.example.com`. Empty to use the same host as the frontend. |
+| `API_PASSWORD` | The MusicServer's `API_PASSWORD`, used to get an API token. Empty if the server has no password. Anyone who can open the frontend can read it. |
+
+For `npm run serve`, create `public/config.js` (ignored by git):
+```js
+window.__RUNTIME_CONFIG__ = { API_HOSTNAME: 'http://localhost:8080', API_PASSWORD: '' };
+```
+
+When the frontend is served by the MusicServer image, the server provides `config.js` with its own `API_PASSWORD`.
+
+### 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,6 +1,6 @@
 {
-  "name": "frontend",
+   "name": "music-randomizer-vue",
-  "version": "0.1.0",
+   "version": "1.2.0",
    "private": true,
    "scripts": {
       "serve": "vue-cli-service serve",
@@ -8,17 +8,20 @@
       "lint": "vue-cli-service lint"
    },
   "dependencies": {
-    "core-js": "^3.6.5",
+       "axios": "^1.7.2",
-    "vue": "^2.6.11"
+       "core-js": "^3.37.1",
+       "vue": "^3.4.31",
+       "vue-axios": "^3.5.2",
+       "vuex": "^4.1.0"
     },
     "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
+       "@vue/cli-plugin-babel": "^5.0.8",
-    "@vue/cli-plugin-eslint": "~4.5.0",
+       "@vue/cli-plugin-eslint": "^5.0.8",
-    "@vue/cli-service": "~4.5.0",
+       "@vue/cli-service": "^5.0.8",
-    "babel-eslint": "^10.1.0",
+       "@vue/compiler-sfc": "^3.4.31",
-    "eslint": "^6.7.2",
+       "@babel/eslint-parser": "^7.25.1",
-    "eslint-plugin-vue": "^6.2.2",
+       "eslint": "^8.57.0",
-    "vue-template-compiler": "^2.6.11"
+       "eslint-plugin-vue": "^9.27.0"
     },
     "eslintConfig": {
        "root": true,
@@ -26,13 +29,26 @@
           "node": true
        },
        "extends": [
-      "plugin:vue/essential",
+          "plugin:vue/vue3-essential",
           "eslint:recommended"
        ],
        "parserOptions": {
-      "parser": "babel-eslint"
+          "parser": "@babel/eslint-parser",
+          "requireConfigFile": false,
+          "ecmaVersion": 2020,
+          "sourceType": "module",
+          "ecmaFeatures": {
+             "globalReturn": false,
+             "impliedStrict": true,
+             "jsx": true
           },
-    "rules": {}
+          "babelOptions": {
+             "presets": ["@babel/preset-env"]
+          }
+       },
+       "rules": {
+          "no-debugger": 1
+       }
     },
    "browserslist": [
       "> 1%",

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,4 @@
+window.__RUNTIME_CONFIG__ = {
+  API_HOSTNAME: '${API_HOSTNAME}',
+  API_PASSWORD: '${API_PASSWORD}'
+};

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,162 @@
 <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: {
-    HelloWorld
+      TheHeader,
+      TheMain,
+   },
+   data() {
+      return {
+         screenWidth: 1000,
+      };
+   },
+   computed: {
+      displayWhenDesktop() {
+         if (this.screenWidth > 600) {
+            return true;
+         } else {
+            return false;
          }
-}
+      },
+   },
+   methods: {
+      startSoundTest() {
+         this.$refs.theMain.startSoundTest();
+      },
+   },
+   mounted() {
+      this.screenWidth = window.innerWidth;
+      window.addEventListener("resize", () => (this.screenWidth = window.innerWidth));
+   },
+};
 </script>
 
 <style>
-#app {
+* {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+   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-y: auto; /* Scroll tall modals instead of cutting them off */
+   background-color: rgb(0, 0, 0); /* Fallback color */
+   background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
+}
+.modalContainer {
+   background-color: #333;
+   color: white;
+   margin: 10% auto; /* 15% from the top and centered */
+   border: 1px solid #ff9c00;
+   border-radius: 10px;
+   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%;
+   font-size: 2rem;
+   line-height: 1;
+   color: #ff9c00;
+}
+/* The close icon is a black svg, recolor it to the app's orange */
+img.closeModalImg {
+   filter: invert(66%) sepia(96%) saturate(2783%) hue-rotate(1deg) brightness(105%) contrast(103%);
+}
+.closeModalImg:hover {
+   opacity: 100%;
+}
+.modal h1 {
+   color: white;
+   margin-left: auto;
+   margin-right: auto;
+   padding-top: 10px;
+   font-size: 1.9rem;
+}
+.modal p {
+   color: white;
+}
+.modal a {
+   color: #ff9c00;
+}
+
+@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/api.js

@@ -0,0 +1,61 @@
+import axios from "axios";
+
+const config = window.__RUNTIME_CONFIG__ || {};
+const hostname = config.API_HOSTNAME || "";
+
+// Request a new token this long before the current one expires
+const EXPIRY_MARGIN_MS = 5 * 60 * 1000;
+
+// Client for the MusicServer /api/v1 endpoints, with token authentication.
+export const api = axios.create({ baseURL: `${hostname}/api/v1` });
+
+// Client for the server routes outside /api/v1 (the /find search).
+export const legacyApi = axios.create({ baseURL: hostname });
+
+let token = null;
+let expiresAt = 0;
+let pendingToken = null;
+
+function isTokenRequest(request) {
+    return request.url === "/token";
+}
+
+// getToken returns a valid token, requesting a new one when needed.
+// Concurrent callers share one request, since token creation is rate limited.
+function getToken() {
+    if (token && Date.now() < expiresAt - EXPIRY_MARGIN_MS) {
+        return Promise.resolve(token);
+    }
+    if (!pendingToken) {
+        pendingToken = api
+            .post("/token", { password: config.API_PASSWORD || "", client_type: "web" })
+            .then((response) => {
+                token = response.data.token;
+                expiresAt = new Date(response.data.expires_at).getTime();
+                return token;
+            })
+            .finally(() => {
+                pendingToken = null;
+            });
+    }
+    return pendingToken;
+}
+
+api.interceptors.request.use(async (request) => {
+    if (!isTokenRequest(request)) {
+        request.headers.Authorization = `Bearer ${await getToken()}`;
+    }
+    return request;
+});
+
+// On 401 the token is no longer valid (for example after a server restart):
+// get a new one and retry the request once.
+api.interceptors.response.use(undefined, (error) => {
+    const request = error.config;
+    if (error.response?.status !== 401 || !request || isTokenRequest(request) || request.retried) {
+        return Promise.reject(error);
+    }
+    request.retried = true;
+    token = null;
+    return api(request);
+});

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">{{ currentSoundtrack }}</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>{{ currentSoundtrack }}</p>
+            <p>{{ currentTrack }}</p>
+         </div>
+      </transition>
+   </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   computed: {
+      ...mapState(["currentSoundtrack", "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="searchSoundtrack()"
+                    ref="inputField"
+                />
+            </div>
+          <button  @click="clearSearch()">Clear</button>
+        </div>
+        <transition-group
+            tag="ul"
+            name="inspirationList"
+            class="inspirationList"
+            ref="inspirationList"
+        >
+            <li v-for="soundtrack in showingSoundtracksList" class="inspirationEntry" :key="soundtrack">
+                {{ soundtrack }}
+            </li>
+        </transition-group>
+    </div>
+</template>
+
+<script>
+import {mapState} from "vuex";
+export default {
+    data() {
+        return {
+            allSoundtracksList: [],
+            showingSoundtracksList: [],
+            scrollDown: true,
+            searchInputText: "",
+        };
+    },
+    computed: {
+        ...mapState(["reloadSoundtracksList"]),
+    },
+    watch: {
+        reloadSoundtracksList(newValue) {
+            if (newValue) {
+                this.reloadSoundtracks();
+                this.$store.dispatch("reloadSoundtracksList", false);
+            }
+        }
+    },
+    methods: {
+        clearSearch() {
+          this.searchInputText = "";
+          this.searchSoundtrack();
+        },
+        searchSoundtrack() {
+            this.showingSoundtracksList = [];
+            for (const soundtrack of this.allSoundtracksList) {
+                if (this.searchInputText === "" ||
+                    soundtrack.toLowerCase().replace(/\s/g, "")
+                        .includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
+                    this.showingSoundtracksList.push(soundtrack);
+                }
+            }
+            if (this.searchInputText.replace(/\s/g, "") !== "") {
+                this.showingSoundtracksList.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;
+            }
+        },
+        reloadSoundtracks() {
+            this.axios({
+                method: "get",
+                url: `/music/all`,
+            })
+                .then((response) => {
+                    this.allSoundtracksList = response.data;
+                    this.searchInputText = "";
+                    this.searchSoundtrack();
+                    this.$store.dispatch("updateHowManySoundtracks", this.allSoundtracksList.length);
+                })
+                .catch(function(error) {
+                    console.log(error);
+                });
+        }
+    },
+    mounted() {
+        this.reloadSoundtracks();
+        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,187 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click.self="closeModal">
+         <div class="modalContainer">
+            <div class="modalWrapper">
+               <span class="closeModalImg" @click="closeModal">&times;</span>
+               <h1>Search Soundtracks</h1>
+               <div class="searchContainer">
+                  <input
+                     type="text"
+                     v-model="searchTerm"
+                     @input="debouncedSearch"
+                     placeholder="Search for soundtracks..."
+                     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="soundtrack in results" :key="soundtrack" class="resultItem">
+                           {{ soundtrack }}
+                        </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;
+         }
+      },
+      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.legacyAxios({
+               method: "post",
+               url: "/find",
+               data: new URLSearchParams({ search_term: this.searchTerm }),
+               headers: {
+                  "Content-Type": "application/x-www-form-urlencoded",
+               },
+            });
+            // Parse soundtracks from HTML response
+            this.results = this.parseSoundtracksFromResponse(response.data);
+         } catch (error) {
+            console.error("Error searching soundtracks:", error);
+            this.results = [];
+         } finally {
+            this.loading = false;
+         }
+      },
+      parseSoundtracksFromResponse(htmlData) {
+         // The server returns HTML from FoundSoundtracks templ component
+         // It generates divs containing soundtrack names in <p> tags
+         const soundtracks = [];
+         const parser = new DOMParser();
+         const doc = parser.parseFromString(htmlData, "text/html");
+         
+         // Find all p tags inside divs (the templ generates <div><p>{soundtrack}</p></div>)
+         const pTags = doc.querySelectorAll("div p");
+         for (const p of pTags) {
+            const soundtrackName = p.textContent.trim();
+            if (soundtrackName) {
+               soundtracks.push(soundtrackName);
+            }
+         }
+         
+         return soundtracks;
+      },
+   },
+};
+</script>
+
+<style scoped>
+.searchContainer {
+   width: 100%;
+   margin-top: 10px;
+}
+
+.searchInput {
+   width: 100%;
+   padding: 12px;
+   font-size: 1.1rem;
+   border: 1px solid #777;
+   background-color: rgb(66, 66, 66);
+   color: white;
+   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: #bbb;
+   font-style: italic;
+   text-align: center;
+   padding: 20px;
+}
+
+.resultsList {
+   width: 100%;
+}
+
+.resultItem {
+   padding: 12px;
+   margin-bottom: 8px;
+   background-color: rgb(66, 66, 66);
+   border: 1px solid #555;
+   border-radius: 5px;
+   cursor: pointer;
+   transition: background-color 0.2s;
+}
+
+.resultItem:hover {
+   background-color: #555;
+}
+
+.noResults {
+   color: #bbb;
+   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,337 @@
+<template>
+    <transition name="modalAni">
+        <div class="modal" v-if="isOpen" @click.self="closeModal">
+            <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.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
+                        <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_re_added && syncData.soundtracks_re_added.length > 0" class="resultItem">
+                        <h3>Soundtracks Re-added: {{ syncData.soundtracks_re_added.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_re_added" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_removed && syncData.soundtracks_removed.length > 0" class="resultItem">
+                        <h3>Soundtracks Removed: {{ syncData.soundtracks_removed.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_removed" :key="soundtrack">{{ soundtrack }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="Object.keys(syncData.soundtracks_changed_title || {}).length > 0" class="resultItem">
+                        <h3>Soundtracks with Changed Title: {{ Object.keys(syncData.soundtracks_changed_title || {}).length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="(newTitle, oldTitle) in syncData.soundtracks_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
+                        </ul>
+                    </div>
+                
+                    <div v-if="syncData.soundtracks_changed_content && syncData.soundtracks_changed_content.length > 0" class="resultItem">
+                        <h3>Soundtracks with Changed Content: {{ syncData.soundtracks_changed_content.length }}</h3>
+                        <ul class="soundtrackList">
+                            <li v-for="soundtrack in syncData.soundtracks_changed_content" :key="soundtrack">{{ soundtrack }}</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="soundtrackList">
+                            <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>
+    </transition>
+</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: {
+                soundtracks_added: [],
+                soundtracks_re_added: [],
+                soundtracks_changed_title: {},
+                soundtracks_changed_content: [],
+                soundtracks_removed: [],
+                catched_errors: [],
+                total_time: "",
+            },
+            pollInterval: null,
+            hasFetchedInitialData: false,
+        };
+    },
+    computed: {
+        noChanges() {
+            return (
+                this.syncData.soundtracks_added.length === 0 &&
+                this.syncData.soundtracks_re_added.length === 0 &&
+                Object.keys(this.syncData.soundtracks_changed_title).length === 0 &&
+                this.syncData.soundtracks_changed_content.length === 0 &&
+                this.syncData.soundtracks_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: "/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 = {
+                        soundtracks_added: data.soundtracks_added || [],
+                        soundtracks_re_added: data.soundtracks_re_added || [],
+                        soundtracks_changed_title: data.soundtracks_changed_title || {},
+                        soundtracks_changed_content: data.soundtracks_changed_content || [],
+                        soundtracks_removed: data.soundtracks_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 = {
+                        soundtracks_added: [],
+                        soundtracks_re_added: [],
+                        soundtracks_changed_title: {},
+                        soundtracks_changed_content: [],
+                        soundtracks_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 {
+    position: relative;
+    width: 70%;
+    max-width: 800px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.syncProgressContainer h1 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.syncProgressContainer h2 {
+    color: white;
+    text-align: center;
+    font-size: 1.5rem;
+    margin-bottom: 15px;
+}
+
+.syncProgressContainer p {
+    text-align: center;
+}
+
+.progressSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+}
+
+.progressBarContainer {
+    width: 100%;
+    height: 30px;
+    background-color: rgb(66, 66, 66);
+    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: #bbb;
+}
+
+.resultsSection {
+    max-height: 60vh;
+    overflow-y: auto;
+}
+
+.resultItem {
+    margin-bottom: 20px;
+    padding: 10px;
+    background-color: rgb(66, 66, 66);
+    border-radius: 8px;
+    border-left: 4px solid #4CAF50;
+}
+
+.resultItem.errors {
+    border-left-color: #f44336;
+}
+
+.resultItem h3 {
+    color: white;
+    font-size: 1.1rem;
+    margin-bottom: 8px;
+}
+
+.soundtrackList {
+    list-style-type: none;
+    padding: 0;
+    margin: 5px 0 0 0;
+}
+
+.soundtrackList li {
+    padding: 3px 0;
+    color: #ddd;
+}
+
+.noChanges {
+    text-align: center;
+    color: #bbb;
+    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,73 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click.self="closeModal">
+         <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 soundtrack 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;
+      },
+   },
+};
+</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,192 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click.self="closeModal">
+         <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: [],
+         // Object URLs of the character images, by file name
+         imageUrls: {},
+         isLoading: false,
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      async openModal(playerName) {
+         this.playerName = playerName;
+         this.show = true;
+         await this.fetchCharacters();
+      },
+      async fetchCharacters() {
+         this.isLoading = true;
+         try {
+            const response = await this.axios({
+               method: "get",
+               url: "/character/list",
+            });
+            this.characters = response.data || [];
+            await this.fetchImages();
+         } catch (error) {
+            console.error("Failed to fetch characters:", error);
+            // Fall back to the characters bundled with the frontend
+            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",
+            ];
+            this.imageUrls = Object.fromEntries(
+               this.characters.map((character) => [character, `characters/${character}`])
+            );
+         } finally {
+            this.isLoading = false;
+         }
+      },
+      // Images need the token, which <img src> can't send, so they are
+      // downloaded once and shown through object URLs.
+      async fetchImages() {
+         await Promise.all(
+            this.characters
+               .filter((character) => !this.imageUrls[character])
+               .map(async (character) => {
+                  try {
+                     const response = await this.axios({
+                        method: "get",
+                        url: "/character",
+                        params: { name: character },
+                        responseType: "blob",
+                     });
+                     this.imageUrls[character] = URL.createObjectURL(response.data);
+                  } catch (error) {
+                     console.error(`Failed to fetch character ${character}:`, error);
+                  }
+               })
+         );
+      },
+      getCharacterImageUrl(character) {
+         return this.imageUrls[character] || "characters/noCharacter.png";
+      },
+      getCharacterName(character) {
+         // Remove file extension
+         return character.replace(/\.(png|jpg|jpeg|gif)$/i, "");
+      },
+      chooseFighter(characterFilename) {
+         let payload = {
+            playerName: this.playerName,
+            profile: this.getCharacterImageUrl(characterFilename),
+         };
+         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: #bbb;
+}
+
+@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,160 @@
+<template>
+    <div class="extraButtonsDiv">
+        <button @click="resetPlaylist">Reset playlist</button>
+        <button @click="resetPoints">Reset points</button>
+        <button @click="handleSyncButtonClick">Sync soundtracks</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 {
+                await this.APIsyncSoundtracks();
+            } catch (error) {
+                // 423 means a sync is already running: show its progress
+                if (!error.response || error.response.status !== 423) {
+                    console.error("Failed to start sync:", error);
+                    return;
+                }
+            }
+            // Show the modal which will poll for progress
+            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("reloadSoundtracksList", true);
+        },
+        startSoundTest() {
+            this.$emit("start-sound-test");
+        },
+        showSearchModal() {
+            this.$refs.searchModal.openModal();
+        },
+        APIresetPlaylist() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `/music/reset`,
+                })
+                    .then(() => {
+                        resolve();
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIsyncSoundtracks() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "post",
+                    url: "/sync",
+                })
+                    .then((response) => {
+                        resolve(response);
+                    })
+                    .catch(function(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,137 @@
+<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: #333;
+   color: white;
+   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.Soundtrack !== ''" :class="{ activeTrack: track.CurrentlyPlaying }">
+                    {{ track.SongNo + 1 }}. {{ track.Soundtrack }} -
+                    {{ 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,202 @@
+<template>
+    <!-- Round Settings, Stop after current, Don't hide title -->
+    <transition name="modalAni">
+        <div v-if="show" class="modal" @click.self="closeModal">
+            <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;
+        },
+        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 {
+    accent-color: #ff9c00;
+    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;
+    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,63 @@
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click.self="closeModal">
+         <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 soundtracks in the playlist: {{ howManySoundtracks }}</p>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   data() {
+      return {
+         show: false,
+      };
+   },
+   computed: {
+      ...mapState(["howManySoundtracks"]),
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+   },
+};
+</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,45 @@
+<template>
+    <transition name="modalAni">
+        <div v-if="show" class="modal" @click.self="closeModal">
+            <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;
+        },
+    },
+};
+</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: `/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: `/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: `/music/addPlayed`,
+                })
+                    .then(() => {
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIaddToQue() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `/music/addQue`,
+                })
+                    .then(() => {
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIgetInfoAboutCurrentTrack() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `/music/info`,
+                })
+                    .then((response) => {
+                        let soundtrackInfoObject = {
+                            soundtrack: response.data.Soundtrack,
+                            track: response.data.Song.replace(".mp3", ""),
+                            songNo: response.data.SongNo,
+                        };
+                        this.$store.dispatch("setCurrentSoundtrack", soundtrackInfoObject.soundtrack);
+                        this.$store.dispatch("setCurrentTrack", soundtrackInfoObject.track);
+                        resolve(false);
+                    })
+                    .catch(function(error) {
+                        console.log(error);
+                        reject();
+                    });
+            });
+        },
+        APIgetPlaylistHistory() {
+            return new Promise((resolve, reject) => {
+                this.axios({
+                    method: "get",
+                    url: `/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: `/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 VueAxios from "vue-axios";
+import { api, legacyApi } from "./api";
 
-Vue.config.productionTip = false
+const store = createStore({
+    state() {
+        return {
+            currentSoundtrack: "",
+            currentTrack: ``,
+            currentTrackHidden: false,
+            currentlyLoadingTrack: "",
+            specialTrackIsPlaying: false,
+            someoneHasWon: false,
+            winningScore: 20,
+            roundStarted: false,
+            reloadSoundtracksList: false,
+            listOfPlayers: [],
+            localPlaylist: [],
+            playlistHistory: [
+                {
+                    SongNo: "",
+                    Soundtrack: "",
+                    Song: "",
+                },
+            ],
+            /* Stats */
+            howManySoundtracks: 0,
+            /* Options */
+            stopAfterCurrent: true,
+            hideNextTrack: true,
+            addPlayed: true,
+            lowPlayed: false,
+        };
+    },
+    mutations: {
+        setCurrentSoundtrack(state, payload) {
+            state.currentSoundtrack = 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;
+        },
+        updateHowManySoundtracks(state, payload) {
+            state.howManySoundtracks = payload;
+        },
+        reloadSoundtracksList(state, payload) {
+            state.reloadSoundtracksList = 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: {
+        setCurrentSoundtrack(context, payload) {
+            context.commit("setCurrentSoundtrack", 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);
+        },
+        updateHowManySoundtracks(context, payload) {
+            context.commit("updateHowManySoundtracks", payload);
+        },
+        reloadSoundtracksList(context, payload) {
+            context.commit("reloadSoundtracksList", 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: api, legacyAxios: legacyApi });
+
+app.mount("#app");