-
Notifications
You must be signed in to change notification settings - Fork 4
/
app.js
136 lines (123 loc) · 5.9 KB
/
app.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
/** WORDLE version TIMCSF
* à la suite du "bonhomme pendu" de Michelle Decorte... ;)
* @author Ève Février, [email protected]
* @todo DES TONNES d'améliorations possibles... FAITES VOS SUGGESTIONS!!!
* (0) optimiser l'algorithme!
* (1) ajouter des niveaux de difficultés selon la liste utilisée (faire une liste facile avec des mots très courants...)
* (2) ajouter un bouton aide qui fournit un indice pour chaque mot (modifier en conséquence la structure de données)
* (3) ajouter des animations de transition lorsqu'on Rejoue
* */
function afficherCacher(strId, blnIsHidden){
document.getElementById(strId).hidden = blnIsHidden;
}
let wordle = {
strMotHasard: null,
intNombreEssai: 0,
getMotAleatoire: async function () {
try {
const response = await fetch("https://api.dicolink.com/v1/mots/motauhasard?avecdef=true&minlong=5&maxlong=5&verbeconjugue=false&api_key=vIZN5M213LnPy5M8isceExH5sYNBg35h");
const data = await response.json();
this.strMotHasard = data[0].mot;
console.log(this.strMotHasard);
} catch (error) {
console.error("Erreur lors de la récupération du mot aléatoire :", error);
}
},
pigerMot: async function () {
document.getElementById("btnJouer").className = "";
document.getElementById("btnJouer").disabled = true;
afficherCacher("etape2", false);
await this.getMotAleatoire();
document.getElementById("consigne").innerText = "Vous avez 6 essais pour deviner le mot de 5 lettres"
document.getElementById("consigne").className = "animate animate__pulse";
},
evaluerMot: function (strMotAEvaluer) {
strMotAEvaluer = strMotAEvaluer.toLowerCase();
// réinitialiser le message et vider le champ de saisie
let strMessage = " ";
document.getElementById("champMot").value = ""
if (strMotAEvaluer != "" && this.intNombreEssai < 6) {
this.intNombreEssai += 1;
// Mettre à jour le témoin
document.getElementById("nombreEssai").innerHTML = "Essai numéro: <strong>" + this
.intNombreEssai + "</strong>";
// boucler sur le mot à évaluer pour examiner chaque lettre
for (let intCpt = 0; intCpt < strMotAEvaluer.length; intCpt++) {
// Littéraux de gabarit pour un sélecteur complexe
// console.log(`#mot${this.intNombreEssai} span:nth-of-type(${intCpt+1})`);
let tagSpan = document.querySelector(
`#mot${this.intNombreEssai} span:nth-of-type(${intCpt+1})`);
let strLettre = strMotAEvaluer.charAt(intCpt);
tagSpan.innerText = strLettre;
// pour chaque lettre du mot vérifier si la lettre existe dans le mot
// // si elle est au bon endroit c'est vert
// // sinon c'est jaune
// sinon c'est gris
if (this.strMotHasard.indexOf(strLettre) != -1) {
if (strMotAEvaluer.charAt(intCpt) == this.strMotHasard.charAt(intCpt)) {
tagSpan.className = "vert";
} else {
tagSpan.className = "jaune";
}
} else {
tagSpan.className = "gris";
}
}
// donner une rétroaction
if (strMotAEvaluer == this.strMotHasard) {
strMessage = "Bravo vous avez réussi!";
console.log()
} else {
if (this.intNombreEssai == 6) {
strMessage = "SCROGNEUGNEU! iel est désolé(e), le mot était: " + this.strMotHasard;
}
}
if (strMessage != " ") {
document.getElementById("btnReset").disabled = false;
document.getElementById("btnReset").className = "animate animate__jello";
}
document.getElementById("message").innerHTML = strMessage;
}
},
reset: function () {
// Vider (ou presque) le paragraphe de message;
// l'espace insécable permet de conserver le display block de l'élément vide
document.getElementById("message").innerHTML = " ";
// Effacer tous les essais du jeu précédent
let arrSpan = document.querySelectorAll(".mot span");
for (let intCpt = 0; intCpt < arrSpan.length; intCpt++) {
arrSpan[intCpt].innerText = "_";
arrSpan[intCpt].className = "";
}
document.getElementById("nombreEssai").innerText = ""
document.getElementById("consigne").className = "";
this.intNombreEssai = 0;
// Gérer l'état des boutons
document.getElementById("btnJouer").className = "animate animate__jello";
document.getElementById("btnJouer").disabled = false;
document.getElementById("btnReset").disabled = true;
document.getElementById("btnReset").className = "";
afficherCacher("etape2", true);
}
};
// utiliser DOMContentLoaded plutôt que load
// https://developer.mozilla.org/fr/docs/Web/API/Window/DOMContentLoaded_event
window.addEventListener("DOMContentLoaded", function () {
document.getElementById("btnJouer").className = "animate animate__jello";
})
document.getElementById("btnJouer").addEventListener("click", function () {
wordle.pigerMot();
})
document.getElementById("btnEvaluer").addEventListener("click", function () {
let strMot = document.getElementById("champMot").value;
wordle.evaluerMot(strMot);
})
document.getElementById("btnReset").addEventListener("click", function () {
wordle.reset();
})
// choix de remplacer <form> par div.form plutôt que:
/* document.getElementById("champMot").addEventListener("keyup", function(objEvenement){
if(objEvenement.key == "Enter"){
objEvenement.preventDefault();
}
}) */