vincent.astolfi
/
maettleship
mirror of https://github.com/viastolfi/maettleship.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/viastolfi/maettleship into docker-deployment

Browse Source 
get last features from main branch
docker-deployment
Vincent ASTOLFI 10 months ago
parent af78db7caa ac98851659
commit b3c0b37007
9 changed files with 197 additions and 125 deletions
Show Stats Download Patch File Download Diff File

18
businesses/Room.js
Unescape View File

@ -1,8 +1,7 @@
class Room { class Room {
constructor(room) { constructor() {
this.id = this.generateRoomId(); // change the id with something prettier this.id = this.generateRoomId(); // change the id with something prettier
this.players = []; this.players = [];
this.room = room;
this.actualPlayer = ""; this.actualPlayer = "";
this.ennemy = ""; this.ennemy = "";
} }
@ -28,14 +27,6 @@ class Room {
return this.actualPlayer return this.actualPlayer
} }
/*
endGame() {
this.room.players.forEach((player) =>
io.to(player.socketId).emit("end game"),
);
}
*/
move(move) { move(move) {
let ret = {isMove: false, player: this.actualPlayer} let ret = {isMove: false, player: this.actualPlayer}
let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row]; let playedCase = this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row];
@ -43,12 +34,14 @@ class Room {
if (playedCase.isPlayed === false) { if (playedCase.isPlayed === false) {
this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true; this.players.find((p) => p.id === this.ennemy).grid.cases[move.col][move.row].isPlayed = true;
ret = {isMove: true, players: this.players, isHit: playedCase.isShip,
isWin: this.checkWin()}
let tmp = this.actualPlayer; let tmp = this.actualPlayer;
this.actualPlayer = this.ennemy; this.actualPlayer = this.ennemy;
this.ennemy = tmp; this.ennemy = tmp;
ret = {isMove: true, players: this.players, isHit: playedCase.isShip, ret.player = this.actualPlayer
isWin: this.checkWin(), player: this.actualPlayer}
} }
return ret return ret
@ -74,6 +67,7 @@ class Room {
validBoards() { validBoards() {
this.players.forEach((player) => { this.players.forEach((player) => {
// sometimes i get error here
player.pieces.forEach((piece) => { player.pieces.forEach((piece) => {
for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { for (let i = piece.startPos.x; i <= piece.endPos.x; i++) {
for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { for (let j = piece.startPos.y; j <= piece.endPos.y; j++) {

62
index.js
Unescape View File

@ -19,23 +19,26 @@ app.use(cookieParser());
const secretKey = process.env.COOKIE_SECRET_KEY; const secretKey = process.env.COOKIE_SECRET_KEY;
// #region routing and cookies
app.get('/', (req, res) => { app.get('/', (req, res) => {
const token = req.cookies.authToken; const token = req.cookies.authToken;
if(token) { if(token) {
res.sendFile(path.join(__dirname, '/public/pages/gameView.html')) try {
jwt.verify(token, secretKey);
res.status(200)
res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
} catch (ex) {
res.status(401)
res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
}
} else { } else {
res.sendFile(path.join(__dirname, '/public/pages/connectionView.html')) res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
} }
}) })
app.get('/game', (req, res) => { app.get('/game', (req, res) => {
const token = req.cookies.authToken;
if (!token) {
res.sendFile(path.join(__dirname, '/public/pages/connectionView.html'))
}
res.sendFile(path.join(__dirname, '/public/pages/gameView.html')) res.sendFile(path.join(__dirname, '/public/pages/gameView.html'))
}) })
@ -43,7 +46,7 @@ app.post('/logIn', (req, res) => {
const { pseudo, password } = req.body; const { pseudo, password } = req.body;
if (!pseudo || !password) { if (!pseudo || !password) {
return res.status(400).send('Email and password are required.'); return res.status(400).send('pseudo and password are required.');
} }
const query = 'SELECT * FROM users WHERE pseudo = ? AND password = ?'; const query = 'SELECT * FROM users WHERE pseudo = ? AND password = ?';
@ -120,6 +123,11 @@ app.get('/user-info', (req, res) => {
} }
}); });
// #endregion routing and cookies
// #region socket and game
let rooms = []; let rooms = [];
let players = []; let players = [];
@ -128,8 +136,9 @@ io.on("connection", (socket) => {
socket.on("disconnect", () => { socket.on("disconnect", () => {
const index = players.findIndex((p) => p.id === socket.id) const index = players.findIndex((p) => p.id === socket.id)
// if there is no room this line creates error
const roomIndex = rooms.findIndex(room => const roomIndex = rooms.findIndex(room =>
room.players.some(player => player.id === socket.id) room.players.some((player) => player.id === socket.id)
); );
if (roomIndex !== -1) { if (roomIndex !== -1) {
@ -154,6 +163,7 @@ io.on("connection", (socket) => {
}) })
socket.on("first connection", (socketId) => { socket.on("first connection", (socketId) => {
// error my occurs if cookie is expired
const cookies = socket.request.headers.cookie; const cookies = socket.request.headers.cookie;
const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1]; const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1];
@ -187,9 +197,20 @@ io.on("connection", (socket) => {
}); });
}); });
socket.on("ask for room", (roomId, id) => { socket.on("ask for room", (roomId, id, callack) => {
let room = rooms.find((r) => r.id === roomId); let room = rooms.find((r) => r.id === roomId);
if (room == null) {
callack({
status: false
})
return
}
callack({
status: true
})
room.addPlayer(players.find((p) => p.id === id)); room.addPlayer(players.find((p) => p.id === id));
room.validBoards(); room.validBoards();
@ -216,7 +237,7 @@ io.on("connection", (socket) => {
let out = "" let out = ""
const room = rooms.find((r) => r.id === roomId) const room = rooms.find((r) => r.id === roomId)
if (room === undefined) { if (room == null) {
out = players.find((p) => p.id === id); out = players.find((p) => p.id === id);
} else { } else {
out = room.players.find((p) => p.id === id) out = room.players.find((p) => p.id === id)
@ -245,6 +266,22 @@ io.on("connection", (socket) => {
}); });
}); });
socket.on("game ended", (roomId) => {
const room = rooms.find((r) => r.id === roomId)
const roomIndex = rooms.findIndex((r) => r.id === roomId)
room.players.forEach(player => {
player.resetGrid()
io.to(player.id).emit("go to menu")
});
room.players = []
rooms.slice(roomIndex, 1)
delete room
console.log("rooms list : ", rooms)
})
socket.on("reset grid", (roomId) => { socket.on("reset grid", (roomId) => {
const player = rooms.find((r) => r.id === roomId).players[0] const player = rooms.find((r) => r.id === roomId).players[0]
player.resetGrid(); player.resetGrid();
@ -277,6 +314,9 @@ const sendMoveToPlayers = (moveData) => {
askToPlay(moveData.player) askToPlay(moveData.player)
}; };
// #endregion socket and game
http.listen(port, () => { http.listen(port, () => {
console.log(`Listening on http://localhost:${port}`); console.log(`Listening on http://localhost:${port}`);
}); });

95
package-lock.json generated
Unescape View File

@ -20,9 +20,9 @@
} }
}, },
"node_modules/@socket.io/component-emitter": { "node_modules/@socket.io/component-emitter": {
"version": "3.1.1", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.1.tgz", "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
"integrity": "sha512-dzJtaDAAoXx4GCOJpbB2eG/Qj8VDpdwkLsWGzGm+0L7E8/434RyMbAHmk9ubXWVAb9nXmc44jUf8GKqVDiKezg==" "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA=="
}, },
"node_modules/@types/cookie": { "node_modules/@types/cookie": {
"version": "0.4.1", "version": "0.4.1",
@ -38,11 +38,11 @@
} }
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.12.7", "version": "22.1.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz",
"integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==", "integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==",
"dependencies": { "dependencies": {
"undici-types": "~5.26.4" "undici-types": "~6.13.0"
} }
}, },
"node_modules/accepts": { "node_modules/accepts": {
@ -160,9 +160,9 @@
} }
}, },
"node_modules/cookie": { "node_modules/cookie": {
"version": "0.6.0", "version": "0.4.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz", "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==", "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
"engines": { "engines": {
"node": ">= 0.6" "node": ">= 0.6"
} }
@ -179,14 +179,6 @@
"node": ">= 0.8.0" "node": ">= 0.8.0"
} }
}, },
"node_modules/cookie-parser/node_modules/cookie": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
"integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/cookie-signature": { "node_modules/cookie-signature": {
"version": "1.0.6", "version": "1.0.6",
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
@ -300,25 +292,17 @@
} }
}, },
"node_modules/engine.io-parser": { "node_modules/engine.io-parser": {
"version": "5.2.2", "version": "5.2.3",
"resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.2.tgz", "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
"integrity": "sha512-RcyUFKA93/CXH20l4SoVvzZfrSDMOTUS3bWVpTt2FuFP+XYrL8i8oonHP7WInRyVHXh0n/ORtoeiE1os+8qkSw==", "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
"engines": { "engines": {
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/engine.io/node_modules/cookie": {
"version": "0.4.2",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz",
"integrity": "sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/engine.io/node_modules/debug": { "node_modules/engine.io/node_modules/debug": {
"version": "4.3.4", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
}, },
@ -409,6 +393,14 @@
"node": ">= 0.10.0" "node": ">= 0.10.0"
} }
}, },
"node_modules/express/node_modules/cookie": {
"version": "0.6.0",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/finalhandler": { "node_modules/finalhandler": {
"version": "1.2.0", "version": "1.2.0",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz", "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@ -822,9 +814,12 @@
} }
}, },
"node_modules/object-inspect": { "node_modules/object-inspect": {
"version": "1.13.1", "version": "1.13.2",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
"integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==", "integrity": "sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==",
"engines": {
"node": ">= 0.4"
},
"funding": { "funding": {
"url": "https://github.com/sponsors/ljharb" "url": "https://github.com/sponsors/ljharb"
} }
@ -950,9 +945,9 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
}, },
"node_modules/semver": { "node_modules/semver": {
"version": "7.6.2", "version": "7.6.3",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.2.tgz", "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
"integrity": "sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==", "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
"bin": { "bin": {
"semver": "bin/semver.js" "semver": "bin/semver.js"
}, },
@ -1072,9 +1067,9 @@
} }
}, },
"node_modules/socket.io-adapter/node_modules/debug": { "node_modules/socket.io-adapter/node_modules/debug": {
"version": "4.3.4", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
}, },
@ -1105,9 +1100,9 @@
} }
}, },
"node_modules/socket.io-parser/node_modules/debug": { "node_modules/socket.io-parser/node_modules/debug": {
"version": "4.3.4", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
}, },
@ -1126,9 +1121,9 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
}, },
"node_modules/socket.io/node_modules/debug": { "node_modules/socket.io/node_modules/debug": {
"version": "4.3.4", "version": "4.3.6",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
"integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
"dependencies": { "dependencies": {
"ms": "2.1.2" "ms": "2.1.2"
}, },
@ -1196,9 +1191,9 @@
} }
}, },
"node_modules/undici-types": { "node_modules/undici-types": {
"version": "5.26.5", "version": "6.13.0",
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz",
"integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==" "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg=="
}, },
"node_modules/unpipe": { "node_modules/unpipe": {
"version": "1.0.0", "version": "1.0.0",

29
public/assets/style.css
Unescape View File

@ -8,7 +8,7 @@
display: none; display: none;
} }
#opponentLeftModal { .modal {
display: none; display: none;
position: fixed; position: fixed;
z-index: 1; z-index: 1;
@ -21,20 +21,7 @@
background-color: rgba(0,0,0,0.4); background-color: rgba(0,0,0,0.4);
} }
#gameEndedModal { .modalContent {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
#opponentLeftModalContent {
background-color: #fefefe; background-color: #fefefe;
margin: 15% auto; margin: 15% auto;
padding: 20px; padding: 20px;
@ -49,4 +36,16 @@
padding: 15px 20px; padding: 15px 20px;
border: none; border: none;
cursor: pointer; cursor: pointer;
}
.buttonChoice {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
#errorHandler {
margin-top: 3%;
color: red;
} }

