Frontend: Spiele Seite weiterentwickelt

* Spieleseite im Index integriert
* Icons integriert (Verschoben nach static/img/)
* Anleitung anzeigen durch Hover
* Default Quiz Seite erstellt & integriert

frontend/pages/games.vue

@@ -6,52 +6,141 @@
         cols="1"
         class="d-flex flex-column justify-space-around align-center"
       >
-        <nuxt-link to="/quiz1">
-          <v-btn fab dark large color="primary" class="quiz1">
-            <v-icon dark>mdi-plus</v-icon>
-          </v-btn>
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            src="img/210519_Icon_V01.png"
+            @mouseenter="showManual(1)"
+            @mouseleave="hideManual()"
+          >
+          </v-img>
         </nuxt-link>
-        <v-btn fab dark large color="primary">
-          <v-icon dark>mdi-minus</v-icon>
-        </v-btn>
-      </v-col>
-      <v-col cols="4" pa-16>
-        <div>
+        <nuxt-link to="/quizDefault">
           <v-img
-            class="img"
-            src="https://efi2.schleswig-holstein.de/wr/images/Damp-Wap.jpg"
-          ></v-img>
-        </div>
+            height="91px"
+            width="91px"
+            src="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="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"
       >
-        <v-btn fab dark large color="primary">
-          <v-icon dark>mdi-minus</v-icon>
-        </v-btn>
-        <v-btn fab dark large color="primary">
-          <v-icon dark>mdi-minus</v-icon>
-        </v-btn>
+        <nuxt-link to="/quizDefault">
+          <v-img
+            height="91px"
+            width="91px"
+            src="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="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 align-center>
-      <v-col cols="12" class="d-flex flex-row justify-center">
-        <v-btn fab dark large color="primary">
-          <v-icon dark>mdi-minus</v-icon>
-        </v-btn>
+    <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="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="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 {};
+export default {
+  data: () => ({
+    absolute: true,
+    overlay: false,
+    opacity: 0,
+    manualText: "Hier könnte ihre Werbung stehen",
+    manualHeading: "Überschrift",
+  }),
+  methods: {
+    showManual(number) {
+      this.overlay = true;
+      switch (number) {
+        case 1:
+          this.manualHeading = "Spiel 1";
+          break;
+        case 2:
+          this.manualHeading = "Spiel 2";
+          break;
+        case 3:
+          this.manualHeading = "Spiel 3";
+          break;
+        case 4:
+          this.manualHeading = "Spiel 4";
+          break;
+        case 5:
+          this.manualHeading = "Spiel 5";
+          break;
+        case 6:
+          this.manualHeading = "Spiel 6";
+          break;
+        default:
+          this.manualHeading = "Überschrift";
+          break;
+      }
+    },
+    hideManual() {
+      this.overlay = false;
+      this.manualHeading = "Überschrift";
+    },
+  },
+};
 </script>
 
 <style>
 .img {
-  border-radius: 3%;
+  border-radius: 4%;
 }
 </style>

frontend/pages/index.vue

@@ -5,10 +5,17 @@
         Spaß mit Wappen
       </h1>
     </v-row>
-    <v-row class="justify-center">
-      <nuxt-link to="/info">
-        <v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
-      </nuxt-link>
+    <v-row>
+      <v-spacer col="4"></v-spacer>
+      <v-col col="4" class="d-flex flex-row justify-space-between">
+        <nuxt-link to="/info">
+          <v-btn color="primary" elevation="4" x-large dark> Start </v-btn>
+        </nuxt-link>
+        <nuxt-link to="/games">
+          <v-btn color="primary" elevation="4" x-large dark> Spiele </v-btn>
+        </nuxt-link>
+      </v-col>
+      <v-spacer col="4"></v-spacer>
     </v-row>
   </v-container>
 </template>

frontend/pages/quizDefault.vue

+<template>
+  <v-container fill-height>
+    <v-row>
+      <v-col
+        col="12"
+        class="d-flex flex-column justify-space-around align-center"
+      >
+        <h1>Hier könnte ihre Werbung stehen!</h1>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style></style>