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
∞