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 {
|
.modal {
|
||||||
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Dégradé futuriste */
|
background: linear-gradient(135deg, #1f1c2c, #928dab); /* Futuristic gradient */
|
||||||
backdrop-filter: blur(10px); /* Flou pour un effet sophistiqué */
|
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 {
|
.modal-content {
|
||||||
background: radial-gradient(circle, #222, #000);
|
margin-top: 20vh;
|
||||||
|
background: radial-gradient(circle, #222, #000); /* Dark radial gradient */
|
||||||
color: #fff;
|
color: #fff;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
border: none;
|
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;
|
width: 40vw;
|
||||||
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.5); /* Ombres intenses */
|
margin-left: auto;
|
||||||
transform: perspective(1000px) rotateX(5deg); /* Effet 3D */
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.modal.button {
|
.bouton-ok {
|
||||||
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dégradé dynamique */
|
background: linear-gradient(45deg, #ff6f91, #ffc371); /* Dynamic gradient */
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
border-radius: 50px;
|
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 {
|
@keyframes pulse {
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@
|
||||||
#div_cadeau{
|
#div_cadeau{
|
||||||
display: none;
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: -2;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#img_cadeau{
|
#img_cadeau{
|
||||||
|
|
|
||||||
|
|
@ -24,10 +24,14 @@ table {
|
||||||
border: 1px solid #000;
|
border: 1px solid #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#table_magasin_collegues{
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
@ -19,7 +19,6 @@ button {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
background-color: #0206ff;
|
background-color: #0206ff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 5px;
|
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -42,6 +41,7 @@ table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: 15px solid #e99d0f;
|
border: 15px solid #e99d0f;
|
||||||
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
td, th {
|
td, th {
|
||||||
|
|
@ -65,7 +65,7 @@ div.ad{
|
||||||
div.ad.adt3{
|
div.ad.adt3{
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
||||||
|
|
@ -15,9 +15,11 @@ button {
|
||||||
background-color: #000000;
|
background-color: #000000;
|
||||||
color: white;
|
color: white;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 10px;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
|
border-width: 2px;
|
||||||
|
border-style: dotted;
|
||||||
|
border-color: greenyellow;
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
|
|
@ -70,7 +72,7 @@ div.ad.adt3{
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ td {
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
||||||
|
|
@ -55,7 +55,7 @@ td, th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px solid #ecf0f1;
|
border: 1px solid #ecf0f1;
|
||||||
}
|
}
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
color: #ddd;
|
color: #ddd;
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ td, th {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px solid #ddd;
|
border: 1px solid #ddd;
|
||||||
}
|
}
|
||||||
table.table_magasin{
|
table.table-magasin{
|
||||||
width: 150px;
|
width: 150px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 10px;
|
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 {
|
body {
|
||||||
font-family: 'Segoe UI', serif;
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||||
background-color: #ecf0f1;
|
background-color: #f4f4f9;
|
||||||
color: #34495e;
|
color: #2c3e50;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 70px;
|
padding: 0;
|
||||||
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
output {
|
header {
|
||||||
font-size: 30px;
|
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 {
|
button {
|
||||||
padding: 15px 30px;
|
padding: 10px 25px;
|
||||||
border: 2px solid #e74c3c;
|
font-size: 16px;
|
||||||
background-color: white;
|
color: white;
|
||||||
color: #e74c3c;
|
background-color: #e74c3c;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 25px;
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||||
font-size: 20px;
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover {
|
button:hover {
|
||||||
transform: scale(1.05);
|
background-color: #c0392b;
|
||||||
background-color: #e74c3c;
|
transform: translateY(-2px);
|
||||||
color: white;
|
}
|
||||||
|
|
||||||
|
button:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #3498db;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: #2980b9;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
margin: 20px 0;
|
||||||
border-radius: 20px;
|
border-radius: 5px;
|
||||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-collapse: collapse;
|
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 {
|
table th, table td {
|
||||||
padding: 20px;
|
padding: 15px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: 1px solid #ff9900;
|
|
||||||
|
|
||||||
}
|
|
||||||
table.table_magasin{
|
|
||||||
|
|
||||||
width: 150px;
|
|
||||||
padding: 12px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a{
|
table th {
|
||||||
color: #fda500;
|
background-color: #3498db;
|
||||||
|
color: white;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:visited{
|
table tr:nth-child(odd) {
|
||||||
color: #e74c3c;
|
background-color: #ecf0f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.score_button{
|
table tr:nth-child(even) {
|
||||||
|
background-color: #ffffff;
|
||||||
background-color: #8a9198;
|
}
|
||||||
position: fixed;
|
|
||||||
top: 0%;
|
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;
|
background-color: #ffffff;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 90px;
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
output{
|
output{
|
||||||
|
|
@ -50,10 +47,16 @@ img:hover {
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
table {
|
||||||
width: 100%;
|
width: 85vw;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
border: 3px solid #ff9900;
|
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 {
|
td, th {
|
||||||
|
|
@ -78,13 +81,6 @@ table tr:hover {
|
||||||
background-color: #b61212;
|
background-color: #b61212;
|
||||||
}
|
}
|
||||||
|
|
||||||
table.table_magasin{
|
|
||||||
width: 150px;
|
|
||||||
padding: 12px;
|
|
||||||
margin-top: 10px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
a{
|
a{
|
||||||
color: #fda500;
|
color: #fda500;
|
||||||
|
|
@ -93,3 +89,24 @@ a{
|
||||||
a:visited{
|
a:visited{
|
||||||
color: #e74c3c;
|
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="" id="link-css">
|
||||||
<link rel="stylesheet" href="./css/index.css">
|
<link rel="stylesheet" href="./css/index.css">
|
||||||
<link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
|
<link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
|
||||||
|
<link rel="icon" type="image/x-icon" href="/img/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="./js/intro.js" defer></script>
|
<script src="./js/intro.js" defer></script>
|
||||||
<script src="./js/element.js"></script>
|
|
||||||
<script src="./js/technologie.js"></script>
|
<script src="./js/technologie.js"></script>
|
||||||
<script src="./js/main.js" defer></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>
|
||||||
|
|
||||||
|
<!-- Contenu principal -->
|
||||||
|
<main>
|
||||||
|
<!-- Section Confettis -->
|
||||||
|
<section id="confetti-section">
|
||||||
<div id="confetti-container"></div>
|
<div id="confetti-container"></div>
|
||||||
<div id="score_button" class="score_button">
|
</section>
|
||||||
<div id="div_score" class="div-centrer-contenu">
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
<!-- 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">
|
<div id="div_button" class="bouton-score div-centrer-contenu">
|
||||||
|
|
||||||
<button id="bouton-prof" onclick="leBoostDuProf()">Le Méga Boost du Prof</button>
|
<button id="bouton-prof" onclick="leBoostDuProf()">Le Méga Boost du Prof</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<table id="table_magasin_technologies" class="table_magasin">
|
</section>
|
||||||
<thead id="table_magasin_technologies_head">
|
|
||||||
|
|
||||||
</thead>
|
<!-- Section Tableaux -->
|
||||||
|
<section id="technologies-section">
|
||||||
<tbody id="table_magasin_technologies_body">
|
<h2>Magasin des technologies</h2>
|
||||||
|
<table id="table_magasin_technologies" class="table-magasin">
|
||||||
</tbody>
|
<thead id="table_magasin_technologies_head"></thead>
|
||||||
|
<tbody id="table_magasin_technologies_body"></tbody>
|
||||||
</table>
|
</table>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="collegues-section">
|
||||||
|
<h2>Magasin des collègues</h2>
|
||||||
<table id="table_magasin_collegues">
|
<table id="table_magasin_collegues">
|
||||||
<thead>
|
<thead>
|
||||||
<th>nom</th>
|
<tr>
|
||||||
<th>revenu passif</th>
|
<th>Nom</th>
|
||||||
<th>cout</th>
|
<th>Revenu passif</th>
|
||||||
<th>lien</th>
|
<th>Coût</th>
|
||||||
|
<th>Lien</th>
|
||||||
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody id="table_magasin_collegues_body">
|
<tbody id="table_magasin_collegues_body"></tbody>
|
||||||
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</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" >
|
<!-- Section Vidéo -->
|
||||||
<img id="image_collegue_animee">
|
<section id="video-section" class="div-centrer-contenu">
|
||||||
</div>
|
<video controls id="never" hidden></video>
|
||||||
|
|
||||||
<div class="div-centrer-contenu">
|
|
||||||
<!-- RickRoll-->
|
|
||||||
<video controls id="never" hidden>
|
|
||||||
</video>
|
|
||||||
<button id="close_rick" type="button" hidden>X</button>
|
<button id="close_rick" type="button" hidden>X</button>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
|
<!-- Section Alertes -->
|
||||||
<!-- Custom Alert Modal -->
|
<section id="alerte-section">
|
||||||
<div id="alerte_jolie" class="modal">
|
<div id="alerte_jolie" class="modal div-centrer-contenu">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<span class="close-btn" onclick="fermerAlerte()">×</span>
|
<span class="close-btn" onclick="fermerAlerte()">×</span>
|
||||||
<p id="message_alerte_jolie"></p>
|
<p id="message_alerte_jolie"></p>
|
||||||
|
|
||||||
<div class="div-centrer-contenu">
|
<div class="div-centrer-contenu">
|
||||||
<input type="text" id="input_alerte_jolie">
|
<input type="text" id="input_alerte_jolie">
|
||||||
|
<button class="bouton-ok" onclick="fermerAlerte()">OK</button>
|
||||||
<button onclick="fermerAlerte()">OK</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</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">
|
<img src="./img/miaou1.jpeg" alt="Chat" class="adt2">
|
||||||
<div></div>
|
<div></div>
|
||||||
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Section Cadeau -->
|
||||||
|
<section id="cadeau-section">
|
||||||
<div id="div_cadeau">
|
<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>
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- Pied de page -->
|
||||||
|
<footer>
|
||||||
|
<p>L'évolution est non contractuelle, adaptée pour le gameplay</p>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
<footer>
|
|
||||||
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
|
|
||||||
</footer>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,10 +1,51 @@
|
||||||
class Collegue{
|
class Collegue{
|
||||||
constructor(json) {
|
constructor(json,cle) {
|
||||||
this.props = json
|
this.props = json
|
||||||
this.nom = this.props.nom
|
this.nom = this.props.nom
|
||||||
this.cout = this.props.cout
|
this.cout = this.props.cout
|
||||||
this.boost = this.props.boost
|
this.boost = this.props.boost
|
||||||
this.revenu_passif = this.props.revenu_passif
|
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"]
|
let tech = data["technologies"]
|
||||||
|
|
||||||
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 à process si on a deja acheté l'amelioration
|
||||||
if(!sacado[key] && !magasin_tech[key]){
|
// n'afficher l'amélioration que si le score est assez élevé
|
||||||
el = tech[key]
|
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*/
|
/* 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
|
// ne laisse acheter que si on a l'argent
|
||||||
|
|
@ -84,7 +76,7 @@ async function remplirMagasinTechnologies(){
|
||||||
// augmentation du boost d'incrément
|
// augmentation du boost d'incrément
|
||||||
ouvrirAlerte("Incrémentation de la rentabilité de tes clicks de "+t.boost+" points !!")
|
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 :)
|
boost += t.boost -1 // car sinon, le premier boost ne va pas entrainer un nombre rond de points par click :)
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
|
|
@ -95,31 +87,11 @@ async function remplirMagasinTechnologies(){
|
||||||
// PAS ASSEZ RICHE !!!!!
|
// PAS ASSEZ RICHE !!!!!
|
||||||
ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
|
ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
// affiche dans le tableau la ligne générée, prend en compte le callback d'achat
|
||||||
})
|
const tr = t.genererLigneTableau()
|
||||||
|
|
||||||
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)
|
table.appendChild(tr)
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -138,46 +110,22 @@ async function remplirMagasinCollegues(){
|
||||||
let collegues = data["collegues"]
|
let collegues = data["collegues"]
|
||||||
|
|
||||||
for(const key in 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
|
// 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é
|
// ou si le score d'évolution n'est pas assez élevé
|
||||||
const el = collegues[key]
|
if(!magasin_coll[key] && (evolution_coll >= parseInt(collegue.evolution)) ){
|
||||||
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)
|
|
||||||
|
|
||||||
|
|
||||||
/* 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) =>{
|
collegue.callbackAchat = (event) => {
|
||||||
|
|
||||||
// calcul du cout en fonction du nombre de collegue de ce type déjà acheté
|
// calcul du cout en fonction du nombre de collegue de ce type déjà acheté
|
||||||
let exp = 0
|
let exp = 0
|
||||||
if(key in sacado){
|
if(key in sacado){
|
||||||
exp = sacado[key]
|
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
|
// ne laisse acheter que si on a l'argent
|
||||||
if(score >= cout_reel){
|
if(score >= cout_reel){
|
||||||
|
|
@ -187,7 +135,7 @@ async function remplirMagasinCollegues(){
|
||||||
|
|
||||||
//lancer l'animation d'achat avec l'image correspondante
|
//lancer l'animation d'achat avec l'image correspondante
|
||||||
let image = document.getElementById("image_collegue_animee")
|
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
|
// affiche l'image
|
||||||
image.removeAttribute("hidden")
|
image.removeAttribute("hidden")
|
||||||
|
|
||||||
|
|
@ -201,8 +149,8 @@ async function remplirMagasinCollegues(){
|
||||||
|
|
||||||
// narration comme c'est la première fois qu'on achète
|
// narration comme c'est la première fois qu'on achète
|
||||||
|
|
||||||
ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
|
ouvrirAlerte("Vous avez débloqué "+ collegue.nom+" !!"+collegues[key]["narration"])
|
||||||
ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!")
|
ouvrirAlerte("Incrémentation de la rentabilité passive de "+collegue.revenu_passif+" points !!")
|
||||||
|
|
||||||
}, (4000));
|
}, (4000));
|
||||||
|
|
||||||
|
|
@ -212,23 +160,28 @@ async function remplirMagasinCollegues(){
|
||||||
// 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_coll += 1
|
evolution_coll += 1
|
||||||
|
|
||||||
|
// on maj le magasin pour débloquer de nouveaux personnages
|
||||||
|
remplirMagasinCollegues()
|
||||||
|
|
||||||
}else{
|
}else{
|
||||||
// on incrémente la qtt d'objet dans son sacado
|
// on incrémente la qtt d'objet dans son sacado
|
||||||
sacado[key] += 1
|
sacado[key] += 1
|
||||||
}
|
}
|
||||||
|
|
||||||
// augmentation du boost d'incrément
|
// 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
|
// finalement, on lui débite 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
|
score = score - cout_reel
|
||||||
majAffichageScore()
|
majAffichageScore()
|
||||||
|
|
||||||
|
let exp = 0
|
||||||
|
if(key in sacado){
|
||||||
|
exp = sacado[key]
|
||||||
|
}
|
||||||
|
|
||||||
// on change le futur cout dans le tableau
|
// 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{
|
}else{
|
||||||
|
|
@ -237,23 +190,16 @@ async function remplirMagasinCollegues(){
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
})
|
}
|
||||||
|
|
||||||
btn_acheter.innerText = "Acheter"
|
|
||||||
|
|
||||||
// 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_coll[key] = true
|
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)
|
table.appendChild(tr)
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -301,9 +247,11 @@ function leBoostDuProf(){
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
let rickroll = document.getElementById("never")
|
|
||||||
let close_roll = document.getElementById("close_rick")
|
|
||||||
function rickRoll(){
|
function rickRoll(){
|
||||||
|
const rickroll = document.getElementById("never")
|
||||||
|
const close_roll = document.getElementById("close_rick")
|
||||||
|
|
||||||
// affichage de la video
|
// affichage de la video
|
||||||
rickroll.setAttribute("src","./img/never_gonna_give_you_up.mp4")
|
rickroll.setAttribute("src","./img/never_gonna_give_you_up.mp4")
|
||||||
rickroll.setAttribute("type","video/mp4")
|
rickroll.setAttribute("type","video/mp4")
|
||||||
|
|
@ -477,7 +425,7 @@ function teleportationCadeau(n) {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
// affiche le cadeau à un autre endroit pour faire un effet de téléportation
|
// affiche le cadeau à un autre endroit pour faire un effet de téléportation
|
||||||
teleportationCadeau(n)
|
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{
|
}else{
|
||||||
// on enlève le cadeau à la 15ème téléportation :)
|
// on enlève le cadeau à la 15ème téléportation :)
|
||||||
|
|
|
||||||
|
|
@ -4,11 +4,42 @@ class Technologie{
|
||||||
this.cout = this.props.cout
|
this.cout = this.props.cout
|
||||||
this.boost = this.props.boost
|
this.boost = this.props.boost
|
||||||
this.nom = this.props.nom
|
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(){
|
appliquerAmeliorationStyle(){
|
||||||
document.getElementById("alerte-css").setAttribute("href","css/alerte/a"+evolution_tech+".css")
|
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