💩 last addition

public/index.html

@@ -15,6 +15,13 @@
             </div>
         </div>
 
+        <div id="gameEndedModal">
+            <div id="gameEndedModalContent">
+                <p>We have a winner</p>
+                <button id="closeEndGameModalButton" class="close">Okay</button>
+            </div>
+        </div>
+
         <div id="roomkeyHolder"></div>
         
         <div id="loader">

public/scripts/index.js

@@ -48,6 +48,8 @@ socket.on("played move", (isHit, isWin) => {
   if (isHit) hitNotification.classList.remove("hidden-element");
   else hitNotification.classList.add("hidden-element");
 
+  if (isWin) gameEnd()
+
   if (isWin) winNotification.classList.remove("hidden-element");
   else winNotification.classList.add("hidden-element");
 
@@ -60,6 +62,11 @@ socket.on('opponent left', () => {
   modal.style.display = 'block';
 })
 
+function gameEnd() {
+  const modal = document.getElementById('gameEndedModal');
+  modal.style.display = 'block';
+}
+
 export function sendMove(move) {
   const notification = document.querySelector("#play_notification");
   socket.emit("play", roomId, socket.id, move);
@@ -111,4 +118,15 @@ document.getElementById('closeModalButton').addEventListener('click', () => {
   drawGrid()
 });
 
+document.getElementById('closeModalButton').addEventListener('click', () => {
+  const modal = document.getElementById('opponentLeftModal');
+  const ennemyBoard = document.querySelector("#ennemy_board");
+
+  ennemyBoard.classList.add("hidden-element");
+  modal.style.display = 'none';
+
+  socket.emit("reset grid", roomId)
+  drawGrid()
+});
+
 setTimeout(startConnection, 100);