23
public/pages/gameView.html
Unescape View File

@ -8,17 +8,20 @@
<title>Maettleship</title> <title>Maettleship</title>
</head> </head>
<body> <body>
<div id="opponentLeftModal"> <div class="modal" id="opponentLeftModal">
<div id="opponentLeftModalContent"> <div class="modalContent" id="opponentLeftModalContent">
<p>Your opponent has left the game.</p> <p>Your opponent has left the game.</p>
<button id="closeModalButton" class="close">Okay</button> <button id="closeModalButton" class="close">Okay</button>
</div> </div>
</div> </div>
<div id="gameEndedModal"> <div class="modal" id="gameEndedModal">
<div id="gameEndedModalContent"> <div class="modalContent" id="gameEndendModalContent">
<p>We have a winner</p> <p>We have a winner</p>
<button id="closeEndGameModalButton" class="close">Okay</button> <div class="buttonChoice">
<button id="rematchButton" class="close">Rematch</button>
<button id="goToMenuButton" class="close">Menu</button>
</div>
</div> </div>
</div> </div>
@ -33,6 +36,8 @@
<button class="btn-primary" id="join" type="submit"> <button class="btn-primary" id="join" type="submit">
Join room Join room
</button> </button>
<div id="errorHandler"></div>
</div> </div>
</br> </br>
@ -56,9 +61,11 @@
<p id="playerInfo"></p> <p id="playerInfo"></p>
<h2 class="hidden-element" id="play_notification">You have to play</h2> <div id="inGameNotification">
<h2 class="hidden-element" id="hit_notification">Hit !</h2> <h2 class="hidden-element" id="play_notification">You have to play</h2>
<h2 class="hidden-element" id="win_notification">WIN !</h2> <h2 class="hidden-element" id="hit_notification">Hit !</h2>
<h2 class="hidden-element" id="win_notification">WIN !</h2>
</div>
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
<script type="module" src="../scripts/game.js"></script> <script type="module" src="../scripts/game.js"></script>

49
public/scripts/app.js
Unescape View File

@ -21,7 +21,6 @@ socket.on("start game", (username) => {
const ennemyBoard = document.querySelector("#ennemy_board"); const ennemyBoard = document.querySelector("#ennemy_board");
ennemyBoard.classList.remove("hidden-element"); ennemyBoard.classList.remove("hidden-element");
console.log(username)
drawGrid(); drawGrid();
drawEnnemyGrid(); drawEnnemyGrid();
@ -43,7 +42,6 @@ socket.on("play", () => {
}); });
socket.on("played move", (isHit, isWin) => { socket.on("played move", (isHit, isWin) => {
console.log("test")
const hitNotification = document.querySelector("#hit_notification"); const hitNotification = document.querySelector("#hit_notification");
const winNotification = document.querySelector("#win_notification"); const winNotification = document.querySelector("#win_notification");
@ -64,6 +62,24 @@ socket.on('opponent left', () => {
modal.style.display = 'block'; modal.style.display = 'block';
}) })
socket.on("go to menu", () => {
const modal = document.getElementById("gameEndedModal")
const ennemyGrid = document.getElementById("ennemy_board")
const loader = document.getElementById("loader")
const roomkeyHolder = document.getElementById("roomkeyHolder")
const notifications = document.getElementById("inGameNotification")
roomId = ""
notifications.style.display = 'none'
modal.style.display = 'none'
ennemyGrid.style.display = 'none'
loader.classList.remove = "hidden-element"
roomkeyHolder.style.display = 'none'
drawGrid()
})
function gameEnd() { function gameEnd() {
const modal = document.getElementById('gameEndedModal'); const modal = document.getElementById('gameEndedModal');
modal.style.display = 'block'; modal.style.display = 'block';
@ -98,12 +114,20 @@ function onJoinRoom() {
const loader = document.querySelector("#loader"); const loader = document.querySelector("#loader");
const roomKey = document.querySelector("#roomKey").value; const roomKey = document.querySelector("#roomKey").value;
const roomkeyHolder = document.querySelector("#roomkeyHolder"); const roomkeyHolder = document.querySelector("#roomkeyHolder");
const errorHolder = document.querySelector("#errorHandler")
loader.classList.add("hidden-element");
roomId = roomKey; roomId = roomKey;
roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
socket.emit("ask for room", roomKey, socket.id); socket.emit("ask for room", roomKey, socket.id, (response) => {
if (response.status !== true) {
if (errorHolder.textContent == "") {
errorHolder.append("Error : Room Id don't exist")
}
} else {
loader.classList.add("hidden-element");
roomkeyHolder.innerHTML += `Your room key is : <strong>` + roomId + `</strong>`;
}
});
}; };
return handler; return handler;
@ -120,15 +144,8 @@ document.getElementById('closeModalButton').addEventListener('click', () => {
drawGrid() drawGrid()
}); });
document.getElementById('closeModalButton').addEventListener('click', () => { document.getElementById('goToMenuButton').addEventListener('click', () => {
const modal = document.getElementById('opponentLeftModal'); socket.emit("game ended", roomId);
const ennemyBoard = document.querySelector("#ennemy_board"); })
ennemyBoard.classList.add("hidden-element");
modal.style.display = 'none';
socket.emit("reset grid", roomId)
drawGrid()
});
setTimeout(startConnection, 100); setTimeout(startConnection, 100);

4
public/scripts/connection.js
Unescape View File

@ -15,8 +15,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
}); });
const result = await response.json(); const result = await response.json();
console.log("test")
console.log(result)
if (response.ok) { if (response.ok) {
messageDiv.textContent = 'User registered successfully!'; messageDiv.textContent = 'User registered successfully!';
@ -27,7 +25,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
messageDiv.style.color = 'red'; messageDiv.style.color = 'red';
} }
} catch (error) { } catch (error) {
console.log("testE")
messageDiv.textContent = `Error: ${error.message}`; messageDiv.textContent = `Error: ${error.message}`;
messageDiv.style.color = 'red'; messageDiv.style.color = 'red';
} }
@ -60,7 +57,6 @@ document.getElementById('logInForm').addEventListener('submit', async function (
messageDiv.style.color = 'red'; messageDiv.style.color = 'red';
} }
} catch (error) { } catch (error) {
console.log("testEL")
messageDiv.textContent = `Error: ${error.message}`; messageDiv.textContent = `Error: ${error.message}`;
messageDiv.style.color = 'red'; messageDiv.style.color = 'red';
} }

