MaciejkaG/statki
1
0
Fork 0
mirror of https://github.com/MaciejkaG/statki.git synced 2024-11-30 03:22:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
MaciejkaG 2024-03-25 17:40:07 +01:00
parent 88a93afe58
commit b987611ec8
10 changed files with 112 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
index.js
View File

@ -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");

12
public/assets/css/board-responsive.css
View File

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

35
public/assets/css/board.css
View File

@ -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;
}

7
public/assets/css/responsive.css
View File

@ -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;
}
}

9
public/assets/js/main.js
View File

@ -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 () {
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() {

25
public/assets/js/socket-game.js
View File

@ -7,6 +7,7 @@ var occupiedFields = [];
var lastTimeClick = 0;
if ($(window).width() <= 820) {
tippy('#board .field', {
allowHTML: true,
placement: "top",
@ -20,26 +21,40 @@ tippy('#board .field', {
},
});
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) {
if ($(window).width() > 820) {
socket.emit("shoot", $(this).data('pos-x'), $(this).data('pos-y'));
lastTimeClick = new Date().getTime() / 1000;
}
}
});
$('.field').on('contextmenu', function () {
@ -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;

19
public/assets/js/socket.js
View File

@ -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 () {

2
public/assets/js/test.sql
View File

@ -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";

12
views/board.handlebars
View File

@ -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>Zmień planszę</button>
<button class="controlsOwnBoard" onclick="switchShips()">Zmiana statku</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>Obróć</button>
<button class="tippyBtn" style="background-color: var(--dynamic)" onclick="manualPlace([[FIELDPOS]])"><span class="material-symbols-outlined">place_item</span></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>

1
views/layouts/main.handlebars
View File

@ -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">