board responsiveness changes, its awful but i wont bother to get it any better

index.js

@@ -36,7 +36,7 @@ await redis.connect();
 
 const limiter = rateLimit({
     windowMs: 40 * 1000,
-    limit: 100,
+    limit: 500,
     standardHeaders: 'draft-7',
     legacyHeaders: false,
     store: new LimiterRedisStore({
@@ -73,7 +73,7 @@ const sessionMiddleware = session({
     rolling: true,
     cookie: {
         secure: process.env.cookie_secure === "true" ? true : false,
-        maxAge: 24 * 60 * 60 * 1000,
+        maxAge: 3 * 24 * 60 * 60 * 1000,
     },
 });
 
@@ -206,7 +206,12 @@ app.get('/game', async (req, res) => {
     if (req.session.nickname == null) {
         res.redirect('/setup');
     } else if (req.query.id == null || game == null || game.state == 'expired' || req.session.activeGame == null) {
-        res.status(400).send('badGameId');
+        res.render("error", {
+            helpers: {
+                error: "Nie znaleziono wskazanej gry",
+                fallback: "/"
+            }
+        });
     } else {
         res.render('board');
     }
@@ -341,20 +346,6 @@ io.on('connection', async (socket) => {
             }
         });
 
-        socket.on('leave lobby', (callback) => {
-            if (socket.rooms.size === 2) {
-                socket.leave(socket.rooms[1]);
-                io.to(socket.rooms[1]).emit("player left");
-                callback({
-                    status: "ok"
-                });
-            } else {
-                callback({
-                    status: "youreNotInLobby"
-                });
-            }
-        });
-
         socket.on('disconnecting', () => {
             if (bships.isPlayerInRoom(socket)) {
                 io.to(socket.rooms[1]).emit("player left");

public/assets/css/board-responsive.css

@@ -24,5 +24,17 @@
     .mobileControls {
         display: block;
     }
+
+    .break {
+        margin-top: 1rem;
+    }
+
+    .spaceFiller {
+        display: none;
+    }
+
+    body {
+        overflow-x: hidden;
+    }
 }
 

public/assets/css/board.css

@@ -147,6 +147,9 @@ h1,h2,h3,h4,h5,h6 {
 .shapes, .spaceFiller {
     width: 15rem;
     user-select: none;
+}
+
+.spaceFiller {
     pointer-events: none;
 }
 
@@ -176,7 +179,7 @@ h1,h2,h3,h4,h5,h6 {
     transition: opacity 0.3s;
 }
 
-#boardSwitch {
+.boardSwitch {
     opacity: 0.3;
     transition: opacity 0.3s;
 }
@@ -216,8 +219,8 @@ h1,h2,h3,h4,h5,h6 {
 
 .cover {
     position: fixed;
-    width: 100%;
+    width: 100vw;
-    height: 100%;
+    height: 100vh;
     top: 0;
     left: 0;
     display: flex;
@@ -290,6 +293,32 @@ h1,h2,h3,h4,h5,h6 {
     display: none;
 }
 
+.tippyBtn {
+    border-radius: 15px;
+    padding: 5px;
+    text-align: center;
+    width: 2rem;
+    aspect-ratio: 1;
+    color: white;
+
+    outline: none;
+    border: none;
+}
+
 .mobileControls {
     display: none;
+}
+
+.mobileControls button {
+    padding: 0.5rem 2rem;
+    font-size: 1rem;
+    background-color: black;
+    border: solid 1px white;
+    color: white;
+    border-radius: 15px;
+    outline: none;
+    cursor: pointer;
+    transition: all 0.3s;
+
+    margin-bottom: 1.5rem;
 }

public/assets/css/responsive.css

@@ -14,8 +14,7 @@
     #pvpCreateView .modes div {
         max-width: 90vw;
         height: 19rem;
-        padding: 0.5rem 1.5rem;
+        padding: 2rem 1.5rem;
-        box-sizing: border-box;
     }
 
     #pvpJoinView .modes div {
@@ -39,4 +38,8 @@
     #profileView .match div {
         flex-direction: column;
     }
+
+    #profileView .matchList .match .statsButton {
+        font-size: 1.3rem;
+    }
 }

public/assets/js/main.js

@@ -21,6 +21,13 @@ var hoveredField = null;
 refreshBoardView();
 
 $(".board .field").hover(function () {
+    if ($(window).width() <= 820) {
+        changedFields.forEach(field => {
+            field.css("background-color", "var(--field)");
+        });
+        changedFields.length = 0;
+    }
+
     hoveredField = this;
     // Pokaż "miarki"
     let posX = parseInt($(this).data("pos-x"));
@@ -95,12 +102,14 @@ $(".board .field").hover(function () {
         }
     }
 }, function () {
-    hoveredField = null;
+    if ($(window).width() > 820) {
-    // Wyłącz "miarki" po wyjściu kursora z pola (aby się nie duplikowały w przyszłości)
+        hoveredField = null;
-    changedFields.forEach(field => {
+        // Wyłącz "miarki" po wyjściu kursora z pola (aby się nie duplikowały w przyszłości)
-        field.css("background-color", "var(--field)");
+        changedFields.forEach(field => {
-    });
+            field.css("background-color", "var(--field)");
-    changedFields.length = 0;
+        });
+        changedFields.length = 0;
+    }
 });
 
 // $(".board .field").on("click", function() {

public/assets/js/socket-game.js

@@ -7,38 +7,53 @@ var occupiedFields = [];
 
 var lastTimeClick = 0;
 
-tippy('#board .field', {
+if ($(window).width() <= 820) {
-    allowHTML: true,
+    tippy('#board .field', {
-    placement: "top",
+        allowHTML: true,
-    theme: "translucent",
+        placement: "top",
-    animation: "shift-toward-subtle",
+        theme: "translucent",
-    interactive: true,
+        animation: "shift-toward-subtle",
-    content: (reference) => {
+        interactive: true,
-        let fieldData = `${$(reference).data('pos-x') }, ${$(reference).data('pos-y') }`;
+        content: (reference) => {
+            let fieldData = `${$(reference).data('pos-x')}, ${$(reference).data('pos-y')}`;
 
-        return $('#mainTippyTemplate').html().replaceAll("[[FIELDPOS]]", fieldData);
+            return $('#mainTippyTemplate').html().replaceAll("[[FIELDPOS]]", fieldData);
-    },
+        },
-});
+    });
+
+    tippy('#secondaryBoard .field', {
+        allowHTML: true,
+        placement: "top",
+        theme: "translucent",
+        animation: "shift-toward-subtle",
+        interactive: true,
+        content: (reference) => {
+            let fieldData = `${$(reference).data('pos-x')}, ${$(reference).data('pos-y')}`;
+
+            return $('#secondaryTippyTemplate').html().replaceAll("[[FIELDPOS]]", fieldData);
+        },
+    });
+}
 
 $('#board .field').on('click', function () {
     if (new Date().getTime() / 1000 - lastTimeClick > 0.3) {
         if ($(window).width() > 820) {
             socket.emit("place ship", selectedShip, $(this).data('pos-x'), $(this).data('pos-y'), shipRotation);
             lastTimeClick = new Date().getTime() / 1000;
-        } // else {
+        }
-        // }
     }
 });
 
 function manualPlace(posX, posY) {
-    // console.log(args);
     socket.emit("place ship", selectedShip, posX, posY, shipRotation);
 }
 
 $('#secondaryBoard .field').on('click', function () {
     if (new Date().getTime() / 1000 - lastTimeClick > 0.3) {
-        socket.emit("shoot", $(this).data('pos-x'), $(this).data('pos-y'));
+        if ($(window).width() > 820) {
-        lastTimeClick = new Date().getTime() / 1000;
+            socket.emit("shoot", $(this).data('pos-x'), $(this).data('pos-y'));
+            lastTimeClick = new Date().getTime() / 1000;
+        }
     }
 });
 
@@ -199,12 +214,12 @@ socket.on("player idx", (idx) => {
 socket.on('turn update', (turnData) => {
     if (turnData.phase === "preparation") {
         $("#whosTurn").html("Faza przygotowań");
-        $("#boardSwitch").css("opacity", 0.3);
+        $(".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);
+        $(".boardSwitch").css("opacity", 1);
     }
 
     timerDestination = turnData.timerToUTC;

public/assets/js/socket.js

@@ -94,25 +94,6 @@ $("#createGameButton").on("click", function () {
 $("#leaveGameButton").on("click", function () {
     lockUI(true);
     window.location.reload();
-    // socket.emit("leave lobby", (response) => {
-    //     switch (response.status) {
-    //         case "ok":
-    //             switchView("mainMenuView");
-    //             lockUI(false);
-    //             break;
-
-    //         case "youreNotInLobby":
-    //             switchView("mainMenuView");
-    //             lockUI(false);
-    //             break;
-
-    //         default:
-    //             alert(`Wystąpił nieznany problem\nStatus: ${response.status}`);
-    //             switchView("mainMenuView");
-    //             lockUI(false);
-    //             break;
-    //     }
-    // });
 });
 
 $("#pvpMenuButton").on("click", function () {

public/assets/js/test.sql

@@ -1,2 +0,0 @@
--- SELECT nickname, host_id, board, match_type, date FROM accounts NATURAL JOIN statistics JOIN matches ON matches.host_id = accounts.user_id WHERE nickname = "deeznuts24";
-SELECT accounts.nickname, statistics.board, matches.match_type, matches.duration, date FROM statistics JOIN matches ON statistics.match_id = matches.match_id NATURAL JOIN accounts me JOIN accounts opp ON matches.guest_id = a WHERE me.nickname = "deeznuts24";

views/board.handlebars

@@ -22,11 +22,11 @@
                     <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 id="boardSwitch"><span class="important">B</span> Zamiana planszy</h3>
+                    <h3 class="boardSwitch"><span class="important">B</span> Zamiana planszy</h3>
                 </div>
                 <div class="mobileControls">
-                    <button>Zmień statek</button>
+                    <button class="controlsOwnBoard" onclick="switchShips()">Zmiana statku</button>
-                    <button>Zmień planszę</button>
+                    <button class="boardSwitch" onclick="switchBoards()">Zmiana planszy</button>
                 </div>
                 <span class="break"></span>
                 <h3><span class="dynamic" id="whosTurn"></span></h3>
@@ -42,12 +42,12 @@
 </div>
 
 <div id="mainTippyTemplate" class="tippyTemplate">
-    <button onclick="manualPlace([[FIELDPOS]])">Postaw</button>
+    <button class="tippyBtn" style="background-color: var(--dynamic)" onclick="manualPlace([[FIELDPOS]])"><span class="material-symbols-outlined">place_item</span></button>
-    <button>Obróć</button>
+    <button class="tippyBtn" style="background-color: var(--important)" onclick="switchRotation()"><span class="material-symbols-outlined">refresh</span></button>
 </div>
 
 <div id="secondaryTippyTemplate" class="tippyTemplate">
-    <button>Strzel</button>
+    <button class="tippyBtn" style="background-color: var(--danger)" onclick="manualShoot([[FIELDPOS]])"><span class="material-symbols-outlined">ads_click</span></button>
 </div>
 
 <script src="/assets/js/battleships-lib.js"></script>

views/layouts/main.handlebars

@@ -8,6 +8,7 @@
     <title>Statki</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,600;1,600&family=Roboto+Mono:ital@0;1&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
     <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
     <link rel="stylesheet" href="/assets/css/board.css">