adding stats pannel

This commit is contained in:
theo1 2021-02-06 16:26:41 +01:00
parent 3fbafb7a1c
commit 63310c0c9f
7 changed files with 116 additions and 11 deletions

5
package-lock.json generated
View File

@ -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",

View File

@ -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",

View File

@ -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>

View File

@ -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;
}

View File

@ -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>

View File

@ -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')

28
src/router/index.js Normal file
View File

@ -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