72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<template>
|
||
<section class="app">
|
||
<p class="note">{{ fact }}</p>
|
||
<button @click.prevent="next" class="button-next">Узнать чуть лучше</button>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import _ from 'underscore';
|
||
import Metrika from '../common/metrika';
|
||
|
||
const NOTES = [
|
||
'Люблю фильм "Три идиота".',
|
||
'Люблю кататься на велосипеде.',
|
||
'Люблю читать фантастические книги.',
|
||
'Люблю шоколад.',
|
||
'На день рождения ко мне можно прийти без подарка.',
|
||
'Не люблю пьяных людей.',
|
||
'Предпочитаю ходить в кино на 2D-сеансы.',
|
||
'Проехал на велосипеде 200 километров за день.',
|
||
'Работаю программистом.',
|
||
'Хотел бы побывать в горах.',
|
||
];
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
notes: NOTES,
|
||
shown: [],
|
||
fact: '',
|
||
};
|
||
},
|
||
mounted() {
|
||
this.pick();
|
||
},
|
||
methods: {
|
||
next() {
|
||
this.pick();
|
||
Metrika.hit(location.href);
|
||
},
|
||
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;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import '../components/button';
|
||
.app {
|
||
text-align: center;
|
||
}
|
||
|
||
.note {
|
||
display: block;
|
||
font-size: 160%;
|
||
margin: 2em auto;
|
||
min-height: 3em;
|
||
}
|
||
|
||
.button-next {
|
||
@extend %button;
|
||
}
|
||
</style>
|