79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<template>
|
|
<section class="app">
|
|
<p class="fact-index">Факт {{ factIndex }}</p>
|
|
<p class="note">{{ fact }}</p>
|
|
<button @click.prevent="next" class="button-next">
|
|
Узнать чуть лучше
|
|
</button>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import _ from 'underscore';
|
|
|
|
const NOTES = [
|
|
'Люблю фильм "Три идиота".',
|
|
'Люблю кататься на велосипеде.',
|
|
'Люблю читать фантастические книги.',
|
|
'Люблю шоколад.',
|
|
'На день рождения ко мне можно прийти без подарка.',
|
|
'Не люблю пьяных людей.',
|
|
'Предпочитаю ходить в кино на 2D-сеансы.',
|
|
'Проехал на велосипеде 200 километров за день.',
|
|
'Работаю программистом.',
|
|
'Хотел бы побывать в горах.',
|
|
];
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
notes: NOTES,
|
|
shown: [],
|
|
fact: '',
|
|
factIndex: null,
|
|
};
|
|
},
|
|
mounted() {
|
|
this.pick();
|
|
},
|
|
methods: {
|
|
next() {
|
|
this.pick();
|
|
},
|
|
pick() {
|
|
let available = _.difference(this.notes, this.shown);
|
|
if (_.size(available) === 0) {
|
|
available = this.notes;
|
|
this.shown = [];
|
|
}
|
|
const fact = _.sample(available);
|
|
this.shown.push(fact);
|
|
this.fact = fact;
|
|
this.factIndex = _.indexOf(NOTES, fact) + 1;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../components/button';
|
|
.app {
|
|
text-align: center;
|
|
}
|
|
|
|
.fact-index {
|
|
margin-top: 3em;
|
|
}
|
|
|
|
.note {
|
|
display: block;
|
|
font-size: 160%;
|
|
margin: 0 auto 2em;
|
|
min-height: 3em;
|
|
}
|
|
|
|
.button-next {
|
|
@extend %button;
|
|
}
|
|
</style>
|