diff --git a/css/alerte/a9.css b/css/alerte/a9.css index ff2ac24..8e1cbed 100644 --- a/css/alerte/a9.css +++ b/css/alerte/a9.css @@ -1,23 +1,45 @@ .modal { - background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */ - backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */ + background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */ + backdrop-filter: blur(10px); /* Sophisticated blur effect */ + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + justify-content: center; + align-items: center; } .modal-content { - background: radial-gradient(circle, #222, #000); + margin-top: 20vh; + background: radial-gradient(circle, #222, #000); /* Dark radial gradient */ color: #fff; border-radius: 20px; border: none; + box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Intense shadows */ + transform: perspective(1000px) rotateX(5deg); /* 3D tilt effect */ + padding: 20px; width: 40vw; - box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */ - transform: perspective(1000px) rotateX(5deg); /* Effet 3D */ + margin-left: auto; + margin-right: auto; } -.modal.button { - background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */ +.bouton-ok { + background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */ font-size: 20px; + color: white; + border: none; border-radius: 50px; - animation: pulse 1.5s infinite; /* Animation d’impulsion */ + padding: 15px 30px; + cursor: pointer; + animation: pulse 1.5s infinite; /* Pulse animation */ + transition: transform 0.3s ease; +} + +.bouton-ok:hover { + transform: scale(1.2) ; /* Slightly larger on hover */ + background-color: rebeccapurple; } @keyframes pulse { diff --git a/css/index.css b/css/index.css index 39808f3..a28b09c 100644 --- a/css/index.css +++ b/css/index.css @@ -55,7 +55,7 @@ #div_cadeau{ display: none; position: fixed; - z-index: -2; + z-index: 1; } #img_cadeau{ diff --git a/css/t1.css b/css/t1.css index 9f0f277..613547c 100644 --- a/css/t1.css +++ b/css/t1.css @@ -24,10 +24,14 @@ table { border: 1px solid #000; } -table.table_magasin{ +table.table-magasin{ width: 150px; padding: 12px; margin-top: 10px; margin-bottom: 10px; - } + + +#table_magasin_collegues{ + text-align: center; +} \ No newline at end of file diff --git a/css/t2.css b/css/t2.css index 177d0d3..fe9dc58 100644 --- a/css/t2.css +++ b/css/t2.css @@ -19,7 +19,6 @@ button { border: 1px solid #ddd; background-color: #0206ff; cursor: pointer; - border-radius: 5px; color: #ddd; } @@ -42,6 +41,7 @@ table { width: 100%; border-collapse: collapse; border: 15px solid #e99d0f; + text-align: center; } td, th { @@ -65,7 +65,7 @@ div.ad{ div.ad.adt3{ visibility: hidden; } -table.table_magasin{ +table.table-magasin{ width: 150px; padding: 12px; margin-top: 10px; diff --git a/css/t3.css b/css/t3.css index 8ba7a78..e5a2c43 100644 --- a/css/t3.css +++ b/css/t3.css @@ -15,9 +15,11 @@ button { background-color: #000000; color: white; cursor: pointer; - border-radius: 10px; font-weight: bold; color: #ddd; + border-width: 2px; + border-style: dotted; + border-color: greenyellow; } button:hover { @@ -70,7 +72,7 @@ div.ad.adt3{ visibility: visible; } -table.table_magasin{ +table.table-magasin{ width: 150px; padding: 12px; margin-top: 10px; diff --git a/css/t4.css b/css/t4.css index c4fd135..37003b4 100644 --- a/css/t4.css +++ b/css/t4.css @@ -55,7 +55,7 @@ td { border: 1px solid #ddd; } -table.table_magasin{ +table.table-magasin{ width: 150px; padding: 12px; margin-top: 10px; diff --git a/css/t5.css b/css/t5.css index cf2e658..9fa04a4 100644 --- a/css/t5.css +++ b/css/t5.css @@ -55,7 +55,7 @@ td, th { text-align: left; border: 1px solid #ecf0f1; } -table.table_magasin{ +table.table-magasin{ color: #ddd; width: 150px; padding: 12px; diff --git a/css/t6.css b/css/t6.css index 0d9f92d..f00f1f9 100644 --- a/css/t6.css +++ b/css/t6.css @@ -43,7 +43,7 @@ td, th { text-align: left; border: 1px solid #ddd; } -table.table_magasin{ +table.table-magasin{ width: 150px; padding: 12px; margin-top: 10px; diff --git a/css/t7.css b/css/t7.css index 672a4b6..4c6c684 100644 --- a/css/t7.css +++ b/css/t7.css @@ -1,74 +1,141 @@ -/* t7.css - XHTML 1.0 */ +/* t7.css - XHTML 1.0 - Représentation de la fin des années 2010 */ body { - font-family: 'Segoe UI', serif; - background-color: #ecf0f1; - color: #34495e; + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: #f4f4f9; + color: #2c3e50; margin: 0; - padding: 70px; + padding: 0; + line-height: 1.6; } -output { - font-size: 30px; +header { + background-color: #3498db; + color: white; + padding: 20px 0; + text-align: center; + font-size: 24px; + font-weight: bold; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } +main { + max-width: 960px; + margin: 40px auto; + padding: 20px; + background-color: white; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +h1, h2, h3 { + color: #34495e; + margin-bottom: 20px; + font-weight: 600; + text-align: center; +} + +p { + margin-bottom: 20px; +} button { - padding: 15px 30px; - border: 2px solid #e74c3c; - background-color: white; - color: #e74c3c; + padding: 10px 25px; + font-size: 16px; + color: white; + background-color: #e74c3c; + border: none; + border-radius: 5px; cursor: pointer; - border-radius: 25px; - font-size: 20px; - transition: transform 0.2s ease; + transition: background-color 0.3s ease, transform 0.2s ease; } button:hover { - transform: scale(1.05); - background-color: #e74c3c; - color: white; + background-color: #c0392b; + transform: translateY(-2px); +} + +button:active { + transform: translateY(0); +} + +a { + color: #3498db; + text-decoration: none; + font-weight: bold; + transition: color 0.3s ease; +} + +a:hover { + color: #2980b9; } img { max-width: 100%; - height: auto; - border-radius: 20px; - box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + margin: 20px 0; + border-radius: 5px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } table { width: 100%; border-collapse: collapse; - border: 2px solid #ff9900; - + margin: 20px 0; + border-radius: 5px; + overflow: hidden; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } -td, th { - padding: 20px; +table th, table td { + padding: 15px; text-align: left; - border: 1px solid #ff9900; - -} -table.table_magasin{ - - width: 150px; - padding: 12px; - margin-top: 10px; - margin-bottom: 10px; } -a{ - color: #fda500; +table th { + background-color: #3498db; + color: white; + font-weight: bold; } -a:visited{ - color: #e74c3c; +table tr:nth-child(odd) { + background-color: #ecf0f1; } -div.score_button{ - - background-color: #8a9198; - position: fixed; - top: 0%; -} \ No newline at end of file +table tr:nth-child(even) { + background-color: #ffffff; +} + +footer { + text-align: center; + padding: 10px 0; border-radius: 5px; + + background-color: #2c3e50; + color: white; + margin-top: 40px; + font-size: 14px; +} + +div.card { + background-color: white; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + padding: 20px; + margin: 20px 0; + transition: transform 0.2s ease, box-shadow 0.3s ease; +} + +div.card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); +} + + +div.score-button{ + margin-top: 2vh; + margin-bottom: 2vh; + padding: 15px; + background-color: #2c3e50; + color: white; + font-weight: bolder; + font-size: xx-large; + width: 100vw; +} diff --git a/css/t9.css b/css/t9.css index 759f857..f9b78ce 100644 --- a/css/t9.css +++ b/css/t9.css @@ -4,9 +4,6 @@ body { background-color: #ffffff; color: #2c3e50; margin: 0; - padding: 90px; - - } output{ @@ -50,10 +47,16 @@ img:hover { } table { - width: 100%; + width: 85vw; border-collapse: collapse; border: 3px solid #ff9900; - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: box-shadow 0.3s ease; + margin-left: auto; + margin-right: auto; +} +table:hover { + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } td, th { @@ -78,13 +81,6 @@ table tr:hover { background-color: #b61212; } -table.table_magasin{ - width: 150px; - padding: 12px; - margin-top: 10px; - margin-bottom: 10px; - -} a{ color: #fda500; @@ -92,4 +88,25 @@ a{ a:visited{ color: #e74c3c; +} + + +div.score-button{ + margin-top: 2vh; + margin-bottom: 2vh; + margin-left: auto; + margin-right: auto; + padding: 15px; + background-color: #fda500; + color: white; + font-weight: bolder; + font-size: xx-large; + width: 75vw; + border-radius: 10px; + text-align: center; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + transition: box-shadow 0.3s ease; +} +div.score-button:hover { + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4); } \ No newline at end of file diff --git a/img/favicon.ico b/img/favicon.ico new file mode 100644 index 0000000..d591d43 Binary files /dev/null and b/img/favicon.ico differ diff --git a/index.html b/index.html index 1f06854..14192a2 100644 --- a/index.html +++ b/index.html @@ -7,90 +7,99 @@ - + - -
-
-
-
+ +
+ +
+
+
-
+ +
+
+
+
+ +
+
+
- -
-
- - + +
+

Magasin des technologies

+
+ + +
+ - +
+

Magasin des collègues

+ + + + + + + + + + +
NomRevenu passifCoûtLien
+
- + +
+ +
- - + +
+ + +
- - - - - - - - - - -
nomrevenu passifcoutlien
+ +
+ +
+ + -
- -
+ +
+
+ Image de cadeau +
+
+ -
- - - -
- - - - - - - -
- -
+ + - - \ No newline at end of file + diff --git a/js/collegue.js b/js/collegue.js index 0a22b81..db2bb6c 100644 --- a/js/collegue.js +++ b/js/collegue.js @@ -1,10 +1,51 @@ class Collegue{ - constructor(json) { + constructor(json,cle) { 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 + this.url_wikipedia = this.props.wikipedia + this.nom_fichier_image = this.props.nom_fichier_image + this.cle = cle + this.callbackAchat = {} + this.evolution = this.props.evolution + } + + /* va générer la ligne du tableau correspondant à ce collegue, + utile pour remplir le magasin de collegues */ + genererLigneTableau() { + const tr = document.createElement("tr") + const case_nom = document.createElement("td") + case_nom.textContent = this.nom + const case_boost = document.createElement("td") + case_boost.textContent = this.revenu_passif + const case_cout = document.createElement("td") + case_cout.textContent = rendreNombreLisible(this.cout) + case_cout.id = "case_cout_"+this.cle + + // case contenant un lien vers la page wikipédia du personnage + const case_wiki = document.createElement("td") + const a = document.createElement("a") + a.href = this.url_wikipedia + a.textContent = this.nom + case_wiki.appendChild(a) + + + const action = document.createElement("td") + const btn_acheter = document.createElement("button") + btn_acheter.textContent = "Acheter" + btn_acheter.addEventListener("click",this.callbackAchat) + action.appendChild(btn_acheter) + + tr.appendChild(case_nom) + tr.appendChild(case_boost) + tr.appendChild(case_cout) + tr.appendChild(case_wiki) + tr.appendChild(action) + + return tr + } } \ No newline at end of file diff --git a/js/element.js b/js/element.js deleted file mode 100644 index 44c0caa..0000000 --- a/js/element.js +++ /dev/null @@ -1,32 +0,0 @@ -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/main.js b/js/main.js index 24190ca..1df8c53 100644 --- a/js/main.js +++ b/js/main.js @@ -6,7 +6,7 @@ let magasin_tech = {} let magasin_coll = {} // 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.. let evolution_tech = 0 @@ -31,28 +31,20 @@ async function remplirMagasinTechnologies(){ 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] - + // ne va pas s'embeter à process si on a deja acheté l'amelioration + // n'afficher l'amélioration que si le score est assez élevé + const t = new Technologie(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") - + if( !sacado[key] && !magasin_tech[key] && (t.borne <= score) && (evolution_tech === parseInt(t.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 - let t = new Technologie(el) /* fonction qui va s'activer lorsqu'on achète l'objet*/ - btn_acheter.addEventListener("click", (event) =>{ + t.callbackAchat = (event) =>{ // ne laisse acheter que si on a l'argent @@ -84,7 +76,7 @@ async function remplirMagasinTechnologies(){ // augmentation du boost d'incrément ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!") - if(t.props.evolution == 0){ + if(t.evolution == 0){ boost += t.boost -1 // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :) }else{ @@ -95,32 +87,12 @@ async function remplirMagasinTechnologies(){ // 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) } + // affiche dans le tableau la ligne générée, prend en compte le callback d'achat + const tr = t.genererLigneTableau() + table.appendChild(tr) } - } } @@ -138,46 +110,22 @@ async function remplirMagasinCollegues(){ let collegues = data["collegues"] for(const key in collegues){ + const collegue = new Collegue(collegues[key],key) + // ne va pas s'embeter à process 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) + if(!magasin_coll[key] && (evolution_coll >= parseInt(collegue.evolution)) ){ /* fonction qui va s'activer lorsqu'on achète l'objet*/ - btn_acheter.addEventListener("click", (event) =>{ + collegue.callbackAchat = (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) + const cout_reel = Number(collegue.cout * (1.1)**exp).toFixed(1) // ne laisse acheter que si on a l'argent if(score >= cout_reel){ @@ -187,7 +135,7 @@ async function remplirMagasinCollegues(){ //lancer l'animation d'achat avec l'image correspondante let image = document.getElementById("image_collegue_animee") - image.setAttribute("src",c.props.nom_fichier_image) + image.setAttribute("src",collegue.nom_fichier_image) // affiche l'image image.removeAttribute("hidden") @@ -201,8 +149,8 @@ async function remplirMagasinCollegues(){ // 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 !!") + ouvrirAlerte("Vous avez débloqué "+ collegue.nom+" !!"+collegues[key]["narration"]) + ouvrirAlerte("Incrémentation de la rentabilité passive de "+collegue.revenu_passif+" points !!") }, (4000)); @@ -211,6 +159,9 @@ async function remplirMagasinCollegues(){ // incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher evolution_coll += 1 + + // on maj le magasin pour débloquer de nouveaux personnages + remplirMagasinCollegues() }else{ // on incrémente la qtt d'objet dans son sacado @@ -218,17 +169,19 @@ async function remplirMagasinCollegues(){ } // augmentation du boost d'incrément - revenu_passif += c.revenu_passif + revenu_passif += collegue.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) + // finalement, on lui débite son compte de points tel un vendeur de voitures score = score - cout_reel majAffichageScore() + let exp = 0 + if(key in sacado){ + exp = sacado[key] + } + // on change le futur cout dans le tableau - document.getElementById("case_cout_"+key).innerText = rendreNombreLisible(Number(c.cout * (1.1)**sacado[key]).toFixed(1)) + document.getElementById("case_cout_"+key).textContent = rendreNombreLisible(Number(collegue.cout * (1.1)**exp).toFixed(1)) }else{ @@ -237,23 +190,16 @@ async function remplirMagasinCollegues(){ } - }) + } - 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) - + // affiche dans le tableau la ligne générée, prend en compte le callback d'achat + const tr = collegue.genererLigneTableau() table.appendChild(tr) } @@ -301,9 +247,11 @@ function leBoostDuProf(){ } -let rickroll = document.getElementById("never") -let close_roll = document.getElementById("close_rick") + function rickRoll(){ + const rickroll = document.getElementById("never") + const close_roll = document.getElementById("close_rick") + // affichage de la video rickroll.setAttribute("src","./img/never_gonna_give_you_up.mp4") rickroll.setAttribute("type","video/mp4") @@ -477,7 +425,7 @@ function teleportationCadeau(n) { setTimeout(() => { // affiche le cadeau à un autre endroit pour faire un effet de téléportation teleportationCadeau(n) - }, Math.random() * 1000 + 500); // Durée d'affichage entre 500ms et 1.5 seconde + }, Math.random() * 1000 + 1000); // Durée d'affichage entre 1s et 1.5 seconde }else{ // on enlève le cadeau à la 15ème téléportation :) diff --git a/js/technologie.js b/js/technologie.js index 054f1e5..a4f44a8 100644 --- a/js/technologie.js +++ b/js/technologie.js @@ -4,11 +4,42 @@ class Technologie{ this.cout = this.props.cout this.boost = this.props.boost this.nom = this.props.nom + this.css_id = this.props.css_id + this.evolution = this.props.evolution + this.borne = this.props.borne + this.callbackAchat = {} + } appliquerAmeliorationStyle(){ document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css") - document.getElementById("link-css").setAttribute("href","css/"+this.props.css_id) + document.getElementById("link-css").setAttribute("href","css/"+this.css_id) + } + + genererLigneTableau(){ + const tr = document.createElement("tr") + const case_nom = document.createElement("td") + case_nom.textContent = this.nom + const case_boost = document.createElement("td") + case_boost.textContent = this.boost + const case_cout = document.createElement("td") + case_cout.textContent = rendreNombreLisible(this.cout) + + const case_action = document.createElement("td") + const btn_acheter = document.createElement("button") + btn_acheter.textContent = "Acheter" + btn_acheter.addEventListener("click",this.callbackAchat) + + case_action.appendChild(btn_acheter) + + + tr.appendChild(case_nom) + tr.appendChild(case_boost) + tr.appendChild(case_cout) + tr.appendChild(case_action) + + + return tr }