Added real frontend

Made hostname global and easy to change in docker

cmd/frontend/src/components/items/InspirationWindow.vue

@@ -18,6 +18,7 @@
 
 <script>
 import arne from '../../arne.js'
+import {mapState} from "vuex";
 export default {
    data() {
       return {
@@ -25,6 +26,17 @@ export default {
          scrollDown: true,
       };
    },
+    computed: {
+        ...mapState(["reloadGamesList"]),
+    },
+    watch: {
+        reloadGamesList(newValue) {
+            if (newValue) {
+                this.reloadGames();
+                this.$store.dispatch("reloadGamesList", false);
+            }
+        }
+    },
    methods: {
       scrollInspiration() {
          let inspirationListDOM = document.querySelector(".inspirationList");
@@ -40,8 +52,7 @@ export default {
             this.scrollDown = !this.scrollDown;
          }
       },
-   },
-   mounted() {
+       reloadGames() {
            this.axios({
                method: "get",
                url: `${arne.hostname}/music/all`,
@@ -53,6 +64,10 @@ export default {
                .catch(function(error) {
                    console.log(error);
                });
+       }
+   },
+   mounted() {
+       this.reloadGames();
        window.setInterval(() => {
            this.scrollInspiration();
        }, 40);

cmd/frontend/src/components/items/characterModal.vue

@@ -43,6 +43,26 @@
                      <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>

cmd/frontend/src/components/items/extraButtons.vue

@@ -2,6 +2,7 @@
    <div class="extraButtonsDiv">
       <button @click="resetPlaylist">Reset playlist</button>
       <button @click="resetPoints">Reset points</button>
+      <button @click="syncGames">Sync games</button>
       <button @click="startSoundTest">Sound test</button>
    </div>
 </template>
@@ -16,7 +17,6 @@ export default {
    },
    methods: {
       async resetPoints() {
-         /* await this.APIresetPlaylist(); */
          this.$store.dispatch("resetPlayerScore");
          this.$store.dispatch("resetPlayerWelcomed");
          this.$store.dispatch("setRoundStarted", false);
@@ -27,6 +27,17 @@ export default {
          this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
          this.$store.dispatch("setCurrentTrackHidden", false);
       },
+     async syncGames() {
+         await this.APIsyncGames();
+         await this.APIresetPlaylist();
+         this.$store.dispatch("resetPlayerScore");
+         this.$store.dispatch("resetPlayerWelcomed");
+         this.$store.dispatch("setRoundStarted", false);
+         this.$store.dispatch("updatePlaylistHistory", this.emptyPlaylist);
+         this.$store.dispatch("setCurrentlyLoadingTrack", "N/A");
+         this.$store.dispatch("setCurrentTrackHidden", false);
+         this.$store.dispatch("reloadGamesList", true);
+     },
       startSoundTest() {
          this.$emit("start-sound-test");
       },
@@ -45,6 +56,21 @@ export default {
                });
          });
       },
+       APIsyncGames() {
+         return new Promise((resolve, reject) => {
+            this.axios({
+               method: "get",
+               url: `${arne.hostname}/sync`,
+            })
+               .then(() => {
+                  resolve();
+               })
+               .catch(function(error) {
+                  console.log(error);
+                  reject();
+               });
+         });
+      },
    },
 };
 </script>

cmd/frontend/src/main.js

@@ -15,6 +15,7 @@ const store = createStore({
          someoneHasWon: false,
          winningScore: 20,
          roundStarted: false,
+         reloadGamesList: false,
          listOfPlayers: [],
          localPlaylist: [],
          playlistHistory: [
@@ -83,6 +84,9 @@ const store = createStore({
       updateHowManyGames(state, payload) {
          state.howManyGames = payload;
       },
+      reloadGamesList(state, payload) {
+         state.reloadGamesList = payload;
+      },
       updateStopAfterCurrent(state, payload) {
          state.stopAfterCurrent = payload;
       },
@@ -190,6 +194,9 @@ const store = createStore({
       updateHowManyGames(context, payload) {
          context.commit("updateHowManyGames", payload);
       },
+      reloadGamesList(context, payload) {
+         context.commit("reloadGamesList", payload);
+      },
       updateStopAfterCurrent(context, payload) {
          context.commit("updateStopAfterCurrent", payload);
       },