From 15f5d46b55c18fbeabdc07226e892552cefb3797 Mon Sep 17 00:00:00 2001
From: JOSSERAND GIOVANNI p2405212 <giovanni.josserand@etu.univ-lyon1.fr>
Date: Mon, 16 Jun 2025 14:17:17 +0000
Subject: [PATCH] Edit web.h

---
 web.h | 377 ++++++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 248 insertions(+), 129 deletions(-)
diff --git a/web.h b/web.h
index dda244a..3ff08a4 100644
--- a/web.h
+++ b/web.h
@@ -35,138 +35,257 @@ void setupWeb(){
 
 
 
-void webDuo(NetworkClient &c){
-  c.println("<!DOCTYPE html>");
-  c.println("<html>");
-  c.println("<head>");
-  c.println("  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
-  c.println("  <style>");
-  c.println("    body { margin: 0; padding: 0; height:100% }");
-  c.println("    html { height: 100%; }");
-  c.println("    .menu {");
-  c.println("        display: flex;");
-  c.println("        justify-content: center;");
-  c.println("        margin: 1%;");
-  c.println("    }");
-  c.println("    .grid {");
-  c.println("        display: flex;");
-  c.println("        width: 100%;");
-  c.println("        height: 90%;");
-  c.println("    }");
-  c.println("    .column {");
-  c.println("        width: 100%;");
-  c.println("        height: 100%;");
-  c.println("    }");
-  c.println("    .cell {");
-  c.println("      border: 1px solid black;");
-  c.println("      display: flex;");
-  c.println("      justify-content: center;");
-  c.println("      align-items: center;");
-  c.println("      font-size: 3em;");
-  c.println("      cursor: pointer;");
-  c.println("      user-select: none;");
-  c.println("      height: 33%;");
-  c.println("    }");
-  c.println("  </style>");
-  c.println("</head>");
-  c.println("<body>");
-  c.println("    <div class=\"menu\">");
-  c.println("        <button class=\"recommencer\">Recommencer</button>");
-  c.println("    </div>");
-  c.println("    <div class=\"grid\">");
-  c.println("        <div class=\"column\">");
-  c.println("            <div class=\"cell\" id=\"1\">1</div>");
-  c.println("            <div class=\"cell\" id=\"2\">2</div>");
-  c.println("            <div class=\"cell\" id=\"3\">3</div>");
-  c.println("        </div>");
-  c.println("        <div class=\"column\">");
-  c.println("            <div class=\"cell\" id=\"4\">4</div>");
-  c.println("            <div class=\"cell\" id=\"5\">5</div>");
-  c.println("            <div class=\"cell\" id=\"6\">6</div>");
-  c.println("        </div>");
-  c.println("        <div class=\"column\">");
-  c.println("            <div class=\"cell\" id=\"7\">7</div>");
-  c.println("            <div class=\"cell\" id=\"8\">8</div>");
-  c.println("            <div class=\"cell\" id=\"9\">9</div>");
-  c.println("        </div>");
-  c.println("    </div>");
+void webGame(NetworkClient &c){
+  c.println(R"rawliteral(
 
-  c.println("    <script>");
-  c.println("        let joueur = 1;");
-  c.println("        let etat = [0,0,0,0,0,0,0,0,0];");
-  c.println("        let jeuFini = false;");
-  c.println("        let combinaisons = [");
-  c.println("        [0,1,2],");
-  c.println("        [3,4,5],");
-  c.println("        [6,7,8],");
-  c.println("        [0,3,6],");
-  c.println("        [1,4,7],");
-  c.println("        [2,5,8],");
-  c.println("        [0,4,8],");
-  c.println("        [2,4,6]");
-  c.println("        ];");
-
-  c.println("        let cells = document.querySelectorAll('.cell');");
-  c.println("        for (let i=0; i<cells.length; i++) {");
-  c.println("        cells[i].addEventListener('click', function() {");
-  c.println("            if (jeuFini) return;");
-  c.println("            let index = Array.prototype.indexOf.call(cells, this);");
-  c.println("            if (etat[index] === 0) {");
-  c.println("            etat[index] = joueur;");
-  c.println("            if (joueur === 1) {");
-  c.println("                this.style.backgroundColor = 'blue';");
-  c.println("            } else {");
-  c.println("                this.style.backgroundColor = 'red';");
-  c.println("            }");
-
-  c.println("            sleep(10).then(() => {");
-  c.println("                if (verifieVictoire(joueur)) {");
-  c.println("                alert('Le joueur ' + joueur + ' a gagne !');");
-  c.println("                jeuFini = true;");
-  c.println("            } else if (etat.indexOf(0) === -1) {");
-  c.println("                alert('Match nul !');");
-  c.println("                jeuFini = true;");
-  c.println("            } else {");
-  c.println("                joueur = (joueur === 1) ? 2 : 1;");
-  c.println("            }");
-  c.println("            })");
-  c.println("            }");
-  c.println("        });");
-  c.println("        }");
-
-  c.println("        function verifieVictoire(j) {");
-  c.println("        for (let i=0; i<combinaisons.length; i++) {");
-  c.println("            let c = combinaisons[i];");
-  c.println("            if (etat[c[0]] === j && etat[c[1]] === j && etat[c[2]] === j) {");
-  c.println("            return true;");
-  c.println("            }");
-  c.println("        }");
-  c.println("        return false;");
-  c.println("        }");
-
-  c.println("        function sleep(ms) {");
-  c.println("            return new Promise(resolve => setTimeout(resolve, ms));");
-  c.println("        }");
-
-  c.println("        let recommencer = document.querySelectorAll('.recommencer');");
-  c.println("        for (let i=0; i<recommencer.length; i++) {");
-  c.println("            recommencer[i].addEventListener('click', function() {");
-  c.println("                for (let j=0; j<cells.length; j++) {");
-  c.println("                    cells[j].style.backgroundColor = 'white';");
-  c.println("                }");
-  c.println("                jeuFini = false;");
-  c.println("                joueur = 1;");
-  c.println("                for(let j=0; j<etat.length; j++){");
-  c.println("                    etat[j]=0;");
-  c.println("                }");
-  c.println("            });");
-  c.println("        }");
-  c.println("    </script>");
-  c.println("</body>");
-  c.println("</html>");
+  <!DOCTYPE html>
+  <html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Morpion Duo/Solo</title>
+    <style>
+      body {
+        margin: 0; padding: 0;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        background: #121212;
+        color: #eee;
+        display: flex;
+        flex-direction: column;
+        height: 100vh;
+        align-items: center;
+        justify-content: center;
+      }
+      h1 { margin-bottom: 0.2em; }
+      .menu {
+        margin-bottom: 10px;
+        display: flex;
+        gap: 15px;
+        align-items: center;
+      }
+      button.recommencer {
+        background-color: #6200ea;
+        border: none;
+        color: white;
+        padding: 12px 25px;
+        font-size: 1.2em;
+        border-radius: 5px;
+        cursor: pointer;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.3);
+        transition: background-color 0.3s ease;
+      }
+      button.recommencer:hover {
+        background-color: #3700b3;
+      }
+      select {
+        font-size: 1.1em;
+        padding: 6px 10px;
+        border-radius: 5px;
+        border: none;
+        background-color: #333;
+        color: #eee;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
+        transition: background-color 0.3s ease;
+      }
+      select:hover {
+        background-color: #555;
+      }
+      .status {
+        margin-bottom: 15px;
+        font-size: 1.3em;
+        height: 1.6em;
+        color: #bb86fc;
+        font-weight: bold;
+      }
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(3, 100px);
+        grid-template-rows: repeat(3, 100px);
+        gap: 8px;
+        user-select: none;
+        margin-bottom: 15px;
+      }
+      .cell {
+        background-color: #1f1f1f;
+        border-radius: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 3.5em;
+        font-weight: bold;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.15s ease;
+        box-shadow: 0 3px 6px rgba(0,0,0,0.5);
+      }
+      .cell:hover {
+        background-color: #3700b3;
+        transform: scale(1.05);
+      }
+      .blue { color: #2196F3; }
+      .red { color: #f44336; }
+      .winner {
+        background-color: #03dac6 !important;
+        color: #000 !important;
+        animation: pulse 1s infinite;
+      }
+      @keyframes pulse {
+        0%, 100% { box-shadow: 0 0 10px 5px #03dac6; }
+        50% { box-shadow: 0 0 20px 10px #03dac6; }
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Morpion</h1>
+    <div class="menu">
+      <label for="modeSelect">Mode :</label>
+      <select id="modeSelect">
+        <option value="duo" selected>Duo (2 joueurs)</option>
+        <option value="solo">Solo (contre IA)</option>
+      </select>
+    </div>
+    <div class="status">Joueur 1 (Bleu) à jouer</div>
+    <div class="grid">
+      <div class="cell" id="0"></div>
+      <div class="cell" id="1"></div>
+      <div class="cell" id="2"></div>
+      <div class="cell" id="3"></div>
+      <div class="cell" id="4"></div>
+      <div class="cell" id="5"></div>
+      <div class="cell" id="6"></div>
+      <div class="cell" id="7"></div>
+      <div class="cell" id="8"></div>
+    </div>
+    <button class="recommencer">Recommencer</button>
+    <script>
+      const modeSelect = document.getElementById('modeSelect');
+      const status = document.querySelector('.status');
+      const cells = document.querySelectorAll('.cell');
+      const combinaisons = [
+        [0,1,2], [3,4,5], [6,7,8],
+        [0,3,6], [1,4,7], [2,5,8],
+        [0,4,8], [2,4,6]
+      ];
+      let joueur = 1;
+      let etat = [0,0,0,0,0,0,0,0,0];
+      let jeuFini = false;
+  
+      function verifieVictoire(j) {
+        for (let c of combinaisons) {
+          if (etat[c[0]] === j && etat[c[1]] === j && etat[c[2]] === j) {
+            return c;
+          }
+        }
+        return null;
+      }
+  
+      function declareVictoire(cellsIndices) {
+        jeuFini = true;
+        for (let i of cellsIndices) {
+          cells[i].classList.add('winner');
+        }
+        status.textContent = `Le joueur ${joueur} a gagné !`;
+      }
+  
+      function declareMatchNul() {
+        jeuFini = true;
+        status.textContent = "Match nul !";
+      }
+  
+      function updateStatus() {
+        if (!jeuFini) {
+          if (modeSelect.value === 'duo') {
+            status.textContent = `Joueur ${joueur} (${joueur === 1 ? 'Bleu' : 'Rouge'}) à jouer`;
+          } else {
+            status.textContent = joueur === 1 ? 'Votre tour (Bleu)' : 'Tour de l\'IA (Rouge)';
+          }
+        }
+      }
+  
+      function iaPlay() {
+        if (jeuFini) return;
+        let libres = [];
+        etat.forEach((v, i) => { if (v === 0) libres.push(i); });
+        if (libres.length === 0) return;
+        let choix = libres[Math.floor(Math.random() * libres.length)];
+        etat[choix] = 2;
+        let cell = cells[choix];
+        cell.textContent = 'O';
+        cell.classList.add('red');
+        let vic = verifieVictoire(2);
+        if (vic) {
+          joueur = 2;
+          declareVictoire(vic);
+        } else if (!etat.includes(0)) {
+          declareMatchNul();
+        } else {
+          joueur = 1;
+          updateStatus();
+        }
+      }
+  
+      function resetGame() {
+        jeuFini = false;
+        joueur = 1;
+        etat.fill(0);
+        cells.forEach(c => {
+          c.textContent = '';
+          c.classList.remove('blue', 'red', 'winner');
+        });
+        updateStatus();
+        if (modeSelect.value === 'solo' && joueur === 2) {
+          iaPlay();
+        }
+      }
+  
+      cells.forEach((cell, index) => {
+        cell.addEventListener('click', () => {
+          if (jeuFini || etat[index] !== 0) return;
+          if (modeSelect.value === 'duo') {
+            etat[index] = joueur;
+            cell.textContent = joueur === 1 ? 'X' : 'O';
+            cell.classList.add(joueur === 1 ? 'blue' : 'red');
+            let vic = verifieVictoire(joueur);
+            if (vic) {
+              declareVictoire(vic);
+            } else if (!etat.includes(0)) {
+              declareMatchNul();
+            } else {
+              joueur = joueur === 1 ? 2 : 1;
+              updateStatus();
+            }
+          } else {
+            if (joueur !== 1) return;
+            etat[index] = 1;
+            cell.textContent = 'X';
+            cell.classList.add('blue');
+            let vic = verifieVictoire(1);
+            if (vic) {
+              declareVictoire(vic);
+            } else if (!etat.includes(0)) {
+              declareMatchNul();
+            } else {
+              joueur = 2;
+              updateStatus();
+              setTimeout(iaPlay, 700);
+            }
+          }
+        });
+      });
+  
+      document.querySelector('button.recommencer').addEventListener('click', resetGame);
+      modeSelect.addEventListener('change', resetGame);
+  
+      updateStatus();
+    </script>
+  </body>
+  </html>
+)rawliteral");
 }
 
 
+
+
 void webSolo(NetworkClient &c){
   c.println("<!DOCTYPE html>");
   c.println("<html>");
@@ -208,7 +327,7 @@ void loopWeb(){
             if(solo){
               webSolo(client);
             }else{
-              webDuo(client);
+              webGame(client);
             }
             client.println();
             break;
