-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (152 loc) · 4.72 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta charset="UTF-8" />
<title>Array-Roulette</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="./node_modules/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg text-center">
<img src="./img/yw-Schriftmarke-blau.svg" height="60" />
<hr />
<p class="h2">Nenne etwas zur Kategorie</p>
<p class="category display-3 bg-primary text-white rounded">Stadt</p>
<p class="h2">beginnend mit dem Buchstaben</p>
<p class="letter display-3 bg-primary text-white rounded">A</p>
<button type="button" class="btn btn-success btn-lg hotbutton">Los</button>
</div>
</div>
<hr />
<footer>
<p><i class="fa fa-code" aria-hidden="true"></i> with <i class="fa fa-heart" aria-hidden="true"></i> by <a href="https://youthweb.net">Youthweb</a> <span class="text-muted">|</span> License <a href="https://github.com/youthweb/array-roulette/blob/master/LICENSE">GPL-3.0</a></p>
</footer>
</div>
<script>
var game = {
categories: [
'Stadt',
'Land',
'Fluss',
'Threadtitel im Forum',
'Username',
'Kücheninventar',
'Geburtstagsgeschenk',
'Dinge, die man täglich macht',
'Todesursache',
'Grund für einen Schulverweis',
'Etwas, das sehr weh tut',
'Grund, warum ich zu spät bin',
'Was Youthweb braucht',
'Nutzlose Superkraft',
'So würde ich mein Kind NICHT nennen',
'Filmname',
'Gegenstand in diesem Raum',
'Auf dem Bauernhof',
'Was ich nicht im Kühlschrank erwarte',
'Etwas zu essen',
'Kleidungsstück',
],
letters: [
'A',
'B',
'C',
'D',
'E',
'F',
'G',
'H',
'I',
'J',
'K',
'L',
'M',
'N',
'O',
'P',
'Q',
'R',
'S',
'T',
'U',
'V',
'W',
'X',
'Y',
'Z',
],
selectors: {
category: '.category',
letter: '.letter',
hotbutton: '.hotbutton',
},
runtime_max_seconds: 10, // seconds
runtime_wait_miliseconds: 20, // miliseconds
cooling_down_miliseconds: 500, // miliseconds
};
(function (options) {
var is_running = false;
var is_cooling_down = false;
var rounds_counter = 0;
var rounds_max = options.runtime_max_seconds * 1000 / options.runtime_wait_miliseconds;
var hotbutton = document.querySelector(options.selectors.hotbutton);
var category = document.querySelector(options.selectors.category);
var letter = document.querySelector(options.selectors.letter);
var random_integer = function(int_min, int_max) {
return Math.floor(Math.random() * (int_max - int_min + 1) + int_min);
};
var random_entry = function(arr) {
return arr[random_integer(0, arr.length - 1)];
};
var let_run = function() {
rounds_counter++;
category.innerHTML = random_entry(options.categories);
letter.innerHTML = random_entry(options.letters);
if (is_running && rounds_counter < rounds_max) {
window.setTimeout(let_run, options.runtime_wait_miliseconds);
} else if (is_running) {
let_stop();
}
};
var let_stop = function() {
is_running = false;
is_cooling_down = true;
rounds_counter = 0;
hotbutton.innerHTML = 'Los!';
hotbutton.classList.replace('btn-danger', 'btn-success');
// Disable button for some miliseconds
hotbutton.setAttribute('disabled', 'disabled');
window.setTimeout(function() {
hotbutton.removeAttribute('disabled');
is_cooling_down = false;
}, options.cooling_down_miliseconds);
};
var toggle_start = function() {
if (is_cooling_down) {
// Do nothing on cooling down
return;
}
if (is_running === false) {
is_running = true;
hotbutton.innerHTML = 'Stop!';
hotbutton.classList.replace('btn-success', 'btn-danger');
window.setTimeout(let_run, 0);
} else {
let_stop();
}
};
// Hotbutton handler
hotbutton.onclick = toggle_start;
// Spacebar handler
document.body.onkeyup = function(e) {
if(e.keyCode == 32) {
toggle_start();
}
}
})(game);
</script>
</body>
</html>