projet-clicodrome/js/main.js
2024-12-17 21:16:55 +01:00

392 lines
No EOL
13 KiB
JavaScript

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 = 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 = 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 += 10000000000000000
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>=1000){
const quantifiers = [
"Millier", // 10^3
"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 = Math.floor( n/(10**(3*puiss_mil)) )
// enfin, on rajoute le quantificateur, avec un 's' si on est pas à l'unité
let q = " "+ quantifiers[puiss_mil -1]
if(ret != 1){
q +='s'
}
ret += q
}
return ret
}