Merge branch 'main' of https://git.etud.insa-toulouse.fr/beau/projet-clicodrome2.0
This commit is contained in:
commit
5b8141c246
16 changed files with 379 additions and 270 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@
|
|||
#div_cadeau{
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: -2;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#img_cadeau{
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ td {
|
|||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
table.table_magasin{
|
||||
table.table-magasin{
|
||||
width: 150px;
|
||||
padding: 12px;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
151
css/t7.css
151
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%;
|
||||
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;
|
||||
}
|
||||
41
css/t9.css
41
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;
|
||||
|
|
@ -93,3 +89,24 @@ 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);
|
||||
}
|
||||
BIN
img/favicon.ico
Normal file
BIN
img/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
101
index.html
101
index.html
|
|
@ -7,90 +7,99 @@
|
|||
<link rel="stylesheet" href="" id="link-css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
<link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
|
||||
</head>
|
||||
<body>
|
||||
<script src="./js/intro.js" defer></script>
|
||||
<script src="./js/element.js"></script>
|
||||
<script src="./js/technologie.js"></script>
|
||||
<script src="./js/main.js" defer></script>
|
||||
<script src="./js/alerte.js"></script>
|
||||
<script src="./js/collegue.js"></script>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
<main>
|
||||
<!-- Section Confettis -->
|
||||
<section id="confetti-section">
|
||||
<div id="confetti-container"></div>
|
||||
<div id="score_button" class="score_button">
|
||||
<div id="div_score" class="div-centrer-contenu">
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section Score -->
|
||||
<section id="score-section">
|
||||
<div id="score_button" class="score-button">
|
||||
<div id="div_score" class="div-centrer-contenu"></div>
|
||||
<div id="div_button" class="bouton-score div-centrer-contenu">
|
||||
|
||||
<button id="bouton-prof" onclick="leBoostDuProf()">Le Méga Boost du Prof</button>
|
||||
</div>
|
||||
</div>
|
||||
<table id="table_magasin_technologies" class="table_magasin">
|
||||
<thead id="table_magasin_technologies_head">
|
||||
</section>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody id="table_magasin_technologies_body">
|
||||
|
||||
</tbody>
|
||||
<!-- Section Tableaux -->
|
||||
<section id="technologies-section">
|
||||
<h2>Magasin des technologies</h2>
|
||||
<table id="table_magasin_technologies" class="table-magasin">
|
||||
<thead id="table_magasin_technologies_head"></thead>
|
||||
<tbody id="table_magasin_technologies_body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="collegues-section">
|
||||
<h2>Magasin des collègues</h2>
|
||||
<table id="table_magasin_collegues">
|
||||
<thead>
|
||||
<th>nom</th>
|
||||
<th>revenu passif</th>
|
||||
<th>cout</th>
|
||||
<th>lien</th>
|
||||
<tr>
|
||||
<th>Nom</th>
|
||||
<th>Revenu passif</th>
|
||||
<th>Coût</th>
|
||||
<th>Lien</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="table_magasin_collegues_body">
|
||||
|
||||
</tbody>
|
||||
<tbody id="table_magasin_collegues_body"></tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<!-- Section Image animée -->
|
||||
<section id="image-collegue-section" class="div-centrer-contenu">
|
||||
<img id="image_collegue_animee" alt="Image d'un collègue animé" hidden>
|
||||
</section>
|
||||
|
||||
<div class="div-centrer-contenu" >
|
||||
<img id="image_collegue_animee">
|
||||
</div>
|
||||
|
||||
<div class="div-centrer-contenu">
|
||||
<!-- RickRoll-->
|
||||
<video controls id="never" hidden>
|
||||
</video>
|
||||
<!-- Section Vidéo -->
|
||||
<section id="video-section" class="div-centrer-contenu">
|
||||
<video controls id="never" hidden></video>
|
||||
<button id="close_rick" type="button" hidden>X</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Custom Alert Modal -->
|
||||
<div id="alerte_jolie" class="modal">
|
||||
<!-- Section Alertes -->
|
||||
<section id="alerte-section">
|
||||
<div id="alerte_jolie" class="modal div-centrer-contenu">
|
||||
<div class="modal-content">
|
||||
<span class="close-btn" onclick="fermerAlerte()">×</span>
|
||||
<p id="message_alerte_jolie"></p>
|
||||
|
||||
<div class="div-centrer-contenu">
|
||||
<input type="text" id="input_alerte_jolie">
|
||||
|
||||
<button onclick="fermerAlerte()">OK</button>
|
||||
<button class="bouton-ok" onclick="fermerAlerte()">OK</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="ad" style="display: none;">
|
||||
</section>
|
||||
|
||||
<!-- Section Publicités -->
|
||||
<section id="ad-section" class="ad" style="display: none;">
|
||||
<img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
|
||||
<div></div>
|
||||
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Section Cadeau -->
|
||||
<section id="cadeau-section">
|
||||
<div id="div_cadeau">
|
||||
<img id="img_cadeau" src="img/cadeau.png">
|
||||
<img id="img_cadeau" src="img/cadeau.png" alt="Image de cadeau">
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Pied de page -->
|
||||
<footer>
|
||||
<p>L'évolution est non contractuelle, adaptée pour le gameplay</p>
|
||||
</footer>
|
||||
</body>
|
||||
<footer>
|
||||
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
|
||||
</footer>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
132
js/main.js
132
js/main.js
|
|
@ -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])
|
||||
|
||||
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
|
||||
|
||||
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) =>{
|
||||
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,31 +87,11 @@ 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)
|
||||
|
||||
}
|
||||
// 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));
|
||||
|
||||
|
|
@ -212,23 +160,28 @@ 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
|
||||
sacado[key] += 1
|
||||
}
|
||||
|
||||
// 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 :)
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue