1 Commits
Author SHA1 Message Date
Sansan 8b5aa3adf0 Replace game with soundtrack terminology and add fuzzy/exact search
Build and Test / build (push) Successful in 24s
Release Docker Image / build-and-push (push) Successful in 12m29s
- 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 <vibe@mistral.ai>
2026-07-03 23:06:30 +02:00
10 changed files with 156 additions and 114 deletions
+3 -3
View File
@@ -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>
+21 -21
View File
@@ -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);
+60 -18
View File
@@ -4,20 +4,30 @@
<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;
@@ -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 <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 {
@@ -177,6 +210,15 @@ export default {
}
@media only screen and (max-width: 1000px) {
.searchTypeContainer {
flex-wrap: wrap;
gap: 10px;
}
.radioLabel {
font-size: 0.9rem;
}
.searchInput {
font-size: 1rem;
padding: 10px;
+43 -43
View File
@@ -16,44 +16,44 @@
<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>
<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.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>
<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_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>
<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.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>
<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.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>
<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="gameList">
<ul class="soundtrackList">
<li v-for="error in syncData.catched_errors" :key="error">{{ error }}</li>
</ul>
</div>
@@ -82,11 +82,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 +97,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 +147,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 +182,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: "",
};
@@ -316,13 +316,13 @@ export default {
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;
}
+1 -1
View File
@@ -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">
+4 -4
View File
@@ -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",
+2 -2
View File
@@ -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">
+2 -2
View File
@@ -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() {
+4 -4
View File
@@ -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) {
+16 -16
View File
@@ -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);