test

js/alerte.js

@@ -0,0 +1,52 @@
+// prévention de l'empilement d'alertes, qui entrainerait la suppression de tous les messages sauf le dernier
+// 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)
+
+    // 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) {
+
+    // on signale une alerte en train d'être visionnée
+    flag = true
+
+
+    // on prend les elements
+    let modal = document.getElementById('alerte_jolie');
+
+    var messageElement = document.getElementById('message_alerte_jolie');
+    
+    // Mettre le message
+    messageElement.textContent = message;
+    
+    // et on affiche en changeant la propriété css
+    modal.style.display = "block";
+}
+
+
+// Fonction pour fermer l'alerte
+function fermerAlerte() {
+
+    var modal = document.getElementById('alerte_jolie');
+    
+    // et on cache en changeant la propriété css
+    modal.style.display = "none";
+
+    // enlève notre élément de la file
+    file_alertes.shift()
+
+    // affiche récursivement les autres alertes en attentes
+    if(file_alertes.length > 0){
+        afficherAlerte(file_alertes[0])
+    }
+
+}

js/collegue.js

@@ -0,0 +1,10 @@
+class Collegue{
+    constructor(json) {
+        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
+    }
+
+}

js/element.js

@@ -0,0 +1,32 @@
+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)
+
+    }
+
+}

js/intro.js

@@ -0,0 +1,27 @@
+document.addEventListener("click",firstClick)
+
+
+function firstClick(){
+    let position_button=document.getElementById("div_button")
+    let position_score=document.getElementById("div_score")
+
+    const score_aff = document.createElement("output")
+    score_aff.innerText="SCORE"
+    score_aff.id = "score_affichage"
+
+    const click = document.createElement("button")
+    click.innerText="click"
+
+    position_score.appendChild(score_aff)
+    position_button.appendChild(click)
+
+    click.addEventListener("click",scoreCount)
+
+
+    document.removeEventListener("click",firstClick)
+
+    augmenterScorePassivement()
+
+}
+
+

js/main.js

