Add user-specific quiz statistics

components/Challenge.vue

@@ -1,13 +1,27 @@
 <template>
-  <v-container fluid>
-    <v-subheader class="text-h5 text--primary">Challenge</v-subheader>
+  <v-card>
+    <v-card-title>
+      Spiele {{ games.won + games.lost + games.tie }}
+    </v-card-title>
+    <v-card-subtitle>
+      <div>Siege: {{ games.won }}</div>
+      <div>Unentschieden: {{ games.lost }}</div>
+      <div>Niederlagen: {{ games.tie }}</div>
+      <div>Fragen: {{ games.questionsCorrect + games.questionsIncorrect }}</div>
+      <div>Richtig: {{ questionsCorrectPercent }}%</div>
+    </v-card-subtitle>
+    <v-card-text>
+      {{ text }}
+    </v-card-text>
+    <v-card-text>
+      <v-btn depressed color="success" class="my-3" @click="playVersus">
+        <v-icon left>mdi-play</v-icon>
+        Spielen
+      </v-btn>
+    </v-card-text>
     <v-divider></v-divider>
-    <v-btn depressed color="success" class="my-3" @click="playVersus">
-      <v-icon left>mdi-play</v-icon>
-      Quiz Spielen
-    </v-btn>
     <AddClosedEndedQuestion />
-  </v-container>
+  </v-card>
 </template>
 
 <script>
@@ -23,7 +37,22 @@ export default {
     return {
     }
   },
-  created () {
+  computed: {
+    games () {
+      return this.$store.state.user.games[this.courseId]
+    },
+    questionsCorrectPercent () {
+      const percent = (this.games.questionsCorrect / (this.games.questionsCorrect + this.games.questionsIncorrect)) * 100
+      // percent will be NaN if the student hasn't played any games yet
+      return percent ? Math.round(parseFloat(percent)) : 100 // Convert to float, then round to closest int
+    },
+    text () {
+      if (this.questionsAnswered >= 20 && this.questionsCorrectPercent >= 90) {
+        return 'Du scheinst gut auf die Klausur vorbereitet zu sein. Viel Glück!'
+      } else {
+        return 'Wir empfehlen Dir noch ein wenig zu üben, bevor du zur Klausur antrittst.'
+      }
+    }
   },
   methods: {
     playVersus () {

components/GameResultDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-dialog v-model="show" persistent width="500">
+    <v-card class="mx-auto">
+      <v-card-title class="justify-center">{{ title }}</v-card-title>
+      <v-card-text>
+        <v-row no-gutters class="text-h4 text--primary">
+          <v-col cols="5" class="d-flex justify-end">{{ result.correctAnswersPl1 }}</v-col>
+          <v-col cols="2" class="d-flex justify-center">:</v-col>
+          <v-col cols="5" class="d-flex justify-start">{{ result.correctAnswersPl2 }}</v-col>
+        </v-row>
+        <v-row no-gutters class="text-subtitle-1">
+          <v-col cols="5" class="d-flex justify-end">{{ game.player1name }}</v-col>
+          <v-col cols="2" class="d-flex justify-center"></v-col>
+          <v-col cols="5" class="d-flex justify-start">{{ game.player2name }}</v-col>
+        </v-row>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn depressed block color="primary" :to="`/courses/${courseId}`">Abschließen</v-btn>
+        <v-spacer></v-spacer>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+import { Game } from '~/plugins/game'
+
+export default {
+  props: {
+    game: {
+      type: Game,
+      required: true
+    },
+    courseId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  computed: {
+    result () {
+      return this.game.getResult()
+    },
+    title () {
+      if (this.result.tie) return 'Unentschieden!'
+      else return this.result.winner === this.playerNumber ? 'Gewonnen!' : 'Verloren :('
+    },
+    playerNumber () {
+      return this.game.player1id === this.$auth.currentUser.uid ? 1 : 2
+    }
+  }
+}
+</script>