Add a game dynamic that first one which reach 10 points win

Author: OliRati

assets/css/style.css

@@ -22,14 +22,15 @@
     ul {
         margin: 2rem 0;
     }
+
     li {
         margin-left: 2rem;
     }
 }
 
 .container-game {
     width: 30rem;
-    margin: 0 auto;
+    margin: 2rem auto;
 
     p {
         font-size: 1.5rem;
@@ -60,20 +61,30 @@
 
 .bouton-feu,
 .bouton-eau,
-.bouton-terre {
+.bouton-terre,
+.bouton-rejouer {
     border: none;
-    background-color: lightskyblue;
     padding: 1rem 3rem;
     font-size: 2rem;
     font-weight: 600;
 }
 
-
 .bouton-feu {
     background-color: burlywood;
 }
 
+.bouton-feu:disabled,
+.bouton-eau:disabled,
+.bouton-terre:disabled,
+.bouton-rejouer:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    background-color: #eee;
+    color: gray;
+}
+
 .bouton-feu:hover {
+    cursor: pointer;
     background-color: orange;
 }
 
@@ -82,6 +93,7 @@
 }
 
 .bouton-eau:hover {
+    cursor: pointer;
     background-color: lightskyblue;
 }
 
@@ -90,15 +102,26 @@
 }
 
 .bouton-terre:hover {
+    cursor: pointer;
     background-color: gray;
 }
 
+.bouton-rejouer {
+    background-color: lightgreen;
+}
+
+.bouton-rejouer:hover {
+    background-color: greenyellow;
+    cursor: pointer;
+}
+
 .interractions {
     margin-top: 2rem;
     padding: 1rem;
     width: 100%;
+    height: 8rem;
     background-color: #EEE;
     color: black;
     font-size: 1rem;
     font-weight: 400;
-}
+}

assets/js/script.js

@@ -49,6 +49,7 @@ function testWinner(choice1, choice2) {
 const boutonFeu = document.querySelector(".bouton-feu");
 const boutonEau = document.querySelector(".bouton-eau");
 const boutonTerre = document.querySelector(".bouton-terre");
+const boutonRejouer = document.querySelector(".bouton-rejouer");
 
 /* Recupere zone d'interractions */
 
@@ -66,6 +67,10 @@ let partiesPerdues = 0;
 
 let computerChoice = powerPc();
 
+boutonRejouer.disabled = true;
+interractions.textContent = "Choisissez un élément...";
+
+
 function theWinnerIs(userChoice) {
     let str = `Ordinateur : ${tabName[computerChoice]}\nVous : ${tabName[userChoice]}\nResultat : `;
 
@@ -83,7 +88,6 @@ function theWinnerIs(userChoice) {
     /* Update interraction section */
 
     interractions.textContent = str;
-    interractions.textContent += "\nEssayez encore...";
 
     partiesJouer++;
 
@@ -92,7 +96,20 @@ function theWinnerIs(userChoice) {
     nombreGagnees.textContent = partiesGagnes.toString();
     nombrePerdues.textContent = partiesPerdues.toString();
 
-    computerChoice = powerPc();
+    if ((partiesPerdues === 10) || (partiesGagnes === 10)) {
+        boutonEau.disabled = true;
+        boutonFeu.disabled = true;
+        boutonTerre.disabled = true;
+        boutonRejouer.disabled = false;
+        if (partiesGagnes === 10)
+            interractions.textContent += "\nVous aves gagné la manche."
+        else
+            interractions.textContent += "\nVous avez perdu la manche."
+    }
+    else {
+        computerChoice = powerPc();
+        interractions.textContent += "\nEssayez encore...";
+    }
 }
 
 boutonFeu.addEventListener("click", () => {
@@ -108,4 +125,20 @@ boutonEau.addEventListener("click", () => {
 boutonTerre.addEventListener("click", () => {
     // console.log("Terre clicked");
     theWinnerIs(2);
-});
+});
+
+boutonRejouer.addEventListener("click", () => {
+    // console.log("Rejouer clicked");
+    partiesJouer = 0;
+    partiesGagnes = 0;
+    partiesPerdues = 0;
+
+    computerChoice = powerPc();
+
+    boutonEau.disabled = false;
+    boutonFeu.disabled = false;
+    boutonTerre.disabled = false;
+    boutonRejouer.disabled = true;
+
+    interractions.textContent = "Choisissez un élément...";
+})

index.html

@@ -20,11 +20,10 @@ <h2>Regles du jeu :</h2>
       <li>- La **terre** bat l'**eau**</li>
       <li>- Egalité si le joueur et l'ordinateur ont le même pouvoir</li>
     </ul>
+    <p>Le premier qui arrive à 10 victoires remporte la manche.</p>
   </div>
 
   <div class="container-game">
-    <p>A toi de jouer :</p>
-
     <div class="container-scores">
       <div>Parties : <span class="partie-number">0</span></div>
       <div>Vous : <span class="score-user">0</span></div>
@@ -36,9 +35,11 @@ <h2>Regles du jeu :</h2>
       <button class="bouton-eau">eau</button>
       <button class="bouton-terre">terre</button>
     </div>
-    
+
     <pre class="interractions">
     </pre>
+
+    <button class="bouton-rejouer">Rejouer...</button>
   </div>
 </body>