Added real frontend

Made hostname global and easy to change in docker

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

@@ -0,0 +1,99 @@
+<template>
+   <div class="inspirationDiv">
+      <div class="inspirationTitle">
+         <h1>Inspiration</h1>
+      </div>
+      <transition-group
+         tag="ul"
+         name="inspirationList"
+         class="inspirationList"
+         ref="inspirationList"
+      >
+         <li v-for="game in allGamesList" class="inspirationEntry" :key="game">
+            {{ game }}
+         </li>
+      </transition-group>
+   </div>
+</template>
+
+<script>
+import arne from '../../arne.js'
+export default {
+   data() {
+      return {
+         allGamesList: [],
+         scrollDown: true,
+      };
+   },
+   methods: {
+      scrollInspiration() {
+         let inspirationListDOM = document.querySelector(".inspirationList");
+         let scrollSpeed = 1;
+         let currentScrollLocation = 0;
+
+         currentScrollLocation = inspirationListDOM.scrollTop;
+         this.scrollDown
+            ? inspirationListDOM.scrollBy(0, scrollSpeed)
+            : inspirationListDOM.scrollBy(0, -scrollSpeed);
+
+         if (currentScrollLocation === inspirationListDOM.scrollTop) {
+            this.scrollDown = !this.scrollDown;
+         }
+      },
+   },
+   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);
+   },
+};
+</script>
+
+<style scoped>
+.inspirationDiv {
+   width: 38vw;
+   height: 20vh;
+   color: white;
+}
+
+.inspirationTitle {
+   display: flex;
+   background-color: #333;
+   height: 5vh;
+   justify-content: center;
+   align-items: center;
+}
+
+.inspirationList {
+   display: inline-block;
+   background-color: rgb(66, 66, 66);
+   width: 38vw;
+   height: 22vh;
+   list-style: none;
+   overflow: hidden;
+}
+
+.inspirationEntry {
+   width: 100%;
+   max-width: 38vw;
+   padding: 0.3vh 0.8vh;
+   font-size: 1.2rem;
+}
+
+@media only screen and (max-width: 1000px) {
+   .inspirationDiv {
+      display: none;
+   }
+}
+</style>