refactor(client): create score screen page

client/src/components/ScoreScreen.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="score_screen">
-    <h2>Score: {{ score }}/{{ questions.length }}</h2>
+    <h2>Score: {{ score }}/{{ count }}</h2>
     <h3>{{ text() }}</h3>
     <button class="replay-btn" @click="reset">Recommencer</button>
   </div>
@@ -8,11 +8,15 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapState, mapGetters, mapMutations } from 'vuex';
+
+interface IMessage {
+  min: number;
+  msg: string;
+}
 
 export default Vue.extend({
   name: 'ScoreScreen',
-  data() {
+  data(): { messages: IMessage[] } {
     return {
       messages: [
         { min: 0, msg: 'T\'as pas lu les questions avoues.' },
@@ -23,37 +27,19 @@ export default Vue.extend({
     };
   },
   props: {
+    score: Number,
+    count: Number,
     reset: Function,
   },
-  computed: {
-    ...mapGetters('questions', ['questions', 'score']),
-  },
   methods: {
-    text() {
+    text(): string {
       const text = this.messages.filter((msg) => this.score >= msg.min);
 
       return text[0] !== undefined ? text[0].msg : '';
     },
   },
-  created() {
+  created(): void {
     this.messages.sort((a, b) => b.min - a.min);
   },
 });
 </script>
-
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

client/src/router.ts

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import Home from './views/Home.vue';
+import ScoreScreen from './views/ScoreScreen.vue';
 
 Vue.use(Router);
 
@@ -13,5 +14,14 @@ export default new Router({
       name: 'home',
       component: Home,
     },
+    {
+      path: '/score-screen',
+      name: 'scoreScreen',
+      component: ScoreScreen,
+    },
+    {
+      path: '*',
+      redirect: { name: 'home' },
+    },
   ],
 });

client/src/views/ScoreScreen.vue

@@ -0,0 +1,32 @@
+<template>
+  <ScoreScreen :score="score" :count="questions.length" :reset="resetGame" />
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import IQuestion from '../models/question';
+import { mapState, mapGetters, mapMutations } from 'vuex';
+import ScoreScreen from '../components/ScoreScreen.vue';
+import router from '../router';
+
+export default Vue.extend({
+  name: 'home',
+  methods: {
+    resetGame(): void {
+      this.$store.dispatch('questions/resetState');
+      router.push({ name: 'home' });
+    },
+  },
+  components: {
+    ScoreScreen,
+  },
+  computed: {
+    ...mapGetters('questions', ['index', 'questions', 'score']),
+  },
+  created(): void {
+    if (this.index === 0) {
+      router.push({ name: 'home' });
+    }
+  },
+});
+</script>