Merge branch 'main' of https://git.etud.insa-toulouse.fr/mougnibas/projet-clicodrome

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
-            })
 
-        })
+        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,50 +1,86 @@
-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")
+    const table= document.getElementById("table_magasin_body") 
-    
 
-    fetch("../bdd/arbre.json").then((data)=>{
+    let data = await fetch("../bdd/arbre.json")
-        data.json().then((data)=>{
+    data = await data.json() 
-            console.log(data)
-            let tech = data["technologies"]
 
-            Object.keys(tech).forEach(key => {
+    let tech = data["technologies"]
-                el = tech[key]
+
-                const tr = document.createElement("tr")
+    for(const key in tech){
-                const nom = document.createElement("td")
+        console.log(sacado)
-                nom.innerText = el.nom
+        console.log(magasin)
-                const boost = document.createElement("td")
+        // ne va pas s'embeter à proecess si on a deja acheté l'amelioration
-                boost.innerText = el.boost
+        if(!sacado[key] && !magasin[key]){
-                const cout = document.createElement("td")
+            el = tech[key]
-                cout.innerText = el.cout
             
-                const test  = document.createElement("td")
+            
-                const btn_acheter = document.createElement("button")
+            const tr = document.createElement("tr")
-                let tmp = key
+            const nom = document.createElement("td")
-                btn_acheter.addEventListener("click", (event) =>{
+            nom.innerText = el.nom
-                    console.log("clé : ",tmp)
+            const boost = document.createElement("td")
-                    let t = new Technologie(tmp)
+            boost.innerText = el.boost
-                    t.chargerDepuisBdd(true)
+            const cout = document.createElement("td")
-                })
+            cout.innerText = el.cout
+        
+            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
+    
+    
+            let t = new Technologie(tmp)
+            // 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
 
-                btn_acheter.innerText = "Acheter"
+                // 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)
-
+    
-
+    
                 tr.appendChild(nom)
                 tr.appendChild(boost)
                 tr.appendChild(cout)
                 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){
+        if (style) {
-                    this.appliquerAmeliorationStyle()
+            this.appliquerAmeliorationStyle();
-                }
+        }
-            })
-
-
-
-        })
     }
 
     appliquerAmeliorationStyle(){