Add overview of open and completed quiz rounds

components/AddClosedEndedQuestion.vue

@@ -2,54 +2,44 @@
   <v-card>
     <ValidationObserver ref="observer" v-slot="{ invalid }">
       <form @submit.prevent="submit">
-        <v-card-title style="cursor: pointer;" @click="showBody = !showBody">
-          <span class="flex-grow-1 flex-shrink-0 text-subtitle-1 font-weight-medium">Eigene Quizfrage einreichen</span>
-          <v-btn icon @click.stop="showBody = !showBody">
-            <v-icon>{{ showBody ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
-          </v-btn>
-        </v-card-title>
-        <v-expand-transition>
-          <div v-show="showBody">
-            <v-card-text>
-              <v-row>
-                <v-col cols="12">
-                  <ValidationProvider v-slot="{ errors }" name="frage" rules="required">
-                    <v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
-                  </ValidationProvider>
-                </v-col>
-                <v-col v-for="(n, index) in 4" :key="index" cols="6">
-                  <ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
-                    <v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
-                  </ValidationProvider>
-                </v-col>
-                <v-col cols="12">
-                  <ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
-                    <v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
-                  </ValidationProvider>
-                </v-col>
-                <v-col cols="12">
-                  <v-text-field
-                    v-model="comment"
-                    label="(Optional) Anmerkung"
-                    persistent-hint
-                    hint="Nur der Tutor kann deine Anmerkung sehen."
-                  >
-                    <template #message="{ message }">
-                      <v-icon small>mdi-information</v-icon>
-                      <span>{{ message }}</span>
-                    </template>
-                  </v-text-field>
-                </v-col>
-              </v-row>
-            </v-card-text>
-            <v-card-actions>
-              <v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
-              <v-spacer />
-              <v-btn text color="primary" @click="clear">Reset</v-btn>
-              <v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
-            </v-card-actions>
-          </div>
-        </v-expand-transition>
+        <v-card-text>
+          <v-row>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="frage" rules="required">
+                <v-text-field v-model="question" required label="Frage" :error-messages="errors"></v-text-field>
+              </ValidationProvider>
+            </v-col>
+            <v-col v-for="(n, index) in 4" :key="index" cols="6">
+              <ValidationProvider v-slot="{ errors }" :name="`antwort${n}`" rules="required">
+                <v-text-field v-model="answers[index]" required :label="`Antwort #${n}`" :error-messages="errors"></v-text-field>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <ValidationProvider v-slot="{ errors }" name="richtig" rules="required">
+                <v-select v-model="correctAnswer" required :items="answers" label="Richtige Antwort" :error-messages="errors"></v-select>
+              </ValidationProvider>
+            </v-col>
+            <v-col cols="12">
+              <v-text-field
+                v-model="comment"
+                label="(Optional) Anmerkung"
+                persistent-hint
+                hint="Nur der Tutor kann deine Anmerkung sehen."
+              >
+                <template #message="{ message }">
+                  <v-icon small>mdi-information</v-icon>
+                  <span>{{ message }}</span>
+                </template>
+              </v-text-field>
+            </v-col>
+          </v-row>
+        </v-card-text>
+        <v-card-actions>
+          <v-btn v-if="$config.NODE_ENV !== 'production'" depressed color="warning" @click="addQuestionsForTesting">+10 Fragen</v-btn>
+          <v-spacer />
+          <v-btn text color="primary" @click="clear">Reset</v-btn>
+          <v-btn type="submit" depressed color="primary" :loading="loading" :disabled="invalid">Einreichen</v-btn>
+        </v-card-actions>
       </form>
     </ValidationObserver>
   </v-card>
@@ -76,7 +66,6 @@ export default {
   },
   data () {
     return {
-      showBody: false,
       loading: false,
       question: '',
       answers: [],

components/Challenge.vue

@@ -1,64 +0,0 @@
-<template>
-  <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>
-    <AddClosedEndedQuestion />
-  </v-card>
-</template>
-
-<script>
-export default {
-  name: 'ChallengeComponent',
-  props: {
-    courseId: {
-      type: String,
-      required: true
-    }
-  },
-  data () {
-    return {
-    }
-  },
-  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 () {
-      // TODO
-      this.$router.push(`${this.$route.path}/play`)
-    }
-  }
-}
-</script>

components/CompletedGameCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-card width="500">
+    <v-row align="center">
+      <v-col cols="auto">
+        <v-icon size="48" color="amber">{{ icon }}</v-icon>
+      </v-col>
+      <v-col>
+        <div class="text-h6 text--primary">{{ title }}</div>
+        <div class="text-caption text--secondary">gegen {{ opponentName }}</div>
+      </v-col>
+    </v-row>
+  </v-card>
+</template>
+
+<script>
+import { Game } from '~/plugins/game'
+
+export default {
+  name: 'CompletedGameCard',
+  props: {
+    game: {
+      type: Game,
+      required: true
+    }
+  },
+  computed: {
+    result () {
+      return this.game.getResult()
+    },
+    playerNumber () {
+      return this.game.player1id === this.$auth.currentUser.uid ? 1 : 2
+    },
+    isWinner () {
+      return !this.result.tie && this.result.winner === this.playerNumber
+    },
+    title () {
+      if (this.result.tie) return 'Unentschieden'
+      else return this.isWinner ? 'Sieg' : 'Niederlage'
+    },
+    icon () {
+      return this.isWinner ? 'mdi-trophy' : 'mdi-trophy-broken'
+    },
+    opponentName () {
+      return this.game.player1id === this.$auth.currentUser.uid ? this.game.player2name : this.game.player1name
+    }
+  }
+}
+</script>

components/OpenGameCard.vue

@@ -0,0 +1,48 @@
+<template>
+  <v-card outlined width="500">
+    <v-card-text>
+      <v-row align="center" justify="center" no-gutters class="text-subtitle-1">
+        <v-col cols="auto">
+          <div class="text--primary text-center">{{ game.player1name }}</div>
+          <v-icon
+            v-for="oneIndex, zeroIndex in game.questionIds.length" :key="'pl1'+zeroIndex"
+            small
+            :color="dotColor(game, 1, zeroIndex)"
+          >mdi-circle</v-icon>
+        </v-col>
+        <v-col cols="auto" class="mx-12">vs.</v-col>
+        <v-col cols="auto">
+          <div class="text--primary text-center">{{ game.player2name || '?' }}</div>
+          <v-icon
+            v-for="oneIndex, zeroIndex in game.questionIds.length" :key="'pl2'+zeroIndex"
+            small
+            :color="dotColor(game, 2, zeroIndex)"
+          >mdi-circle</v-icon>
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+import { Game } from '~/plugins/game'
+
+export default {
+  name: 'OpenGameCard',
+  props: {
+    game: {
+      type: Game,
+      required: true
+    }
+  },
+  methods: {
+    dotColor (game, playerNumber, index) {
+      if (!game || index + 1 > game[`player${playerNumber}answers`].length) return ''
+      else {
+        const correct = game[`player${playerNumber}answers`][index].richtig
+        return correct ? 'success' : 'error'
+      }
+    }
+  }
+}
+</script>

components/QuizComponent.vue

@@ -0,0 +1,153 @@
+<template>
+  <v-card>
+    <v-card-title>Challenge</v-card-title>
+    <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-expansion-panels v-model="expPanel" accordion class="text-subtitle-1 font-weight-medium">
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          Offene Spiele ({{ openGames.length }})
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-row>
+            <v-col v-for="(og, i) in openGames" :key="i" cols="12">
+              <OpenGameCard :game="og" />
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          Beendete Spiele ({{ completedGames.length }})
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <v-row>
+            <v-col v-for="(cg, i) in completedGames" :key="i" cols="12">
+              <CompletedGameCard :game="cg" />
+            </v-col>
+          </v-row>
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          Persönliche Statistik
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <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-expansion-panel-content>
+      </v-expansion-panel>
+      <v-expansion-panel>
+        <v-expansion-panel-header>
+          Neue Quizfrage einreichen
+        </v-expansion-panel-header>
+        <v-expansion-panel-content>
+          <AddClosedEndedQuestion />
+        </v-expansion-panel-content>
+      </v-expansion-panel>
+    </v-expansion-panels>
+  </v-card>
+</template>
+
+<script>
+import { collection, query, where, orderBy, limit, getDocs } from 'firebase/firestore'
+import { GameConverter } from '~/plugins/game'
+
+export default {
+  name: 'QuizComponent',
+  props: {
+    courseId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      openGames: [],
+      completedGames: [],
+      expPanel: 0
+    }
+  },
+  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.'
+      }
+    }
+  },
+  created () {
+    // Get list of unfinished games from db
+    this.getOpenGames()
+    // Get list of completed games from db (limit to 10 most recent)
+    this.getCompletedGames()
+  },
+  methods: {
+    getOpenGames () {
+      const q = query(
+        collection(this.$db, `kurse/${this.courseId}/spiele`).withConverter(GameConverter),
+        where('abgeschlossen', '==', false),
+        where('spielerIds', 'array-contains', this.$auth.currentUser.uid),
+        orderBy('erstellt', 'desc')
+      )
+
+      getDocs(q).then((querySnapshot) => {
+        querySnapshot.forEach((doc) => {
+          // doc.data() is never undefined for query doc snapshots
+          this.openGames.push(doc.data())
+        })
+      }).catch((error) => {
+        // Query failed; display error message
+        this.$toast({ content: error, color: 'error' })
+      })
+    },
+    getCompletedGames () {
+      const q = query(
+        collection(this.$db, `kurse/${this.courseId}/spiele`).withConverter(GameConverter),
+        where('abgeschlossen', '==', true),
+        where('spielerIds', 'array-contains', this.$auth.currentUser.uid),
+        orderBy('erstellt', 'desc'),
+        limit(10)
+      )
+
+      getDocs(q).then((querySnapshot) => {
+        querySnapshot.forEach((doc) => {
+          // doc.data() is never undefined for query doc snapshots
+          this.completedGames.push(doc.data())
+        })
+      }).catch((error) => {
+        // Query failed; display error message
+        this.$toast({ content: error, color: 'error' })
+      })
+    },
+    playVersus () {
+      // TODO
+      this.$router.push(`${this.$route.path}/play`)
+    }
+  }
+}
+</script>