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

bdd/arbre.json

@@ -139,52 +139,82 @@
     "ada_lovelace": {
       "nom": "Ada Lovelace",
       "cout": 15,
-        "revenu_passif": 0.1
+      "revenu_passif": 0.1,
+      "evolution": 0,
+      "narration": "Ada Lovelace est considérée comme la première programmeuse de l'histoire. Elle a collaboré avec Charles Babbage sur la machine analytique et a écrit des notes qui contiennent l'algorithme destiné à être exécuté par la machine, un concept essentiel à la programmation moderne.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Ada_Lovelace"
     },
     "george_boole": {
       "nom": "George Boole",
       "cout": 100,
-        "revenu_passif": 1
+      "revenu_passif": 1,
+      "evolution": 0,
+      "narration": "George Boole était un mathématicien et logicien britannique, connu pour avoir formulé les bases de l'algèbre logique, un outil fondamental en informatique et en intelligence artificielle.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/George_Boole"
     },
     "grace_hopper": {
       "nom": "Grace Hopper",
       "cout": 1100,
-        "revenu_passif": 8
+      "revenu_passif": 8,
+      "evolution": 0,
+      "narration": "Grace Hopper était une informaticienne et contre-amiral de la marine américaine. Elle est connue pour ses travaux sur le développement du premier compilateur et pour avoir popularisé le terme 'bug' pour décrire un dysfonctionnement dans les programmes.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Grace_Hopper"
     },
     "jean_bartik": {
       "nom": "Jean Bartik",
       "cout": 12000,
-        "revenu_passif": 47
+      "revenu_passif": 47,
+      "evolution": 1,
+      "narration": "Jean Bartik faisait partie de l'équipe originale des programmeuses d'ENIAC, l'un des premiers ordinateurs électroniques. Elle a joué un rôle crucial dans la programmation de cet appareil.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Jean_Bartik"
     },
     "claude_shannon": {
       "nom": "Claude Shannon",
       "cout": 130000,
-        "revenu_passif": 260
+      "revenu_passif": 260,
+      "evolution": 1,
+      "narration": "Claude Shannon est considéré comme le père de la théorie de l'information. Ses travaux ont révolutionné les domaines de la communication et de l'informatique.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Claude_Shanon"
     },
     "alan_turing": {
       "nom": "Alan Turing",
       "cout": 1400000,
-        "revenu_passif": 1400
+      "revenu_passif": 1400,
+      "evolution": 1,
+      "narration": "Alan Turing était un mathématicien et cryptanalyste britannique, célèbre pour son travail sur la machine de Turing, une base fondamentale pour la conception des ordinateurs modernes.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Alan_Turing"
     },
     "maragaret_hamilton": {
       "nom": "Margaret Hamilton",
       "cout": 20000000,
-        "revenu_passif": 7800
+      "revenu_passif": 7800,
+      "evolution": 2,
+      "narration": "Margaret Hamilton est une informaticienne qui a dirigé l'équipe de développement logiciel pour la mission Apollo. Elle est connue pour avoir écrit le code qui a permis de poser l'homme sur la Lune.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Margaret_Hamilton"
     },
     "tim_berners_lee": {
       "nom": "Tim Berner-Lee",
       "cout": 100000000,
-        "revenu_passif": 44000
+      "revenu_passif": 44000,
+      "evolution": 2,
+      "narration": "Tim Berners-Lee est l'inventeur du World Wide Web. Son travail a permis de rendre Internet accessible et compréhensible pour le grand public.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Tim_Berners-Lee"
     },
     "dennis_ritchie": {
       "nom": "Dennis Ritchie",
       "cout": 500000000,
-        "revenu_passif": 260000
+      "revenu_passif": 260000,
+      "evolution": 2,
+      "narration": "Dennis Ritchie était un informaticien américain, co-créateur du langage de programmation C et du système d'exploitation UNIX, qui sont devenus des fondations de l'informatique moderne.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Dennis_Ritchie"
     },
     "linus_torvald": {
       "nom": "Linus Torvald",
       "cout": 1000000000,
-        "revenu_passif": 1600000
+      "revenu_passif": 1600000,
+      "evolution": 3,
+      "narration": "Linus Torvalds est le créateur de Linux, un noyau de système d'exploitation open-source qui est devenu la base de nombreuses distributions utilisées dans des serveurs, des ordinateurs personnels et des appareils mobiles.",
+      "wikipedia": "https://fr.wikipedia.org/wiki/Linus_Torvalds"
     }
   }
 }

css/t2.css

@@ -53,8 +53,8 @@ td, th {
 div.ad{
     visibility: visible;
     display: block !important;
-    float: right;
+    
-    width: 162px;
+    width: 150px;
     padding: 12px;
     margin-top: 10px;
     margin-bottom: 10px;

css/t4.css

@@ -50,6 +50,11 @@ th {
     color: #ddd;
     font-size: 20px;
 }
+td {
+    padding: 10px;
+    text-align: left;
+    border: 1px solid #ddd;
+}
 
 table.table_magasin{
     width: 150px;

css/t5.css

@@ -2,7 +2,7 @@
 body {
     font-family: 'Helvetica Neue', sans-serif;
     background-color: #fafafa;
-    color: #2c3e50;
+    color: #ddd;
     margin: 0;
     padding: 50px;
     background-image: url(../img/codevertmatrix.gif);
@@ -14,11 +14,17 @@ h1, h2, h3 {
     margin-bottom: 25px;
 }
 
+output {
+    font-size: 50px;
+    color: #ddd;
+    background-color: #000000;
+}
+
 button {
     padding: 15px 30px;
-    border: 2px solid #e74c3c;
+    border: 2px solid #33ff00;
     background-color: #ecf0f1;
-    color: #e74c3c;
+    color: #33ff00;
     cursor: pointer;
     border-radius: 25px;
     font-size: 16px;
@@ -26,7 +32,7 @@ button {
 }
 
 button:hover {
-    background-color: #e74c3c;
+    background-color: #33ff00;
     color: white;
 }
 
@@ -55,3 +61,10 @@ table.table_magasin{
     margin-bottom: 10px;
 
 }
+a{
+    color: #33ff00;
+
+}
+a.hoover{
+    color: #ffffff;
+}

index.html

@@ -7,28 +7,22 @@
     <script> alert("click")</script>
     <link rel="stylesheet" href="" id="link-css">
     <link rel="stylesheet" href="./css/alerte.css">
-</head>Technologies
+</head>
 <body>
-    <script src="./js/intro.js" deref></script>
+    <script src="./js/intro.js" defer></script>
     <script src="./js/element.js"></script>
     <script src="./js/technologie.js"></script>
-    <script src="./js/main.js"></script>
+    <script src="./js/main.js" defer></script>
     <script src="./js/alerte.js"></script>
     <script src="./js/collegue.js"></script>
-    <div id="div_button_score" style="align-items: center;">
+
+    <div id="div_score" style=" display: flex; justify-content: center;">
 
     </div>
-    <table style="margin-top:10px ;">
-        <thead>
-            <th>nom</th>
-            <th>boost</th>
-        </thead>
-        <tbody id="table_magasin_collegues_body">
-            
-        </tbody>
-    </table>
 
+    <div id="div_button" style=" display: flex; justify-content: center;">
 
+    </div>
 
     <table id="table_magasin_technologies" class="table_magasin">
         <thead id="table_magasin_technologies_head">
@@ -40,6 +34,22 @@
         </tbody>
     </table>
 
+    <table style="margin-top:10px ;">
+        <thead>
+            <th>nom</th>
+            <th>revenu passif</th>
+            <th>cout</th>
+            <th>lien</th>
+        </thead>
+        <tbody id="table_magasin_collegues_body">
+            
+        </tbody>
+    </table>
+
+
+
+
+
     <!-- Custom Alert Modal -->
     <div id="alerte_jolie" class="modal">
         <div class="modal-content">
@@ -51,12 +61,12 @@
     <div class="ad" style="display: none;">
         
         <img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
+        <div></div>
         <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
     </div>
 
 </body>
 <footer>
-
     <p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
 </footer>
 </html>

js/collegue.js

@@ -6,9 +6,11 @@ class Collegue{
     async chargerDepuisBdd() {
         let data = await fetch("../bdd/arbre.json")
         data = await data.json()
-        this.props = data["collegues"][this.nom];
+        this.props = data["collegues"][this.nom]
-        this.cout = this.props.cout;
+        this.nom = this.props.nom
-        this.boost = this.props.boost;
+        this.cout = this.props.cout
+        this.boost = this.props.boost
+        this.revenu_passif = this.props.revenu_passif
     }
 
     afficherAnimationDebloquage(){

js/intro.js

@@ -1,38 +1,27 @@
-let score = 0
-
 document.addEventListener("click",firstClick)
 
 
 function firstClick(){
-    let position_button=document.getElementById("div_button_score")
+    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 saut=document.createElement("div")
-
     const click = document.createElement("button")
     click.innerText="click"
 
-    position_button.appendChild(score_aff)
+    position_score.appendChild(score_aff)
-    saut.appendChild(click)
+    position_button.appendChild(click)
-    position_button.appendChild(saut)
 
     click.addEventListener("click",scoreCount)
 
 
     document.removeEventListener("click",firstClick)
 
+    augmenterScorePassivement()
+
 }
 
-function scoreCount(){
-    const score_aff = document.getElementById("score_affichage")
-    score += boost
-    score_aff.innerText="SCORE  : " + score
 
-    // check refresh la table magasin pour afficher une amélioration si un palier est atteint
-    remplirMagasinTechnologies()
-}

js/main.js

@@ -1,15 +1,24 @@
+let score = 0
+
 // stoque les ameliorations deja disponibles dans le magasin pour ne pas le faire clignoter
-let magasin = {}
+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 = 0
+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(){
 
 
@@ -23,7 +32,7 @@ async function remplirMagasinTechnologies(){
 
     for(const key in tech){
         // ne va pas s'embeter à proecess si on a deja acheté l'amelioration
-        if(!sacado[key] && !magasin[key]){
+        if(!sacado[key] && !magasin_tech[key]){
             el = tech[key]
             
 
@@ -65,8 +74,8 @@ async function remplirMagasinTechnologies(){
                     // on refresh le magasin pour enlever l'amelioration de la liste
                     // vide le ventre du magasin
                     table.innerHTML = ""
-                    magasin = {}
+                    magasin_tech = {}
-                    remplirMagasin()
+                    remplirMagasinTechnologies()
 
                     // finalement, on lui débit son compte de points tel un vendeur de voitures
                     score -= t.cout
@@ -84,10 +93,10 @@ async function remplirMagasinTechnologies(){
                     }
 
                     // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
-                    evolution += 1
+                    evolution_tech += 1
                 }else{
                     // PAS ASSEZ RICHE !!!!!
-                    alert("PAS ASSEZ RICHE !!!!!!!!!!!!")
+                    ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
                 }
                 
                 
@@ -96,11 +105,11 @@ async function remplirMagasinTechnologies(){
             btn_acheter.innerText = "Acheter"
             
             // n'afficher l'amélioration que si le score est assez élevé
-            if((t.props.borne <= score) && (evolution === parseInt(t.props.evolution))){
+            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[key] = true
+                magasin_tech[key] = true
 
                 test.appendChild(btn_acheter)
     
@@ -129,24 +138,38 @@ async function remplirMagasinCollegues(){
     data = await data.json() 
 
 
-    let tech = data["collegues"]
+    let collegues = data["collegues"]
 
-    for(const key in tech){
+    for(const key in collegues){
         // ne va pas s'embeter à proecess si on a deja acheté l'amelioration
-        if(!sacado[key] && !magasin[key]){
+        if(!sacado[key] && !magasin_coll[key]){
-            el = tech[key]
+            el = collegues[key]
 
+            // calcul du cout en fonction du nombre de collegue de ce type déjà acheté
+
+            if(key in sacado){
+                el.cout = Number(el.cout * (1.1)**sacado[key]).toFixed(1)
+            }
             
 
             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
+            case_boost.innerText = el.revenu_passif
             const case_cout = document.createElement("td")
             case_cout.innerText = el.cout
+            case_cout.id = "case_cout_"+key
 
-            const test  = document.createElement("td")
+            // 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")
             
             // stoquage temporaire de la clé JSON correspondant à la technologie à débloquer
@@ -154,50 +177,48 @@ async function remplirMagasinCollegues(){
             let tmp = key
     
     
-            let t = new collegues(tmp)
+            let c = new Collegue(tmp)
             // charge les propriétés de la technologie depuis la bdd sans mettre à jour le style directement après
-            await t.chargerDepuisBdd(false)
+            await c.chargerDepuisBdd()
     
             /* 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){
+                if(score >= c.cout){
-                    // 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()
 
                     // finalement, on lui débit son compte de points tel un vendeur de voitures
-                    score -= t.cout
+                    score -= c.cout
                     const score_aff = document.getElementById("score_affichage")
                     score_aff.innerText="SCORE  : " + score
 
-                    // augmentation du boost d'incrément
+                    // narration seulement si c'est la première fois qu'on achète
-                    ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!")
+                    if(!(key in sacado)){
-
+                        ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
-                    if(t.props.evolution == 0){
+                        ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!")
-                        boost += t.boost -1    // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :)        
+                        // et on ajoute l'amélioration dans l'abre des compétences débloquées
-
+                        sacado[key] = 1
                     }else{
-                        boost += t.boost
+                        // on incrémente la qtt d'objet dans son sacado
+                        sacado[key] += 1
                     }
 
+                    // on change le futur cout dans le tableau
+                    document.getElementById("case_cout_"+key).innerText = Number(c.cout * (1.1)**sacado[key]).toFixed(1)
+
+
+                    // augmentation du boost d'incrément
+                    revenu_passif += c.revenu_passif
+
                     // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
-                    evolution += 1
+                    evolution_coll += 1
                 }else{
                     // PAS ASSEZ RICHE !!!!!
-                    alert("PAS ASSEZ RICHE !!!!!!!!!!!!")
+                    ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
                 }
                 
                 
@@ -206,19 +227,19 @@ async function remplirMagasinCollegues(){
             btn_acheter.innerText = "Acheter"
             
             // n'afficher l'amélioration que si le score est assez élevé
-            if((t.props.borne <= score) && (evolution === parseInt(t.props.evolution))){
+            if(evolution_coll === parseInt(c.props.evolution)){
-                ouvrirAlerte(tech[key]["narration"])
                 // met à jour le contenu du magasin
                 // pour ne pas re-afficher cette ligne et éviter un clignotement
-                magasin[key] = true
+                magasin_coll[key] = true
 
-                test.appendChild(btn_acheter)
+                action.appendChild(btn_acheter)
     
     
                 tr.appendChild(case_nom)
                 tr.appendChild(case_boost)
                 tr.appendChild(case_cout)
-                tr.appendChild(test)
+                tr.appendChild(case_wiki)
+                tr.appendChild(action)
                 
                 table.appendChild(tr)
             }
@@ -228,3 +249,29 @@ async function remplirMagasinCollegues(){
     }
 
 }
+
+
+// fonction appelée à chaque clic de souris
+function scoreCount(){
+    const score_aff = document.getElementById("score_affichage")
+    score += boost
+    score_aff.innerText="SCORE  : " + Number(score).toFixed(1)
+
+    // check refresh la table magasin pour afficher une amélioration si un palier est atteint
+    remplirMagasinTechnologies()
+    remplirMagasinCollegues()
+}
+
+// revenu passif à chaque seconde
+
+function augmenterScorePassivement(){
+    const score_aff = document.getElementById("score_affichage")
+    score += revenu_passif
+    console.log("nv score : ",score)
+    score_aff.innerText="SCORE  : " + Number((score).toFixed(1));
+
+    setTimeout(() => {
+        augmenterScorePassivement()
+    }, 1000)    
+}
+