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.
2024-11-29 22:52:55 +01:00 · 2024-03-05 21:34:16 +01:00 · 2024-03-05 21:34:16 +01:00 · e221727c95
commit e221727c95
parent 0663b2c891
6 changed files with 74 additions and 36 deletions
--- 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;
 }
--- 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 = "<div class=\"row\">";
            for (var n = 0; n < size; n++) {
-                row += `<div class="field" data-pos-x="${n}" data-pos-y="${i}"><div class="shipField"><svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='3'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='3'/></svg></div></div>`;
+                row += `<div class="field" data-pos-x="${n}" data-pos-y="${i}"><div class="shipField"><svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='#f33838' stroke-width='10'/><path d='M0 0 L100 100 ' stroke='#f33838' stroke-width='10'/></svg></div></div>`;
            }
            row += "</div>";
            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;
--- 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() {
--- 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 });

--- 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;
            }

--- a/views/board.handlebars
+++ b/views/board.handlebars
@ -16,14 +16,14 @@
                <h2>Sterowanie</h2>
                <h3 class="controlsOwnBoard"><span class="important">S</span> Zmiana statku</h3>
                <h3 class="controlsOwnBoard"><span class="important">R</span> Obrót statku</h3>
-                <h3><span class="important">B</span> Zamiana planszy</h3>
+                <h3 id="boardSwitch"><span class="important">B</span> Zamiana planszy</h3>
                <span class="break"></span>
                <h3><span class="dynamic" id="whosTurn"></span></h3>
                <h2 class="important" id="timer">∞</h2>
            </div>
            <div class="boardContainer">
-                <div id="board" oncontextmenu="return false;"></div>
-                <div id="secondaryBoard" class="secondary" oncontextmenu="return false;"></div>
+                <div class="board" id="board" oncontextmenu="return false;"></div>
+                <div class="board" id="secondaryBoard" class="secondary" oncontextmenu="return false;"></div>
            </div>
            <div class="spaceFiller"></div>
        </div>