From e221727c95ac45e342544fe2c79d522431b69832 Mon Sep 17 00:00:00 2001 From: MaciejkaG Date: Tue, 5 Mar 2024 21:34:16 +0100 Subject: [PATCH] Major changes - Fixed a bug causing removing ships to sometimes wrongly assign ship type 0 an additional ship. - Players now can't switch boards in the preparation phase. - Added low timer danger animation - Added enemy board target and crosshair display formatting. - Minor animation duration tweaks to make stuff look smoother without causing dizziness. - Ship field X sign (still not used) now formats properly. --- public/assets/css/board.css | 39 ++++++++++++++++++++++------ public/assets/js/battleships-lib.js | 8 +++--- public/assets/js/main.js | 40 +++++++++++++++++------------ public/assets/js/socket-game.js | 15 ++++++++--- utils/battleships.js | 2 +- views/board.handlebars | 6 ++--- 6 files changed, 74 insertions(+), 36 deletions(-) diff --git a/public/assets/css/board.css b/public/assets/css/board.css index 8e72269..d7c21cb 100644 --- a/public/assets/css/board.css +++ b/public/assets/css/board.css @@ -67,7 +67,7 @@ h1,h2,h3,h4,h5,h6 { aspect-ratio: 1; border-radius: 20%; cursor: pointer; - transition: background 0.05s; + transition: background 0.1s; } .field .shipField { @@ -85,7 +85,7 @@ h1,h2,h3,h4,h5,h6 { background: var(--ship-invalid); } -.field .shipField.active { +.field.active .shipField { transform: scale(1); opacity: 1; } @@ -93,11 +93,15 @@ h1,h2,h3,h4,h5,h6 { .field svg { opacity: 0; width: 100%; - height: 100%; - transition: opacity 0.3s; + aspect-ratio: 1; + display: block; + border-radius: 20%; + transform: scale(0); + transition: opacity 0.25s, transform 0.25s 0.05s; } .field.hit svg { + transform: scale(1); opacity: 1; } @@ -105,14 +109,14 @@ h1,h2,h3,h4,h5,h6 { color: var(--dynamic); } -.danger { - color: var(--danger); -} - .important { color: var(--important); } +.danger { + color: var(--danger); +} + .container { display: flex; justify-content: center; @@ -156,6 +160,11 @@ h1,h2,h3,h4,h5,h6 { transition: opacity 0.3s; } +#boardSwitch { + opacity: 0.3; + transition: opacity 0.3s; +} + .secondary { transform: translateX(75%) scale(0.3); pointer-events: none; @@ -203,4 +212,18 @@ h1,h2,h3,h4,h5,h6 { backdrop-filter: blur(20px); transition: opacity 0.5s; z-index: 999; +} + +#timer { + transition: color 0.3s; +} + +@keyframes timerDanger { + 0% { color: var(--important) } + 50% { color: var(--danger) } + 100% { color: var(--important) } +} + +#timer.active { + animation: timerDanger 0.7s infinite ease; } \ No newline at end of file diff --git a/public/assets/js/battleships-lib.js b/public/assets/js/battleships-lib.js index 1bff20d..84e5b00 100644 --- a/public/assets/js/battleships-lib.js +++ b/public/assets/js/battleships-lib.js @@ -12,7 +12,7 @@ class Battleships { for (var i = 0; i < size; i++) { let row = "
"; for (var n = 0; n < size; n++) { - row += `
`; + row += `
`; } row += "
"; board += row; @@ -34,7 +34,7 @@ class Battleships { getRow(row) { row++; if (row<=this.boardSize) { - return $(`#board .row:nth-child(${row}) .field`); + return $(`.board .row:nth-child(${row}) .field`); } else { throw new RangeError("getRow position out of range."); } @@ -43,7 +43,7 @@ class Battleships { getColumn(column) { column++; if (column<=this.boardSize) { - return $(`#board .row .field:nth-child(${column})`); + return $(`.board .row .field:nth-child(${column})`); } else { throw new RangeError("getColumn position out of range."); } @@ -75,7 +75,7 @@ class Battleships { } fields.forEach(field => { - this.getField(field[0], field[1]).children(".shipField").addClass("active"); + this.getField(field[0], field[1]).addClass("active"); }); return fields; diff --git a/public/assets/js/main.js b/public/assets/js/main.js index 576a51c..ee883cc 100644 --- a/public/assets/js/main.js +++ b/public/assets/js/main.js @@ -20,7 +20,7 @@ var hoveredField = null; refreshBoardView(); -$("#board .field").hover(function () { +$(".board .field").hover(function () { hoveredField = this; // Pokaż "miarki" let posX = parseInt($(this).data("pos-x")); @@ -103,26 +103,34 @@ $("#board .field").hover(function () { changedFields.length = 0; }); -$("#board .field").on("click", function() { +// $(".board .field").on("click", function() { -}); +// }); var ownBoardIsActive = true; -function switchBoards() { - if (ownBoardIsActive) { // Aktywna jest plansza użytkownika - $("#secondaryBoard").removeClass("secondary"); - $("#board").addClass("secondary"); - $(".ownBoardInfo").css("opacity", 0); - $(".controlsOwnBoard").css("opacity", 0.3); - } else { // Aktywna jest plansza przeciwnika - $("#board").removeClass("secondary"); - $("#secondaryBoard").addClass("secondary"); - $(".ownBoardInfo").css("opacity", 1); - $(".controlsOwnBoard").css("opacity", 1); - } +$("#board").removeClass("secondary"); +$("#secondaryBoard").addClass("secondary"); +$(".ownBoardInfo").css("opacity", 1); +$(".controlsOwnBoard").css("opacity", 1); - ownBoardIsActive = !ownBoardIsActive; +function switchBoards() { + if (postPrep) { + if (ownBoardIsActive) { // Aktywna jest plansza użytkownika + $("#secondaryBoard").removeClass("secondary"); + $("#board").addClass("secondary"); + $(".ownBoardInfo").css("opacity", 0); + $(".controlsOwnBoard").css("opacity", 0.3); + } else { // Aktywna jest plansza przeciwnika + $("#board").removeClass("secondary"); + $("#secondaryBoard").addClass("secondary"); + $(".ownBoardInfo").css("opacity", 1); + $(".controlsOwnBoard").css("opacity", 1); + } + + ownBoardIsActive = !ownBoardIsActive; + } + } function switchShips() { diff --git a/public/assets/js/socket-game.js b/public/assets/js/socket-game.js index beead83..68c98b0 100644 --- a/public/assets/js/socket-game.js +++ b/public/assets/js/socket-game.js @@ -10,7 +10,7 @@ $('.field').on('click', function () { }); $('.field').on('contextmenu', function () { - if ($(this).children('.shipField').hasClass('active')) { + if ($(this).hasClass('active')) { let originPos = occupiedFields.find((elem) => elem.pos[0] == $(this).data('pos-x') && elem.pos[1] == $(this).data('pos-y')).origin; socket.emit("remove ship", originPos[0], originPos[1]); @@ -44,13 +44,12 @@ socket.on("removed ship", (data) => { }); shipFields.forEach(field => { - bsc.getField(field.pos[0], field.pos[1]).children('.shipField').removeClass("active"); + bsc.getField(field.pos[0], field.pos[1]).removeClass("active"); }); - console.log(occupiedFields); occupiedFields = occupiedFields.filter(n => !shipFields.includes(n)); - console.log(occupiedFields); + console.log(`shipsLeft[${data.type}] = ${shipsLeft[data.type]}`) shipsLeft[data.type]++; refreshBoardView(); }); @@ -70,10 +69,12 @@ socket.on("player idx", (idx) => { socket.on('turn update', (turnData) => { if (turnData.phase === "preparation") { $("#whosTurn").html("Faza przygotowań"); + $("#boardSwitch").css("opacity", 0.3); } else { postPrep = true; myTurn = turnData.turn === playerIdx; turnData.turn === playerIdx ? $("#whosTurn").html("Twoja tura") : $("#whosTurn").html("Tura przeciwnika"); + $("#boardSwitch").css("opacity", 1); } timerDestination = turnData.timerToUTC; @@ -94,6 +95,12 @@ setInterval(() => { 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 }); diff --git a/utils/battleships.js b/utils/battleships.js index 6816a70..cb8203b 100644 --- a/utils/battleships.js +++ b/utils/battleships.js @@ -63,7 +63,7 @@ export class GameInfo { var deletedShip; playerShips = playerShips.filter(function (ship) { - if (!ship.posX != posX || ship.posY != posY) { + if (ship.posX == posX && ship.posY == posY) { deletedShip = ship; } diff --git a/views/board.handlebars b/views/board.handlebars index f71da48..8c3bde7 100644 --- a/views/board.handlebars +++ b/views/board.handlebars @@ -16,14 +16,14 @@

Sterowanie

S Zmiana statku

R Obrót statku

-

B Zamiana planszy

+

B Zamiana planszy

∞

-
-
+
+