frontend: Spieleseite weiterentwickelt

• Icons Integriert (Hinzugefügt in frontend/static/img/)
• Quiz Anleitung durch hover anzeigen
• Default Quizseite integriert
• Link auf Spiele in Index hinzugefügt

frontend/pages/games.vue

+<template>
+  <v-container>
+    <v-row>
+      <v-spacer cols="3"></v-spacer>
+      <v-col
+        cols="1"
+        class="d-flex flex-column justify-space-around align-center"
+      >
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V01.png')"
+            @mouseenter="showManual(1)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V02.png')"
+            @mouseenter="showManual(2)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+      </v-col>
+      <v-col cols="4">
+        <!--TODO color-->
+        <v-card pa-16 ma-n10 color="#162c41" flat>
+          <v-img
+            class="img"
+            :src="require('~/assets/img/210519_Wappen_Linie.png')"
+          ></v-img>
+          <v-overlay :opacity="opacity" :absolute="absolute" :value="overlay">
+            <h1>{{ manualHeading }}</h1>
+            <p>{{ manualText }}</p>
+          </v-overlay>
+        </v-card>
+      </v-col>
+      <v-col
+        cols="1"
+        class="d-flex flex-column justify-space-around align-center"
+      >
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V06.png')"
+            @mouseenter="showManual(6)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V05.png')"
+            @mouseenter="showManual(5)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+      </v-col>
+      <v-spacer col="3"></v-spacer>
+    </v-row>
+    <v-row justify-space-between>
+      <v-spacer cols="4"></v-spacer>
+      <v-col cols="2" class="d-flex flex-row justify-center">
+        <nuxt-link to="/quiz3">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V03.png')"
+            @mouseenter="showManual(3)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+      </v-col>
+      <v-col cols="2" class="d-flex flex-row justify-center">
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            :src="require('~/assets/img/210519_Icon_V04.png')"
+            @mouseenter="showManual(4)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
+        </nuxt-link>
+      </v-col>
+      <v-spacer cols="4"></v-spacer>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      absolute: true,
+      overlay: false,
+      opacity: 0,
+      manualText: "Hier könnte ihre Werbung stehen",
+      manualHeading: "",
+    };
+  },
+  methods: {
+    showManual(number) {
+      this.overlay = true;
+      this.manualHeading = `Spiel ${number}`;
+    },
+    hideManual() {
+      this.overlay = false;
+    },
+  },
+};
+</script>
+
+<style>
+.img {
+  border-radius: 4%;
+}
+</style>