mougnibas/projet-clicodrome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Blessing Jibidar 2024-12-10 16:39:21 +01:00
commit 8e2ec9588b
8 changed files with 233 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

134
bdd/arbre.json
View file

@ -134,58 +134,88 @@
"narration": "XHTML 5 vous permet d'aller encore plus loin dans l'interactivité. Grâce à l'introduction des balises HTML5, vous pouvez gérer des éléments multimédia comme des vidéos, des sons, et même des animations interactives avec le JavaScript intégré. Le web devient une plateforme riche et immersive, tout est possible !" "narration": "XHTML 5 vous permet d'aller encore plus loin dans l'interactivité. Grâce à l'introduction des balises HTML5, vous pouvez gérer des éléments multimédia comme des vidéos, des sons, et même des animations interactives avec le JavaScript intégré. Le web devient une plateforme riche et immersive, tout est possible !"
} }
}, },
"collegues": { "collegues": {
"ada_lovelace": { "ada_lovelace": {
"nom": "Ada Lovelace", "nom": "Ada Lovelace",
"cout": 15, "cout": 15,
"revenu_passif": 0.1 "revenu_passif": 0.1,
}, "evolution": 0,
"george_boole": { "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.",
"nom": "George Boole", "wikipedia": "https://fr.wikipedia.org/wiki/Ada_Lovelace"
"cout": 100, },
"revenu_passif": 1 "george_boole": {
}, "nom": "George Boole",
"grace_hopper": { "cout": 100,
"nom": "Grace Hopper", "revenu_passif": 1,
"cout": 1100, "evolution": 0,
"revenu_passif": 8 "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"
"jean_bartik": { },
"nom": "Jean Bartik", "grace_hopper": {
"cout": 12000, "nom": "Grace Hopper",
"revenu_passif": 47 "cout": 1100,
}, "revenu_passif": 8,
"claude_shannon": { "evolution": 0,
"nom": "Claude Shannon", "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.",
"cout": 130000, "wikipedia": "https://fr.wikipedia.org/wiki/Grace_Hopper"
"revenu_passif": 260 },
}, "jean_bartik": {
"alan_turing": { "nom": "Jean Bartik",
"nom": "Alan Turing", "cout": 12000,
"cout": 1400000, "revenu_passif": 47,
"revenu_passif": 1400 "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.",
"maragaret_hamilton": { "wikipedia": "https://fr.wikipedia.org/wiki/Jean_Bartik"
"nom": "Margaret Hamilton", },
"cout": 20000000, "claude_shannon": {
"revenu_passif": 7800 "nom": "Claude Shannon",
}, "cout": 130000,
"tim_berners_lee": { "revenu_passif": 260,
"nom": "Tim Berner-Lee", "evolution": 1,
"cout": 100000000, "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.",
"revenu_passif": 44000 "wikipedia": "https://fr.wikipedia.org/wiki/Claude_Shanon"
}, },
"dennis_ritchie": { "alan_turing": {
"nom": "Dennis Ritchie", "nom": "Alan Turing",
"cout": 500000000, "cout": 1400000,
"revenu_passif": 260000 "revenu_passif": 1400,
}, "evolution": 1,
"linus_torvald": { "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.",
"nom": "Linus Torvald", "wikipedia": "https://fr.wikipedia.org/wiki/Alan_Turing"
"cout": 1000000000, },
"revenu_passif": 1600000 "maragaret_hamilton": {
} "nom": "Margaret Hamilton",
"cout": 20000000,
"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,
"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,
"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,
"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"
} }
} }
}

4
css/t2.css
View file

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

5
css/t4.css
View file

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

21
css/t5.css
View file

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

38
index.html
View file

@ -7,28 +7,22 @@
<script> alert("click")</script> <script> alert("click")</script>
<link rel="stylesheet" href="" id="link-css"> <link rel="stylesheet" href="" id="link-css">
<link rel="stylesheet" href="./css/alerte.css"> <link rel="stylesheet" href="./css/alerte.css">
</head>Technologies </head>
<body> <body>
<script src="./js/intro.js" deref></script> <script src="./js/intro.js" defer></script>
<script src="./js/element.js"></script> <script src="./js/element.js"></script>
<script src="./js/technologie.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/alerte.js"></script>
<script src="./js/collegue.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> </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"> <table id="table_magasin_technologies" class="table_magasin">
<thead id="table_magasin_technologies_head"> <thead id="table_magasin_technologies_head">
@ -40,6 +34,22 @@
</tbody> </tbody>
</table> </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 --> <!-- Custom Alert Modal -->
<div id="alerte_jolie" class="modal"> <div id="alerte_jolie" class="modal">
<div class="modal-content"> <div class="modal-content">
@ -51,12 +61,12 @@
<div class="ad" style="display: none;"> <div class="ad" style="display: none;">
<img src="./img/miaou1.jpeg" alt="Chat" class="adt2"> <img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
<div></div>
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3"> <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
</div> </div>
</body> </body>
<footer> <footer>
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p> <p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
</footer> </footer>
</html> </html>

8
js/collegue.js
View file

