Added real frontend

Made hostname global and easy to change in docker

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

@@ -0,0 +1,95 @@
+<template>
+   <!-- <div class="currentlyPlayingDiv">
+      <div class="textWrapper">
+         <transition-group name="displayingInfo" appear>
+            <p v-if="currentTrackHidden" :key="1">????????</p>
+            <p v-else :key="2">{{ currentGame }}</p>
+            <p v-if="currentTrackHidden" :key="3">??????</p>
+            <p v-else :key="4">{{ currentTrack }}</p>
+         </transition-group>
+      </div>
+   </div> -->
+   <div class="currentlyPlayingDiv">
+      <transition name="displayingInfo">
+         <div v-if="currentTrackHidden" class="textWrapper">
+            <p>????????</p>
+            <p>??????</p>
+         </div>
+         <div v-else class="textWrapper">
+            <p>{{ currentGame }}</p>
+            <p>{{ currentTrack }}</p>
+         </div>
+      </transition>
+   </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   computed: {
+      ...mapState(["currentGame", "currentTrack", "currentTrackHidden"]),
+   },
+};
+</script>
+
+<style scoped>
+.displayingInfo-enter-from,
+.displayingInfo-leave-to {
+   opacity: 0;
+}
+.displayingInfo-enter-to,
+.displayingInfo-leave-from {
+   opacity: 1;
+}
+.displayingInfo-enter-active {
+   transition: opacity 0.7s ease-out;
+}
+
+.displayingInfo-leave-active {
+   display: none;
+}
+
+.currentlyPlayingDiv {
+   display: flex;
+   flex-wrap: wrap;
+   justify-content: center;
+   width: 60vw;
+   height: 27vh;
+   margin-right: 0.5vw;
+   color: #ff8800;
+   background-color: #333;
+   border-radius: 10px;
+   text-align: center;
+   overflow: hidden;
+}
+.currentlyPlayingDiv .textWrapper {
+   padding: 0.75vw;
+}
+.currentlyPlayingDiv .textWrapper p {
+   width: 100%;
+   font-size: 2.3em;
+}
+
+.currentlyPlayingDiv p:first-child {
+   margin-top: 1.5vw;
+   margin-bottom: 1.5vw;
+   font-size: 2.8em;
+}
+
+@media only screen and (max-width: 1000px) {
+   .currentlyPlayingDiv {
+      width: 100vw;
+      height: 35vw;
+      margin-right: 0;
+      border-radius: 0px;
+      align-content: center;
+   }
+   .currentlyPlayingDiv .textWrapper p {
+      font-size: 1.1em;
+   }
+   .currentlyPlayingDiv p:first-child {
+      margin-bottom: 2vw;
+      font-size: 1.4em;
+   }
+}
+</style>