Renamed app store to results store.

client/src/stores/results.js

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 
-export const useAppStore = defineStore({
+export const useResultsStore = defineStore({
-    id: 'app',
+    id: 'results',
     state: () => ({
         answers: [],
         playbooks: {},

client/src/views/Home.vue

@@ -1,5 +1,6 @@
 <script>
-    import { useAppStore } from '@/stores/app.js'
+    import { useAnswersStore } from '@/stores/answers.js'
+    import { useResultsStore } from '@/stores/results.js'
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
@@ -13,14 +14,21 @@
             TextFrame
         },
         setup() {
-            const appStore = useAppStore()
+            const answersStore = useAnswersStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                answersStore,
+                resultsStore
             }
         },
         mounted() {
-            this.appStore.$reset()
+            if (this.answersStore.quizCurrent !== null) {
+                this.$router.push(`/quiz/question/${this.answersStore.quizCurrent}`)
+            } else {
+                this.answersStore.$reset()
+            }
+            this.resultsStore.$reset()
         }
     }
 </script>

client/src/views/about/Index.vue

@@ -1,9 +1,28 @@
 <script>
+    import { useAnswersStore } from '@/stores/answers.js'
+    import { useResultsStore } from '@/stores/results.js'
     import Sidebar from '@/components/sidebar/Index.vue'
     export default {
         name: 'AboutIndex',
         components: {
             Sidebar
+        },
+        setup() {
+            const answersStore = useAnswersStore()
+            const resultsStore = useResultsStore()
+
+            return {
+                answersStore,
+                resultsStore
+            }
+        },
+        mounted() {
+            if (this.answersStore.quizCurrent !== null) {
+                this.$router.push(`/quiz/question/${this.answersStore.quizCurrent}`)
+            } else {
+                this.answersStore.$reset()
+            }
+            this.resultsStore.$reset()
         }
     }
 </script>

client/src/views/quiz/Index.vue

@@ -3,18 +3,18 @@
     import Config from '@/config.js'
     import { useQuestionStore } from '@/stores/questions.js'
     import { useAnswersStore } from '@/stores/answers.js'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
 
     export default {
         setup() {
             const questionStore = useQuestionStore()
             const answersStore = useAnswersStore()
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
                 questionStore,
                 answersStore,
-                appStore
+                resultsStore
             }
         },
         name: 'QuestionIndex',
@@ -28,8 +28,8 @@
                 this.$router.push(`/quiz/question/${this.answersStore.quizCurrent}`)
             } else {
                 this.answersStore.$reset()
-                this.appStore.$reset()
             }
+            this.resultsStore.$reset()
         },
         methods: {
             getQuestions() {

client/src/views/quiz/Question.vue

@@ -3,7 +3,7 @@
     import Config from '@/config.js'
     import { useQuestionStore } from '@/stores/questions.js'
     import { useAnswersStore } from '@/stores/answers.js'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
@@ -15,12 +15,12 @@
         setup() {
             const questionStore = useQuestionStore()
             const answersStore = useAnswersStore()
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
                 questionStore,
                 answersStore,
-                appStore
+                resultsStore
             }
         },
         components: {
@@ -69,8 +69,8 @@
                        } 
                     }
                 ).then( (response) => {
-                    console.log('Submitted results.')
+                    console.log('Submitted answers.')
-                    this.appStore.store('results', response.data)
+                    this.resultsStore.store('results', response.data)
                     console.log('Results fetched from the server.')
                     this.answersStore.quizCurrent = null
                     this.$router.push('/results')

client/src/views/results/CompareResults.vue

@@ -4,15 +4,15 @@
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
     import ChevronDoubleRight from '@/components/icons/ChevronDoubleRight.vue'
 
     export default {
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         mounted() {
@@ -30,7 +30,7 @@
                 axios.get(`${Config.SERVER}api/playbooks/`)
                     .then((response) => {
                         console.log('Fetched playbook stats from the server.')
-                        this.appStore.store('playbooks', response.data)
+                        this.resultsStore.store('playbooks', response.data)
                     })
                     .catch( error => {
                         console.log(error)
@@ -39,7 +39,7 @@
                 axios.get(`${Config.SERVER}api/count/`)
                     .then((response) => {
                         console.log('Fetched user count from the server.')
-                        this.appStore.store('count', response.data)
+                        this.resultsStore.store('count', response.data)
                     })
                     .catch( error => {
                         console.log(error)
@@ -76,8 +76,8 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(number, playbook, index) in this.appStore.playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
+                    <tr v-for="(number, playbook, index) in this.resultsStore.playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
-                        <td v-if="this.appStore.results.playbooks.some(obj => obj.hasOwnProperty(playbook))">
+                        <td v-if="this.resultsStore.results.playbooks.some(obj => obj.hasOwnProperty(playbook))">
                             <ChevronDoubleRight/>
                         </td>
                         <td v-else>
@@ -90,11 +90,11 @@
                             {{ number }}
                         </td>
                         <td scope="col" class="py-1">
-                            {{ Math.round(100*number/this.appStore.count) }} &#x25;
+                            {{ Math.round(100*number/this.resultsStore.count) }} &#x25;
                         </td>
                     </tr>
                     <tr>
-                        <td colspan="4" class="text-center text-lg text-gray-600">Out of {{ this.appStore.count }} users</td>
+                        <td colspan="4" class="text-center text-lg text-gray-600">Out of {{ this.resultsStore.count }} users</td>
                     </tr>
                 </tbody>
             </table>

client/src/views/results/Index.vue

@@ -1,13 +1,13 @@
 <script>
     import Sidebar from '@/components/sidebar/Index.vue'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
 
     export default {
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         name: 'ResultsIndex',
@@ -15,7 +15,7 @@
             Sidebar
         },
         created() {
-            if (this.appStore.results.playbooks.length > 1) {
+            if (this.resultsStore.results.playbooks.length > 1) {
                 this.$router.options.routes[3].children[0].meta.title = 'Your Results'
             } else {
                 this.$router.options.routes[3].children[0].meta.title = 'Your Result'

client/src/views/results/Results.vue

@@ -2,14 +2,14 @@
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
 
     export default {
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         name: 'Results',
@@ -41,12 +41,12 @@
 <template>
     <TextFrame>
         <Header>
-            <span v-if="this.appStore.results.playbooks.length > 1">Your Results</span>
+            <span v-if="this.resultsStore.results.playbooks.length > 1">Your Results</span>
             <span v-else>Your Result</span>
         </Header>
         <Content>
             <article class="prose">
-                <section v-for="playbook in this.appStore.results.playbooks" :key="Object.keys(playbook)[0]" class="border-solid border-b-2 border-lime-600 border-opacity-25">
+                <section v-for="playbook, index in this.resultsStore.results.playbooks" :key="Object.keys(playbook)[0]" :class="index < this.resultsStore.results.playbooks.length - 1 ? `border-solid border-b-2 border-lime-600 border-opacity-25` : ``">
                     <h2 class="flex justify-between">
                         <span class="uncial-antiqua align-bottom">
                             <span class="text-xl">The</span> <span class="text-3xl capitalize">{{ Object.keys(playbook)[0] }}</span>

client/src/views/results/Scores.vue

@@ -2,14 +2,14 @@
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
 
     export default {
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         name: 'Scores',
@@ -41,12 +41,12 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(score, playbook, index) in this.appStore.results.all_playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
+                    <tr v-for="(score, playbook, index) in this.resultsStore.results.all_playbooks" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
                         <td scope="col" class="py-1 pl-10 capitalize">
                             The {{ playbook }}
                         </td>
                         <td scope="col" class="py-1">
-                            {{ Math.round(100*score/this.appStore.results.max_score) }}
+                            {{ Math.round(100*score/this.resultsStore.results.max_score) }}
                         </td>
                     </tr>
                 </tbody>

client/src/views/results/Statistics.vue

@@ -4,15 +4,15 @@
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
     import ChevronDoubleRight from '@/components/icons/ChevronDoubleRight.vue'
 
     export default {
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         mounted() {
@@ -30,7 +30,7 @@
                 axios.get(`${Config.SERVER}api/scores/`)
                     .then((response) => {
                         console.log('Fetched score stats from the server.')
-                        this.appStore.store('scores', response.data)
+                        this.resultsStore.store('scores', response.data)
                     })
                     .catch( error => {
                         console.log(error)
@@ -39,7 +39,7 @@
                 axios.get(`${Config.SERVER}api/count/`)
                     .then((response) => {
                         console.log('Fetched user count from the server.')
-                        this.appStore.store('count', response.data)
+                        this.resultsStore.store('count', response.data)
                     })
                     .catch( error => {
                         console.log(error)
@@ -83,8 +83,8 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="(stats, playbook, index) in this.appStore.scores" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
+                    <tr v-for="(stats, playbook, index) in this.resultsStore.scores" :key="playbook" class="hover:bg-yellow-50" :class="index % 2 == 0? `bg-lime-50 border-b dark:bg-gray-900 dark:border-gray-700` : `bg-lime-100 border-b dark:bg-gray-800 dark:border-gray-700`">
-                        <td v-if="this.appStore.results.playbooks.some(obj => obj.hasOwnProperty(playbook))">
+                        <td v-if="this.resultsStore.results.playbooks.some(obj => obj.hasOwnProperty(playbook))">
                             <ChevronDoubleRight/>
                         </td>
                         <td v-else>
@@ -94,7 +94,7 @@
                             The {{ playbook }}
                         </td>
                         <td>
-                            {{ Math.round(100*this.appStore.results.all_playbooks[playbook]/this.appStore.results.max_score) }}
+                            {{ Math.round(100*this.resultsStore.results.all_playbooks[playbook]/this.resultsStore.results.max_score) }}
                         </td>
                         <td scope="col" class="py-1">
                             {{ Math.round(stats.mean * 100) / 100 }}
@@ -107,7 +107,7 @@
                         </td>
                     </tr>
                     <tr>
-                        <td colspan="6" class="text-center text-lg text-gray-600">From {{ this.appStore.count }} users</td>
+                        <td colspan="6" class="text-center text-lg text-gray-600">From {{ this.resultsStore.count }} users</td>
                     </tr>
                 </tbody>
             </table>

client/src/views/results/compare-answers/CompareQuestion.vue

@@ -1,7 +1,7 @@
 <script>
     import { useQuestionStore } from '@/stores/questions.js'
     import { useAnswersStore } from '@/stores/answers.js'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
@@ -20,12 +20,12 @@
         setup() {
             const questionStore = useQuestionStore()
             const answersStore = useAnswersStore()
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
                 questionStore,
                 answersStore,
-                appStore
+                resultsStore
             }
         },
         methods: {
@@ -37,14 +37,14 @@
             }
         },
         mounted() {
-            this.appStore.compareCurrent = this.id
+            this.resultsStore.compareCurrent = this.id
             this.$watch(
                 () => this.$route.params, (toParams, previousParams) => {
                     if (this.$route.name == 'CompareQuestion') {
                         if (toParams.id >= this.questionStore.questions.length || this.id < 0) {
                             this.$router.push('/err_notfound')
                         } else {
-                            this.appStore.compareCurrent = toParams.id
+                            this.resultsStore.compareCurrent = toParams.id
                         }
                     }
                 }
@@ -64,19 +64,19 @@
             Compare Answers
         </Header>
         <Content>
-            <div v-if="questionStore.questions[this.id] && answersStore.answers[this.id] != null && appStore.answers[this.id]">
+            <div v-if="questionStore.questions[this.id] && answersStore.answers[this.id] != null && resultsStore.answers[this.id]">
                 <article class="prose">
                     <h3>Question {{ this.id + 1}}</h3>
                     <div v-html="questionStore.questions[this.id].question"></div>
                 </article>
                 <div class="grid grid-cols-1 content-evenly items-center gap-2 justify-between mt-12 mx-auto lg:grid-cols-2">
-                    <div v-for="(answer, index) in questionStore.questions[this.id].answers" :key="`q${this.id}-o${index}`" class="inline-flex justify-between rounded-md bg-lime-200" :style="`background: linear-gradient(to right, rgb(217 249 157) ${100*this.appStore.answers[this.id][index] / this.appStore.count}%, transparent ${100*this.appStore.answers[this.id][index] / this.appStore.count+3}%)`">
+                    <div v-for="(answer, index) in questionStore.questions[this.id].answers" :key="`q${this.id}-o${index}`" class="inline-flex justify-between rounded-md bg-lime-200" :style="`background: linear-gradient(to right, rgb(217 249 157) ${100*this.resultsStore.answers[this.id][index] / this.resultsStore.count}%, transparent ${100*this.resultsStore.answers[this.id][index] / this.resultsStore.count+3}%)`">
                         <div v-html="answer" class="flex uncial-antiqua h-full p-2 select-none transition-all duration-100 ease-in-out" :class=" optionSelected(this.id, index) ? 'option-selected' : '' " :aria-label="answer" :title="answer"></div>
-                        <div class="flex p-2 w-fit items-center" style="white-space:nowrap;">{{ Math.round(100*this.appStore.answers[this.id][index] / this.appStore.count) }} &#37;</div>
+                        <div class="flex p-2 w-fit items-center" style="white-space:nowrap;">{{ Math.round(100*this.resultsStore.answers[this.id][index] / this.resultsStore.count) }} &#37;</div>
                     </div>
                 </div>
                 <div class="text-center mt-6 mb-12 text-lg text-gray-600">
-                    From of {{ this.appStore.count }} users.
+                    From of {{ this.resultsStore.count }} users.
                 </div>
                 <div class="w-full flex mx-auto items-center justify-between max-w-sm">
                     <router-link :to="`/results/answers/${this.id-1}`" v-if="this.id > 0">

client/src/views/results/compare-answers/CompareQuestions.vue

@@ -1,5 +1,5 @@
 <script>
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
     import Content from '@/components/Content.vue'
     import Header from '@/components/Header.vue'
     import TextFrame from '@/components/TextFrame.vue'
@@ -14,15 +14,15 @@
             TextFrame
         },
         setup() {
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
-                appStore
+                resultsStore
             }
         },
         mounted() {
-            if (this.appStore.compareCurrent !== null) {
+            if (this.resultsStore.compareCurrent !== null) {
-                this.$router.push(`/results/answers/${this.appStore.compareCurrent}`)
+                this.$router.push(`/results/answers/${this.resultsStore.compareCurrent}`)
             }
         }
     }

client/src/views/results/compare-answers/Index.vue

@@ -3,18 +3,18 @@
     import Config from '@/config.js'
     import { useQuestionStore } from '@/stores/questions.js'
     import { useAnswersStore } from '@/stores/answers.js'
-    import { useAppStore } from '@/stores/app.js'
+    import { useResultsStore } from '@/stores/results.js'
 
     export default {
         setup() {
             const questionStore = useQuestionStore()
             const answersStore = useAnswersStore()
-            const appStore = useAppStore()
+            const resultsStore = useResultsStore()
 
             return {
                 questionStore,
                 answersStore,
-                appStore
+                resultsStore
             }
         },
         name: 'CompareAnswersIndex',
@@ -28,7 +28,7 @@
                 axios.get(`${Config.SERVER}api/answers/`)
                     .then((response) => {
                         console.log('Fetched answer stats from the server.')
-                        this.appStore.store('answers', response.data)
+                        this.resultsStore.store('answers', response.data)
                     })
                     .catch( error => {
                         console.log(error)
@@ -37,7 +37,7 @@
                 axios.get(`${Config.SERVER}api/count/`)
                     .then((response) => {
                         console.log('Fetched user count from the server.')
-                        this.appStore.store('count', response.data)
+                        this.resultsStore.store('count', response.data)
                     })
                     .catch( error => {
                         console.log(error)