Merge branch 'main' of https://git.etud.insa-toulouse.fr/mougnibas/projet-clicodrome
This commit is contained in:
commit
280816933f
5 changed files with 139 additions and 10 deletions
10
index.html
10
index.html
|
|
@ -7,7 +7,7 @@
|
||||||
<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>
|
</head>Technologies
|
||||||
<body>
|
<body>
|
||||||
<script src="./js/intro.js" deref></script>
|
<script src="./js/intro.js" deref></script>
|
||||||
<script src="./js/element.js"></script>
|
<script src="./js/element.js"></script>
|
||||||
|
|
@ -23,19 +23,19 @@
|
||||||
<th>nom</th>
|
<th>nom</th>
|
||||||
<th>boost</th>
|
<th>boost</th>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="table_technologies_body">
|
<tbody id="table_magasin_collegues_body">
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<table id="table_magasin" class="table_magasin">
|
<table id="table_magasin_technologies" class="table_magasin">
|
||||||
<thead id="table_magasin_head">
|
<thead id="table_magasin_technologies_head">
|
||||||
|
|
||||||
</thead>
|
</thead>
|
||||||
|
|
||||||
<tbody id="table_magasin_body">
|
<tbody id="table_magasin_technologies_body">
|
||||||
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ function afficherAlerte(message) {
|
||||||
// on prend les elements
|
// on prend les elements
|
||||||
let modal = document.getElementById('alerte_jolie');
|
let modal = document.getElementById('alerte_jolie');
|
||||||
|
|
||||||
var messageElement = Ldocument.getElementById('message_alerte_jolie');
|
var messageElement = document.getElementById('message_alerte_jolie');
|
||||||
|
|
||||||
// Mettre le message
|
// Mettre le message
|
||||||
messageElement.textContent = message;
|
messageElement.textContent = message;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
class Collegue{
|
||||||
|
constructor(nom) {
|
||||||
|
this.nom = nom
|
||||||
|
}
|
||||||
|
|
||||||
|
async chargerDepuisBdd() {
|
||||||
|
let data = await fetch("../bdd/arbre.json")
|
||||||
|
data = await data.json()
|
||||||
|
this.props = data["collegues"][this.nom];
|
||||||
|
this.cout = this.props.cout;
|
||||||
|
this.boost = this.props.boost;
|
||||||
|
}
|
||||||
|
|
||||||
|
afficherAnimationDebloquage(){
|
||||||
|
// animation sympathique lorsque l'on achète un personnage
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -34,5 +34,5 @@ function scoreCount(){
|
||||||
score_aff.innerText="SCORE : " + score
|
score_aff.innerText="SCORE : " + score
|
||||||
|
|
||||||
// check refresh la table magasin pour afficher une amélioration si un palier est atteint
|
// check refresh la table magasin pour afficher une amélioration si un palier est atteint
|
||||||
remplirMagasin()
|
remplirMagasinTechnologies()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
116
js/main.js
116
js/main.js
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
// 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 = {}
|
||||||
|
|
||||||
|
|
@ -11,14 +10,15 @@ let evolution = 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
|
||||||
|
|
||||||
async function remplirMagasin(){
|
async function remplirMagasinTechnologies(){
|
||||||
|
|
||||||
|
|
||||||
const table= document.getElementById("table_magasin_body")
|
const table= document.getElementById("table_magasin_technologies_body")
|
||||||
|
|
||||||
let data = await fetch("../bdd/arbre.json")
|
let data = await fetch("../bdd/arbre.json")
|
||||||
data = await data.json()
|
data = await data.json()
|
||||||
|
|
||||||
|
|
||||||
let tech = data["technologies"]
|
let tech = data["technologies"]
|
||||||
|
|
||||||
for(const key in tech){
|
for(const key in tech){
|
||||||
|
|
@ -118,3 +118,113 @@ async function remplirMagasin(){
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async function remplirMagasinCollegues(){
|
||||||
|
|
||||||
|
|
||||||
|
const table= document.getElementById("table_magasin_collegues_body")
|
||||||
|
|
||||||
|
let data = await fetch("../bdd/arbre.json")
|
||||||
|
data = await data.json()
|
||||||
|
|
||||||
|
|
||||||
|
let tech = data["collegues"]
|
||||||
|
|
||||||
|
for(const key in tech){
|
||||||
|
// ne va pas s'embeter à proecess si on a deja acheté l'amelioration
|
||||||
|
if(!sacado[key] && !magasin[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 = 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 collegues(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) =>{
|
||||||
|
|
||||||
|
|
||||||
|
// ne laisse acheter que si on a l'argent
|
||||||
|
if(score >= t.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
|
||||||
|
const score_aff = document.getElementById("score_affichage")
|
||||||
|
score_aff.innerText="SCORE : " + score
|
||||||
|
|
||||||
|
// 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
|
||||||
|
}
|
||||||
|
|
||||||
|
// incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
|
||||||
|
evolution += 1
|
||||||
|
}else{
|
||||||
|
// PAS ASSEZ RICHE !!!!!
|
||||||
|
alert("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 === 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
|
||||||
|
|
||||||
|
test.appendChild(btn_acheter)
|
||||||
|
|
||||||
|
|
||||||
|
tr.appendChild(case_nom)
|
||||||
|
tr.appendChild(case_boost)
|
||||||
|
tr.appendChild(case_cout)
|
||||||
|
tr.appendChild(test)
|
||||||
|
|
||||||
|
table.appendChild(tr)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue