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

Major update

Browse Source 
- Improved frontend
- Server-client toasting framework
- Huge improvements to server side utils
- Working ship placement validation
This commit is contained in:
MaciejkaG 2024-03-03 01:29:11 +01:00
parent 10dcb50aa1
commit 7c4801db2d
7 changed files with 130 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
index.js
View File

@ -135,7 +135,7 @@ io.on('connection', async (socket) => {
// Teraz utwórz objekt partii w trakcie w bazie Redis
const gameId = uuidv4();
redis.json.set(`game:${gameId}`, '$', {
hostId: opp.id,
hostId: opp.request.session.id,
state: "pregame",
boards: [
{ // typ 2 to trójmasztowiec pozycja i obrót na planszy które pola zostały trafione
@ -176,7 +176,6 @@ io.on('connection', async (socket) => {
} else {
callback({
status: "alreadyInLobby",
gameCode: id,
});
}
}
@ -212,7 +211,12 @@ io.on('connection', async (socket) => {
const members = [...roomMemberIterator(playerGame.id)];
for (let i = 0; i < members.length; i++) {
const sid = members[i][0];
io.to(sid).emit('player idx', i);
const socket = io.sockets.sockets.get(sid);
if (socket.request.session.id === playerGame.data.hostId) {
io.to(sid).emit('player idx', 0);
} else {
io.to(sid).emit('player idx', 1);
}
}
let UTCTs = Math.floor((new Date()).getTime() / 1000 + 90);
@ -223,21 +227,30 @@ io.on('connection', async (socket) => {
AFKEnd(playerGame.id);
});
});
await redis.json.set(`game:${playerGame.id}`, '$.state', "preparation");
}
}
socket.on('place ship', async (type, posX, posY, rot) => {
const playerGame = await GInfo.getPlayerGameData(socket);
if (playerGame.state === 'preparation') {
if (playerGame.data.state === 'preparation') {
const playerShips = await GInfo.getPlayerShips(socket);
let canPlace = bships.validateShipPosition(playerShips, type, posX, posY, rot);
if (canPlace) {
console.log("placed");
} else {
socket.emit("toast", "Nie możesz postawić tak statku")
}
}
});
socket.on('shoot', async () => {
const playerGame = await GInfo.getPlayerGameData(socket);
if (playerGame.state === 'action') {
if (playerGame.data.state === 'action') {
if (bships.checkTurn(playerGame, socket.id)) {
}
@ -271,12 +284,15 @@ function resetUserGame(req) {
}
function endGame(gameId) {
const members = [...roomMemberIterator(gameId)];
for (let i = 0; i < members.length; i++) {
const sid = members[i][0];
const socket = io.sockets.sockets.get(sid);
resetUserGame(socket.request);
socket.leave(gameId);
let iterator = roomMemberIterator(gameId);
if (iterator != null) {
const members = [...iterator];
for (let i = 0; i < members.length; i++) {
const sid = members[i][0];
const socket = io.sockets.sockets.get(sid);
resetUserGame(socket.request);
socket.leave(gameId);
}
}
redis.json.del(`game:${gameId}`);
@ -288,5 +304,5 @@ function AFKEnd(gameId) {
}
function roomMemberIterator(id) {
return io.sockets.adapter.rooms.get(id).entries();
return io.sockets.adapter.rooms.get(id) == undefined ? null : io.sockets.adapter.rooms.get(id).entries();
}

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

@ -70,6 +70,20 @@ h1,h2,h3,h4,h5,h6 {
transition: background 0.05s;
}
.field .shipField {
width: 100%;
aspect-ratio: 1;
border-radius: 20%;
background: var(--ship-valid);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
#secondaryBoard .field .shipField {
background: var(--ship-invalid);
}
.field svg {
opacity: 0;
width: 100%;

12
public/assets/css/main.css
View File

@ -13,6 +13,18 @@
to {transform: translateY(0%);}
}
.bshipstoast {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(15px);
color: white;
padding: 0.75rem 1rem;
border-radius: 15px;
border: solid 2px white;
display: flex;
justify-content: center;
align-items: center;
}
.header {
text-align: center;
}

2
public/assets/js/battleships-lib.js
View File

@ -12,7 +12,7 @@ class Battleships {
for (var i = 0; i < size; i++) {
let row = "<div class=\"row\">";
for (var n = 0; n < size; n++) {
row += `<div class="field" data-pos-x="${i}" data-pos-y="${n}"><svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='3'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='3'/></svg></div>`;
row += `<div class="field" data-pos-x="${i}" data-pos-y="${n}"><div class="shipField"><svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='black' stroke-width='3'/><path d='M0 0 L100 100 ' stroke='black' stroke-width='3'/></svg></div></div>`;
}
row += "</div>";
board += row;

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

@ -2,7 +2,24 @@ const socket = io();
var playerIdx;
var timerDestination = null;
var gamePhase = "pregame";
var gamePhase = 'pregame';
$('.field').on('click', function () {
console.log("Clicked");
socket.emit("place ship", selectedShip, $(this).data('pos-x'), $(this).data('pos-y'), shipRotation);
});
socket.on('toast', (msg) => {
Toastify({
text: msg,
duration: 5000,
newWindow: true,
gravity: "bottom",
position: "right",
stopOnFocus: true,
className: "bshipstoast",
}).showToast();
});
socket.on('connect', () => {
$(".cover h1").html("Oczekiwanie na serwer...");
@ -15,6 +32,7 @@ socket.on("players ready", () => {
socket.on("player idx", (idx) => {
console.log(idx);
playerIdx = idx;
console.log(playerIdx);
});
socket.on('turn update', (turnData) => {

79
utils/battleships.js
View File

@ -1,13 +1,3 @@
// export class Client {
// constructor(clientId, clientSecret, redirectUri) {
// this.clientId = clientId;
// this.clientSecret = clientSecret;
// this.redirectUri = redirectUri;
// }
// getAccessToken(code) {
// }
// }
export class GameInfo {
constructor(redis, io) {
this.redis = redis;
@ -24,6 +14,12 @@ export class GameInfo {
return game == null ? null : { id: socket.session.activeGame, data: game };
}
async getPlayerShips(socket) {
const game = await this.redis.json.get(`game:${socket.session.activeGame}`);
const idx = socket.request.session.id === game.hostId ? 0 : 1;
return game.boards[idx].ships;
}
async endPrepPhase(socket) {
const gameId = socket.session.activeGame;
const key = `game:${gameId}`;
@ -152,42 +148,73 @@ export function checkHit(data, playerIdx, posX, posY) {
}
});
boardRender.forEach(row => {
let log = "";
row.forEach(field => {
log += `${field}\t`
});
console.log(log);
});
return boardRender[posY][posX];
}
export function validateShipPosition(type, posX, posY, rot) {
export function validateShipPosition(ships, type, posX, posY, rot) {
let multips;
let boardRender = [];
for (let i = 0; i < 10; i++) {
var array = [];
for (let i = 0; i < 10; i++) {
array.push(false);
}
boardRender.push(array);
}
ships.forEach(ship => {
let multips;
switch (ship.rot) {
case 0:
multips = [0, 1];
break;
case 1:
multips = [1, 0];
break;
case 2:
multips = [0, -1];
break;
case 3:
multips = [1, 0];
break;
}
for (let i = 0; i < ship.type + 1; i++) {
boardRender[ship.posY + multips[1] * i][ship.posX + multips[0] * i] = true;
}
});
switch (rot) {
case 0:
multips = [1, 0];
break;
case 1:
multips = [0, 1];
break;
case 1:
multips = [1, 0];
break;
case 2:
multips = [-1, 0];
multips = [0, -1];
break;
case 3:
multips = [0, -1];
multips = [1, 0];
break;
}
for (let i = 0; i < type + 2; i++) {
for (let i = 0; i < type + 1; i++) {
if (posY + multips[1] * i > 9 || posY + multips[1] * i < 0 || posX + multips[0] * i > 9 || posX + multips[0] * i < 0) {
return false;
}
if (boardRender[posY + multips[1] * i][posX + multips[0] * i]) {
return false;
}
}
return true;

2
views/layouts/main.handlebars
View File

@ -9,8 +9,10 @@
<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">
<script src="https://cdn.socket.io/4.7.3/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">
<link rel="stylesheet" href="/assets/css/main.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
</head>
<body>
<span class="designerTag">Designed by Maciejka</span>