@@ -0,0 +1,391 @@
+let score = 0
+
+// stoque les ameliorations deja disponibles dans le magasin pour ne pas le faire clignoter
+let magasin_tech = {}
+
+let magasin_coll = {}
+
+// stoquer les ameliorations deja achetees pour ne pas les afficher dans le magasin
+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
+let evolution_coll = 0
+
+// variable qui permet d'augmenter la taille de l'incrément du score pour chaque clic, en fonction de la technlologie déloquée
+let boost = 1
+
+let revenu_passif = 0
+
+
+
+async function remplirMagasinTechnologies(){
+
+
+    const table= document.getElementById("table_magasin_technologies_body") 
+
+    let data = await fetch("../bdd/arbre.json")
+    data = await data.json() 
+
+
+    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]
+            
+
+            
+            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")
+                
+    
+            let t = new Technologie(el)
+    
+            /* fonction qui va s'activer lorsqu'on achète l'objet*/
+            btn_acheter.addEventListener("click", (event) =>{
+
+
+                // ne laisse acheter que si on a l'argent
+                if(score >= t.cout){
+
+
+                    // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
+                    evolution_tech += 1
+                    
+                    // 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_tech = {}
+                    remplirMagasinTechnologies()
+
+
+                    // finalement, on lui débit son compte de points tel un vendeur de voitures
+                    score -= t.cout
+                    majAffichageScore()
+
+                    // augmentation du boost d'incrément
+                    ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!")
+
+                    if(t.props.evolution == 0){
+                        boost += t.boost -1    // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :)        
+
+                    }else{
+                        boost += t.boost
+                    }
+
+                }else{
+                    // 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)
+            }
+        }
+        
+
+    }
+
+}
+
+
+async function remplirMagasinCollegues(){
+
+
+    const table= document.getElementById("table_magasin_collegues_body") 
+
+    let data = await fetch("../bdd/arbre.json")
+    data = await data.json() 
+
+
+    let collegues = data["collegues"]
+
+    for(const key in collegues){
+        // ne va pas s'embeter à proecess 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)
+
+    
+            /* fonction qui va s'activer lorsqu'on achète l'objet*/
+            btn_acheter.addEventListener("click", (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)
+                
+                // ne laisse acheter que si on a l'argent
+                if(score >= cout_reel){
+                
+
+                    if(!(key in sacado)){
+
+                        //lancer l'animation d'achat avec l'image correspondante
+                        let image = document.getElementById("image-collegue-animee")
+                        image.setAttribute("src",c.props.nom_fichier_image)
+                        // affiche l'image
+                        image.removeAttribute("hidden")
+
+                        // PLUIE DE CONFETTTIIII
+                        genererConfetti()
+
+
+                        // recache l'image après 6 secondes et lance la narration
+                        setTimeout(() => {
+                            image.setAttribute("hidden",true)
+
+                            // 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 !!")
+                            
+                        }, (4000));
+
+                        // on ajoute l'amélioration dans l'abre des compétences débloquées
+                        sacado[key] = 1   
+
+                        // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
+                        evolution_coll += 1
+                    
+                    }else{
+                        // on incrémente la qtt d'objet dans son sacado
+                        sacado[key] += 1
+                    }
+
+                    // augmentation du boost d'incrément
+                    revenu_passif += c.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)
+                    score = score - cout_reel
+                    majAffichageScore()
+
+                    // on change le futur cout dans le tableau
+                    document.getElementById("case_cout_"+key).innerText = Number(c.cout * (1.1)**sacado[key]).toFixed(1)
+
+
+                }else{
+                    // PAS ASSEZ RICHE !!!!!
+                    ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
+                }
+                
+                
+            })
+    
+            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)
+            
+            table.appendChild(tr)
+            
+        }
+        
+
+    }
+
+}
+
+function majAffichageScore(){
+    const score_aff = document.getElementById("score_affichage")
+    score = Number((score).toFixed(1))
+    score_aff.textContent ="SCORE  : " + rendreNombreLisible(score)
+
+}
+
+// fonction appelée à chaque clic de souris
+function scoreCount(){
+    score += boost
+    majAffichageScore()
+    // check refresh la table magasin pour afficher une amélioration si un palier est atteint
+    remplirMagasinTechnologies()
+    remplirMagasinCollegues()
+}
+
+// revenu passif à chaque seconde
+
+function augmenterScorePassivement(){
+    score += revenu_passif
+    majAffichageScore()
+    setTimeout(() => {
+        augmenterScorePassivement()
+    }, 1000)    
+}
+
+function leBoostDuProf(){
+    score += 1000000000
+    majAffichageScore()
+}
+
+
+// fonction qui va creer plein d'elements confetti
+function genererConfetti() {
+
+    const container = document.getElementById("confetti-container")
+
+    // couleurs des confetti à generer
+    const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFD633", "#A833FF", "#33FFF6"]
+    
+    const nb_confetti = 150 // nombre de confettis
+
+    for (let i = 0; i < nb_confetti; i++) {
+
+        //créer un nouvel element de classe confetti
+        const confetti = document.createElement("div")
+        confetti.classList.add("confetti")
+
+        //prendre une couleur aléatoire dans la liste
+        confetti.style.setProperty("background-color", colors[Math.floor(Math.random() * colors.length)])
+        
+        // positionner le confetti à un endroit random horizontalement
+        confetti.style.left = Math.random() * 100 + "vw"
+
+        // mettre une fraction de 5s pour faire un temps à l'écran assez naturel
+        const longevite = Math.random() * 5
+        confetti.style.animationDelay = longevite+"s"
+
+        // faire des confettis qui vont plus vite que d'autres
+        confetti.style.animationDuration = 4 + Math.random() * 2 + "s" 
+
+        // ajouter le confetti au container
+        container.appendChild(confetti)
+
+    }
+
+    setTimeout(() => {
+        // vide le conteneur à la fin pour ne pas surcharger la page d'elements
+        container.innerHTML = ""
+    }, 10000);
+
+}
+
+
+function rendreNombreLisible(n){
+    let ret = n
+
+    if(n>=1000000){
+        const quantifiers = [
+            "Million",         // 10^6
+            "Milliard",        // 10^9
+            "Billion",         // 10^12
+            "Billiard",        // 10^15
+            "Trillion",        // 10^18
+            "Trilliard",       // 10^21
+            "Quadrillion",     // 10^24
+            "Quadrilliard",    // 10^27
+            "Quintillion",     // 10^30
+            "Quintilliard",    // 10^33
+            "Sextillion",      // 10^36
+            "Sextilliard",     // 10^39
+            "Septillion",      // 10^42
+            "Septilliard",     // 10^45
+            "Octillion",       // 10^48
+            "Octilliard",      // 10^51
+            "Nonillion",       // 10^54
+            "Nonilliard",      // 10^57
+            "Décillion",       // 10^60
+            "Décilliard",      // 10^63
+            "Undécillion",     // 10^66
+        ];
+        // on enlève la virgule et la partie decimal pour ne pas 
+        // fausser la longueur du string
+        const rpz_string = Number(n).toFixed(0)+"" 
+        // les qualificatifs étant par puissance de mille,
+        // compte la puissance de 10 mais divisée par 3
+        const puiss_mil = Math.floor((rpz_string.length-1)/3)
+
+        // ici, on ne garde que jusqu'à la centaine de l'unité choisie
+        // et on le met dans la variable de retour
+        ret = Number(n/(10**(3*puiss_mil))).toFixed(2)
+
+        // enfin, on rajoute le quantificateur, avec un 's' si on est pas à l'unité
+        let q = " "+ quantifiers[puiss_mil -2]
+        if(ret != 1){
+            q +='s'
+        }
+
+        ret += q
+
+    }
+
+    return ret
+    
+
+}

js/technologie.js

@@ -0,0 +1,15 @@
+class Technologie{
+    constructor(json) {
+        this.props = json
+        this.cout = this.props.cout
+        this.boost = this.props.boost
+        this.nom = this.props.nom
+    }
+
+    appliquerAmeliorationStyle(){
+        document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css")
+        document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id)
+    }
+
+
+}