From 99e6419d092e1773419d9f6b91286a92444cc158 Mon Sep 17 00:00:00 2001
From: Sebastian <zarnor91@gmail.com>
Date: Sun, 31 May 2026 19:49:22 +0200
Subject: [PATCH] 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>
---
 src/components/items/SyncProgressModal.vue | 357 +++++++++++++++++++++
 src/components/items/characterModal.vue    | 333 ++++++++++---------
 src/components/items/extraButtons.vue      |  64 +++-
 3 files changed, 588 insertions(+), 166 deletions(-)
 create mode 100644 src/components/items/SyncProgressModal.vue

diff --git a/src/components/items/SyncProgressModal.vue b/src/components/items/SyncProgressModal.vue
new file mode 100644
index 0000000..2b555ed
--- /dev/null
+++ b/src/components/items/SyncProgressModal.vue
@@ -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>
diff --git a/src/components/items/characterModal.vue b/src/components/items/characterModal.vue
index a61dd0c..ada2a49 100644
--- a/src/components/items/characterModal.vue
+++ b/src/components/items/characterModal.vue
@@ -1,160 +1,173 @@
-<template>
-   <transition name="modalAni">
-      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
-         <div class="modalContainer">
-            <div class="modalWrapper">
-               <img
-                  class="closeModalImg"
-                  src="cancel-black-36dp.svg"
-                  alt="closeModalIMG"
-                  @click="closeModal"
-               />
-               <h1 @click="test">{{ playerName }}, choose your fighter!</h1>
-               <div class="fighterDiv">
-                  <div class="fighter" @click="chooseFighter('Adol')">
-                     <img src="characters/Adol.png" alt="adol" />
-                     <p>Adol Christin</p>
-                  </div>
-                  <div class="fighter" @click="chooseFighter('Link')">
-                     <img src="characters/Link.png" alt="link" />
-                     <p>Link</p>
-                  </div>
-                  <div class="fighter" @click="chooseFighter('Barbarian')">
-                     <img src="characters/Barbarian.png" alt="barbarian" />
-                     <p>Barbarian</p>
-                  </div>
-                  <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>
-         </div>
-      </div>
-   </transition>
-</template>
-
-<script>
-export default {
-   data() {
-      return {
-         show: false,
-         playerName: "",
-      };
-   },
-   methods: {
-      closeModal() {
-         this.show = false;
-      },
-      openModal(playerName) {
-         this.playerName = playerName;
-         this.show = true;
-      },
-      checkIfClickShouldCloseModal(event) {
-         if (event.target.classList[0] === "modal") {
-            this.closeModal();
-         }
-      },
-      chooseFighter(profilePicSrc) {
-         let payload = {
-            playerName: this.playerName,
-            profile: "characters/" + profilePicSrc + ".png",
-         };
-         this.$store.dispatch("changePlayerProfile", payload);
-         this.closeModal();
-      },
-   },
-};
-</script>
-
-<style scoped>
-.modalContainer {
-   width: 80%; /* Could be more or less, depending on screen size */
-}
-.fighterDiv {
-   display: flex;
-   width: 100%;
-   justify-content: center;
-   margin-top: 30px;
-   flex-wrap: wrap;
-}
-
-.fighterDiv img {
-   width: 180px;
-   height: 90px;
-}
-
-.fighter {
-   display: flex;
-   flex-wrap: wrap;
-   justify-content: center;
-   text-align: center;
-   width: 14vw;
-   margin-top: 30px;
-}
-.fighter > * {
-   width: 100%;
-}
-.fighter:hover {
-   outline: 1px solid rgb(128, 83, 0);
-   outline-offset: 2px;
-   cursor: pointer;
-}
-.fighter p {
-   margin-top: 8px;
-   font-size: 1.3rem;
-}
-
-@media only screen and (max-width: 1000px) {
-   .modalContainer {
-      width: 95%; /* Could be more or less, depending on screen size */
-   }
-   .fighterDiv {
-      margin-top: 30px;
-   }
-   .fighterDiv img {
-      width: 80px;
-      height: 40px;
-   }
-
-   .fighter {
-      width: 25vw;
-   }
-}
-</style>
+<template>
+   <transition name="modalAni">
+      <div v-if="show" class="modal" @click="checkIfClickShouldCloseModal">
+         <div class="modalContainer">
+            <div class="modalWrapper">
+               <img
+                  class="closeModalImg"
+                  src="cancel-black-36dp.svg"
+                  alt="closeModalIMG"
+                  @click="closeModal"
+               />
+               <h1>{{ playerName }}, choose your fighter!</h1>
+               <div v-if="isLoading" class="loading">Loading characters...</div>
+               <div class="fighterDiv" v-else>
+                  <div
+                     v-for="character in characters"
+                     :key="character"
+                     class="fighter"
+                     @click="chooseFighter(character)"
+                  >
+                     <img
+                        :src="getCharacterImageUrl(character)"
+                        :alt="getCharacterName(character)"
+                     />
+                     <p>{{ getCharacterName(character) }}</p>
+                  </div>
+               </div>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+export default {
+   data() {
+      return {
+         show: false,
+         playerName: "",
+         characters: [],
+         isLoading: false,
+      };
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      async openModal(playerName) {
+         this.playerName = playerName;
+         this.show = true;
+         await this.fetchCharacters();
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+      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: profile,
+         };
+         this.$store.dispatch("changePlayerProfile", payload);
+         this.closeModal();
+      },
+   },
+};
+</script>
+
+<style scoped>
+.modalContainer {
+   width: 80%; /* Could be more or less, depending on screen size */
+}
+.fighterDiv {
+   display: flex;
+   width: 100%;
+   justify-content: center;
+   margin-top: 30px;
+   flex-wrap: wrap;
+}
+
+.fighterDiv img {
+   width: 180px;
+   height: 90px;
+   object-fit: contain;
+}
+
+.fighter {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   text-align: center;
+   width: 14vw;
+   margin-top: 30px;
+}
+.fighter > * {
+   width: 100%;
+}
+.fighter:hover {
+   outline: 1px solid rgb(128, 83, 0);
+   outline-offset: 2px;
+   cursor: pointer;
+}
+.fighter p {
+   margin-top: 8px;
+   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 */
+   }
+   .fighterDiv {
+      margin-top: 30px;
+   }
+   .fighterDiv img {
+      width: 80px;
+      height: 40px;
+      object-fit: contain;
+   }
+
+   .fighter {
+      width: 25vw;
+   }
+}
+</style>
diff --git a/src/components/items/extraButtons.vue b/src/components/items/extraButtons.vue
index 64499db..80425cd 100644
--- a/src/components/items/extraButtons.vue
+++ b/src/components/items/extraButtons.vue
@@ -2,16 +2,29 @@
     <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>
+        <sync-progress-modal
+            :isOpen="showSyncModal"
+            :syncInProgress="syncInProgress"
+            @close="handleSyncComplete"
+        ></sync-progress-modal>
     </div>
 </template>
 
 <script>
+import SyncProgressModal from "./SyncProgressModal.vue";
+
 export default {
+    components: {
+        SyncProgressModal,
+    },
     data() {
         return {
             emptyPlaylist: [],
+            showSyncModal: false,
+            syncInProgress: false,
+            syncCompleted: false,
         };
     },
     methods: {
@@ -27,8 +40,47 @@ export default {
             this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
             this.$store.dispatch("setCurrentTrackHidden", false);
         },
-        async syncGames() {
-            await this.APIsyncGames();
+        async startSync() {
+            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");
@@ -63,12 +115,12 @@ export default {
                     method: "get",
                     url: `${window.__RUNTIME_CONFIG__.API_HOSTNAME}/sync`,
                 })
-                    .then(() => {
-                        resolve();
+                    .then((response) => {
+                        resolve(response);
                     })
                     .catch(function(error) {
                         console.log(error);
-                        reject();
+                        reject(error);
                     });
             });
         },