Add search button with modal

- Create SearchModal.vue with text field and results display - Add Search button to extraButtons.vue - Uses /find API endpoint for server-side search - Modal matches existing app styling Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
Update sync to use new API with progress modal
2026-05-31 20:47:20 +02:00 · 2026-05-31 19:49:22 +02:00 · 2026-05-30 22:30:51 +02:00 · 2026-05-30 22:25:59 +02:00
14 changed files with 829 additions and 208 deletions
@@ -0,0 +1,4 @@
 node_modules
 .git
 dist
 .DS_Store
@@ -0,0 +1,18 @@
 # Build stage
 FROM node:18-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
 RUN npm run build
 # Runtime stage
 FROM nginx:alpine
 RUN apk add --no-cache gettext
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY public/config.template.js /usr/share/nginx/html/
 COPY docker-entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
 ENTRYPOINT ["/entrypoint.sh"]
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]
@@ -0,0 +1,8 @@
 #!/bin/sh
 set -e
 # Generate config.js from template at runtime
 envsubst < /usr/share/nginx/html/config.template.js > /usr/share/nginx/html/config.js
 # Start nginx
 exec "$@"
@@ -1,26 +0,0 @@
 const express = require("express");
 const path = require("path");
 const routes = require("./routes.js");
 const app = express();
 const cors = require("cors");
 /* const bodyParser = require("body-parser"); */
 const PORT = process.env.PORT || 5005;
 const mainUrl = "test";
 console.log(`Server started on port ${PORT}`);
 //app.use(bodyParser.json());
 //Routes
 /* app.use(express.static(path.join(__dirname, "public"))); */
 /* app.use(express.static(path.join(__dirname, "assets"))); */
 app.use(express.static(path.join(__dirname)));
 app.use(express.static(path.join(__dirname, "dist")));
 /* app.use(express.static(path.join(__dirname, "public"))); */
 /* console.log(__dirname); */
 app.use(cors());
 app.use(routes);
 app.listen(PORT, "0.0.0.0");
@@ -0,0 +1,3 @@
 window.__RUNTIME_CONFIG__ = {
  API_HOSTNAME: '${API_HOSTNAME}'
 };
@@ -8,6 +8,7 @@
    <link rel="preconnect" href="https://fonts.gstatic.com">
   <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="<%= BASE_URL %>config.js"></script>
  </head>
  <body>
    <noscript>
@@ -1,3 +0,0 @@
 export default {
    hostname: "$HOSTNAME",
 }
