From e28db82339ebd1a92b7df302badc9ec71cd3cea7 Mon Sep 17 00:00:00 2001 From: MaciejkaG Date: Fri, 8 Mar 2024 21:35:01 +0100 Subject: [PATCH] Major changes - Improved game end dialog To-do: - Remake timers - Code optimisations - Minor changes and improvements --- index.js | 33 ++++++++++++++-- public/assets/css/board.css | 41 ++++++++++++++++++++ public/assets/js/socket-game.js | 68 +++++++++++++++++++-------------- utils/battleships.js | 2 - views/board.handlebars | 7 +++- 5 files changed, 116 insertions(+), 35 deletions(-) diff --git a/index.js b/index.js index 24d2dcb..91c437d 100644 --- a/index.js +++ b/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; } } diff --git a/public/assets/css/board.css b/public/assets/css/board.css index 5fed73d..d02bb28 100644 --- a/public/assets/css/board.css +++ b/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; } diff --git a/public/assets/js/socket-game.js b/public/assets/js/socket-game.js index 8bf73c7..7ff7c90 100644 --- a/public/assets/js/socket-game.js +++ b/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. ${oppName}`); + + 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) => { @@ -161,26 +193,4 @@ 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); \ No newline at end of file +}); \ No newline at end of file diff --git a/utils/battleships.js b/utils/battleships.js index 7fdfb23..1032c8d 100644 --- a/utils/battleships.js +++ b/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); diff --git a/views/board.handlebars b/views/board.handlebars index 0a2525c..cbdab5f 100644 --- a/views/board.handlebars +++ b/views/board.handlebars @@ -1,5 +1,10 @@
-

Łączenie...

+

Łączenie...

+
+

+

+ +