voilà ici on fait des trucs qui fonctionnent

js/element.js

@@ -4,16 +4,14 @@ class Element{
         this.techno = techno
     }
 
-    chargerDepuisBdd(){
+    async chargerDepuisBdd(){
-        fetch("../bdd/arbre.json").then((data)=>{
+        let data = await fetch("../bdd/arbre.json")
-            data.json().then((data)=>{
+        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(){

js/intro.js

@@ -32,4 +32,7 @@ function scoreCount(){
     const score_aff = document.getElementById("score_affichage")
     score += 1
     score_aff.innerText="SCORE  : " + score
+
+    // check refresh la table magasin pour afficher une amélioration si un palier est atteint
+    remplirMagasin()
 }

js/main.js

@@ -1,16 +1,28 @@
-function remplirMagasin(){
+
+// stoque les ameliorations deja disponibles dans le magasin pour ne pas le faire clignoter
+let magasin = {}
+
+// stoquer les ameliorations deja achetees pour ne pas les afficher dans le magasin
+let sacado = {}
+
+async function remplirMagasin(){
 
 
     const table= document.getElementById("table_magasin_body") 
 
+    let data = await fetch("../bdd/arbre.json")
+    data = await data.json() 
 
-    fetch("../bdd/arbre.json").then((data)=>{
-        data.json().then((data)=>{
-            console.log(data)
     let tech = data["technologies"]
 
-            Object.keys(tech).forEach(key => {
+    for(const key in tech){
+        console.log(sacado)
+        console.log(magasin)
+        // ne va pas s'embeter à proecess si on a deja acheté l'amelioration
+        if(!sacado[key] && !magasin[key]){
             el = tech[key]
+            
+            
             const tr = document.createElement("tr")
             const nom = document.createElement("td")
             nom.innerText = el.nom
@@ -21,15 +33,41 @@ function remplirMagasin(){
         
             const test  = document.createElement("td")
             const btn_acheter = document.createElement("button")
+            
+            // stoquage temporaire de la clé JSON correspondant à la technologie à débloquer
+            // pour éviter de référencer key, qui va sauter sur sa valeur finale
             let tmp = key
-                btn_acheter.addEventListener("click", (event) =>{
+    
-                    console.log("clé : ",tmp)
+    
             let t = new Technologie(tmp)
-                    t.chargerDepuisBdd(true)
+            // charge les propriétés de la technologie depuis la bdd sans mettre à jour le style directement après
+            await t.chargerDepuisBdd(false)
+    
+            /* fonction qui va s'activer lorsqu'on achète l'objet*/
+            btn_acheter.addEventListener("click", (event) =>{
+                // on améliore le style de la page :)
+                t.appliquerAmeliorationStyle()
+    
+                // et on ajouter l'amélioration dans l'abre des compétences débloquées
+                sacado[key] = true
+
+                // on refresh le magasin pour enlever l'amelioration de la liste
+                // vide le ventre du magasin
+                table.innerHTML = ""
+                magasin = {}
+                remplirMagasin()
+                
             })
     
             btn_acheter.innerText = "Acheter"
     
+            // n'afficher l'amélioration que si le score est assez élevé
+            if(t.props.borne <= score){
+
+                // met à jour le contenu du magasin
+                // pour ne pas re-afficher cette ligne et éviter un clignotement
+                magasin[key] = true
+
                 test.appendChild(btn_acheter)
     
     
@@ -39,12 +77,10 @@ function remplirMagasin(){
                 tr.appendChild(test)
                 
                 table.appendChild(tr)
-
+            }
-            });
+        }
-        })
-
-    })
-
         
 
     }
+
+}

js/technologie.js

@@ -3,21 +3,16 @@ class Technologie{
         this.nom = nom
     }
 
-    chargerDepuisBdd( style){
+    async chargerDepuisBdd(style) {
-        fetch("../bdd/arbre.json").then((data)=>{
+        let data = await fetch("../bdd/arbre.json")
-            data.json().then((data)=>{
+        data = await data.json()
-                console.log("clé dans technologie :",this.nom)
+        console.log("clé dans technologie :", this.nom);
-                this.props = data["technologies"][this.nom]
+        this.props = data["technologies"][this.nom];
-                this.cout = this.props.cout
+        this.cout = this.props.cout;
-                this.boost = this.props.boost
+        this.boost = this.props.boost;
         if (style) {
-                    this.appliquerAmeliorationStyle()
+            this.appliquerAmeliorationStyle();
         }
-            })
-
-
-
-        })
     }
 
     appliquerAmeliorationStyle(){