From 8b5aa3adf040f0e05dc671e28efcebf6efb9d683 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 3 Jul 2026 23:06:30 +0200 Subject: [PATCH] Replace game with soundtrack terminology and add fuzzy/exact search - Replace all 'game' references with 'soundtrack' throughout frontend (112 occurrences) - Add radio buttons for fuzzy/exact search in SearchModal - Fuzzy search is default and uses /findfuzzy endpoint - Exact search uses existing /find endpoint - Fix syntax errors in SyncProgressModal from previous refactoring Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe --- src/components/items/CurrentlyPlaying.vue | 6 +- src/components/items/InspirationWindow.vue | 42 +++++------ src/components/items/SearchModal.vue | 78 +++++++++++++++----- src/components/items/SyncProgressModal.vue | 86 +++++++++++----------- src/components/items/aboutModal.vue | 2 +- src/components/items/extraButtons.vue | 8 +- src/components/items/playlistHistory.vue | 4 +- src/components/items/statisticsModal.vue | 4 +- src/components/layout/TheFooter.vue | 8 +- src/main.js | 32 ++++---- 10 files changed, 156 insertions(+), 114 deletions(-) diff --git a/src/components/items/CurrentlyPlaying.vue b/src/components/items/CurrentlyPlaying.vue index 39c138a..ec824e0 100644 --- a/src/components/items/CurrentlyPlaying.vue +++ b/src/components/items/CurrentlyPlaying.vue @@ -3,7 +3,7 @@

????????

-

{{ currentGame }}

+

{{ currentSoundtrack }}

??????

{{ currentTrack }}

 @@ -16,7 +16,7 @@

??????

-

{{ currentGame }}

+

{{ currentSoundtrack }}

{{ currentTrack }}

@@ -27,7 +27,7 @@ import { mapState } from "vuex"; export default { computed: { - ...mapState(["currentGame", "currentTrack", "currentTrackHidden"]), + ...mapState(["currentSoundtrack", "currentTrack", "currentTrackHidden"]), }, }; diff --git a/src/components/items/InspirationWindow.vue b/src/components/items/InspirationWindow.vue index 979a9da..c8bace5 100644 --- a/src/components/items/InspirationWindow.vue +++ b/src/components/items/InspirationWindow.vue @@ -8,7 +8,7 @@ @@ -20,8 +20,8 @@ class="inspirationList" ref="inspirationList" > -
  • - {{ game }} +
  • + {{ soundtrack }}
    • @@ -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); diff --git a/src/components/items/SearchModal.vue b/src/components/items/SearchModal.vue index 64db368..468f4df 100644 --- a/src/components/items/SearchModal.vue +++ b/src/components/items/SearchModal.vue @@ -4,20 +4,30 @@
    × -

    Search Games

    +

    Search Soundtracks

    +
    + + +
    Searching...
    -
    - {{ game }} +
    + {{ soundtrack }}
    No results found
    @@ -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; @@ -78,49 +90,70 @@ 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

    tags - const games = []; + parseSoundtracksFromResponse(htmlData) { + // The server returns HTML from FoundSoundtracks templ component + // It generates divs containing soundtrack names in

    tags + const soundtracks = []; const parser = new DOMParser(); const doc = parser.parseFromString(htmlData, "text/html"); - // Find all p tags inside divs (the templ generates

    {game}

    ) + // Find all p tags inside divs (the templ generates

    {soundtrack}

    ) 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; }, }, };