refactor(client): create score screen page

pull/12/head
sundowndev 2019-12-07 15:11:45 +01:00
parent 1605b22b07
commit 546e7f588d
3 changed files with 54 additions and 26 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div id="score_screen"> <div id="score_screen">
<h2>Score: {{ score }}/{{ questions.length }}</h2> <h2>Score: {{ score }}/{{ count }}</h2>
<h3>{{ text() }}</h3> <h3>{{ text() }}</h3>
<button class="replay-btn" @click="reset">Recommencer</button> <button class="replay-btn" @click="reset">Recommencer</button>
</div> </div>
@ -8,11 +8,15 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { mapState, mapGetters, mapMutations } from 'vuex';
interface IMessage {
min: number;
msg: string;
}
export default Vue.extend({ export default Vue.extend({
name: 'ScoreScreen', name: 'ScoreScreen',
data() { data(): { messages: IMessage[] } {
return { return {
messages: [ messages: [
{ min: 0, msg: 'T\'as pas lu les questions avoues.' }, { min: 0, msg: 'T\'as pas lu les questions avoues.' },
@ -23,37 +27,19 @@ export default Vue.extend({
}; };
}, },
props: { props: {
score: Number,
count: Number,
reset: Function, reset: Function,
}, },
computed: {
...mapGetters('questions', ['questions', 'score']),
},
methods: { methods: {
text() { text(): string {
const text = this.messages.filter((msg) => this.score >= msg.min); const text = this.messages.filter((msg) => this.score >= msg.min);
return text[0] !== undefined ? text[0].msg : ''; return text[0] !== undefined ? text[0].msg : '';
}, },
}, },
created() { created(): void {
this.messages.sort((a, b) => b.min - a.min); this.messages.sort((a, b) => b.min - a.min);
}, },
}); });
</script> </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>

View File

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

View File

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