diff --git a/img/330px-Margaret_Hamilton_-_restoration.jpg b/img/330px-Margaret_Hamilton_-_restoration.jpg new file mode 100644 index 0000000..ca87bac Binary files /dev/null and b/img/330px-Margaret_Hamilton_-_restoration.jpg differ diff --git a/img/390px-Commodore_Grace_M._Hopper,_USN_(covered).jpg b/img/390px-Commodore_Grace_M._Hopper,_USN_(covered).jpg new file mode 100644 index 0000000..e974c44 Binary files /dev/null and b/img/390px-Commodore_Grace_M._Hopper,_USN_(covered).jpg differ diff --git a/img/390px-Dennis_Ritchie_2011.jpg b/img/390px-Dennis_Ritchie_2011.jpg new file mode 100644 index 0000000..008a847 Binary files /dev/null and b/img/390px-Dennis_Ritchie_2011.jpg differ diff --git a/img/390px-Tim_Berners-Lee_closeup.jpg b/img/390px-Tim_Berners-Lee_closeup.jpg new file mode 100644 index 0000000..e7be579 Binary files /dev/null and b/img/390px-Tim_Berners-Lee_closeup.jpg differ diff --git a/img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png b/img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png new file mode 100644 index 0000000..54f9877 Binary files /dev/null and b/img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png differ diff --git a/img/Alan_Turing_(1912-1954)_in_1936_at_Princeton_University.jpg b/img/Alan_Turing_(1912-1954)_in_1936_at_Princeton_University.jpg new file mode 100644 index 0000000..afa4889 Binary files /dev/null and b/img/Alan_Turing_(1912-1954)_in_1936_at_Princeton_University.jpg differ diff --git a/img/ClaudeShannon_MFO3807.jpg b/img/ClaudeShannon_MFO3807.jpg new file mode 100644 index 0000000..66ce9cc Binary files /dev/null and b/img/ClaudeShannon_MFO3807.jpg differ diff --git a/img/Frances_Bilas_Spence_feeding_punch_cards_into_ENIAC,_Feb_1946.png b/img/Frances_Bilas_Spence_feeding_punch_cards_into_ENIAC,_Feb_1946.png new file mode 100644 index 0000000..b01ae12 Binary files /dev/null and b/img/Frances_Bilas_Spence_feeding_punch_cards_into_ENIAC,_Feb_1946.png differ diff --git a/img/GIF-CHATON.gif b/img/GIF-CHATON.gif new file mode 100644 index 0000000..4e7ebbb Binary files /dev/null and b/img/GIF-CHATON.gif differ diff --git a/img/George_Boole_color.jpg b/img/George_Boole_color.jpg new file mode 100644 index 0000000..8de96c7 Binary files /dev/null and b/img/George_Boole_color.jpg differ diff --git a/img/LinuxCon_Europe_Linus_Torvalds_03_(cropped).jpg b/img/LinuxCon_Europe_Linus_Torvalds_03_(cropped).jpg new file mode 100644 index 0000000..a337233 Binary files /dev/null and b/img/LinuxCon_Europe_Linus_Torvalds_03_(cropped).jpg differ diff --git a/img/codevert.jpg b/img/codevert.jpg new file mode 100644 index 0000000..756996a Binary files /dev/null and b/img/codevert.jpg differ diff --git a/img/codevertmatrix.gif b/img/codevertmatrix.gif new file mode 100644 index 0000000..1fea26a Binary files /dev/null and b/img/codevertmatrix.gif differ diff --git a/img/matrix.gif b/img/matrix.gif new file mode 100644 index 0000000..6120fd6 Binary files /dev/null and b/img/matrix.gif differ diff --git a/img/miaou1.jpeg b/img/miaou1.jpeg new file mode 100644 index 0000000..e14c29d Binary files /dev/null and b/img/miaou1.jpeg differ diff --git a/img/tecktonik.jpeg b/img/tecktonik.jpeg new file mode 100644 index 0000000..86a7d3f Binary files /dev/null and b/img/tecktonik.jpeg differ diff --git a/js/alerte.js b/js/alerte.js new file mode 100644 index 0000000..7d5076a --- /dev/null +++ b/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]) + } + +} diff --git a/js/collegue.js b/js/collegue.js new file mode 100644 index 0000000..0a22b81 --- /dev/null +++ b/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 + } + +} \ No newline at end of file diff --git a/js/element.js b/js/element.js new file mode 100644 index 0000000..44c0caa --- /dev/null +++ b/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) + + } + +} \ No newline at end of file diff --git a/js/intro.js b/js/intro.js new file mode 100644 index 0000000..5002e9b --- /dev/null +++ b/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() + +} + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..57b8df8 --- /dev/null +++ b/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 + + +} \ No newline at end of file diff --git a/js/technologie.js b/js/technologie.js new file mode 100644 index 0000000..054f1e5 --- /dev/null +++ b/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) + } + + +} \ No newline at end of file