Release automatically when package.json version changes

Build and release now run in one workflow on push to main: after the
build passes, if no tag exists for the package.json version, the image
is pushed and the tag and Gitea release are created. Running them in
sequence avoids the action-cache race between the separate build and
tag-triggered release workflows.

.gitea/workflows/build.yaml

@@ -1,4 +1,10 @@
-name: Build and Test
+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:
@@ -31,3 +37,72 @@ jobs:
           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 }}`

.gitea/workflows/old_gitea-release.yaml

@@ -1,32 +0,0 @@
-name: Publish
-
-on:
-  push:
-    branches:
-      - '*.*'
-
-jobs:
-  publish:
-    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: Login to Gitea
-        uses: docker/login-action@v2
-        with:
-          registry: gitea.sanplex.xyz
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.TOKEN }}
-      - name: Build and push Docker image
-        uses: https://github.com/docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: "gitea.sanplex.xyz/sansan/musicfrontend:${{gitea.ref_name}}, gitea.sanplex.xyz/sansan/musicfrontend:latest"

.gitea/workflows/release.yaml

@@ -1,43 +0,0 @@
-name: Release Docker Image
-
-on:
-  push:
-    tags:
-      - 'v*'
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: https://github.com/actions/checkout@v4
-
-      - name: Set up QEMU
-        uses: https://github.com/docker/setup-qemu-action@v3
-
-      - 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: Login to Gitea Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: gitea.sanplex.xyz
-          username: sansan
-          password: ${{ secrets.TOKEN }}
-
-      - name: Build and push multi-arch image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          file: ./Dockerfile
-          platforms: linux/amd64,linux/arm64
-          push: true
-          tags: |
-            gitea.sanplex.xyz/sansan/musicfrontend:${{ gitea.ref_name }}
-            gitea.sanplex.xyz/sansan/musicfrontend:latest
-          cache-from: type=gha
-          cache-to: type=gha,mode=max

package-lock.json

@@ -1,12 +1,12 @@
 {
    "name": "music-randomizer-vue",
-   "version": "0.1.0",
+   "version": "1.1.2",
    "lockfileVersion": 3,
    "requires": true,
    "packages": {
       "": {
          "name": "music-randomizer-vue",
-         "version": "0.1.0",
+         "version": "1.1.2",
          "dependencies": {
             "axios": "^1.7.2",
             "core-js": "^3.37.1",

package.json

@@ -1,6 +1,6 @@
 {
    "name": "music-randomizer-vue",
-   "version": "0.1.0",
+   "version": "1.1.2",
    "private": true,
    "scripts": {
       "serve": "vue-cli-service serve",

src/App.vue

@@ -87,14 +87,16 @@ body {
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
-   overflow: hidden;
+   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.5); /* Black w/ opacity */
+   background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
 }
 .modalContainer {
-   background-color: #eeeeee;
+   background-color: #333;
+   color: white;
    margin: 10% auto; /* 15% from the top and centered */
-   border: 1px solid #888;
+   border: 1px solid #ff9c00;
+   border-radius: 10px;
    width: 50%; /* Could be more or less, depending on screen size */
 }
 .modalWrapper {
@@ -114,16 +116,29 @@ body {
    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: black;
+   color: white;
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    font-size: 1.9rem;
 }
 .modal p {
-   color: black;
+   color: white;
+}
+.modal a {
+   color: #ff9c00;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/CurrentlyPlaying.vue

@@ -3,7 +3,7 @@
       <div class="textWrapper">
          <transition-group name="displayingInfo" appear>
             <p v-if="currentTrackHidden" :key="1">????????</p>
-            <p v-else :key="2">{{ currentGame }}</p>
+            <p v-else :key="2">{{ currentSoundtrack }}</p>
             <p v-if="currentTrackHidden" :key="3">??????</p>
             <p v-else :key="4">{{ currentTrack }}</p>
          </transition-group>
@@ -16,7 +16,7 @@
             <p>??????</p>
          </div>
          <div v-else class="textWrapper">
-            <p>{{ currentGame }}</p>
+            <p>{{ currentSoundtrack }}</p>
             <p>{{ currentTrack }}</p>
          </div>
       </transition>
@@ -27,7 +27,7 @@
 import { mapState } from "vuex";
 export default {
    computed: {
-      ...mapState(["currentGame", "currentTrack", "currentTrackHidden"]),
+      ...mapState(["currentSoundtrack", "currentTrack", "currentTrackHidden"]),
    },
 };
 </script>

src/components/items/InspirationWindow.vue

@@ -8,7 +8,7 @@
                 <input
                     v-model="searchInputText"
                     type="text"
-                    @input="searchGame()"
+                    @input="searchSoundtrack()"
                     ref="inputField"
                 />
             </div>
@@ -20,8 +20,8 @@
             class="inspirationList"
             ref="inspirationList"
         >
-            <li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
+            <li v-for="soundtrack in showingSoundtracksList" class="inspirationEntry" :key="soundtrack">
-                {{ game }}
+                {{ soundtrack }}
             </li>
         </transition-group>
     </div>
@@ -32,39 +32,39 @@ import {mapState} from "vuex";
 export default {
     data() {
         return {
-            allGamesList: [],
+            allSoundtracksList: [],
-            showingGamesList: [],
+            showingSoundtracksList: [],
             scrollDown: true,
             searchInputText: "",
         };
     },
     computed: {
-        ...mapState(["reloadGamesList"]),
+        ...mapState(["reloadSoundtracksList"]),
     },
     watch: {
-        reloadGamesList(newValue) {
+        reloadSoundtracksList(newValue) {
             if (newValue) {
-                this.reloadGames();
+                this.reloadSoundtracks();
-                this.$store.dispatch("reloadGamesList", false);
+                this.$store.dispatch("reloadSoundtracksList", false);
             }
         }
     },
     methods: {
         clearSearch() {
           this.searchInputText = "";
-          this.searchGame();
+          this.searchSoundtrack();
         },
-        searchGame() {
+        searchSoundtrack() {
-            this.showingGamesList = [];
+            this.showingSoundtracksList = [];
-            for (const game of this.allGamesList) {
+            for (const soundtrack of this.allSoundtracksList) {
                 if (this.searchInputText === "" ||
-                    game.toLowerCase().replace(/\s/g, "")
+                    soundtrack.toLowerCase().replace(/\s/g, "")
                         .includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
-                    this.showingGamesList.push(game);
+                    this.showingSoundtracksList.push(soundtrack);
                 }
             }
             if (this.searchInputText.replace(/\s/g, "") !== "") {
-                this.showingGamesList.sort((n1, n2) => {
+                this.showingSoundtracksList.sort((n1, n2) => {
                     if (n1 > n2) {
                         return 1;
                     }
@@ -89,16 +89,16 @@ export default {
                 this.scrollDown = !this.scrollDown;
             }
         },
-        reloadGames() {
+        reloadSoundtracks() {
             this.axios({
                 method: "get",
                 url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/all`,
             })
                 .then((response) => {
-                    this.allGamesList = response.data;
+                    this.allSoundtracksList = response.data;
                     this.searchInputText = "";
-                    this.searchGame();
+                    this.searchSoundtrack();
-                    this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
+                    this.$store.dispatch("updateHowManySoundtracks", this.allSoundtracksList.length);
                 })
                 .catch(function(error) {
                     console.log(error);
@@ -106,7 +106,7 @@ export default {
         }
     },
     mounted() {
-        this.reloadGames();
+        this.reloadSoundtracks();
         window.setInterval(() => {
             this.scrollInspiration();
         }, 40);

src/components/items/SearchModal.vue

@@ -1,23 +1,33 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <span class="closeModalImg" @click="closeModal">&times;</span>
-               <h1>Search Games</h1>
+               <h1>Search Soundtracks</h1>
+               <div class="searchTypeContainer">
+                  <label class="radioLabel">
+                     <input type="radio" v-model="searchType" value="fuzzy">
+                     <span>Fuzzy Search</span>
+                  </label>
+                  <label class="radioLabel">
+                     <input type="radio" v-model="searchType" value="exact">
+                     <span>Exact Search</span>
+                  </label>
+               </div>
                <div class="searchContainer">
                   <input
                      type="text"
                      v-model="searchTerm"
                      @input="debouncedSearch"
-                     placeholder="Search for games..."
+                     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="game in results" :key="game" class="resultItem">
+                        <div v-for="soundtrack in results" :key="soundtrack" class="resultItem">
-                           {{ game }}
+                           {{ soundtrack }}
                         </div>
                      </div>
                      <div v-else class="noResults">No results found</div>
@@ -38,6 +48,7 @@ export default {
          results: [],
          loading: false,
          searchTimeout: null,
+         searchType: "fuzzy",
       };
    },
    methods: {
@@ -45,6 +56,7 @@ export default {
          this.show = true;
          this.searchTerm = "";
          this.results = [];
+         this.searchType = "fuzzy";
       },
       closeModal() {
          this.show = false;
@@ -56,11 +68,6 @@ export default {
             this.searchTimeout = null;
          }
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       debouncedSearch() {
          // Clear existing timeout
          if (this.searchTimeout) {
@@ -78,56 +85,79 @@ export default {
          }
          this.loading = true;
          try {
+            const endpoint = this.searchType === 'fuzzy' ? '/findfuzzy' : '/find';
             const response = await this.axios({
                method: "post",
-               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/find`,
+               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}${endpoint}`,
                data: new URLSearchParams({ search_term: this.searchTerm }),
                headers: {
                   "Content-Type": "application/x-www-form-urlencoded",
                },
             });
-            // Parse games from HTML response
+            // Parse soundtracks from HTML response
-            this.results = this.parseGamesFromResponse(response.data);
+            this.results = this.parseSoundtracksFromResponse(response.data);
          } catch (error) {
-            console.error("Error searching games:", error);
+            console.error("Error searching soundtracks:", error);
             this.results = [];
          } finally {
             this.loading = false;
          }
       },
-      parseGamesFromResponse(htmlData) {
+      parseSoundtracksFromResponse(htmlData) {
-         // The server returns HTML from FoundGames templ component
+         // The server returns HTML from FoundSoundtracks templ component
-         // It generates divs containing game names in <p> tags
+         // It generates divs containing soundtrack names in <p> tags
-         const games = [];
+         const soundtracks = [];
          const parser = new DOMParser();
          const doc = parser.parseFromString(htmlData, "text/html");
          
-         // Find all p tags inside divs (the templ generates <div><p>{game}</p></div>)
+         // 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 gameName = p.textContent.trim();
+            const soundtrackName = p.textContent.trim();
-            if (gameName) {
+            if (soundtrackName) {
-               games.push(gameName);
+               soundtracks.push(soundtrackName);
             }
          }
          
-         return games;
+         return soundtracks;
       },
    },
 };
 </script>
 
 <style scoped>
+.searchTypeContainer {
+   display: flex;
+   gap: 20px;
+   margin-top: 15px;
+   margin-bottom: 15px;
+}
+
+.radioLabel {
+   display: flex;
+   align-items: center;
+   gap: 8px;
+   cursor: pointer;
+   font-size: 1rem;
+}
+
+.radioLabel input[type="radio"] {
+   margin: 0;
+   accent-color: #ff9c00;
+}
+
 .searchContainer {
    width: 100%;
-   margin-top: 20px;
+   margin-top: 10px;
 }
 
 .searchInput {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
-   border: 1px solid #ccc;
+   border: 1px solid #777;
+   background-color: rgb(66, 66, 66);
+   color: white;
    border-radius: 5px;
    box-sizing: border-box;
 }
@@ -145,7 +175,7 @@ export default {
 }
 
 .loading {
-   color: #666;
+   color: #bbb;
    font-style: italic;
    text-align: center;
    padding: 20px;
@@ -158,25 +188,34 @@ export default {
 .resultItem {
    padding: 12px;
    margin-bottom: 8px;
-   background-color: #f8f8f8;
+   background-color: rgb(66, 66, 66);
-   border: 1px solid #ddd;
+   border: 1px solid #555;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
 }
 
 .resultItem:hover {
-   background-color: #e8e8e8;
+   background-color: #555;
 }
 
 .noResults {
-   color: #666;
+   color: #bbb;
    text-align: center;
    padding: 20px;
    font-style: italic;
 }
 
 @media only screen and (max-width: 1000px) {
+   .searchTypeContainer {
+      flex-wrap: wrap;
+      gap: 10px;
+   }
+   
+   .radioLabel {
+      font-size: 0.9rem;
+   }
+   
    .searchInput {
       font-size: 1rem;
       padding: 10px;

src/components/items/SyncProgressModal.vue

@@ -1,67 +1,69 @@
 <template>
-    <div class="modal" v-if="isOpen">
+    <transition name="modalAni">
-        <div class="modalContainer syncProgressContainer">
+        <div class="modal" v-if="isOpen" @click.self="closeModal">
-            <span class="closeModalImg" @click="closeModal">&times;</span>
+            <div class="modalContainer syncProgressContainer">
-            <h1>Sync in Progress</h1>
+                <span class="closeModalImg" @click="closeModal">&times;</span>
+                <h1>Sync in Progress</h1>
             
-            <div v-if="!syncComplete" class="progressSection">
+                <div v-if="!syncComplete" class="progressSection">
-                <div class="progressBarContainer">
+                    <div class="progressBarContainer">
-                    <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                        <div class="progressBar" :style="{ width: progress + '%' }"></div>
+                    </div>
+                    <p class="progressText">{{ progress }}% complete</p>
+                    <p class="timeText">Time spent: {{ timeSpent }}</p>
                 </div>
-                <p class="progressText">{{ progress }}% complete</p>
-                <p class="timeText">Time spent: {{ timeSpent }}</p>
-            </div>
             
-            <div v-else class="resultsSection">
+                <div v-else class="resultsSection">
-                <h2>Sync Complete!</h2>
+                    <h2>Sync Complete!</h2>
-                <p>Total time: {{ syncData.total_time }}</p>
+                    <p>Total time: {{ syncData.total_time }}</p>
                 
-                <div v-if="syncData.games_added && syncData.games_added.length > 0" class="resultItem">
+                    <div v-if="syncData.soundtracks_added && syncData.soundtracks_added.length > 0" class="resultItem">
-                    <h3>Games Added: {{ syncData.games_added.length }}</h3>
+                        <h3>Soundtracks Added: {{ syncData.soundtracks_added.length }}</h3>
-                    <ul class="gameList">
+                        <ul class="soundtrackList">
-                        <li v-for="game in syncData.games_added" :key="game">{{ game }}</li>
+                            <li v-for="soundtrack in syncData.soundtracks_added" :key="soundtrack">{{ soundtrack }}</li>
-                    </ul>
+                        </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 v-if="syncData.games_re_added && syncData.games_re_added.length > 0" class="resultItem">
-                    <h3>Games Re-added: {{ syncData.games_re_added.length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="game in syncData.games_re_added" :key="game">{{ game }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.games_removed && syncData.games_removed.length > 0" class="resultItem">
-                    <h3>Games Removed: {{ syncData.games_removed.length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="game in syncData.games_removed" :key="game">{{ game }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="Object.keys(syncData.games_changed_title || {}).length > 0" class="resultItem">
-                    <h3>Games with Changed Title: {{ Object.keys(syncData.games_changed_title || {}).length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="(newTitle, oldTitle) in syncData.games_changed_title" :key="oldTitle">{{ oldTitle }} → {{ newTitle }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.games_changed_content && syncData.games_changed_content.length > 0" class="resultItem">
-                    <h3>Games with Changed Content: {{ syncData.games_changed_content.length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="game in syncData.games_changed_content" :key="game">{{ game }}</li>
-                    </ul>
-                </div>
-                
-                <div v-if="syncData.catched_errors && syncData.catched_errors.length > 0" class="resultItem errors">
-                    <h3>Errors: {{ syncData.catched_errors.length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
-                    </ul>
-                </div>
-                
-                <p v-if="noChanges" class="noChanges">No changes detected.</p>
             </div>
         </div>
-    </div>
+    </transition>
 </template>
 
 <script>
@@ -82,11 +84,11 @@ export default {
             timeSpent: "00:00:00",
             syncComplete: false,
             syncData: {
-                games_added: [],
+                soundtracks_added: [],
-                games_re_added: [],
+                soundtracks_re_added: [],
-                games_changed_title: {},
+                soundtracks_changed_title: {},
-                games_changed_content: [],
+                soundtracks_changed_content: [],
-                games_removed: [],
+                soundtracks_removed: [],
                 catched_errors: [],
                 total_time: "",
             },
@@ -97,11 +99,11 @@ export default {
     computed: {
         noChanges() {
             return (
-                this.syncData.games_added.length === 0 &&
+                this.syncData.soundtracks_added.length === 0 &&
-                this.syncData.games_re_added.length === 0 &&
+                this.syncData.soundtracks_re_added.length === 0 &&
-                Object.keys(this.syncData.games_changed_title).length === 0 &&
+                Object.keys(this.syncData.soundtracks_changed_title).length === 0 &&
-                this.syncData.games_changed_content.length === 0 &&
+                this.syncData.soundtracks_changed_content.length === 0 &&
-                this.syncData.games_removed.length === 0 &&
+                this.syncData.soundtracks_removed.length === 0 &&
                 this.syncData.catched_errors.length === 0
             );
         },
@@ -147,11 +149,11 @@ export default {
                     // Sync complete - show results
                     this.syncComplete = true;
                     this.syncData = {
-                        games_added: data.games_added || [],
+                        soundtracks_added: data.soundtracks_added || [],
-                        games_re_added: data.games_re_added || [],
+                        soundtracks_re_added: data.soundtracks_re_added || [],
-                        games_changed_title: data.games_changed_title || {},
+                        soundtracks_changed_title: data.soundtracks_changed_title || {},
-                        games_changed_content: data.games_changed_content || [],
+                        soundtracks_changed_content: data.soundtracks_changed_content || [],
-                        games_removed: data.games_removed || [],
+                        soundtracks_removed: data.soundtracks_removed || [],
                         catched_errors: data.catched_errors || [],
                         total_time: data.total_time || "",
                     };
@@ -182,11 +184,11 @@ export default {
                     this.timeSpent = "00:00:00";
                     this.syncComplete = false;
                     this.syncData = {
-                        games_added: [],
+                        soundtracks_added: [],
-                        games_re_added: [],
+                        soundtracks_re_added: [],
-                        games_changed_title: {},
+                        soundtracks_changed_title: {},
-                        games_changed_content: [],
+                        soundtracks_changed_content: [],
-                        games_removed: [],
+                        soundtracks_removed: [],
                         catched_errors: [],
                         total_time: "",
                     };
@@ -211,48 +213,26 @@ export default {
 
 <style scoped>
 .syncProgressContainer {
-    background-color: #eeeeee;
+    position: relative;
-    margin: 10% auto;
-    border: 1px solid #888;
     width: 70%;
     max-width: 800px;
     padding: 20px;
-    border-radius: 10px;
+    box-sizing: border-box;
-}
-
-.closeModalImg {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    cursor: pointer;
-    opacity: 70%;
-    font-size: 2rem;
-    color: #555;
-}
-
-.closeModalImg:hover {
-    opacity: 100%;
 }
 
 .syncProgressContainer h1 {
-    color: black;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 10px;
-    font-size: 1.9rem;
     text-align: center;
     margin-bottom: 20px;
 }
 
 .syncProgressContainer h2 {
-    color: black;
+    color: white;
     text-align: center;
     font-size: 1.5rem;
     margin-bottom: 15px;
 }
 
 .syncProgressContainer p {
-    color: black;
     text-align: center;
 }
 
@@ -266,7 +246,7 @@ export default {
 .progressBarContainer {
     width: 100%;
     height: 30px;
-    background-color: #ddd;
+    background-color: rgb(66, 66, 66);
     border-radius: 15px;
     overflow: hidden;
     margin-bottom: 10px;
@@ -290,7 +270,7 @@ export default {
 
 .timeText {
     font-size: 1rem;
-    color: #666;
+    color: #bbb;
 }
 
 .resultsSection {
@@ -301,7 +281,7 @@ export default {
 .resultItem {
     margin-bottom: 20px;
     padding: 10px;
-    background-color: #f8f8f8;
+    background-color: rgb(66, 66, 66);
     border-radius: 8px;
     border-left: 4px solid #4CAF50;
 }
@@ -311,25 +291,25 @@ export default {
 }
 
 .resultItem h3 {
-    color: #333;
+    color: white;
     font-size: 1.1rem;
     margin-bottom: 8px;
 }
 
-.gameList {
+.soundtrackList {
     list-style-type: none;
     padding: 0;
     margin: 5px 0 0 0;
 }
 
-.gameList li {
+.soundtrackList li {
     padding: 3px 0;
-    color: #555;
+    color: #ddd;
 }
 
 .noChanges {
     text-align: center;
-    color: #666;
+    color: #bbb;
     font-style: italic;
     padding: 20px;
 }

src/components/items/aboutModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -11,7 +11,7 @@
                />
                <h1>Music Player Randomizer v0.1</h1>
                <p class="descriptionText">
-                  Try your video game music knowledge with this VGM randomizer,
+                  Try your video game soundtrack knowledge with this VGM randomizer,
                   invite your friends and see who is the best.
                </p>
                <p class="creditText">
@@ -46,11 +46,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/characterModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -50,11 +50,6 @@ export default {
          this.show = true;
          await this.fetchCharacters();
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
       async fetchCharacters() {
          this.isLoading = true;
          try {
@@ -150,7 +145,7 @@ export default {
    text-align: center;
    padding: 40px;
    font-size: 1.2rem;
-   color: #666;
+   color: #bbb;
 }
 
 @media only screen and (max-width: 1000px) {

src/components/items/extraButtons.vue

@@ -2,7 +2,7 @@
     <div class="extraButtonsDiv">
         <button @click="resetPlaylist">Reset playlist</button>
         <button @click="resetPoints">Reset points</button>
-        <button @click="handleSyncButtonClick">Sync games</button>
+        <button @click="handleSyncButtonClick">Sync soundtracks</button>
         <button @click="startSoundTest">Sound test</button>
         <button @click="showSearchModal">Search</button>
         <sync-progress-modal
@@ -47,7 +47,7 @@ export default {
         async startSync() {
             try {
                 // Start the sync
-                const response = await this.APIsyncGames();
+                const response = await this.APIsyncSoundtracks();
                 // Check if sync was actually started or if one is in progress
                 if (response && (response.status === 423 || (response.data && response.data.includes("in progress")))) {
                     // Sync is already in progress - show modal with polling
@@ -93,7 +93,7 @@ export default {
             this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
             this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
             this.$store.dispatch("setCurrentTrackHidden", false);
-            this.$store.dispatch("reloadGamesList", true);
+            this.$store.dispatch("reloadSoundtracksList", true);
         },
         startSoundTest() {
             this.$emit("start-sound-test");
@@ -116,7 +116,7 @@ export default {
                     });
             });
         },
-        APIsyncGames() {
+        APIsyncSoundtracks() {
             return new Promise((resolve, reject) => {
                 this.axios({
                     method: "get",

src/components/items/mobileMenu.vue

@@ -109,7 +109,8 @@ export default {
 }
 
 .mobileMenuContainer {
-   background-color: #c4c4c4;
+   background-color: #333;
+   color: white;
    width: 80vw;
    height: 100%;
    margin-left: 20%;

src/components/items/playlistHistory.vue

@@ -24,8 +24,8 @@
                 >
                     ??? - ???
                 </p>
-                <p v-else-if="track.Game !== ''" :class="{ activeTrack: track.CurrentlyPlaying }">
+                <p v-else-if="track.Soundtrack !== ''" :class="{ activeTrack: track.CurrentlyPlaying }">
-                    {{ track.SongNo + 1 }}. {{ track.Game }} -
+                    {{ track.SongNo + 1 }}. {{ track.Soundtrack }} -
                     {{ displayTrack(track.Song) }}
                 </p>
                 <span v-if="currentlyLoadingTrack === track.SongNo" class="loadingTrack">

src/components/items/settingsModal.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- Round Settings, Stop after current, Don't hide title -->
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -98,11 +98,6 @@ export default {
         openModal() {
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
         updateOptionHideTitle() {
             if (this.checkboxHideTitle) {
                 this.$store.dispatch("updateHideNextTitle", true);
@@ -165,6 +160,7 @@ export default {
     margin-top: 20px;
 }
 .checkboxDiv input {
+    accent-color: #ff9c00;
     transform: scale(1.3);
 }
 .checkboxDiv label {
@@ -181,9 +177,6 @@ export default {
     display: flex;
     width: 50px;
     height: 33px;
-    background: rgb(16, 99, 194);
-    color: rgb(235, 235, 235);
-    border-color: rgb(161, 161, 161);
     justify-content: center;
     align-items: center;
     line-height: 0;

src/components/items/statisticsModal.vue

@@ -1,6 +1,6 @@
 <template>
    <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+      <div v-if="show" class="modal" @click.self="closeModal">
          <div class="modalContainer">
             <div class="modalWrapper">
                <img
@@ -10,7 +10,7 @@
                   @click="closeModal"
                />
                <h1>Statistics</h1>
-               <p>Total amount of games in the playlist: {{ howManyGames }}</p>
+               <p>Total amount of soundtracks in the playlist: {{ howManySoundtracks }}</p>
             </div>
          </div>
       </div>
@@ -26,7 +26,7 @@ export default {
       };
    },
    computed: {
-      ...mapState(["howManyGames"]),
+      ...mapState(["howManySoundtracks"]),
    },
    methods: {
       closeModal() {
@@ -35,11 +35,6 @@ export default {
       openModal() {
          this.show = true;
       },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
    },
 };
 </script>

src/components/items/winningModal.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="modalAni">
-        <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+        <div v-if="show" class="modal" @click.self="closeModal">
             <div class="modalContainer">
                 <div class="modalWrapper">
                     <img
@@ -38,11 +38,6 @@ export default {
             this.playerName = playerName;
             this.show = true;
         },
-        checkIfClickShouldCloseModal(event) {
-            if (event.target.classList[0] === "modal") {
-                this.closeModal();
-            }
-        },
     },
 };
 </script>

src/components/layout/TheFooter.vue

@@ -260,13 +260,13 @@ export default {
                     url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/info`,
                 })
                     .then((response) => {
-                        let gameInfoObject = {
+                        let soundtrackInfoObject = {
-                            game: response.data.Game,
+                            soundtrack: response.data.Soundtrack,
                             track: response.data.Song.replace(".mp3", ""),
                             songNo: response.data.SongNo,
                         };
-                        this.$store.dispatch("setCurrentGame", gameInfoObject.game);
+                        this.$store.dispatch("setCurrentSoundtrack", soundtrackInfoObject.soundtrack);
-                        this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
+                        this.$store.dispatch("setCurrentTrack", soundtrackInfoObject.track);
                         resolve(false);
                     })
                     .catch(function(error) {

src/main.js

@@ -7,7 +7,7 @@ import VueAxios from "vue-axios";
 const store = createStore({
     state() {
         return {
-            currentGame: "",
+            currentSoundtrack: "",
             currentTrack: ``,
             currentTrackHidden: false,
             currentlyLoadingTrack: "",
@@ -15,18 +15,18 @@ const store = createStore({
             someoneHasWon: false,
             winningScore: 20,
             roundStarted: false,
-            reloadGamesList: false,
+            reloadSoundtracksList: false,
             listOfPlayers: [],
             localPlaylist: [],
             playlistHistory: [
                 {
                     SongNo: "",
-                    Game: "",
+                    Soundtrack: "",
                     Song: "",
                 },
             ],
             /* Stats */
-            howManyGames: 0,
+            howManySoundtracks: 0,
             /* Options */
             stopAfterCurrent: true,
             hideNextTrack: true,
@@ -35,8 +35,8 @@ const store = createStore({
         };
     },
     mutations: {
-        setCurrentGame(state, payload) {
+        setCurrentSoundtrack(state, payload) {
-            state.currentGame = payload;
+            state.currentSoundtrack = payload;
         },
         setCurrentTrack(state, payload) {
             state.currentTrack = payload;
@@ -89,11 +89,11 @@ const store = createStore({
         updatePlaylistHistory(state, payload) {
             state.playlistHistory = payload;
         },
-        updateHowManyGames(state, payload) {
+        updateHowManySoundtracks(state, payload) {
-            state.howManyGames = payload;
+            state.howManySoundtracks = payload;
         },
-        reloadGamesList(state, payload) {
+        reloadSoundtracksList(state, payload) {
-            state.reloadGamesList = payload;
+            state.reloadSoundtracksList = payload;
         },
         updateStopAfterCurrent(state, payload) {
             state.stopAfterCurrent = payload;
@@ -109,8 +109,8 @@ const store = createStore({
         },
     },
     actions: {
-        setCurrentGame(context, payload) {
+        setCurrentSoundtrack(context, payload) {
-            context.commit("setCurrentGame", payload);
+            context.commit("setCurrentSoundtrack", payload);
         },
         setCurrentTrack(context, payload) {
             context.commit("setCurrentTrack", payload);
@@ -225,11 +225,11 @@ const store = createStore({
         updatePlaylistHistory(context, payload) {
             context.commit("updatePlaylistHistory", payload);
         },
-        updateHowManyGames(context, payload) {
+        updateHowManySoundtracks(context, payload) {
-            context.commit("updateHowManyGames", payload);
+            context.commit("updateHowManySoundtracks", payload);
         },
-        reloadGamesList(context, payload) {
+        reloadSoundtracksList(context, payload) {
-            context.commit("reloadGamesList", payload);
+            context.commit("reloadSoundtracksList", payload);
         },
         updateStopAfterCurrent(context, payload) {
             context.commit("updateStopAfterCurrent", payload);