Minor changes

- Added .env config
- Improved board formatting when aiming

index.js

@@ -1,5 +1,6 @@
-const PORT = 3737;
+import 'dotenv/config';
 
+const PORT = parseInt(process.env.port);
 import express from 'express';
 import { createServer } from 'node:http';
 import { Server } from 'socket.io';

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "dotenv": "^16.4.5",
         "express": "^4.18.3",
         "express-handlebars": "^7.1.2",
         "express-session": "^1.18.0",
@@ -374,6 +375,17 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/dotenv": {
+      "version": "16.4.5",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.5.tgz",
+      "integrity": "sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",

package.json

@@ -19,6 +19,7 @@
   },
   "homepage": "https://github.com/MaciejkaG/statki-backend#readme",
   "dependencies": {
+    "dotenv": "^16.4.5",
     "express": "^4.18.3",
     "express-handlebars": "^7.1.2",
     "express-session": "^1.18.0",

public/assets/js/main.js

@@ -13,6 +13,9 @@ var shipRotation = 0;
 var shipsLeft = [4, 3, 2, 1];
 var changedFields = [];
 
+var postPrep = false;
+var myTurn = false;
+
 var hoveredField = null;
 
 refreshBoardView();
@@ -30,13 +33,22 @@ $("#board .field").hover(function () {
     row.css("background", "var(--mark-line)");
     column.css("background", "var(--mark-line)");
 
-    $(this).css("background", "var(--mark-spot)");
-
     previousRow = row;
     previousColumn = column;
 
+    if (postPrep) {
+        if (myTurn) {
+            $(this).css("background", "var(--mark-ship-invalid)");
+        } else {
+            (this).css("background", "var(--mark-spot)");
+        }
+    } else {
+        $(this).css("background", "var(--mark-spot)");
+
         // Pokaż podgląd statku
+
         var fields = [];
+
         switch (shipRotation) {
             case 0:
                 for (let i = 0; i < 4; i++) {
@@ -81,6 +93,7 @@ $("#board .field").hover(function () {
             }
             changedFields.push(fieldElem);
         }
+    }
 }, function () {
     hoveredField = null;
     // Wyłącz "miarki" po wyjściu kursora z pola (aby się nie duplikowały w przyszłości)

public/assets/js/socket-game.js

@@ -71,12 +71,14 @@ socket.on('turn update', (turnData) => {
     if (turnData.phase === "preparation") {
         $("#whosTurn").html("Faza przygotowań");
     } else {
+        postPrep = true;
+        myTurn = turnData.turn === playerIdx;
         turnData.turn === playerIdx ? $("#whosTurn").html("Twoja tura") : $("#whosTurn").html("Tura przeciwnika");
     }
 
-
     timerDestination = turnData.timerToUTC;
     gamePhase = turnData.phase;
+    refreshBoardView();
 });
 
 socket.on('player left', () => {

utils/battleships.js

@@ -50,8 +50,6 @@ export class GameInfo {
         const hostId = (await this.redis.json.get(key, {path: '.hostId'}));
 
         const playerIdx = socket.request.session.id === hostId ? 0 : 1;
-        console.log(socket.request.session.id, "=", hostId);
-        console.log("placeship", playerIdx);
         await this.redis.json.arrAppend(key, `.boards[${playerIdx}].ships`, shipData);
     }
 
@@ -61,7 +59,6 @@ export class GameInfo {
         const hostId = (await this.redis.json.get(key, { path: '.hostId' }));
 
         const playerIdx = socket.request.session.id === hostId ? 0 : 1;
-        console.log("removeship", playerIdx);
         let playerShips = await this.redis.json.get(key, {path: `.boards[${playerIdx}].ships`});
 
         var deletedShip;