Merge branch 'thorben' into 'master'

frontend: Spieleseite weiterentwickelt

Closes #2

See merge request !3

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>

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/quiz3.vue

+<template>
+  <v-container fluid>
+    <v-row align-center>
+      <v-spacer cols="4"></v-spacer>
+      <v-col cols="4" rounded pa-16>
+        <v-card>
+          <v-img
+            class="img-circle"
+            src="https://efi2.schleswig-holstein.de/wr/images/Damp-Wap.jpg"
+          ></v-img>
+        </v-card>
+      </v-col>
+      <v-spacer col="4"></v-spacer>
+    </v-row>
+    <v-row>
+      <v-spacer cols="4"></v-spacer>
+      <v-col cols="2" class="align-center">
+        <v-btn dark large color="primary" width="100%">
+          <v-icon dark>Antwort 1</v-icon>
+        </v-btn>
+      </v-col>
+      <v-col cols="2" class="align-center">
+        <v-btn dark large color="primary" width="100%">
+          <v-icon dark>Antwort 2</v-icon>
+        </v-btn>
+      </v-col>
+      <v-spacer cols="4"></v-spacer>
+    </v-row>
+    <v-row>
+      <v-spacer cols="4"></v-spacer>
+      <v-col cols="2" class="align-center">
+        <v-btn dark large color="primary" width="100%">
+          <v-icon dark>Antwort 3</v-icon>
+        </v-btn>
+      </v-col>
+      <v-col cols="2" class="align-center">
+        <v-btn dark large color="primary" width="100%">
+          <v-icon dark>Antwort 4</v-icon>
+        </v-btn>
+      </v-col>
+      <v-spacer cols="4"></v-spacer>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style>
+.img-circle {
+  border-radius: 4%;
+}
+</style>

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>