adding stats pannel

package-lock.json

@@ -10978,6 +10978,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.1.tgz",
+      "integrity": "sha512-RRQNLT8Mzr8z7eL4p7BtKvRaTSGdCbTy2+Mm5HTJvLGYSSeG9gDzNasJPP/yOYKLy+/cLG/ftrqq5fvkFwBJEw=="
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.11",
     "@vue/cli-service": "~4.5.0",
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",

src/App.vue

@@ -1,18 +1,17 @@
 <template>
   <div id="app">
-    <screen></screen>
+    <transition name="fade">
+      <router-view></router-view>
+    </transition>
   </div>
 </template>
 
 <script>
-import Screen from './components/Screen.vue'
 
 export default {
   name: 'App',
-  components: {
-    Screen
-  }
 }
+
 </script>
 
 <style>
@@ -22,6 +21,16 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
+}
+
+* {
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity .5s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
 }
 </style>

src/components/Screen.vue

@@ -13,11 +13,14 @@
     <div id="user-input">
       <input type="textarea" v-model='userText' autofocus>
     </div>
+
+    <button @click.prevent='handleDone'>Done</button>
   </div>
 </template>
 
 <script>
 import axios from 'axios'
+import router from '../router/index.js'
 
 export default {
   name: 'Screen',
@@ -25,11 +28,11 @@ export default {
     return {
       words: [],
       letters: [],
-      number: 2,
+      number: 10,
       userText: "",
       activeIndex: 0,
       isWrong: false,
-      timer: 60,
+      timer: 10,
       timerRunning: false,
       typingSpeed: "",
     }
@@ -88,6 +91,10 @@ export default {
     },
     stopTimer() {
       this.timerRunning = false
+    },
+    handleDone() {
+      // TODO : handle precision with error count
+      router.push({name: 'stats', params: {speed : this.typingSpeed, precision: 100}})
     }
   },
   computed: {
@@ -151,7 +158,6 @@ export default {
   display: block;
   font-size: 1em;
   width: 50%;
-  font-family: Arial, Helvetica, sans-serif;
   margin: auto;
 }
 

src/components/StatScreen.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+  <div id="stats">
+    <p v-for="(stat, index) in stats" :key="index">{{ stat.label }} : {{stat.value}} {{ stat.unit}}</p>
+  </div>
+    <img id="lulz" src="https://media.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.gif">
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'StatScreen',
+  props: ['speed', 'precision'],
+  data() {
+    return {
+      stats: [
+        {
+          label: "Speed",
+          value: 0,
+          unit: "words per minute"
+        },
+        {
+          label: "Precision",
+          value: 0,
+          unit: "%"
+        }
+      ]
+    }
+  },
+  created() {
+    this.stats[0].value = this.speed,
+    this.stats[1].value = this.precision
+  }
+}
+</script>
+
+<style scoped>
+#stats {
+  border: solid black 1px;
+  border-radius: 5px;
+  width: 20%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 50px;
+  font-weight: bold;
+}
+
+#lulz {
+  margin: 10px;
+  border-radius: 5px;
+}
+</style>

src/main.js

@@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
 
 Vue.config.productionTip = false
 
 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Screen from '../components/Screen.vue'
+import StatScreen from '../components/StatScreen.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: Screen
+  },
+  {
+    path: '/stats',
+    name: 'stats',
+    component: StatScreen,
+    props: true
+  }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router