From b987611ec8ccd0d84edc13b103a2aa1726d21748 Mon Sep 17 00:00:00 2001 From: MaciejkaG Date: Mon, 25 Mar 2024 17:40:07 +0100 Subject: [PATCH] board responsiveness changes, its awful but i wont bother to get it any better --- index.js | 25 ++++--------- public/assets/css/board-responsive.css | 12 ++++++ public/assets/css/board.css | 35 ++++++++++++++++-- public/assets/css/responsive.css | 7 +++- public/assets/js/main.js | 21 ++++++++--- public/assets/js/socket-game.js | 51 +++++++++++++++++--------- public/assets/js/socket.js | 19 ---------- public/assets/js/test.sql | 2 - views/board.handlebars | 12 +++--- views/layouts/main.handlebars | 1 + 10 files changed, 112 insertions(+), 73 deletions(-) delete mode 100644 public/assets/js/test.sql diff --git a/index.js b/index.js index de0a27c..1262a5c 100644 --- a/index.js +++ b/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"); diff --git a/public/assets/css/board-responsive.css b/public/assets/css/board-responsive.css index 5604925..4c71f53 100644 --- a/public/assets/css/board-responsive.css +++ b/public/assets/css/board-responsive.css @@ -24,5 +24,17 @@ .mobileControls { display: block; } + + .break { + margin-top: 1rem; + } + + .spaceFiller { + display: none; + } + + body { + overflow-x: hidden; + } } diff --git a/public/assets/css/board.css b/public/assets/css/board.css index c204a31..ea4d36a 100644 --- a/public/assets/css/board.css +++ b/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%; - height: 100%; + width: 100vw; + 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; } \ No newline at end of file diff --git a/public/assets/css/responsive.css b/public/assets/css/responsive.css index 1e061d1..0284012 100644 --- a/public/assets/css/responsive.css +++ b/public/assets/css/responsive.css @@ -14,8 +14,7 @@ #pvpCreateView .modes div { max-width: 90vw; height: 19rem; - padding: 0.5rem 1.5rem; - box-sizing: border-box; + padding: 2rem 1.5rem; } #pvpJoinView .modes div { @@ -39,4 +38,8 @@ #profileView .match div { flex-direction: column; } + + #profileView .matchList .match .statsButton { + font-size: 1.3rem; + } } \ No newline at end of file diff --git a/public/assets/js/main.js b/public/assets/js/main.js index 5733f1d..2a26e53 100644 --- a/public/assets/js/main.js +++ b/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; - // Wyłącz "miarki" po wyjściu kursora z pola (aby się nie duplikowały w przyszłości) - changedFields.forEach(field => { - field.css("background-color", "var(--field)"); - }); - changedFields.length = 0; + if ($(window).width() > 820) { + hoveredField = null; + // Wyłącz "miarki" po wyjściu kursora z pola (aby się nie duplikowały w przyszłości) + changedFields.forEach(field => { + field.css("background-color", "var(--field)"); + }); + changedFields.length = 0; + } }); // $(".board .field").on("click", function() { diff --git a/public/assets/js/socket-game.js b/public/assets/js/socket-game.js index ee48807..4711ff0 100644 --- a/public/assets/js/socket-game.js +++ b/public/assets/js/socket-game.js @@ -7,38 +7,53 @@ var occupiedFields = []; var lastTimeClick = 0; -tippy('#board .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') }`; +if ($(window).width() <= 820) { + tippy('#board .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 $('#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')); - lastTimeClick = new Date().getTime() / 1000; + if ($(window).width() > 820) { + 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; diff --git a/public/assets/js/socket.js b/public/assets/js/socket.js index 3b76f7c..a1533e4 100644 --- a/public/assets/js/socket.js +++ b/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 () { diff --git a/public/assets/js/test.sql b/public/assets/js/test.sql deleted file mode 100644 index 0705c16..0000000 --- a/public/assets/js/test.sql +++ /dev/null @@ -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"; \ No newline at end of file diff --git a/views/board.handlebars b/views/board.handlebars index 4beb35f..19f2b60 100644 --- a/views/board.handlebars +++ b/views/board.handlebars @@ -22,11 +22,11 @@

Sterowanie

S Zmiana statku

R Obrót statku

-

B Zamiana planszy

+

B Zamiana planszy

- - + +

@@ -42,12 +42,12 @@
- - + +
- +
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars index ba7a332..05bfae5 100644 --- a/views/layouts/main.handlebars +++ b/views/layouts/main.handlebars @@ -8,6 +8,7 @@ Statki +