From 06f8b6dbcf66cdacf0329ea56cda081de3ad2c9e Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Thu, 8 Aug 2024 09:44:05 +0200 Subject: [PATCH 1/3] :memo: update Readme --- README.md | 31 +++++++++++++++++++++---------- 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 497d20f..480bcdb 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Maettleship Maettleship is a simple online battleship game that I design for maë (my grilfriend) when lectures are boring. -It's made entirely in javascript using nodejs for the server part with socketio and express module. +It's made entirely in javascript using nodejs for the server part with socketio and express module. I also use mysql for all my database part. Finally, I use docker and a vps that I pay for online deployment # Requirement @@ -9,15 +9,21 @@ To use maettleship you'll need the following app on your computer * node js and npm * mysql +* A firefox derived web browser (Don't know why it doesn't work on chrome) # Installation -Later, maettleship will be usable online but you can test it localy now if you want ! +### Online -Follow those first steps to get started +I recently add a branch called `docker-deployment` which I use to deploy maettleship on an online vps. I can't give you the url now cause there is still a lot of security problem that I want to fix first, but be patient it'll come. + +### Locally + +Follow those first steps to get started if tou want to run maettleship locally ``` git clone https://github.com/viastolfi/maettleship.git +cd maettleship npm install ``` @@ -28,19 +34,20 @@ mysql -u user -p > mysql source db_script.sql ``` -Finally, you need a `.env`file with your personnal mysql information so follow those steps. +Finally, you need a `.env`file with your personnal mysql information so follow those steps. You also need this file to specify your cookie's private key so you can create them ``` touch .env ``` -The .env file should look like thah +The .env file should look like that ``` DB_USER=userName DB_PASSWORD=UserPassword DB_NAME=maettleship DB_HOST=localhost +COOKIE_SECRET_KEY=secret_key ``` Now you can start the server using the following command on your terminal. @@ -58,27 +65,31 @@ The current state of maettleship is the following one - [X] Player left the game situation handled - [X] End game (partially handled) - [X] Create an account and add it on the database +- [X] Connection to your account # TODO Those point are the feature I still need to introduce +- [ ] Security improvement (hashed password, sql injection handling) +- [ ] Fix all the problems linked to my rooms implementation - [ ] Rematch -- [ ] Connection to your account -- [ ] Player historic (link to his account) +- [ ] Player historic (link to its account) - [ ] Global scoreboard - [ ] General error handling - [ ] (lot of) debug # Author -This project is entirely made by me (ASTOLFI Vincent) +This project is entirely made by me (ASTOLFI Vincent). I suggest you to check on my github profile if you want to see the other project I've done for my studies or the ones I do in my free time. # Acknowledgement -Here is a cool list of the different docs I use on this project +Here is a cool list of the different docs I used on this project - [socket.io documentation](https://socket.io/fr/docs/v4/) - [express documentation](https://expressjs.com/) - [mysql documentation](https://dev.mysql.com/doc/) -- [nodejs documentation](https://nodejs.org/docs/latest/api/) \ No newline at end of file +- [nodejs documentation](https://nodejs.org/docs/latest/api/) + +This project aim to be fully functionnable one day so any recommendation is welcome ! \ No newline at end of file From d89a641bea09cce0a646ab6d6c1e29c6156731d5 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Thu, 8 Aug 2024 14:15:55 +0200 Subject: [PATCH 2/3] :bug: fix bugs coming from rooms and players deletion. Maybe still some that I havn't notice yet --- index.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/index.js b/index.js index af91a9c..2247e7d 100644 --- a/index.js +++ b/index.js @@ -136,7 +136,6 @@ io.on("connection", (socket) => { socket.on("disconnect", () => { const index = players.findIndex((p) => p.id === socket.id) - // if there is no room this line creates error const roomIndex = rooms.findIndex(room => room.players.some((player) => player.id === socket.id) ); @@ -157,13 +156,14 @@ io.on("connection", (socket) => { } } - players.splice(index, 1) + if (index !== -1) { + players.splice(index, 1) + } console.log(`Player disconnected: ${socket.id}`); }) socket.on("first connection", (socketId) => { - // error my occurs if cookie is expired const cookies = socket.request.headers.cookie; const authToken = cookies.split('; ').find(cookie => cookie.startsWith('authToken=')).split('=')[1]; @@ -267,19 +267,14 @@ 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 => { + rooms[roomIndex].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) + rooms.splice(roomIndex, 1) }) socket.on("reset grid", (roomId) => { @@ -318,5 +313,5 @@ const sendMoveToPlayers = (moveData) => { http.listen(port, () => { - console.log(`Listening on http://localhost:${port}`); + //console.log(`Listening on http://localhost:${port}`); }); \ No newline at end of file From c51e135a865cd730e906ceff899b4d3de0652b9c Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Thu, 8 Aug 2024 14:48:22 +0200 Subject: [PATCH 3/3] :lipstick: All end games case working, possibilty to play other games even if opponent quit and one more boat for proper test --- businesses/Player.js | 21 +++++++--------- public/pages/gameView.html | 8 +++--- public/scripts/app.js | 50 ++++++++++++++++++++++---------------- 3 files changed, 42 insertions(+), 37 deletions(-) diff --git a/businesses/Player.js b/businesses/Player.js index f16b838..4e2b78f 100644 --- a/businesses/Player.js +++ b/businesses/Player.js @@ -8,9 +8,14 @@ class Player { this.username = username this.grid = new Grid(); this.pieces = []; + this.createPiece() + } + + createPiece() { this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 })); this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 })); - + this.pieces.push(new Piece(3, { x: 4, y: 3 }, { x: 4, y: 5 })) + this.pieces.forEach((piece) => { for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { @@ -21,19 +26,11 @@ class Player { }); } - resetPiece() { - this.pieces = [] - this.createPiece() - } - - createPiece() { - this.pieces.push(new Piece(1, { x: 0, y: 0 }, { x: 0, y: 0 })); - this.pieces.push(new Piece(2, { x: 2, y: 2 }, { x: 2, y: 3 })); - } - resetGrid() { this.grid = new Grid() - this.resetPiece() + this.pieces = [] + + this.createPiece() } } diff --git a/public/pages/gameView.html b/public/pages/gameView.html index 0ffe48e..5efaabc 100644 --- a/public/pages/gameView.html +++ b/public/pages/gameView.html @@ -47,7 +47,7 @@ @@ -62,9 +62,9 @@

