-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
297 lines (275 loc) · 8.77 KB
/
script.js
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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
function iniciarJogo(status) {
var divinit = document.getElementById('div-init');
var divcontent = document.getElementById('div-content');
var cond1 = "none";
var cond2 = "contents";
if(status === 'fim') {
cond1 = "contents";
cond2 = "none";
location.reload();
}
divinit.style.setProperty("display", cond1);
divcontent.style.setProperty("display", cond2);
}
//Cadastro Palavras
var palavras = [];
//Chamada localStorage
var cadpalavras = localStorage;
//populate palavras array with localStorage items
if(cadpalavras.length > 0) {
for(let key in cadpalavras) {
if (cadpalavras.hasOwnProperty(key)) {
let palavra = cadpalavras.getItem(key);
palavras.push([key,palavra]);
}
}
} else {
//Se nao tem localStorage ou localStorage vazio
//preenche array palavras
palavras.push(['1', 'BANANA&FRUTA']);
palavras.push(['2', 'MORANGO&FRUTA']);
palavras.push(['3', 'PERA&FRUTA']);
palavras.push(['4', 'ABACAXI&FRUTA']);
palavras.push(['5', 'LARANJA&FRUTA']);
palavras.push(['6', 'PITANGA&FRUTA']);
}
var edica = document.getElementById('div-assunto');
var asorteio = randomPalavra(palavras);
let atmp = asorteio[1].split(/&/);
const assunto = atmp[1];
const palavra = atmp[0];
edica.innerText = "Dica : " + assunto;
//Sorteia aleatoriamente um item de array palavras
function randomPalavra(array) {
let nitem = array.length - 1; // porque indice inicial de array = 0
//let randompos = Math.round(Math.random() * nitem);
//randompos inclui 0
let randompos = Math.floor(Math.random() * nitem);
//console.log(randompos);
return array[randompos];
}
//Preenche com slots conforme tam. palavra sorteada
var aletras = [], aslots = [], aerros = [];
for(let letra of palavra) {
aslots.push('_');
aletras.push(letra);
}
var eslot = document.getElementById('div-slot');
aslots = aslots.join(' ');
aletras = aletras.join(' ');
eslot.innerText = aslots;
var setValue = function(evalue, eid, event) {
var ebtn = document.getElementById(eid);
var rgexp = RegExp(evalue,"g");
var matchobj = aletras.matchAll(rgexp);
var matches = Array.from(matchobj);
var atmp = Array.from(aslots);
var texto = edica.innerText;
if(matches.length > 0) {
for(let i= 0; i < matches.length; i++) {
let aind = matches[i].index;
atmp[aind] = matches[i][0];
}
aslots = atmp.join('');
//
eslot.innerText = aslots;
//
let slots = aslots.replaceAll('_','');
slots = slots.replaceAll(' ','');
//Teve match , desabilita tecla
ebtn.style.setProperty("background-color", "lightblue");
ebtn.style.setProperty("transform", "scale(0.9, 0.9)");
ebtn.style.setProperty("color", "green");
//Todas as letras preenchidas
if(palavra === slots) {
texto = 'Parabéns, Vc venceu !';
disableAllBtn();
playAudio('win');
setTimeout("showModal()", 3000);
}
} else { // não match
ebtn.style.setProperty("background-color", "lightgrey");
ebtn.style.setProperty("transform", "scale(0.9, 0.9)");
ebtn.style.setProperty("color", "red");
aerros.push(evalue);
let erecycle = document.getElementById('recycle-letra');
//
erecycle.innerText = aerros.join(', ');
//
let nimg = changeImg();
if(nimg) {
texto = 'Xii... vc perdeu !';
disableAllBtn();
playAudio('lose');
setTimeout("showModal()", 3000);
}
}
//se match ou descartada -> disable btn
edica.innerText = texto;
ebtn.disabled = true;
//event.preventDefault();
}
//Set buttons click event listeners
var evbtn = document.querySelectorAll('.vbtn');
evbtn.forEach(item => {
//Event click of virtualkeyboard button
item.addEventListener('click', function(e) {
setValue(item.value, item.id, e);
//e.stopPropagation();
});
//Custom Event keydown of real keyboard button
item.addEventListener('kbddown', function(e) {
let eventdetail = e.detail.origin;
if(eventdetail.tagName === 'BODY') {
//console.log('kbddown BODY : ' + item.value);
setValue(item.value, item.id, e);
} else if(eventdetail.tagName === 'INPUT') {
//console.log('kbddown INPUT : ' + item.value);
//para INPUT o valor vai direto para o box !
} else {
//algum outro possivel elemento
}
});
});
//Event keydown of real keyboard button
document.addEventListener('keydown', function(e) {
var eactive = document.activeElement;
if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode >= 97 && e.keyCode <= 122) {
let evkey = e.key.toUpperCase();
let btnid = 'btn' + evkey;
let ebtn = document.getElementById(btnid);
var kbdEvent = new CustomEvent("kbddown", {
detail: { origin: eactive }
});
if(kbdEvent !== null) {
ebtn.dispatchEvent(kbdEvent);
} else {
console.log('kbdEvent error !');
}
} else {
//Prevent Tab , Enter , etc
e.preventDefault();
}
});
var eassunto = document.getElementById("assunto");
var epalavra = document.getElementById("palavra");
var btninput = document.getElementById("cad-input-btn");
btninput.addEventListener('click', function() { incluirItem() });
function incluirItem() {
let inputassunto = eassunto.value;
let inputpalavra = epalavra.value;
let ctrl = true;
if(event instanceof MouseEvent) {
// is 'click' event
} else if(event instanceof KeyboardEvent) {
//Somente letras maiusculas
if(!(event.keyCode >= 65 && event.keyCode <= 90)) {
ctrl = false;
} else {
alert('Atenção : Sem ACENTUAÇÂO ou caracter ESPECIAL !')
}
}
if(ctrl) {
let inputref = inputpalavra + '&' + inputassunto;
//verifica se já está incluso
let pos = palavras.findIndex(palavra => palavra[1] === inputref);
if(pos >= 0) {
alert('Palavra ja cadastrada !');
} else {
let npos = palavras.length + 1;
npos = npos.toString(); // localStorage só aceita string
palavras.push([npos,inputref]);
cadpalavras.setItem(npos,inputref);
}
}
}
//Sequencia imgs Skeleton
var images = [
{name:'img1', src:'hangman1.png'},
{name:'img2', src:'hangman2.png'},
{name:'img3', src:'hangman3.png'},
{name:'img4', src:'hangman4.png'},
{name:'img5', src:'hangman5.png'},
{name:'img6', src:'hangman6.png'},
];
var imgind = 0;
function changeImg() {
if(imgind < images.length) {
let imgsrc = images[imgind].src;
document.getElementById("img-hangman").src = imgsrc;
imgind++;
} else {
imgind = 0;
}
return imgind === images.length;
}
var modal = document.getElementById("modal-retorno");
var btnret = document.getElementById("btn-retorno");
function showModal() {
modal.style.display = "block";
}
btnret.onclick = function() {
modal.style.display = "none";
iniciarJogo('fim');
}
function playAudio(audioid) {
var audio = document.getElementById(audioid);
audio.volume = 0.8;
audio.play();
}
function disableAllBtn() {
evbtn.forEach(item => {
item.disabled = true;
});
}
function removeListeners() {
//Elements with Listeners
//evbtn and document
evbtn.forEach(item => {
//Event click of virtualkeyboard button
item.removeEventListener('click', function(e) {
setValue(item.value, item.id, e);
});
//Custom Event keydown of real keyboard button
item.removeEventListener('kbddown', function(e) {
let eventdetail = e.detail.origin;
if(eventdetail.tagName === 'BODY') {
//console.log('kbddown BODY : ' + item.value);
setValue(item.value, item.id, e);
} else if(eventdetail.tagName === 'INPUT') {
//console.log('kbddown INPUT : ' + item.value);
//para INPUT o valor vai direto para o box !
} else {
//algum outro possivel elemento
}
});
});
//Event keydown of real keyboard button
document.removeEventListener('keydown', function(e) {
var eactive = document.activeElement;
if(e.keyCode >= 65 && e.keyCode <= 90 || e.keyCode >= 97 && e.keyCode <= 122) {
let evkey = e.key.toUpperCase();
let btnid = 'btn' + evkey;
let ebtn = document.getElementById(btnid);
var kbdEvent = new CustomEvent("kbddown", {
detail: { origin: eactive }
});
if(kbdEvent !== null) {
ebtn.dispatchEvent(kbdEvent);
} else {
console.log('kbdEvent error !');
}
} else {
//Prevent Tab , Enter , etc
e.preventDefault();
}
});
}
function closePage() {
//let location = "chrome://newtab"
let location = "tst_open_page_1.html";
let new_window = open(location, '_self');
//console.log('Location : ' + new_window.location.href);
// Close this window
new_window.close();
}