✨ add leave game when finished features

10 months ago · fc3e3c8e96
parent 43f8efc624
commit fc3e3c8e96
4 changed files with 50 additions and 48 deletions
--- a/businesses/Room.js
+++ b/businesses/Room.js
@ -1,8 +1,7 @@
 class Room {
-    constructor(room) {
+    constructor() {
        this.id = this.generateRoomId(); // change the id with something prettier
        this.players = [];
-        this.room = room;
        this.actualPlayer = "";
        this.ennemy = "";
    }
@ -28,14 +27,6 @@ class Room {
        return this.actualPlayer
    }

-    /*
-    endGame() {
-        this.room.players.forEach((player) =>
-            io.to(player.socketId).emit("end game"),
-        );
-    }
-    */
-
    move(move) {
        let ret = {isMove: false, player: this.actualPlayer}
        let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row];
@ -76,6 +67,7 @@ class Room {

    validBoards() {
        this.players.forEach((player) => {
+            // sometimes i get error here
            player.pieces.forEach((piece) => {
            for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
                for (let j = piece.startPos.y; j <= piece.endPos.y; j++) {
--- a/public/assets/style.css
+++ b/public/assets/style.css
@ -8,7 +8,7 @@
    display: none;
 }

-#opponentLeftModal {
+.modal {
    display: none;
    position: fixed;
    z-index: 1;
@ -21,25 +21,7 @@
    background-color: rgba(0,0,0,0.4);
 }

-#gameEndedModal {
-    display: none;
-    position: fixed;
-    z-index: 1;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
-    background-color: rgb(0,0,0);
-    background-color: rgba(0,0,0,0.4);
-}
-
-#errorHandler {
-    margin-top: 3%;
-    color: red;
-}
-
-#opponentLeftModalContent {
+.modalContent {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
@ -54,4 +36,16 @@
    padding: 15px 20px;
    border: none;
    cursor: pointer;
+}
+
+.buttonChoice {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-evenly;
+}
+
+
+#errorHandler {
+    margin-top: 3%;
+    color: red;
 }
--- a/public/pages/gameView.html
+++ b/public/pages/gameView.html
@ -8,17 +8,20 @@
        <title>Maettleship</title>
    </head>
    <body>
-        <div id="opponentLeftModal">
-            <div id="opponentLeftModalContent">
+        <div class="modal" id="opponentLeftModal">
+            <div class="modalContent" id="opponentLeftModalContent">
                <p>Your opponent has left the game.</p>
                <button id="closeModalButton" class="close">Okay</button>
            </div>
        </div>

-        <div id="gameEndedModal">
-            <div id="gameEndedModalContent">
+        <div class="modal" id="gameEndedModal">
+            <div class="modalContent" id="gameEndendModalContent">
                <p>We have a winner</p>
-                <button id="closeEndGameModalButton" class="close">Okay</button>
+                <div class="buttonChoice">
+                    <button id="rematchButton" class="close">Rematch</button>
+                    <button id="goToMenuButton" class="close">Menu</button>
+                </div>
            </div>
        </div>

@ -58,9 +61,11 @@

        <p id="playerInfo"></p>

-        <h2 class="hidden-element" id="play_notification">You have to play</h2>
-        <h2 class="hidden-element" id="hit_notification">Hit !</h2>
-        <h2 class="hidden-element" id="win_notification">WIN !</h2>
+        <div id="inGameNotification">
+            <h2 class="hidden-element" id="play_notification">You have to play</h2>
+            <h2 class="hidden-element" id="hit_notification">Hit !</h2>
+            <h2 class="hidden-element" id="win_notification">WIN !</h2>
+        </div>

        <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
        <script type="module" src="../scripts/game.js"></script>
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@ -62,6 +62,24 @@ socket.on('opponent left', () => {
  modal.style.display = 'block';
 })

+socket.on("go to menu", () => {
+  const modal = document.getElementById("gameEndedModal")
+  const ennemyGrid = document.getElementById("ennemy_board")
+  const loader = document.getElementById("loader")
+  const roomkeyHolder = document.getElementById("roomkeyHolder")
+  const notifications = document.getElementById("inGameNotification")
+
+  roomId = ""
+
+  notifications.style.display = 'none'
+  modal.style.display = 'none'
+  ennemyGrid.style.display = 'none'
+  loader.classList.remove = "hidden-element"
+  roomkeyHolder.style.display = 'none'
+
+  drawGrid()
+})
+
 function gameEnd() {
  const modal = document.getElementById('gameEndedModal');
  modal.style.display = 'block';
@ -126,15 +144,8 @@ 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()
-});
+document.getElementById('goToMenuButton').addEventListener('click', () => {
+  socket.emit("game ended", roomId);
+})

 setTimeout(startConnection, 100);