-

You have to play

-

Hit !

-

WIN !

+ + +
diff --git a/public/scripts/app.js b/public/scripts/app.js index 1f90563..3b92dc2 100644 --- a/public/scripts/app.js +++ b/public/scripts/app.js @@ -20,7 +20,7 @@ function startConnection() { socket.on("start game", (username) => { const ennemyBoard = document.querySelector("#ennemy_board"); - ennemyBoard.classList.remove("hidden-element"); + ennemyBoard.style.display = 'block' drawGrid(); drawEnnemyGrid(); @@ -31,13 +31,13 @@ socket.on("end game", () => { const ennemyBoard = document.querySelector("#ennemy_board"); const loader = document.querySelector("#loader"); - loader.classList.remove("hidden-element"); - ennemyBoard.classList.add("hidden-element"); + loader.style.display = 'block' + ennemyBoard.style.display = 'none' }); socket.on("play", () => { const notification = document.querySelector("#play_notification"); - notification.classList.remove("hidden-element"); + notification.style.display = 'block' play(); }); @@ -45,13 +45,13 @@ socket.on("played move", (isHit, isWin) => { const hitNotification = document.querySelector("#hit_notification"); const winNotification = document.querySelector("#win_notification"); - if (isHit) hitNotification.classList.remove("hidden-element"); - else hitNotification.classList.add("hidden-element"); + if (isHit) hitNotification.style.display = 'block' + else hitNotification.style.display = 'none' if (isWin) gameEnd() - if (isWin) winNotification.classList.remove("hidden-element"); - else winNotification.classList.add("hidden-element"); + if (isWin) winNotification.style.display = 'block' + else winNotification.style.display = 'none' drawGrid(); drawEnnemyGrid(); @@ -63,22 +63,32 @@ socket.on('opponent left', () => { }) socket.on("go to menu", () => { + goToMenu() +}) + +function goToMenu() { 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") + const loader = document.querySelector("#loader"); + const playNotification = document.querySelector("#play_notification"); + const hitNotification = document.querySelector("#hit_notification"); + const winNotification = document.querySelector("#win_notification"); roomId = "" - notifications.style.display = 'none' + playNotification.style.display = 'none' + hitNotification.style.display = 'none' + winNotification.style.display = 'none' modal.style.display = 'none' ennemyGrid.style.display = 'none' - loader.classList.remove = "hidden-element" - roomkeyHolder.style.display = 'none' + loader.style.display = 'block' + + roomkeyHolder.innerHTML = "" + roomkeyHolder.style.display = 'block' drawGrid() -}) +} function gameEnd() { const modal = document.getElementById('gameEndedModal'); @@ -88,7 +98,7 @@ function gameEnd() { export function sendMove(move) { const notification = document.querySelector("#play_notification"); socket.emit("play", roomId, socket.id, move); - notification.classList.add("hidden-element"); + notification.style.display = 'none' } function onCreateRoom() { @@ -96,7 +106,7 @@ function onCreateRoom() { event.preventDefault(); const loader = document.querySelector("#loader"); const roomkeyHolder = document.querySelector("#roomkeyHolder"); - loader.classList.add("hidden-element"); + loader.style.display = 'none'; socket.emit("room creation", socket.id, (response) => { roomId = response.roomId; @@ -124,7 +134,7 @@ function onJoinRoom() { errorHolder.append("Error : Room Id don't exist") } } else { - loader.classList.add("hidden-element"); + loader.style.display = "none"; roomkeyHolder.innerHTML += `Your room key is : ` + roomId + ``; } }); @@ -135,13 +145,11 @@ function onJoinRoom() { document.getElementById('closeModalButton').addEventListener('click', () => { const modal = document.getElementById('opponentLeftModal'); - const ennemyBoard = document.querySelector("#ennemy_board"); - - ennemyBoard.classList.add("hidden-element"); modal.style.display = 'none'; socket.emit("reset grid", roomId) - drawGrid() + + goToMenu() }); document.getElementById('goToMenuButton').addEventListener('click', () => {