From 4f0466f0459f656d1e6fd154836e4648b2d3237e Mon Sep 17 00:00:00 2001 From: thaaoblues Date: Tue, 31 Dec 2024 15:44:09 +0100 Subject: [PATCH] c'est plus propre --- index.html | 1 - js/collegue.js | 43 ++++++++++++++- js/element.js | 32 ----------- js/main.js | 131 ++++++++++++++-------------------------------- js/technologie.js | 33 +++++++++++- 5 files changed, 112 insertions(+), 128 deletions(-) delete mode 100644 js/element.js diff --git a/index.html b/index.html index 1f06854..5aac685 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,6 @@ - diff --git a/js/collegue.js b/js/collegue.js index 0a22b81..db2bb6c 100644 --- a/js/collegue.js +++ b/js/collegue.js @@ -1,10 +1,51 @@ class Collegue{ - constructor(json) { + constructor(json,cle) { this.props = json this.nom = this.props.nom this.cout = this.props.cout this.boost = this.props.boost this.revenu_passif = this.props.revenu_passif + this.url_wikipedia = this.props.wikipedia + this.nom_fichier_image = this.props.nom_fichier_image + this.cle = cle + this.callbackAchat = {} + this.evolution = this.props.evolution + } + + /* va générer la ligne du tableau correspondant à ce collegue, + utile pour remplir le magasin de collegues */ + genererLigneTableau() { + const tr = document.createElement("tr") + const case_nom = document.createElement("td") + case_nom.textContent = this.nom + const case_boost = document.createElement("td") + case_boost.textContent = this.revenu_passif + const case_cout = document.createElement("td") + case_cout.textContent = rendreNombreLisible(this.cout) + case_cout.id = "case_cout_"+this.cle + + // case contenant un lien vers la page wikipédia du personnage + const case_wiki = document.createElement("td") + const a = document.createElement("a") + a.href = this.url_wikipedia + a.textContent = this.nom + case_wiki.appendChild(a) + + + const action = document.createElement("td") + const btn_acheter = document.createElement("button") + btn_acheter.textContent = "Acheter" + btn_acheter.addEventListener("click",this.callbackAchat) + action.appendChild(btn_acheter) + + tr.appendChild(case_nom) + tr.appendChild(case_boost) + tr.appendChild(case_cout) + tr.appendChild(case_wiki) + tr.appendChild(action) + + return tr + } } \ No newline at end of file diff --git a/js/element.js b/js/element.js deleted file mode 100644 index 44c0caa..0000000 --- a/js/element.js +++ /dev/null @@ -1,32 +0,0 @@ -class Element{ - constructor(techno,tag) { - this.tag = tag - this.techno = techno - } - - async chargerDepuisBdd(){ - let data = await fetch("../bdd/arbre.json") - data = await data.json() - - this.props = data["technologies"][this.techno]["elements"][this.tag] - this.cout = this.props.cout - this.nom = this.props.nom - this.boost = this.props.boost - } - - afficherDropsDansHtml(){ - const table= document.getElementById("table_technologies_body") - - const tr = document.createElement("tr") - const nom = document.createElement("td") - nom.innerText = this.nom - const boost = document.createElement("td") - boost.innerText = this.boost - - tr.appendChild(nom) - tr.appendChild(boost) - table.appendChild(tr) - - } - -} \ No newline at end of file diff --git a/js/main.js b/js/main.js index 4293502..e5bc155 100644 --- a/js/main.js +++ b/js/main.js @@ -6,7 +6,7 @@ let magasin_tech = {} let magasin_coll = {} // stoquer les ameliorations deja achetees pour ne pas les afficher dans le magasin -let sacado = {} +let sacado = {} // premet de ne pas laisser le joueur acheter html 5 si il n'a pas débloqué html 1.0 etc.. let evolution_tech = 0 @@ -31,28 +31,20 @@ async function remplirMagasinTechnologies(){ let tech = data["technologies"] for(const key in tech){ - // ne va pas s'embeter à proecess si on a deja acheté l'amelioration - if(!sacado[key] && !magasin_tech[key]){ - el = tech[key] - + // ne va pas s'embeter à process si on a deja acheté l'amelioration + // n'afficher l'amélioration que si le score est assez élevé + const t = new Technologie(tech[key]) - - const tr = document.createElement("tr") - const case_nom = document.createElement("td") - case_nom.innerText = el.nom - const case_boost = document.createElement("td") - case_boost.innerText = el.boost - const case_cout = document.createElement("td") - case_cout.innerText = rendreNombreLisible(el.cout) - - const test = document.createElement("td") - const btn_acheter = document.createElement("button") - + if( !sacado[key] && !magasin_tech[key] && (t.borne <= score) && (evolution_tech === parseInt(t.evolution))){ + ouvrirAlerte(tech[key]["narration"]) + + // met à jour le contenu du magasin + // pour ne pas re-afficher cette ligne et éviter un clignotement + magasin_tech[key] = true - let t = new Technologie(el) /* fonction qui va s'activer lorsqu'on achète l'objet*/ - btn_acheter.addEventListener("click", (event) =>{ + t.callbackAchat = (event) =>{ // ne laisse acheter que si on a l'argent @@ -84,7 +76,7 @@ async function remplirMagasinTechnologies(){ // augmentation du boost d'incrément ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!") - if(t.props.evolution == 0){ + if(t.evolution == 0){ boost += t.boost -1 // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :) }else{ @@ -95,32 +87,12 @@ async function remplirMagasinTechnologies(){ // PAS ASSEZ RICHE !!!!! ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!") } - - - }) - - btn_acheter.innerText = "Acheter" - - // n'afficher l'amélioration que si le score est assez élevé - if((t.props.borne <= score) && (evolution_tech === parseInt(t.props.evolution))){ - ouvrirAlerte(tech[key]["narration"]) - // met à jour le contenu du magasin - // pour ne pas re-afficher cette ligne et éviter un clignotement - magasin_tech[key] = true - - test.appendChild(btn_acheter) - - - tr.appendChild(case_nom) - tr.appendChild(case_boost) - tr.appendChild(case_cout) - tr.appendChild(test) - - table.appendChild(tr) } + // affiche dans le tableau la ligne générée, prend en compte le callback d'achat + const tr = t.genererLigneTableau() + table.appendChild(tr) } - } } @@ -138,46 +110,22 @@ async function remplirMagasinCollegues(){ let collegues = data["collegues"] for(const key in collegues){ + const collegue = new Collegue(collegues[key],key) + // ne va pas s'embeter à process si déjà présent dans le magasin // ou si le score d'évolution n'est pas assez élevé - const el = collegues[key] - if(!magasin_coll[key] && evolution_coll === parseInt(el.evolution)){ - - - - const tr = document.createElement("tr") - const case_nom = document.createElement("td") - case_nom.innerText = el.nom - const case_boost = document.createElement("td") - case_boost.innerText = el.revenu_passif - const case_cout = document.createElement("td") - case_cout.innerText = rendreNombreLisible(el.cout) - case_cout.id = "case_cout_"+key - - // case contenant un lien vers la page wikipédia du personnage - const case_wiki = document.createElement("td") - let a = document.createElement("a") - a.href = el.wikipedia - a.innerText = el.nom - case_wiki.appendChild(a) - - - const action = document.createElement("td") - const btn_acheter = document.createElement("button") - - - let c = new Collegue(el) + if(!magasin_coll[key] && evolution_coll === parseInt(collegue.evolution)){ /* fonction qui va s'activer lorsqu'on achète l'objet*/ - btn_acheter.addEventListener("click", (event) =>{ + collegue.callbackAchat = (event) => { // calcul du cout en fonction du nombre de collegue de ce type déjà acheté let exp = 0 if(key in sacado){ exp = sacado[key] } - const cout_reel = Number(el.cout * (1.1)**exp).toFixed(1) + const cout_reel = Number(collegue.cout * (1.1)**exp).toFixed(1) // ne laisse acheter que si on a l'argent if(score >= cout_reel){ @@ -187,7 +135,7 @@ async function remplirMagasinCollegues(){ //lancer l'animation d'achat avec l'image correspondante let image = document.getElementById("image_collegue_animee") - image.setAttribute("src",c.props.nom_fichier_image) + image.setAttribute("src",collegue.nom_fichier_image) // affiche l'image image.removeAttribute("hidden") @@ -201,8 +149,8 @@ async function remplirMagasinCollegues(){ // narration comme c'est la première fois qu'on achète - ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"]) - ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!") + ouvrirAlerte("Vous avez débloqué "+ collegue.nom+" !!"+collegues[key]["narration"]) + ouvrirAlerte("Incrémentation de la rentabilité passive de "+collegue.revenu_passif+" points !!") }, (4000)); @@ -218,17 +166,19 @@ async function remplirMagasinCollegues(){ } // augmentation du boost d'incrément - revenu_passif += c.revenu_passif + revenu_passif += collegue.revenu_passif - // finalement, on lui débit son compte de points tel un vendeur de voitures - console.log(cout_reel) - console.log(score) - console.log(score-cout_reel) + // finalement, on lui débite son compte de points tel un vendeur de voitures score = score - cout_reel majAffichageScore() + let exp = 0 + if(key in sacado){ + exp = sacado[key] + } + // on change le futur cout dans le tableau - document.getElementById("case_cout_"+key).innerText = rendreNombreLisible(Number(c.cout * (1.1)**sacado[key]).toFixed(1)) + document.getElementById("case_cout_"+key).textContent = rendreNombreLisible(Number(collegue.cout * (1.1)**exp).toFixed(1)) }else{ @@ -237,23 +187,16 @@ async function remplirMagasinCollegues(){ } - }) + } - btn_acheter.innerText = "Acheter" // met à jour le contenu du magasin // pour ne pas re-afficher cette ligne et éviter un clignotement magasin_coll[key] = true - action.appendChild(btn_acheter) - - tr.appendChild(case_nom) - tr.appendChild(case_boost) - tr.appendChild(case_cout) - tr.appendChild(case_wiki) - tr.appendChild(action) - + // affiche dans le tableau la ligne générée, prend en compte le callback d'achat + const tr = collegue.genererLigneTableau() table.appendChild(tr) } @@ -301,9 +244,11 @@ function leBoostDuProf(){ } -let rickroll = document.getElementById("never") -let close_roll = document.getElementById("close_rick") + function rickRoll(){ + const rickroll = document.getElementById("never") + const close_roll = document.getElementById("close_rick") + // affichage de la video rickroll.setAttribute("src","./img/never_gonna_give_you_up.mp4") rickroll.setAttribute("type","video/mp4") diff --git a/js/technologie.js b/js/technologie.js index 054f1e5..a4f44a8 100644 --- a/js/technologie.js +++ b/js/technologie.js @@ -4,11 +4,42 @@ class Technologie{ this.cout = this.props.cout this.boost = this.props.boost this.nom = this.props.nom + this.css_id = this.props.css_id + this.evolution = this.props.evolution + this.borne = this.props.borne + this.callbackAchat = {} + } appliquerAmeliorationStyle(){ document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css") - document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id) + document.getElementById("link-css").setAttribute("href","css/"+this.css_id) + } + + genererLigneTableau(){ + const tr = document.createElement("tr") + const case_nom = document.createElement("td") + case_nom.textContent = this.nom + const case_boost = document.createElement("td") + case_boost.textContent = this.boost + const case_cout = document.createElement("td") + case_cout.textContent = rendreNombreLisible(this.cout) + + const case_action = document.createElement("td") + const btn_acheter = document.createElement("button") + btn_acheter.textContent = "Acheter" + btn_acheter.addEventListener("click",this.callbackAchat) + + case_action.appendChild(btn_acheter) + + + tr.appendChild(case_nom) + tr.appendChild(case_boost) + tr.appendChild(case_cout) + tr.appendChild(case_action) + + + return tr }