là c'est la classe !!!
This commit is contained in:
parent
2d101914d5
commit
e0713e9dfa
3 changed files with 71 additions and 30 deletions
10
index.html
10
index.html
|
|
@ -66,8 +66,16 @@
|
|||
<div class="modal-content">
|
||||
<span class="close-btn" onclick="fermerAlerte()">×</span>
|
||||
<p id="message_alerte_jolie"></p>
|
||||
<button onclick="fermerAlerte()">OK</button>
|
||||
|
||||
<div class="div-centrer-contenu">
|
||||
<input type="text" id="input_alerte_jolie">
|
||||
|
||||
<button onclick="fermerAlerte()">OK</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="ad" style="display: none;">
|
||||
|
||||
|
|
|
|||
53
js/alerte.js
53
js/alerte.js
|
|
@ -2,31 +2,45 @@
|
|||
// Pour cela, on utilise une file et une fonction asynchrone qui boucle et vide la file alerte par alerte
|
||||
let file_alertes = []
|
||||
|
||||
function ouvrirAlerte(message){
|
||||
file_alertes.push(message)
|
||||
function ouvrirAlerte(message,prompt=false){
|
||||
|
||||
// on renvoie une promise pour couvrir le cas d'une alerte en mode prompt
|
||||
// qui se doit donc de renvoyer le texte saisi par l'utilisateur
|
||||
return new Promise((resolve) => {
|
||||
file_alertes.push({message,prompt,resolve})
|
||||
|
||||
// si c'est la seule alerte en attente, on l'affiche
|
||||
if(file_alertes.length == 1 ) {
|
||||
afficherAlerte(file_alertes[0].message, file_alertes[0].prompt)
|
||||
}
|
||||
// sinon, elle sera automatiquement affichée lors de la fermeture de l'alerte juste avant dans la file
|
||||
})
|
||||
|
||||
// si c'est la seule alerte en attente, on l'affiche
|
||||
if(file_alertes.length == 1 ) {
|
||||
afficherAlerte(file_alertes[0])
|
||||
}
|
||||
// sinon, elle sera automatiquement affichée lors de la fermeture de l'alerte juste avant dans la file
|
||||
}
|
||||
|
||||
|
||||
// Fonction pour afficher une alerte mais plus jolie que celle par défaut
|
||||
function afficherAlerte(message) {
|
||||
|
||||
function afficherAlerte(message,prompt) {
|
||||
// on signale une alerte en train d'être visionnée
|
||||
flag = true
|
||||
|
||||
|
||||
// on prend les elements
|
||||
let modal = document.getElementById('alerte_jolie');
|
||||
let modal = document.getElementById("alerte_jolie")
|
||||
|
||||
var messageElement = document.getElementById('message_alerte_jolie');
|
||||
const message_ele = document.getElementById("message_alerte_jolie")
|
||||
|
||||
// Mettre le message
|
||||
messageElement.textContent = message;
|
||||
message_ele.textContent = message;
|
||||
|
||||
// afficher la barre de saisie de texte si besoin
|
||||
const alerte_input = document.getElementById("input_alerte_jolie")
|
||||
if(prompt){
|
||||
//inline pour mettre l'input à coté du bouton OK :)
|
||||
alerte_input.style.display = "inline-block";
|
||||
}else{
|
||||
alerte_input.style.display = "none";
|
||||
}
|
||||
|
||||
// et on affiche en changeant la propriété css
|
||||
modal.style.display = "block";
|
||||
|
|
@ -42,11 +56,22 @@ function fermerAlerte() {
|
|||
modal.style.display = "none";
|
||||
|
||||
// enlève notre élément de la file
|
||||
file_alertes.shift()
|
||||
|
||||
const alerte_vue = file_alertes.shift()
|
||||
console.log(alerte_vue)
|
||||
|
||||
// resolve la promise de ouvrirAlerte avec la valeur de l'input
|
||||
// quand l'utilisateur a fermé l'alerte
|
||||
// dans le cas d'une alerte sans le mode prompt, on ne récupère pas de valeur
|
||||
// donc on se moque de ce que cela peut renvoyer (Nan, sans doute)
|
||||
const alerte_input = document.getElementById("input_alerte_jolie")
|
||||
if(alerte_vue.resolve){
|
||||
alerte_vue.resolve(alerte_input.value)
|
||||
}
|
||||
|
||||
// affiche récursivement les autres alertes en attentes
|
||||
if(file_alertes.length > 0){
|
||||
afficherAlerte(file_alertes[0])
|
||||
afficherAlerte(file_alertes[0].message, file_alertes[0].prompt)
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
36
js/main.js
36
js/main.js
|
|
@ -434,23 +434,28 @@ function cadeauClickCallback(){
|
|||
const div_cadeau = document.getElementById("div_cadeau");
|
||||
|
||||
const nb_gen = Math.floor(Math.random() * 10) + 1; // Nombre aléatoire entre 1 et 10
|
||||
const nb_devine = parseInt(prompt("Entrez un chiffre entre 1 et 10 :"), 10);
|
||||
if (isNaN(nb_devine) || nb_devine < 1 || nb_devine > 10) {
|
||||
ouvrirAlerte("Le chiffre rentré n'est pas valide")
|
||||
}else{
|
||||
if (nb_gen === nb_devine) {
|
||||
ouvrirAlerte("Bravo ! Vous avez doublé votre score !");
|
||||
score *= 2;
|
||||
} else {
|
||||
ouvrirAlerte("Dommage !");
|
||||
|
||||
ouvrirAlerte("Entrez un chiffre entre 1 et 10 :",true).then((val)=>{
|
||||
const nb_devine = parseInt(val, 10);
|
||||
|
||||
if (isNaN(nb_devine) || nb_devine < 1 || nb_devine > 10) {
|
||||
ouvrirAlerte("Le chiffre rentré n'est pas valide")
|
||||
}else{
|
||||
if (nb_gen === nb_devine) {
|
||||
ouvrirAlerte("Bravo ! Vous avez doublé votre score !");
|
||||
score *= 2;
|
||||
} else {
|
||||
ouvrirAlerte("Dommage !");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// enlève le cadeau
|
||||
div_cadeau.style.display = "none";
|
||||
// enlève le cadeau
|
||||
div_cadeau.style.display = "none";
|
||||
|
||||
// génère un nouveau timer pour le prochain cadeau à afficher !
|
||||
setTimeout(genererCadeau, Math.random() * 10000 + 20000); // Premier affichage aléatoire entre 20 et 30 secondes
|
||||
// génère un nouveau timer pour le prochain cadeau à afficher !
|
||||
setTimeout(genererCadeau, Math.random() * 10000 + 20000); // Premier affichage aléatoire entre 20 et 30 secondes
|
||||
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -474,5 +479,8 @@ function teleportationCadeau(n) {
|
|||
teleportationCadeau(n)
|
||||
}, Math.random() * 1000 + 500); // Durée d'affichage entre 500ms et 1.5 seconde
|
||||
|
||||
}else{
|
||||
// on enlève le cadeau à la 15ème téléportation :)
|
||||
div_cadeau.style.display = "none"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue