Give modals the dark app theme and close them on outside click

- Restyle the shared modal styles to the dark app palette with orange accents
- Remove light-theme overrides in Search, Sync and Settings modals
- Add outside-click close and fade transition to the Sync modal
- Use @click.self for outside-click close in all modals
- Let tall modals scroll instead of being cut off
- Darken the mobile menu to match

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">
-                {{ game }}
+            <li v-for="soundtrack in showingSoundtracksList" class="inspirationEntry" :key="soundtrack">
+                {{ soundtrack }}
             </li>
         </transition-group>
     </div>
@@ -32,39 +32,39 @@ import {mapState} from "vuex";
 export default {
     data() {
         return {
-            allGamesList: [],
-            showingGamesList: [],
+            allSoundtracksList: [],
+            showingSoundtracksList: [],
             scrollDown: true,
             searchInputText: "",
         };
     },
     computed: {
-        ...mapState(["reloadGamesList"]),
+        ...mapState(["reloadSoundtracksList"]),
     },
     watch: {
-        reloadGamesList(newValue) {
+        reloadSoundtracksList(newValue) {
             if (newValue) {
-                this.reloadGames();
-                this.$store.dispatch("reloadGamesList", false);
+                this.reloadSoundtracks();
+                this.$store.dispatch("reloadSoundtracksList", false);
             }
         }
     },
     methods: {
         clearSearch() {
           this.searchInputText = "";
-          this.searchGame();
+          this.searchSoundtrack();
         },
-        searchGame() {
-            this.showingGamesList = [];
-            for (const game of this.allGamesList) {
+        searchSoundtrack() {
+            this.showingSoundtracksList = [];
+            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.$store.dispatch("updateHowManyGames", this.allGamesList.length);
+                    this.searchSoundtrack();
+                    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">
-                           {{ game }}
+                        <div v-for="soundtrack in results" :key="soundtrack" class="resultItem">
+                           {{ 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
-            this.results = this.parseGamesFromResponse(response.data);
+            // Parse soundtracks from HTML response
+            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) {
-         // The server returns HTML from FoundGames templ component
-         // It generates divs containing game names in <p> tags
-         const games = [];
+      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>{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();
-            if (gameName) {
-               games.push(gameName);
+            const soundtrackName = p.textContent.trim();
+            if (soundtrackName) {
+               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;
-   border: 1px solid #ddd;
+   background-color: rgb(66, 66, 66);
+   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">
-        <div class="modalContainer syncProgressContainer">
-            <span class="closeModalImg" @click="closeModal">&times;</span>
-            <h1>Sync in Progress</h1>
+    <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.games_added && syncData.games_added.length > 0" class="resultItem">
-                    <h3>Games Added: {{ syncData.games_added.length }}</h3>
-                    <ul class="gameList">
-                        <li v-for="game in syncData.games_added" :key="game">{{ game }}</li>
-                    </ul>
+                <div 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-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-else class="resultsSection">
+                    <h2>Sync Complete!</h2>
+                    <p>Total time: {{ syncData.total_time }}</p>
                 
-                <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="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="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.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.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.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="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>
+                    <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>
                 
-                <p v-if="noChanges" class="noChanges">No changes detected.</p>
+                    <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>
-    </div>
+    </transition>
 </template>
 
 <script>
@@ -82,11 +84,11 @@ export default {
             timeSpent: "00:00:00",
             syncComplete: false,
             syncData: {
-                games_added: [],
-                games_re_added: [],
-                games_changed_title: {},
-                games_changed_content: [],
-                games_removed: [],
+                soundtracks_added: [],
+                soundtracks_re_added: [],
+                soundtracks_changed_title: {},
+                soundtracks_changed_content: [],
+                soundtracks_removed: [],
                 catched_errors: [],
                 total_time: "",
             },
@@ -97,11 +99,11 @@ export default {
     computed: {
         noChanges() {
             return (
-                this.syncData.games_added.length === 0 &&
-                this.syncData.games_re_added.length === 0 &&
-                Object.keys(this.syncData.games_changed_title).length === 0 &&
-                this.syncData.games_changed_content.length === 0 &&
-                this.syncData.games_removed.length === 0 &&
+                this.syncData.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
             );
         },
@@ -147,11 +149,11 @@ export default {
                     // Sync complete - show results
                     this.syncComplete = true;
                     this.syncData = {
-                        games_added: data.games_added || [],
-                        games_re_added: data.games_re_added || [],
-                        games_changed_title: data.games_changed_title || {},
-                        games_changed_content: data.games_changed_content || [],
-                        games_removed: data.games_removed || [],
+                        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 || "",
                     };
@@ -182,11 +184,11 @@ export default {
                     this.timeSpent = "00:00:00";
                     this.syncComplete = false;
                     this.syncData = {
-                        games_added: [],
-                        games_re_added: [],
-                        games_changed_title: {},
-                        games_changed_content: [],
-                        games_removed: [],
+                        soundtracks_added: [],
+                        soundtracks_re_added: [],
+                        soundtracks_changed_title: {},
+                        soundtracks_changed_content: [],
+                        soundtracks_removed: [],
                         catched_errors: [],
                         total_time: "",
                     };
@@ -211,48 +213,26 @@ export default {
 
 <style scoped>
 .syncProgressContainer {
-    background-color: #eeeeee;
-    margin: 10% auto;
-    border: 1px solid #888;
+    position: relative;
     width: 70%;
     max-width: 800px;
     padding: 20px;
-    border-radius: 10px;
-}
-
-.closeModalImg {
-    position: absolute;
-    right: 8px;
-    top: 8px;
-    cursor: pointer;
-    opacity: 70%;
-    font-size: 2rem;
-    color: #555;
-}
-
-.closeModalImg:hover {
-    opacity: 100%;
+    box-sizing: border-box;
 }
 
 .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 }">
-                    {{ track.SongNo + 1 }}. {{ track.Game }} -
+                <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">

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 = {
-                            game: response.data.Game,
+                        let soundtrackInfoObject = {
+                            soundtrack: response.data.Soundtrack,
                             track: response.data.Song.replace(".mp3", ""),
                             songNo: response.data.SongNo,
                         };
-                        this.$store.dispatch("setCurrentGame", gameInfoObject.game);
-                        this.$store.dispatch("setCurrentTrack", gameInfoObject.track);
+                        this.$store.dispatch("setCurrentSoundtrack", soundtrackInfoObject.soundtrack);
+                        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) {
-            state.currentGame = payload;
+        setCurrentSoundtrack(state, 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) {
-            state.howManyGames = payload;
+        updateHowManySoundtracks(state, payload) {
+            state.howManySoundtracks = payload;
         },
-        reloadGamesList(state, payload) {
-            state.reloadGamesList = payload;
+        reloadSoundtracksList(state, payload) {
+            state.reloadSoundtracksList = payload;
         },
         updateStopAfterCurrent(state, payload) {
             state.stopAfterCurrent = payload;
@@ -109,8 +109,8 @@ const store = createStore({
         },
     },
     actions: {
-        setCurrentGame(context, payload) {
-            context.commit("setCurrentGame", payload);
+        setCurrentSoundtrack(context, 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) {
-            context.commit("updateHowManyGames", payload);
+        updateHowManySoundtracks(context, payload) {
+            context.commit("updateHowManySoundtracks", payload);
         },
-        reloadGamesList(context, payload) {
-            context.commit("reloadGamesList", payload);
+        reloadSoundtracksList(context, payload) {
+            context.commit("reloadSoundtracksList", payload);
         },
         updateStopAfterCurrent(context, payload) {
             context.commit("updateStopAfterCurrent", payload);