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>
<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>
</script>

View File

@ -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' },
},
],
});

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>