Major changes

- Improved game end dialog

To-do:
- Remake timers
- Code optimisations
- Minor changes and improvements

index.js

@@ -62,7 +62,7 @@ app.get("/setup", (req, res) => {
 });
 
 app.post('/api/setup-profile', (req, res) => {
-    if (req.session.nickname == null && 4 < req.body.nickname.length && req.body.nickname.length < 16) {
+    if (req.session.nickname == null && 3 <= req.body.nickname.length && req.body.nickname.length <= 16) {
         req.session.nickname = req.body.nickname;
         req.session.playerID = uuidv4();
         req.session.activeGame = null;
@@ -224,7 +224,7 @@ io.on('connection', async (socket) => {
 
                 let UTCTs = Math.floor((new Date()).getTime() / 1000 + 90);
                 io.to(playerGame.id).emit('turn update', { turn: 0, phase: "preparation", timerToUTC: UTCTs });
-                bships.timer(90, async () => {
+                bships.timer(10, async () => {
                     const playerGame = await GInfo.getPlayerGameData(socket);
                     for (let i = 0; i < playerGame.data.boards.length; i++) {
                         const ships = playerGame.data.boards[i].ships;
@@ -291,7 +291,34 @@ io.on('connection', async (socket) => {
                         io.to(playerGame.id).emit("ship sunk", enemyIdx, hit.ship);
 
                         if (hit.gameFinished) {
-                            io.to(playerGame.id).emit("game finished", !enemyIdx ? 1 : 0);
+                            const members = [...roomMemberIterator(playerGame.id)];
+                            let hostNickname;
+                            let guestNickname;
+
+
+                            for (let i = 0; i < members.length; i++) {
+                                const sid = members[i][0];
+                                const socket = io.sockets.sockets.get(sid);
+                                if (socket.request.session.id === playerGame.data.hostId) {
+                                    hostNickname = socket.request.session.nickname;
+                                } else {
+                                    guestNickname = socket.request.session.nickname;
+                                }
+                            }
+
+                            for (let i = 0; i < members.length; i++) {
+                                const sid = members[i][0];
+                                const socket = io.sockets.sockets.get(sid);
+                                if (socket.request.session.id === playerGame.data.hostId) {
+                                    io.to(sid).emit("game finished", !enemyIdx ? 1 : 0, guestNickname);
+                                } else {
+                                    io.to(sid).emit("game finished", !enemyIdx ? 1 : 0, hostNickname);
+                                }
+                            }
+
+                            bships.resetTimers();
+                            endGame(playerGame.id);
+                            return;
                         }
                     }
 

public/assets/css/board.css

@@ -230,6 +230,47 @@ h1,h2,h3,h4,h5,h6 {
     z-index: 999;
 }
 
+.cover .dialog {
+    background-color: rgba(0, 0, 0, 0.6);
+    text-align: center;
+    padding: 2rem 4rem;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    border-radius: 15px;
+    gap: 1rem;
+    border: solid 1px white;
+}
+
+.cover .dialog button {
+    padding: 0.5em 3em;
+    font-size: 1rem;
+    background-color: black;
+    border: solid 1px white;
+    color: white;
+    border-radius: 15px;
+    outline: none;
+    cursor: pointer;
+}
+
+.cover .dialog button:hover {
+    background-color: white;
+    color: black;
+}
+
+.cover .dialog * {
+    margin: 0;
+}
+
+.cover.postGame .title {
+    display: none;
+}
+
+.cover.postGame .dialog {
+    display: flex;
+}
+
 #timer {
     transition: color 0.3s;
 }

public/assets/js/socket-game.js

@@ -123,20 +123,52 @@ socket.on("ship sunk", (victimIdx, ship) => {
     }
 });
 
-socket.on("game finished", (winnerIdx) => {
-    if (winnerIdx === playerIdx) {
-        alert("Wygrałeś!");
+// Update timer
+var updateTimer = setInterval(() => {
+    if (timerDestination == null) {
+        $("#timer").html("");
     } else {
-        alert("Przegrałeś!");
+        const UTCNow = Math.floor((new Date()).getTime() / 1000);
+
+        const time = Math.abs(UTCNow - timerDestination);
+
+        if (time < 10) {
+            $("#timer").addClass("active");
+        } else {
+            $("#timer").removeClass("active");
+        }
+
+        const minutes = Math.floor(time / 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
+        const seconds = (time - minutes * 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
+
+        $("#timer").html(`${minutes}:${seconds}`);
     }
+}, 250);
+
+socket.on("game finished", (winnerIdx, oppName) => {
+    socket.disconnect();
+    $("#opponent").html(`Vs. <span class="important">${oppName}</span>`);
+
+    if (winnerIdx === playerIdx) {
+        $("#state").html("Zwycięstwo");
+        $("#state").addClass("dynamic");
+    } else {
+        $("#state").html("Porażka");
+        $("#state").addClass("danger");
+    }
+
+    $(".cover").addClass("postGame");
+    clearInterval(updateTimer);
+    $("#timer").html(`00:00`);
+    $(".cover").css({ opacity: 1, pointerEvents: "all" });
 });
 
 socket.on('connect', () => {
-    $(".cover h1").html("Oczekiwanie na serwer...");
+    $(".cover .title").html("Oczekiwanie na serwer...");
 });
 
 socket.on("players ready", () => {
-    $(".cover").css({opacity: 0, pointerEvents: "none"});
+    $(".cover").css({ opacity: 0, pointerEvents: "none" });
 });
 
 socket.on("player idx", (idx) => {
@@ -162,25 +194,3 @@ socket.on('turn update', (turnData) => {
 socket.on('player left', () => {
     window.location.replace("/");
 });
-
-// Update timer
-setInterval(() => {
-    if (timerDestination == null) {
-        $("#timer").html("");
-    } else {
-        const UTCNow = Math.floor((new Date()).getTime() / 1000);
-
-        const time = Math.abs(UTCNow - timerDestination);
-
-        if (time < 10) {
-            $("#timer").addClass("active");
-        } else {
-            $("#timer").removeClass("active");
-        }
-
-        const minutes = Math.floor(time / 60).toLocaleString('pl-PL', {minimumIntegerDigits: 2, useGrouping: false});
-        const seconds = (time - minutes * 60).toLocaleString('pl-PL', { minimumIntegerDigits: 2, useGrouping: false });
-
-        $("#timer").html(`${minutes}:${seconds}`);
-    }
-}, 250);

utils/battleships.js

@@ -98,7 +98,6 @@ export class GameInfo {
                 shotShip = ship;
                 playerShips[i].hits[check.fieldIdx] = true;
                 if (!playerShips[i].hits.includes(false)) {
-                    console.log(playerShips);
                     let gameFinished = true;
                     await this.redis.json.set(key, `.boards[${enemyIdx}].ships`, playerShips);
                     playerShips.every(ship => {
@@ -214,7 +213,6 @@ export function checkHit(ships, posX, posY) {
 
         let l = !ship.type ? ship.type + 1 : ship.type + 2;
         for (let i = 0; i < l; i++) {
-            // console.log("a");
             let x = clamp(ship.posX + multips[0] * i, 0, 9);
             let y = clamp(ship.posY + multips[1] * i, 0, 9);
 

views/board.handlebars

@@ -1,5 +1,10 @@
 <div class="cover">
-    <h1>Łączenie...</h1>
+    <h1 class="title">Łączenie...</h1>
+    <div class="dialog">
+        <h1 id="state"></h1>
+        <h3 id="opponent"></h3>
+        <button onclick="window.location.href = '/'">Powróć do menu</button>
+    </div>
 </div>
 
 <div class="container" id="gameView">