27
public/scripts/game.js
Unescape View File

@ -10,11 +10,7 @@ const CASE_SIZE = 30;
let selectedPiece = ""; let selectedPiece = "";
export function drawGrid() { export function drawGrid() {
ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
ownCtx.strokeStyle = "black"; ownCtx.strokeStyle = "black";
ownCtx.clearRect(0, 0, 301, 301)
socket.emit("get player", roomId, socket.id, (response) => { socket.emit("get player", roomId, socket.id, (response) => {
let player = response.player; let player = response.player;
player.pieces.forEach((piece) => { player.pieces.forEach((piece) => {
@ -43,6 +39,16 @@ export function drawGrid() {
for (let i = 0; i < player.grid.cases.length; i++) { for (let i = 0; i < player.grid.cases.length; i++) {
for (let j = 0; j < player.grid.cases.length; j++) { for (let j = 0; j < player.grid.cases.length; j++) {
if (!player.grid.cases[i][j].isShip) {
ownCtx.fillStyle = "white"
ownCtx.fillRect(
i * CASE_SIZE,
j * CASE_SIZE,
CASE_SIZE,
CASE_SIZE
)
}
ownCtx.strokeRect( ownCtx.strokeRect(
i * CASE_SIZE + 1, i * CASE_SIZE + 1,
j * CASE_SIZE + 1, j * CASE_SIZE + 1,
@ -71,12 +77,20 @@ export function drawGrid() {
export function drawEnnemyGrid() { export function drawEnnemyGrid() {
ennemyCtx.strokeStyle = "red"; ennemyCtx.strokeStyle = "red";
ennemyCtx.clearRect(0, 0, 301, 301)
socket.emit("get ennemy", roomId, socket.id, (response) => { socket.emit("get ennemy", roomId, socket.id, (response) => {
let player = response.player; let player = response.player;
console.log(player.grid.cases[0])
for (let i = 0; i < player.grid.cases.length; i++) { for (let i = 0; i < player.grid.cases.length; i++) {
for (let j = 0; j < player.grid.cases.length; j++) { for (let j = 0; j < player.grid.cases.length; j++) {
if (!player.grid.cases[i][j].isPlayed) {
ennemyCtx.fillStyle = "white"
ennemyCtx.fillRect(
i * CASE_SIZE,
j * CASE_SIZE,
CASE_SIZE,
CASE_SIZE
)
}
ennemyCtx.strokeRect( ennemyCtx.strokeRect(
i * CASE_SIZE + 1, i * CASE_SIZE + 1,
j * CASE_SIZE + 1, j * CASE_SIZE + 1,
@ -310,6 +324,7 @@ function clickChoose(event) {
let selectedCase = getCursorPosition(ownCanvas, event); let selectedCase = getCursorPosition(ownCanvas, event);
socket.emit("get player", " ", socket.id, (response) => { socket.emit("get player", " ", socket.id, (response) => {
// Sometimes i get an error there
let player = response.player; let player = response.player;
if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) { if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
const rotate_button = document.querySelector("#rotate"); const rotate_button = document.querySelector("#rotate");

15
public/scripts/gamePageInfo.js
Unescape View File

@ -1,3 +1,7 @@
function deleteCookie(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const playerInfoDiv = document.getElementById('playerInfo'); const playerInfoDiv = document.getElementById('playerInfo');
@ -9,11 +13,16 @@ document.addEventListener('DOMContentLoaded', async () => {
}, },
}); });
if (response.ok) { if (response.status === 401) {
deleteCookie('authToken');
window.location.href = '/';
} else if (!response.ok) {
deleteCookie('authToken');
playerInfoDiv.textContent = 'Error: Could not retrieve user information.';
window.location.href = '/';
} else {
const userInfo = await response.json(); const userInfo = await response.json();
playerInfoDiv.textContent = `Logged in as: ${userInfo.pseudo}`; playerInfoDiv.textContent = `Logged in as: ${userInfo.pseudo}`;
} else {
playerInfoDiv.textContent = 'Error: Could not retrieve user information.';
} }
} catch (error) { } catch (error) {
playerInfoDiv.textContent = `Error: ${error.message}`; playerInfoDiv.textContent = `Error: ${error.message}`;

Write Preview
Loading…
Cancel
Save