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,56 +33,66 @@ $("#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;
 
-    // Pokaż podgląd statku
+    if (postPrep) {
-    var fields = [];
+        if (myTurn) {
-    switch (shipRotation) {
+            $(this).css("background", "var(--mark-ship-invalid)");
-        case 0:
-            for (let i = 0; i < 4; i++) {
-                fields.push([posX + i, posY]);
-            }
-            break;
-        case 1:
-            for (let i = 0; i < 4; i++) {
-                fields.push([posX, posY + i]);
-            }
-            break;
-        case 2:
-            for (let i = 0; i < 4; i++) {
-                fields.push([posX - i, posY]);
-            }
-            break;
-        case 3:
-            for (let i = 0; i < 4; i++) {
-                fields.push([posX, posY - i]);
-            }
-            break;
-    }
-
-    var fieldElem;
-    let failed = false;
-    for (let i = 0; i <= selectedShip; i++) {
-        const field = fields[i];
-
-        try {
-            fieldElem = bsc.getField(field[0], field[1]);
-        } catch {
-            if (!failed) {
-                failed = true;
-                i = -1;
-            }
-        }
-        
-        if (failed) {
-            fieldElem.css("background", "var(--mark-ship-invalid)");
         } else {
-            fieldElem.css("background", "var(--mark-ship-valid)");
+            (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++) {
+                    fields.push([posX + i, posY]);
+                }
+                break;
+            case 1:
+                for (let i = 0; i < 4; i++) {
+                    fields.push([posX, posY + i]);
+                }
+                break;
+            case 2:
+                for (let i = 0; i < 4; i++) {
+                    fields.push([posX - i, posY]);
+                }
+                break;
+            case 3:
+                for (let i = 0; i < 4; i++) {
+                    fields.push([posX, posY - i]);
+                }
+                break;
+        }
+
+        var fieldElem;
+        let failed = false;
+        for (let i = 0; i <= selectedShip; i++) {
+            const field = fields[i];
+
+            try {
+                fieldElem = bsc.getField(field[0], field[1]);
+            } catch {
+                if (!failed) {
+                    failed = true;
+                    i = -1;
+                }
+            }
+
+            if (failed) {
+                fieldElem.css("background", "var(--mark-ship-invalid)");
+            } else {
+                fieldElem.css("background", "var(--mark-ship-valid)");
+            }
+            changedFields.push(fieldElem);
         }
-        changedFields.push(fieldElem);
     }
 }, function () {
     hoveredField = null;

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;