Fix competitive mode db integration

pages/courses/_course/play.vue

@@ -34,7 +34,10 @@
 </template>
 
 <script>
-import { collection, doc, query, where, orderBy, limit, getDocs, getDoc, addDoc, setDoc, updateDoc, arrayUnion } from 'firebase/firestore'
+import {
+  collection, doc, getDocs, getDoc, addDoc, updateDoc,
+  query, where, orderBy, limit, arrayUnion, arrayRemove, writeBatch
+} from 'firebase/firestore'
 import _sampleSize from 'lodash-es/sampleSize'
 import _shuffle from 'lodash-es/shuffle'
 import _capitalize from 'lodash-es/capitalize'
@@ -78,10 +81,10 @@ export default {
   created () {
     this.courseID = this.$route.params.course
     this.getQuestions().then(() => {
-      const gid = this.$store.state.user.gamesStarted.find(e => e.course === this.courseID).game
+      const gid = this.$store.state.user.gamesStarted.find(e => e.course === this.courseID)
 
-      if (gid) {
+      if (gid && gid.game) {
-        this.resumeGame(gid)
+        this.resumeGame(gid.game)
       } else {
         // There's no game to resume. Find a game.
         this.findGame()
@@ -168,14 +171,27 @@ export default {
       this.game.player2answers = []
       this.selectedQuestions = this.questions.filter(q => game.questions.includes(q.id))
 
-      const cityRef = doc(this.$db, `kurse/${this.courseID}/spiele/${this.game.id}`).withConverter(GameConverter)
+      // Get a new write batch
-      setDoc(cityRef, this.game, { merge: true })
+      const batch = writeBatch(this.$db)
-      .then((empty) => {
+
+      // Update the users games in progress
+      const userRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+      batch.update(userRef, {
+        spieleBegonnen: arrayUnion({ kurs: this.courseID, spiel: this.game.id })
+      })
+      this.$store.commit('addGameInProgress', { courseID: this.courseID, gameID: this.game.id })
+
+      // Set the updated information of the game
+      const gameRef = doc(this.$db, `kurse/${this.courseID}/spiele/${this.game.id}`).withConverter(GameConverter)
+      batch.set(gameRef, this.game, { merge: true })
+
+      // Commit the batch
+      batch.commit().then((empty) => {
         // Start the game
         this.nextQuestion()
       })
       .catch((error) => {
-        // Query failed; display error message
+        // Batch execution failed; display error message
         this.$toast({ content: error, color: 'error' })
       })
     },
@@ -200,9 +216,17 @@ export default {
       addDoc(collection(this.$db, `kurse/${this.courseID}/spiele`).withConverter(GameConverter), g)
       .then((docRef) => {
         // Successfully added a new game to the database.
-        // Start the game
         this.game = g
         this.game.id = docRef.id
+
+        // Update the users games in progress
+        const userRef = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+        updateDoc(userRef, {
+          spieleBegonnen: arrayUnion({ kurs: this.courseID, spiel: this.game.id })
+        })
+        this.$store.commit('addGameInProgress', { courseID: this.courseID, gameID: this.game.id })
+
+        // Start the game
         this.nextQuestion()
       })
       .catch((error) => {
@@ -213,11 +237,11 @@ export default {
     updateGame() {
       const gameRef = doc(this.$db, `kurse/${this.courseID}/spiele/${this.game.id}`)
 
-      // Atomically add a new region to the "regions" array field.
+      // Atomically add a new answer to the "player[ID]answers" array field.
       updateDoc(gameRef, {
           [`spieler${this.playerNumber}antworten`]: arrayUnion({ frage: this.selectedQuestion.id, antwort: this.submittedAnswer })
       }).then((empty) => {
-        // TODO
+        // Query execution was successful. Nothing else to do here.
       }).catch((error) => {
         // Failed to update the game; display error message
         this.$toast({content: error, color: 'error'})
@@ -255,9 +279,17 @@ export default {
       }, interval)
     },
     finishGame () {
-      // TODO
+      this.$store.commit('removeGameInProgress', this.courseID)
-      console.log('GAME ENDED!')
+
-      this.$router.push(`courses/${this.courseID}`)
+      const ref = doc(this.$db, `benutzer/${this.$auth.currentUser.uid}`)
+
+      updateDoc(ref, {
+        spieleBegonnen: arrayRemove({ kurs: this.courseID, spiel: this.game.id })
+      }).then((empty) => {
+        this.$router.push(`/courses/${this.courseID}`)
+      }).catch((error) => {
+        this.$toast({content: error, color: 'error'})
+      })
     }
   }
 }

store/index.js

@@ -23,6 +23,19 @@ export const mutations = {
   },
   setSelectedCourse (state, courseID) {
     state.selectedCourse = courseID
+  },
+  addGameInProgress (state, { courseID, gameID }) {
+    const index = state.user.gamesStarted.findIndex(e => e.course === courseID)
+    if (index !== -1) {
+      state.user.gamesStarted[index].course = courseID
+      state.user.gamesStarted[index].game = gameID
+    } else {
+      state.user.gamesStarted.push({ course: courseID, game: gameID })
+    }
+  },
+  removeGameInProgress (state, courseID) {
+    const index = state.user.gamesStarted.findIndex(e => e.course === courseID)
+    state.user.gamesStarted.splice(index, 1)
   }
 }