Added real frontend

Made hostname global and easy to change in docker
2022-06-21 17:48:34 +02:00
parent 3536cf3fcf
commit b952d08aad
52 changed files with 31463 additions and 27016 deletions
@@ -0,0 +1,68 @@
+<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>Statistics</h1>
+               <p>Total amount of games in the playlist: {{ howManyGames }}</p>
+            </div>
+         </div>
+      </div>
+   </transition>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+   data() {
+      return {
+         show: false,
+      };
+   },
+   computed: {
+      ...mapState(["howManyGames"]),
+   },
+   methods: {
+      closeModal() {
+         this.show = false;
+      },
+      openModal() {
+         this.show = true;
+      },
+      checkIfClickShouldCloseModal(event) {
+         if (event.target.classList[0] === "modal") {
+            this.closeModal();
+         }
+      },
+   },
+};
+</script>
+
+<style scoped>
+p {
+   font-size: 1.2rem;
+   width: 100%;
+   margin-top: 30px;
+}
+
+.descriptionText {
+   margin-top: 35px;
+}
+
+.creditText {
+   margin-top: 30px;
+}
+.creditText:nth-child(5) {
+   margin-top: 0px;
+}
+
+.patchNotesText {
+   margin-top: 20px;
+}
+</style>