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,22 +52,25 @@ export default {
             this.scrollDown = !this.scrollDown;
          }
       },
+       reloadGames() {
+           this.axios({
+               method: "get",
+               url: `${arne.hostname}/music/all`,
+           })
+               .then((response) => {
+                   this.allGamesList = response.data;
+                   this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
+               })
+               .catch(function(error) {
+                   console.log(error);
+               });
+       }
    },
    mounted() {
-      this.axios({
-         method: "get",
-         url: `${arne.hostname}/music/all`,
-      })
-         .then((response) => {
-            this.allGamesList = response.data;
-            this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
-         })
-         .catch(function(error) {
-            console.log(error);
-         });
-      window.setInterval(() => {
-         this.scrollInspiration();
-      }, 40);
+       this.reloadGames();
+       window.setInterval(() => {
+           this.scrollInspiration();
+       }, 40);
    },
 };
 </script>