From b7599b7d5621330ea16c2bc711a86b5e384e5cea Mon Sep 17 00:00:00 2001
From: Rakantor <rakantor.dev@gmail.com>
Date: Sat, 22 Oct 2022 13:06:42 +0200
Subject: [PATCH] Add dynamic course page

---
 pages/courses/_course.vue | 47 +++++++++++++++++++++++++++++++++++++++
 store/index.js            |  9 +++++++-
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 pages/courses/_course.vue

diff --git a/pages/courses/_course.vue b/pages/courses/_course.vue
new file mode 100644
index 0000000..9420a49
--- /dev/null
+++ b/pages/courses/_course.vue
@@ -0,0 +1,47 @@
+<template>
+  <v-container>
+    <v-row>
+      <v-col cols="12">
+        <span class="text-h4">{{ title }}</span>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn depressed color="primary" @click="playVersus">Challenge Mode</v-btn>
+      </v-col>
+      <v-col cols="auto">
+        <v-btn depressed color="primary" @click="playCoop">Co-op Mode</v-btn>
+      </v-col>
+      <v-col cols="12">
+        <AddQuestionComponent />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      courseID: undefined
+    }
+  },
+  computed: {
+    title () {
+      const courseName = this.$store.getters.getCourseByID(this.courseID).name
+      return `${this.courseID.toUpperCase()} - ${courseName}`
+    }
+  },
+  created () {
+    this.courseID = this.$route.params.course
+  },
+  methods: {
+    playVersus () {
+      // TODO
+      this.$toast({ content: 'Todo: Challenge Mode implementieren', color: 'info' })
+    },
+    playCoop () {
+      // TODO
+      this.$toast({ content: 'Todo: Co-op Mode implementieren', color: 'info' })
+    }
+  }
+}
+</script>
diff --git a/store/index.js b/store/index.js
index 2ccdb5e..88942ec 100644
--- a/store/index.js
+++ b/store/index.js
@@ -1,10 +1,14 @@
 export const state = () => ({
   firebaseInitialized: false,
   userLoggedIn: false,
-  courses: []
+  courses: {},
+  selectedCourse: undefined
 })
 
 export const getters = {
+  getCourseByID: (state) => (courseID) => {
+    return state.courses[courseID]
+  }
 }
 
 export const mutations = {
@@ -16,6 +20,9 @@ export const mutations = {
   },
   setCourses (state, courses) {
     state.courses = courses
+  },
+  setSelectedCourse (state, courseID) {
+    state.selectedCourse = courseID
   }
 }