@@ -28,7 +28,6 @@
 </template>
 <script>
 import arne from '../../arne.js'
 import {mapState} from "vuex";
 export default {
    data() {
@@ -93,7 +92,7 @@ export default {
        reloadGames() {
            this.axios({
                method: "get",
-                url: `${arne.hostname}/music/all`,
+                url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/all`,
            })
                .then((response) => {
                    this.allGamesList = response.data;
@@ -0,0 +1,190 @@
 <template>
   <transition name="modalAni">
      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
         <div class="modalContainer">
            <div class="modalWrapper">
               <span class="closeModalImg" @click="closeModal">&times;</span>
               <h1>Search Games</h1>
               <div class="searchContainer">
                  <input
                     type="text"
                     v-model="searchTerm"
                     @input="debouncedSearch"
                     placeholder="Search for games..."
                     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>
                     </div>
                     <div v-else class="noResults">No results found</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </transition>
 </template>
 <script>
 export default {
   data() {
      return {
         show: false,
         searchTerm: "",
         results: [],
         loading: false,
         searchTimeout: null,
      };
   },
   methods: {
      openModal() {
         this.show = true;
         this.searchTerm = "";
         this.results = [];
      },
      closeModal() {
         this.show = false;
         this.searchTerm = "";
         this.results = [];
         this.loading = false;
         if (this.searchTimeout) {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = null;
         }
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
      debouncedSearch() {
         // Clear existing timeout
         if (this.searchTimeout) {
            clearTimeout(this.searchTimeout);
         }
         // Set new timeout
         this.searchTimeout = setTimeout(() => {
            this.performSearch();
         }, 250);
      },
      async performSearch() {
         if (this.searchTerm.length === 0) {
            this.results = [];
            return;
         }
         this.loading = true;
         try {
            const response = await this.axios({
               method: "post",
               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/find`,
               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);
         } catch (error) {
            console.error("Error searching games:", 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 = [];
         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>)
         const pTags = doc.querySelectorAll("div p");
         for (const p of pTags) {
            const gameName = p.textContent.trim();
            if (gameName) {
               games.push(gameName);
            }
         }
         return games;
      },
   },
 };
 </script>
 <style scoped>
 .searchContainer {
   width: 100%;
   margin-top: 20px;
 }
 .searchInput {
   width: 100%;
   padding: 12px;
   font-size: 1.1rem;
   border: 1px solid #ccc;
   border-radius: 5px;
   box-sizing: border-box;
 }
 .searchInput:focus {
   outline: none;
   border-color: #ff9c00;
   box-shadow: 0 0 5px rgba(255, 156, 0, 0.3);
 }
 .searchResults {
   margin-top: 15px;
   max-height: 400px;
   overflow-y: auto;
 }
 .loading {
   color: #666;
   font-style: italic;
   text-align: center;
   padding: 20px;
 }
 .resultsList {
   width: 100%;
 }
 .resultItem {
   padding: 12px;
   margin-bottom: 8px;
   background-color: #f8f8f8;
   border: 1px solid #ddd;
   border-radius: 5px;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 .resultItem:hover {
   background-color: #e8e8e8;
 }
 .noResults {
   color: #666;
   text-align: center;
   padding: 20px;
   font-style: italic;
 }
@media only screen and (max-width: 1000px) {
   .searchInput {
      font-size: 1rem;
      padding: 10px;
   }
   .resultItem {
      padding: 10px;
      font-size: 0.95rem;
   }
 }
 </style>
@@ -0,0 +1,357 @@
 <template>
    <div class="modal" v-if="isOpen">
        <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>
                <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>
 </template>
 <script>
 export default {
    props: {
        isOpen: {
            type: Boolean,
            required: true,
        },
        syncInProgress: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            progress: 0,
            timeSpent: "00:00:00",
            syncComplete: false,
            syncData: {
                games_added: [],
                games_re_added: [],
                games_changed_title: {},
                games_changed_content: [],
                games_removed: [],
                catched_errors: [],
                total_time: "",
            },
            pollInterval: null,
            hasFetchedInitialData: false,
        };
    },
    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.catched_errors.length === 0
            );
        },
    },
    methods: {
        closeModal() {
            this.$emit("close");
        },
        startPolling() {
            if (this.pollInterval) {
                clearInterval(this.pollInterval);
            }
            this.pollInterval = setInterval(() => {
                this.fetchProgress();
            }, 1000);
        },
        stopPolling() {
            if (this.pollInterval) {
                clearInterval(this.pollInterval);
                this.pollInterval = null;
            }
        },
        async fetchProgress() {
            try {
                const response = await this.axios({
                    method: "get",
                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync/progress`,
                });
                const data = response.data;
                // Check if we got a progress response or a result response
                if (data.progress !== undefined) {
                    // Still syncing - update progress
                    this.progress = parseInt(data.progress) || 0;
                    this.timeSpent = data.time_spent || this.timeSpent;
                    this.syncComplete = false;
                    // If we're not actively polling but sync is in progress, start polling
                    if (this.syncInProgress && !this.pollInterval) {
                        this.startPolling();
                    }
                } else {
                    // Sync complete - show results
                    this.syncComplete = true;
                    this.syncData = {
                        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 || [],
                        catched_errors: data.catched_errors || [],
                        total_time: data.total_time || "",
                    };
                    this.progress = 100;
                    this.stopPolling();
                }
                this.hasFetchedInitialData = true;
            } catch (error) {
                console.error("Error fetching sync progress:", error);
            }
        },
        async fetchInitialData() {
            // Fetch once to check current state
            await this.fetchProgress();
            // If we got progress data, start polling
            if (!this.syncComplete && !this.pollInterval) {
                this.startPolling();
            }
        },
    },
    watch: {
        isOpen(newVal) {
            if (newVal) {
                this.hasFetchedInitialData = false;
                if (this.syncInProgress) {
                    // New sync in progress - start polling
                    this.progress = 0;
                    this.timeSpent = "00:00:00";
                    this.syncComplete = false;
                    this.syncData = {
                        games_added: [],
                        games_re_added: [],
                        games_changed_title: {},
                        games_changed_content: [],
                        games_removed: [],
                        catched_errors: [],
                        total_time: "",
                    };
                    // Small delay to ensure sync has started before first poll
                    setTimeout(() => {
                        this.startPolling();
                    }, 200);
                } else {
                    // Check current state - might be in progress or have results
                    this.fetchInitialData();
                }
            } else {
                this.stopPolling();
            }
        },
    },
    beforeUnmount() {
        this.stopPolling();
    },
 };
 </script>
 <style scoped>
 .syncProgressContainer {
    background-color: #eeeeee;
    margin: 10% auto;
    border: 1px solid #888;
    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%;
 }
 .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;
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 15px;
 }
 .syncProgressContainer p {
    color: black;
    text-align: center;
 }
 .progressSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
 }
 .progressBarContainer {
    width: 100%;
    height: 30px;
    background-color: #ddd;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
 }
 .progressBar {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    border-radius: 15px;
    transition: width 0.3s ease;
    text-align: center;
    line-height: 30px;
    color: white;
    font-weight: bold;
 }
 .progressText {
    font-size: 1.3rem;
    font-weight: bold;
 }
 .timeText {
    font-size: 1rem;
    color: #666;
 }
 .resultsSection {
    max-height: 60vh;
    overflow-y: auto;
 }
 .resultItem {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f8f8f8;
    border-radius: 8px;
    border-left: 4px solid #4CAF50;
 }
 .resultItem.errors {
    border-left-color: #f44336;
 }
 .resultItem h3 {
    color: #333;
    font-size: 1.1rem;
    margin-bottom: 8px;
 }
 .gameList {
    list-style-type: none;
    padding: 0;
    margin: 5px 0 0 0;
 }
 .gameList li {
    padding: 3px 0;
    color: #555;
 }
 .noChanges {
    text-align: center;
    color: #666;
    font-style: italic;
    padding: 20px;
 }
@media only screen and (max-width: 1000px) {
    .syncProgressContainer {
        width: 93%;
        margin: 5% auto;
        padding: 15px;
    }
    .syncProgressContainer h1 {
        font-size: 1.6rem;
        padding-top: 5px;
    }
    .progressBarContainer {
        height: 25px;
    }
    .progressText {
        font-size: 1.1rem;
    }
 }
 </style>
@@ -9,59 +9,20 @@
                  alt="closeModalIMG"
                  @click="closeModal"
               />
-               <h1 @click="test">{{ playerName }}, choose your fighter!</h1>
+               <h1>{{ playerName }}, choose your fighter!</h1>
-               <div class="fighterDiv">
+               <div v-if="isLoading" class="loading">Loading characters...</div>
-                  <div class="fighter" @click="chooseFighter('Adol')">
+               <div class="fighterDiv" v-else>
-                     <img src="characters/Adol.png" alt="adol" />
+                  <div
-                     <p>Adol Christin</p>
+                     v-for="character in characters"
-                  </div>
+                     :key="character"
-                  <div class="fighter" @click="chooseFighter('Link')">
+                     class="fighter"
-                     <img src="characters/Link.png" alt="link" />
+                     @click="chooseFighter(character)"
-                     <p>Link</p>
+                  >
-                  </div>
+                     <img
-                  <div class="fighter" @click="chooseFighter('Barbarian')">
+                        :src="getCharacterImageUrl(character)"
-                     <img src="characters/Barbarian.png" alt="barbarian" />
+                        :alt="getCharacterName(character)"
-                     <p>Barbarian</p>
+                     />
-                  </div>
+                     <p>{{ getCharacterName(character) }}</p>
                  <div class="fighter" @click="chooseFighter('Layton')">
                     <img src="characters/Layton.png" alt="layton" />
                     <p>Professor Layton</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Kiryu')">
                     <img src="characters/Kiryu.png" alt="kiryu" />
                     <p>Kazuma Kiryu</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Miles')">
                     <img src="characters/Miles.png" alt="miles" />
                     <p>Miles Edgeworth</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Lemmings')">
                     <img src="characters/Lemmings.png" alt="lemmings" />
                     <p>Lemmings</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Samus')">
                     <img src="characters/Samus.png" alt="samus" />
                     <p>Samus</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Kratos')">
                     <img src="characters/Kratos.png" alt="kratos" />
                     <p>Kratos</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Aloy')">
                     <img src="characters/Aloy.png" alt="aloy" />
                     <p>Aloy</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Sora')">
                     <img src="characters/Sora.png" alt="sora" />
                     <p>Sora</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('Raiden')">
                     <img src="characters/Raiden.png" alt="raiden" />
                     <p>Raiden</p>
                  </div>
                  <div class="fighter" @click="chooseFighter('PaperMario')">
                     <img src="characters/PaperMario.png" alt="paper mario" />
                     <p>Paper Mario</p>
                  </div>
               </div>
            </div>
@@ -76,25 +37,68 @@ export default {
      return {
         show: false,
         playerName: "",
         characters: [],
         isLoading: false,
      };
   },
   methods: {
      closeModal() {
         this.show = false;
      },
-      openModal(playerName) {
+      async openModal(playerName) {
         this.playerName = playerName;
         this.show = true;
         await this.fetchCharacters();
      },
      checkIfClickShouldCloseModal(event) {
         if (event.target.classList[0] === "modal") {
            this.closeModal();
         }
      },
-      chooseFighter(profilePicSrc) {
+      async fetchCharacters() {
         this.isLoading = true;
         try {
            const response = await this.axios({
               method: "get",
               url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/characters`,
            });
            this.characters = response.data || [];
         } catch (error) {
            console.error("Failed to fetch characters:", error);
            // Fallback to hardcoded list if API fails
            this.characters = [
               "Adol.png",
               "Link.png",
               "Barbarian.png",
               "Layton.png",
               "Kiryu.png",
               "Miles.png",
               "Lemmings.png",
               "Samus.png",
               "Kratos.png",
               "Aloy.png",
               "Sora.png",
               "Raiden.png",
               "PaperMario.png",
            ];
         } finally {
            this.isLoading = false;
         }
      },
      getCharacterImageUrl(character) {
         return `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/character?name=${encodeURIComponent(character)}`;
      },
      getCharacterName(character) {
         // Remove file extension
         return character.replace(/\.(png|jpg|jpeg|gif)$/i, "");
      },
      chooseFighter(characterFilename) {
         const apiHostname = window.__RUNTIME_CONFIG__.API_HOSTNAME;
         const profile = `${apiHostname}/character?name=${encodeURIComponent(characterFilename)}`;
         let payload = {
            playerName: this.playerName,
-            profile: "characters/" + profilePicSrc + ".png",
+            profile: profile,
         };
         this.$store.dispatch("changePlayerProfile", payload);
         this.closeModal();
@@ -118,6 +122,7 @@ export default {
 .fighterDiv img {
   width: 180px;
   height: 90px;
   object-fit: contain;
 }
 .fighter {
@@ -141,6 +146,13 @@ export default {
   font-size: 1.3rem;
 }
 .loading {
   text-align: center;
   padding: 40px;
   font-size: 1.2rem;
   color: #666;
 }
@media only screen and (max-width: 1000px) {
   .modalContainer {
      width: 95%; /* Could be more or less, depending on screen size */
@@ -151,6 +163,7 @@ export default {
   .fighterDiv img {
      width: 80px;
      height: 40px;
      object-fit: contain;
   }
   .fighter {
@@ -2,17 +2,33 @@
    <div class="extraButtonsDiv">
        <button @click="resetPlaylist">Reset playlist</button>
        <button @click="resetPoints">Reset points</button>
-        <button @click="syncGames">Sync games</button>
+        <button @click="handleSyncButtonClick">Sync games</button>
        <button @click="startSoundTest">Sound test</button>
        <button @click="showSearchModal">Search</button>
        <sync-progress-modal
            :isOpen="showSyncModal"
            :syncInProgress="syncInProgress"
            @close="handleSyncComplete"
        ></sync-progress-modal>
        <search-modal ref="searchModal"></search-modal>
    </div>
 </template>
 <script>
-import arne from '../../arne.js'
+import SyncProgressModal from "./SyncProgressModal.vue";
 import SearchModal from "./SearchModal.vue";
 export default {
    components: {
        SyncProgressModal,
        SearchModal,
    },
    data() {
        return {
            emptyPlaylist: [],
            showSyncModal: false,
            syncInProgress: false,
            syncCompleted: false,
        };
    },
    methods: {
@@ -28,8 +44,47 @@ export default {
            this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
            this.$store.dispatch("setCurrentTrackHidden", false);
        },
-        async syncGames() {
+        async startSync() {
-            await this.APIsyncGames();
+            try {
                // Start the sync
                const response = await this.APIsyncGames();
                // 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
                    this.syncInProgress = true;
                } else {
                    this.syncInProgress = true;
                }
                // Show the modal which will poll for progress
                this.showSyncModal = true;
            } catch (error) {
                console.error("Failed to start sync:", error);
                // If error is 423, sync is already in progress
                if (error.response && error.response.status === 423) {
                    this.syncInProgress = true;
                    this.showSyncModal = true;
                }
            }
        },
        handleSyncButtonClick() {
            // If we have a completed sync result, just show it
            // Otherwise start a new sync
            if (this.syncCompleted) {
                this.showSyncResults();
            } else {
                this.startSync();
            }
        },
        showSyncResults() {
            // Show modal with existing results (no new sync)
            this.syncInProgress = false;
            this.showSyncModal = true;
        },
        async handleSyncComplete() {
            this.syncInProgress = false;
            this.syncCompleted = true;
            this.showSyncModal = false;
            // Refresh data after sync completes
            await this.APIresetPlaylist();
            this.$store.dispatch("resetPlayerScore");
            this.$store.dispatch("resetPlayerWelcomed");
@@ -43,11 +98,14 @@ export default {
        startSoundTest() {
            this.$emit("start-sound-test");
        },
        showSearchModal() {
            this.$refs.searchModal.openModal();
        },
        APIresetPlaylist() {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/reset`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/reset`,
                })
                    .then(() => {
                        resolve();
@@ -62,14 +120,14 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/sync`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync`,
                })
-                    .then(() => {
+                    .then((response) => {
-                        resolve();
+                        resolve(response);
                    })
                    .catch(function(error) {
                        console.log(error);
-                        reject();
+                        reject(error);
                    });
            });
        },
@@ -28,7 +28,6 @@
 <script>
 import { mapState } from "vuex";
 import arne from "../../arne.js";
 export default {
    data() {
        return {
@@ -168,7 +167,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/rand`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/rand`,
                    responseType: "blob",
                    onDownloadProgress: (progressEvent) => {
                        let percentCompleted = Math.round(
@@ -198,7 +197,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/rand/low`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/rand/low`,
                    responseType: "blob",
                    onDownloadProgress: (progressEvent) => {
                        let percentCompleted = Math.round(
@@ -228,7 +227,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/addPlayed`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addPlayed`,
                })
                    .then(() => {
                        resolve(false);
@@ -243,7 +242,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/addQue`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/addQue`,
                })
                    .then(() => {
                        resolve(false);
@@ -258,7 +257,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/info`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/info`,
                })
                    .then((response) => {
                        let gameInfoObject = {
@@ -280,7 +279,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music/list`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music/list`,
                })
                    .then((response) => {
                        let tracklistArray = response.data;
@@ -297,7 +296,7 @@ export default {
            return new Promise((resolve, reject) => {
                this.axios({
                    method: "get",
-                    url: `${arne.hostname}/music?song=${trackNumber}`,
+                    url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/music?song=${trackNumber}`,
                    responseType: "blob",
                })
                    .then((response) => {
Author	SHA1	Message	Date
Sansan	168ba205be	Add search button with modal - Create SearchModal.vue with text field and results display - Add Search button to extraButtons.vue - Uses /find API endpoint for server-side search - Modal matches existing app styling Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>	2026-05-31 20:47:20 +02:00
Sansan	99e6419d09	Update sync to use new API with progress modal - Replace /sync endpoint (which now just starts sync) with polling /sync/progress - Add SyncProgressModal.vue component to show live progress and results - Update extraButtons.vue to use new sync flow with modal Update character modal to use API - Fetch character list from /characters endpoint - Load character images from /character?name=<filename> endpoint - Add object-fit: contain to preserve aspect ratios - Fallback to hardcoded list if API fails - Store API URLs for profile images Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>	2026-05-31 19:49:22 +02:00
Sansan	ef1f9386e1	Remove unnecessary files (index.js, routes.js) Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>	2026-05-30 22:30:51 +02:00
Sansan	bc32ce5fc5	Add Docker support with runtime environment variable configuration - Remove temporary arne.js file - Add runtime configuration via window.__RUNTIME_CONFIG__ - Create public/config.template.js for hostname injection - Add Dockerfile with multi-stage build (node + nginx) - Add docker-entrypoint.sh to generate config.js at startup - Add .dockerignore - Update all components to use runtime config instead of arne.js - Update index.html to load config.js before app This allows deploying the same Docker image to different environments by setting the API_HOSTNAME environment variable at runtime. Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>	2026-05-30 22:25:59 +02:00