@ -6,9 +6,11 @@ class Collegue{
async chargerDepuisBdd() { async chargerDepuisBdd() {
let data = await fetch("../bdd/arbre.json") let data = await fetch("../bdd/arbre.json")
data = await data.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(){ afficherAnimationDebloquage(){

23
js/intro.js
View file

@ -1,38 +1,27 @@
let score = 0
document.addEventListener("click",firstClick) document.addEventListener("click",firstClick)
function 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") const score_aff = document.createElement("output")
score_aff.innerText="SCORE" score_aff.innerText="SCORE"
score_aff.id = "score_affichage" score_aff.id = "score_affichage"
const saut=document.createElement("div")
const click = document.createElement("button") const click = document.createElement("button")
click.innerText="click" 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) click.addEventListener("click",scoreCount)
document.removeEventListener("click",firstClick) 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()
}

137
js/main.js
View file

@ -1,15 +1,24 @@
let score = 0
// stoque les ameliorations deja disponibles dans le magasin pour ne pas le faire clignoter // 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 // stoquer les ameliorations deja achetees pour ne pas les afficher dans le magasin
let sacado = {} let sacado = {}
// premet de ne pas laisser le joueur acheter html 5 si il n'a pas débloqué html 1.0 etc.. // 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 // 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 boost = 1
let revenu_passif = 0
async function remplirMagasinTechnologies(){ async function remplirMagasinTechnologies(){
@ -23,7 +32,7 @@ async function remplirMagasinTechnologies(){
for(const key in tech){ for(const key in tech){
// ne va pas s'embeter à proecess si on a deja acheté l'amelioration // 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] el = tech[key]
@ -65,8 +74,8 @@ async function remplirMagasinTechnologies(){
// on refresh le magasin pour enlever l'amelioration de la liste // on refresh le magasin pour enlever l'amelioration de la liste
// vide le ventre du magasin // vide le ventre du magasin
table.innerHTML = "" table.innerHTML = ""
magasin = {} magasin_tech = {}
remplirMagasin() remplirMagasinTechnologies()
// finalement, on lui débit son compte de points tel un vendeur de voitures // finalement, on lui débit son compte de points tel un vendeur de voitures
score -= t.cout 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 // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution += 1 evolution_tech += 1
}else{ }else{
// PAS ASSEZ RICHE !!!!! // PAS ASSEZ RICHE !!!!!
alert("PAS ASSEZ RICHE !!!!!!!!!!!!") ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
} }
@ -96,11 +105,11 @@ async function remplirMagasinTechnologies(){
btn_acheter.innerText = "Acheter" btn_acheter.innerText = "Acheter"
// n'afficher l'amélioration que si le score est assez élevé // 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"]) ouvrirAlerte(tech[key]["narration"])
// met à jour le contenu du magasin // met à jour le contenu du magasin
// pour ne pas re-afficher cette ligne et éviter un clignotement // pour ne pas re-afficher cette ligne et éviter un clignotement
magasin[key] = true magasin_tech[key] = true
test.appendChild(btn_acheter) test.appendChild(btn_acheter)
@ -129,24 +138,38 @@ async function remplirMagasinCollegues(){
data = await data.json() 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 // 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 tr = document.createElement("tr")
const case_nom = document.createElement("td") const case_nom = document.createElement("td")
case_nom.innerText = el.nom case_nom.innerText = el.nom
const case_boost = document.createElement("td") const case_boost = document.createElement("td")
case_boost.innerText = el.boost case_boost.innerText = el.revenu_passif
const case_cout = document.createElement("td") const case_cout = document.createElement("td")
case_cout.innerText = el.cout case_cout.innerText = 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 test = document.createElement("td") const action = document.createElement("td")
const btn_acheter = document.createElement("button") const btn_acheter = document.createElement("button")
// stoquage temporaire de la clé JSON correspondant à la technologie à débloquer // stoquage temporaire de la clé JSON correspondant à la technologie à débloquer
@ -154,50 +177,48 @@ async function remplirMagasinCollegues(){
let tmp = key 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 // 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*/ /* fonction qui va s'activer lorsqu'on achète l'objet*/
btn_acheter.addEventListener("click", (event) =>{ btn_acheter.addEventListener("click", (event) =>{
// ne laisse acheter que si on a l'argent // 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 // 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") const score_aff = document.getElementById("score_affichage")
score_aff.innerText="SCORE : " + score 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{ }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 // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution += 1 evolution_coll += 1
}else{ }else{
// PAS ASSEZ RICHE !!!!! // PAS ASSEZ RICHE !!!!!
alert("PAS ASSEZ RICHE !!!!!!!!!!!!") ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
} }
@ -206,19 +227,19 @@ async function remplirMagasinCollegues(){
btn_acheter.innerText = "Acheter" btn_acheter.innerText = "Acheter"
// n'afficher l'amélioration que si le score est assez élevé // 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 // met à jour le contenu du magasin
// pour ne pas re-afficher cette ligne et éviter un clignotement // 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_nom)
tr.appendChild(case_boost) tr.appendChild(case_boost)
tr.appendChild(case_cout) tr.appendChild(case_cout)
tr.appendChild(test) tr.appendChild(case_wiki)
tr.appendChild(action)
table.appendChild(tr) 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)
}