-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
124 lines (116 loc) · 2.65 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ปุ๊บ ปั๊บ!</title>
</head>
<style>
.container {
display: flex;
}
#app {
flex-direction: column;
align-items: stretch;
justify-content: center;
height: 80%;
}
#buttons {
justify-content: center;
}
.wrapper {
margin: .5em;
border: #333 dashed 1px;
}
.textbox {
text-align: center;
font-size: 125%;
padding: 1em;
}
.word {
font-size: 125%;
padding: 2em;
margin: 1em;
}
</style>
<div class="container" id="app">
<div class="wrapper">
<div class="textbox" id="question">
ถาม {{ question }}
</div>
</div>
<div class="wrapper" id="progressbar">
<div class="textbox" id="answer">
ตอบ {{ answer }}
</div>
</div>
<div class="container" id="buttons">
<button class="word" v-on:click="poop">ปุ๊บ</button>
<button class="word" v-on:click="pup">ปั๊บ</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
var app = new Vue({
el: '#app',
data: {
DIRECT: { 'poop': 'ปุ๊บ', 'pup': 'ปั๊บ' },
INVERT: { 'poop': 'ปั๊บ', 'pup': 'ปุ๊บ' },
TIMER: 550,
RATE: 15,
question: '...',
answer: '...',
memo: [],
id: null,
timer: 0
},
methods: {
poop: function() {
this.memo.push('poop');
this.update();
},
pup: function() {
this.memo.push('pup');
this.update();
},
update: function() {
this.question = this.memo.map(x => this.DIRECT[x]).join(' ');
this.answer = '...';
this.start_countdown();
},
start_countdown: function() {
clearTimeout(this.id);
this.timer = this.TIMER;
this.loop_countdown();
},
loop_countdown: function() {
if (this.timer > 0) {
this.id = setTimeout(() => {
this.timer -= this.RATE;
this.progressbar();
this.loop_countdown();
}, this.RATE);
} else {
this.ask();
this.timer = this.TIMER;
}
},
progressbar: function() {
var css = document.styleSheets[0];
if (css.rules[0].selectorText === '#progressbar::after') {
css.removeRule(0);
}
var percent = 100 * Math.min(1, 1 - this.timer / this.TIMER);
css.insertRule(`#progressbar::after {
border-bottom: #aaa solid 4px;
content: '';
display: block;
width: ${percent}%;
}`);
},
ask: function() {
this.answer = this.memo.map(x => this.INVERT[x]).join(' ');
this.memo = [];
}
}
});
</script>