From 21295a26de9880577eaa6ad10d2ac705aca21678 Mon Sep 17 00:00:00 2001 From: Vincent ASTOLFI <100098145+viastolfi@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:07:35 +0200 Subject: [PATCH 1/8] Create npm-publish-github-packages.yml --- .../workflows/npm-publish-github-packages.yml | 36 +++++++++++++++++++ 1 file changed, 36 insertions(+) create mode 100644 .github/workflows/npm-publish-github-packages.yml diff --git a/.github/workflows/npm-publish-github-packages.yml b/.github/workflows/npm-publish-github-packages.yml new file mode 100644 index 0000000..47a37f9 --- /dev/null +++ b/.github/workflows/npm-publish-github-packages.yml @@ -0,0 +1,36 @@ +# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created +# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages + +name: Node.js Package + +on: + release: + types: [created] + +jobs: + build: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + - run: npm ci + - run: npm test + + publish-gpr: + needs: build + runs-on: ubuntu-latest + permissions: + contents: read + packages: write + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + with: + node-version: 16 + registry-url: https://npm.pkg.github.com/ + - run: npm ci + - run: npm publish + env: + NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} From c88d55ca1ec8ccb268f5aab3f5eea2a4364e33c1 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Tue, 16 Apr 2024 16:10:18 +0200 Subject: [PATCH 2/8] :fire: remove things i've done poorly --- .../workflows/npm-publish-github-packages.yml | 36 ------------------- 1 file changed, 36 deletions(-) delete mode 100644 .github/workflows/npm-publish-github-packages.yml diff --git a/.github/workflows/npm-publish-github-packages.yml b/.github/workflows/npm-publish-github-packages.yml deleted file mode 100644 index 47a37f9..0000000 --- a/.github/workflows/npm-publish-github-packages.yml +++ /dev/null @@ -1,36 +0,0 @@ -# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created -# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages - -name: Node.js Package - -on: - release: - types: [created] - -jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - - run: npm ci - - run: npm test - - publish-gpr: - needs: build - runs-on: ubuntu-latest - permissions: - contents: read - packages: write - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 16 - registry-url: https://npm.pkg.github.com/ - - run: npm ci - - run: npm publish - env: - NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}} From d857816ef5796210b428a6607f5a7f73e4b8dd4b Mon Sep 17 00:00:00 2001 From: Vincent ASTOLFI <100098145+viastolfi@users.noreply.github.com> Date: Tue, 16 Apr 2024 16:13:40 +0200 Subject: [PATCH 3/8] Create main.yml --- .github/workflows/main.yml | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 .github/workflows/main.yml diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..ffc08fa --- /dev/null +++ b/.github/workflows/main.yml @@ -0,0 +1,21 @@ +name: maettleship CI + +on: + push: + branches: [ "main", "deployement" ] + pull_request: + branches: [ "master" ] + +jobs: + build: + + runs-on: self-hosted + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js 16.x + uses: actions/setup-node@v2 + with: + node-version: 16.x + - run: npm install + - run: npm run start From 679f41abb3dfde1f70cfb86f381e854ccb2b514c Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Tue, 16 Apr 2024 16:16:36 +0200 Subject: [PATCH 4/8] :fire: remove things i've done poorly --- .github/workflows/main.yml | 21 --------------------- 1 file changed, 21 deletions(-) delete mode 100644 .github/workflows/main.yml diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml deleted file mode 100644 index ffc08fa..0000000 --- a/.github/workflows/main.yml +++ /dev/null @@ -1,21 +0,0 @@ -name: maettleship CI - -on: - push: - branches: [ "main", "deployement" ] - pull_request: - branches: [ "master" ] - -jobs: - build: - - runs-on: self-hosted - - steps: - - uses: actions/checkout@v2 - - name: Use Node.js 16.x - uses: actions/setup-node@v2 - with: - node-version: 16.x - - run: npm install - - run: npm run start From 108941efdbe51812b702f2bcd6e5f4f816e8c4f9 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 17 Apr 2024 10:55:31 +0200 Subject: [PATCH 5/8] :sparkles: Add piece movement before the game start. --- Game.js | 12 ++++++ app.js | 17 ++++++-- businesses/Case.js | 1 + businesses/Piece.js | 15 +++++++ businesses/Player.js | 13 ++++++ public/index.html | 14 ++++-- public/scripts/game.js | 95 +++++++++++++++++++++++++++++++++++++---- public/scripts/index.js | 18 +++++--- 8 files changed, 165 insertions(+), 20 deletions(-) create mode 100644 businesses/Piece.js diff --git a/Game.js b/Game.js index 2bea00b..399ca94 100644 --- a/Game.js +++ b/Game.js @@ -60,6 +60,18 @@ class Game { } return w; } + + validBoards() { + this.room.players.forEach((player) => { + player.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++) { + player.grid.cases[i][j].isShip = true; + } + } + }); + }); + } } module.exports = { diff --git a/app.js b/app.js index 4086a2e..8f1a1c1 100644 --- a/app.js +++ b/app.js @@ -5,6 +5,7 @@ const { Game } = require(`${__dirname}/game.js`); let room; let game; +let players = []; io.on("connection", (socket) => { /* TODO : handle disconnection @@ -17,6 +18,14 @@ io.on("connection", (socket) => { }); */ + socket.on("first connection", (socketId, callback) => { + let player = new Player(socketId); + players.push(player); + callback({ + player: player, + }); + }); + socket.on("Hello", (callback) => { callback({ Hello: "World", @@ -24,9 +33,10 @@ io.on("connection", (socket) => { }); socket.on("room creation", (socketId) => { - let player = new Player(socketId); - player.grid.cases[2][2].isShip = true; - player.grid.cases[3][2].isShip = true; + let player; + players.forEach((p) => { + if (p.socketId === socketId) player = p; + }); room = new Room(); room.addPlayer(player); }); @@ -37,6 +47,7 @@ io.on("connection", (socket) => { player.grid.cases[2][2].isShip = true; room.addPlayer(player); game = new Game(room); + game.validBoards(); game.start(); } }); diff --git a/businesses/Case.js b/businesses/Case.js index 713a71f..dce4741 100644 --- a/businesses/Case.js +++ b/businesses/Case.js @@ -2,6 +2,7 @@ class Case { constructor() { this.isShip = false; this.isPlayed = false; + this.piece = ""; } } diff --git a/businesses/Piece.js b/businesses/Piece.js new file mode 100644 index 0000000..ef3be9f --- /dev/null +++ b/businesses/Piece.js @@ -0,0 +1,15 @@ +const uuid = require("uuid"); + +class Piece { + constructor(size, startPos, endPos) { + this.id = uuid.v4(); + this.size = size; + this.startPos = startPos; + this.endPos = endPos; + this.vertical = true; + } +} + +module.exports = { + Piece, +}; diff --git a/businesses/Player.js b/businesses/Player.js index 050e507..ff5cf30 100644 --- a/businesses/Player.js +++ b/businesses/Player.js @@ -1,11 +1,24 @@ const uuid = require("uuid"); const { Grid } = require("./Grid.js"); +const { Piece } = require("./Piece.js"); class Player { constructor(socketId) { this.id = uuid.v4(); this.socketId = socketId; this.grid = new Grid(); + this.pieces = []; + 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.forEach((piece) => { + for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { + for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { + this.grid.cases[i][j].isShip = true; + this.grid.cases[i][j].piece = piece; + } + } + }); } } diff --git a/public/index.html b/public/index.html index 9889969..bfba9a0 100644 --- a/public/index.html +++ b/public/index.html @@ -18,9 +18,17 @@ -
- - +
+
+ +
+ +

You have to play

diff --git a/public/scripts/game.js b/public/scripts/game.js index f10f9b4..816e8e2 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -8,19 +8,28 @@ const ennemyCtx = ennemyCanvas.getContext("2d"); const CASE_SIZE = 30; -export function drawGrid(player) { - ownCtx.strokeStyle = "black"; - - for (let i = 0; i < player.grid.cases.length; i++) { - for (let j = 0; j < player.grid.cases.length; j++) { - ownCtx.strokeRect( +function drawSelectedPiece(piece) { + for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { + for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { + ownCtx.fillStyle = "#F88379"; + ownCtx.fillRect( i * CASE_SIZE + 1, j * CASE_SIZE + 1, - CASE_SIZE, - CASE_SIZE, + CASE_SIZE - 1, + CASE_SIZE - 1, ); + } + } +} - if (player.grid.cases[i][j].isShip) { +export function drawGrid(player) { + ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width); + + ownCtx.strokeStyle = "black"; + + player.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++) { ownCtx.fillStyle = "#A9A9A9"; ownCtx.fillRect( i * CASE_SIZE + 1, @@ -29,6 +38,17 @@ export function drawGrid(player) { CASE_SIZE - 1, ); } + } + }); + + for (let i = 0; i < player.grid.cases.length; i++) { + for (let j = 0; j < player.grid.cases.length; j++) { + ownCtx.strokeRect( + i * CASE_SIZE + 1, + j * CASE_SIZE + 1, + CASE_SIZE, + CASE_SIZE, + ); if (player.grid.cases[i][j].isPlayed) { const centerX = CASE_SIZE / 2 + i * CASE_SIZE; @@ -104,6 +124,63 @@ function clickPlay(event) { sendMove(play); } +function clickNewCase(player, piece) { + const clickNewCasehandler = function (event) { + let selectedCase = getCursorPosition(ownCanvas, event); + player.pieces.forEach((p) => { + if (p.id === piece.id) { + for (let i = p.startPos.x; i <= p.endPos.x; i++) { + for (let j = p.startPos.y; j <= p.endPos.y; j++) { + player.grid.cases[i][j].piece = ""; + player.grid.cases[i][j].isShip = false; + } + } + p.startPos = { x: selectedCase.col, y: selectedCase.row }; + if (p.isVertical) { + p.endPos = { + x: selectedCase.col + piece.size - 1, + y: selectedCase.row, + }; + } else { + p.endPos = { + x: selectedCase.col, + y: selectedCase.row + piece.size - 1, + }; + } + for (let i = p.startPos.x; i <= p.endPos.x; i++) { + for (let j = p.startPos.y; j <= p.endPos.y; j++) { + player.grid.cases[i][j].piece = p; + player.grid.cases[i][j].isShip = true; + } + } + } + }); + drawGrid(player); + ownCanvas.removeEventListener("mousedown", clickNewCasehandler); + selectPiece(player); + }; + + return clickNewCasehandler; +} + +function clickChoose(player) { + const clickHandler = function (event) { + let selectedCase = getCursorPosition(ownCanvas, event); + if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) { + let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece; + drawSelectedPiece(piece); + ownCanvas.removeEventListener("mousedown", clickHandler); + ownCanvas.addEventListener("mousedown", clickNewCase(player, piece)); + } + }; + + return clickHandler; +} + export function play() { ennemyCanvas.addEventListener("mousedown", clickPlay); } + +export function selectPiece(player) { + ownCanvas.addEventListener("mousedown", clickChoose(player)); +} diff --git a/public/scripts/index.js b/public/scripts/index.js index 5b53f93..20f3b9d 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -1,22 +1,29 @@ -import { drawGrid, drawEnnemyGrid, play } from "./game.js"; +import { drawGrid, drawEnnemyGrid, play, selectPiece } from "./game.js"; export const socket = io(); +function startConnection() { + socket.emit("first connection", socket.id, (response) => { + drawGrid(response.player); + selectPiece(response.player); + }); +} + socket.on("start game", (game) => { - const gameCard = document.querySelector("#game"); + const ennemyBoard = document.querySelector("#ennemy_board"); - gameCard.classList.remove("hidden-element"); + ennemyBoard.classList.remove("hidden-element"); drawBoards(game); }); socket.on("end game", () => { console.log("end game"); - const game = document.querySelector("#game"); + const ennemyBoard = document.querySelector("#ennemy_board"); const loader = document.querySelector("#loader"); loader.classList.remove("hidden-element"); - game.classList.add("hidden-element"); + ennemyBoard.classList.add("hidden-element"); }); socket.on("play", () => { @@ -82,3 +89,4 @@ const onJoinRoom = function (event) { document.querySelector("#start").addEventListener("click", onCreateRoom); document.querySelector("#join").addEventListener("click", onJoinRoom); +setTimeout(startConnection, 100); From 803f84696241475eee3fd7fba9c33c498f248d35 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 17 Apr 2024 14:15:44 +0200 Subject: [PATCH 6/8] :construction: Improvement piece deplacement and start working on piece rotation --- app.js | 20 +++------ businesses/Piece.js | 1 + public/assets/style.css | 1 + public/index.html | 6 +++ public/scripts/game.js | 95 +++++++++++++++++++++++++++++------------ public/scripts/index.js | 39 +++++++++++------ 6 files changed, 107 insertions(+), 55 deletions(-) diff --git a/app.js b/app.js index 8f1a1c1..2f61a73 100644 --- a/app.js +++ b/app.js @@ -32,24 +32,16 @@ io.on("connection", (socket) => { }); }); - socket.on("room creation", (socketId) => { - let player; - players.forEach((p) => { - if (p.socketId === socketId) player = p; - }); + socket.on("room creation", (player) => { room = new Room(); room.addPlayer(player); }); - socket.on("ask for room", (socketId) => { - if (room.players.length === 1) { - let player = new Player(socketId); - player.grid.cases[2][2].isShip = true; - room.addPlayer(player); - game = new Game(room); - game.validBoards(); - game.start(); - } + socket.on("ask for room", (player) => { + room.addPlayer(player); + game = new Game(room); + game.validBoards(); + game.start(); }); socket.on("play", (move) => { diff --git a/businesses/Piece.js b/businesses/Piece.js index ef3be9f..f48888e 100644 --- a/businesses/Piece.js +++ b/businesses/Piece.js @@ -7,6 +7,7 @@ class Piece { this.startPos = startPos; this.endPos = endPos; this.vertical = true; + this.isSelected = false; } } diff --git a/public/assets/style.css b/public/assets/style.css index c57f4a3..ee38811 100644 --- a/public/assets/style.css +++ b/public/assets/style.css @@ -1,6 +1,7 @@ #game { display: flex; flex-direction: row; + gap: 10px; } .hidden-element { diff --git a/public/index.html b/public/index.html index bfba9a0..d2b2aa7 100644 --- a/public/index.html +++ b/public/index.html @@ -31,6 +31,12 @@ >
+
+ + +

You have to play

Hit !

WIN !

diff --git a/public/scripts/game.js b/public/scripts/game.js index 816e8e2..58473f2 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -7,20 +7,7 @@ const ennemyCanvas = document.getElementById("ennemy_board"); const ennemyCtx = ennemyCanvas.getContext("2d"); const CASE_SIZE = 30; - -function drawSelectedPiece(piece) { - for (let i = piece.startPos.x; i <= piece.endPos.x; i++) { - for (let j = piece.startPos.y; j <= piece.endPos.y; j++) { - ownCtx.fillStyle = "#F88379"; - ownCtx.fillRect( - i * CASE_SIZE + 1, - j * CASE_SIZE + 1, - CASE_SIZE - 1, - CASE_SIZE - 1, - ); - } - } -} +let selectedPiece = ""; export function drawGrid(player) { ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width); @@ -30,13 +17,23 @@ export function drawGrid(player) { player.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++) { - ownCtx.fillStyle = "#A9A9A9"; - ownCtx.fillRect( - i * CASE_SIZE + 1, - j * CASE_SIZE + 1, - CASE_SIZE - 1, - CASE_SIZE - 1, - ); + if (piece.isSelected) { + ownCtx.fillStyle = "#F88379"; + ownCtx.fillRect( + i * CASE_SIZE + 1, + j * CASE_SIZE + 1, + CASE_SIZE - 1, + CASE_SIZE - 1, + ); + } else { + ownCtx.fillStyle = "#A9A9A9"; + ownCtx.fillRect( + i * CASE_SIZE + 1, + j * CASE_SIZE + 1, + CASE_SIZE - 1, + CASE_SIZE - 1, + ); + } } } }); @@ -128,7 +125,7 @@ function clickNewCase(player, piece) { const clickNewCasehandler = function (event) { let selectedCase = getCursorPosition(ownCanvas, event); player.pieces.forEach((p) => { - if (p.id === piece.id) { + if (p.id === piece.id && p.isSelected) { for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = ""; @@ -154,22 +151,66 @@ function clickNewCase(player, piece) { } } } + drawGrid(player); }); - drawGrid(player); - ownCanvas.removeEventListener("mousedown", clickNewCasehandler); - selectPiece(player); }; return clickNewCasehandler; } +function rotatePiece(player, piece) { + const handler = function (event) { + event.preventDefault(); + + player.pieces.forEach((p) => { + if (p.id === piece.id && p.isSelected) { + console.log(p); + for (let i = p.startPos.x; i <= p.endPos.x; i++) { + for (let j = p.startPos.y; j <= p.endPos.y; j++) { + player.grid.cases[i][j].piece = ""; + player.grid.cases[i][j].isShip = false; + } + } + p.vertical ? (p.vertical = false) : (p.vertical = true); + let oldPos = p.endPos; + p.endPos = { x: oldPos.y, y: oldPos.x }; + for (let i = p.startPos.x; i <= p.endPos.x; i++) { + for (let j = p.startPos.y; j <= p.endPos.y; j++) { + player.grid.cases[i][j].piece = p; + player.grid.cases[i][j].isShip = true; + } + } + console.log(p); + } + }); + drawGrid(player); + }; + + return handler; +} + function clickChoose(player) { const clickHandler = function (event) { let selectedCase = getCursorPosition(ownCanvas, event); if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) { + const rotate_button = document.querySelector("#rotate"); + rotate_button.classList.remove("hidden-element"); + let piece = player.grid.cases[selectedCase.col][selectedCase.row].piece; - drawSelectedPiece(piece); - ownCanvas.removeEventListener("mousedown", clickHandler); + let oldPieceId = selectedPiece.id; + player.pieces.forEach((p) => { + if (p.id === oldPieceId) { + p.isSelected = false; + } + if (p.id === piece.id) { + selectedPiece = p; + p.isSelected = true; + } + }); + + drawGrid(player); + + rotate_button.addEventListener("click", rotatePiece(player, piece)); ownCanvas.addEventListener("mousedown", clickNewCase(player, piece)); } }; diff --git a/public/scripts/index.js b/public/scripts/index.js index 20f3b9d..83cbf6c 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -6,6 +6,13 @@ function startConnection() { socket.emit("first connection", socket.id, (response) => { drawGrid(response.player); selectPiece(response.player); + + document + .querySelector("#start") + .addEventListener("click", onCreateRoom(response.player)); + document + .querySelector("#join") + .addEventListener("click", onJoinRoom(response.player)); }); } @@ -69,24 +76,28 @@ export function sendMove(move) { notification.classList.add("hidden-element"); } -const onCreateRoom = function (event) { - event.preventDefault(); +function onCreateRoom(player) { + const handler = function (event) { + event.preventDefault(); + const loader = document.querySelector("#loader"); + loader.classList.add("hidden-element"); - const loader = document.querySelector("#loader"); - loader.classList.add("hidden-element"); + socket.emit("room creation", player); + }; - socket.emit("room creation", socket.id); -}; + return handler; +} -const onJoinRoom = function (event) { - event.preventDefault(); +function onJoinRoom(player) { + const handler = function (event) { + event.preventDefault(); + const loader = document.querySelector("#loader"); + loader.classList.add("hidden-element"); - const loader = document.querySelector("#loader"); - loader.classList.add("hidden-element"); + socket.emit("ask for room", player); + }; - socket.emit("ask for room", socket.id); -}; + return handler; +} -document.querySelector("#start").addEventListener("click", onCreateRoom); -document.querySelector("#join").addEventListener("click", onJoinRoom); setTimeout(startConnection, 100); From 954cb8a210c5d763ade479498fa63ca37dfdb23c Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 17 Apr 2024 14:27:22 +0200 Subject: [PATCH 7/8] :construction: piece rotation fully working --- public/scripts/game.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/public/scripts/game.js b/public/scripts/game.js index 58473f2..00b35d5 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -164,23 +164,26 @@ function rotatePiece(player, piece) { player.pieces.forEach((p) => { if (p.id === piece.id && p.isSelected) { - console.log(p); for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = ""; player.grid.cases[i][j].isShip = false; } } - p.vertical ? (p.vertical = false) : (p.vertical = true); - let oldPos = p.endPos; - p.endPos = { x: oldPos.y, y: oldPos.x }; + if (p.vertical) { + p.endPos = { x: p.startPos.x + p.size - 1, y: p.startPos.y }; + p.vertical = false; + } else { + p.endPos = { x: p.startPos.x, y: p.startPos.y + p.size - 1 }; + p.vertical = true; + } + for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = p; player.grid.cases[i][j].isShip = true; } } - console.log(p); } }); drawGrid(player); From 3f146986b9ddf439ec10cc6a46f51451fef10c44 Mon Sep 17 00:00:00 2001 From: vincentastolfi Date: Wed, 17 Apr 2024 18:44:10 +0200 Subject: [PATCH 8/8] :construction: improve piece deplacement --- public/scripts/game.js | 93 ++++++++++++++++++++++++++++++++++++++---- 1 file changed, 86 insertions(+), 7 deletions(-) diff --git a/public/scripts/game.js b/public/scripts/game.js index 00b35d5..ccc6d0e 100644 --- a/public/scripts/game.js +++ b/public/scripts/game.js @@ -121,11 +121,83 @@ function clickPlay(event) { sendMove(play); } +function validMoove(player, piece, movement) { + let isValid = true; + player.pieces.forEach((p) => { + if (p.id === piece.id) { + if (movement.type === "move") { + if (p.vertical && movement.selectedCase.row + p.size > 10) + isValid = false; + if (!p.vertical && movement.selectedCase.col + p.size > 10) + isValid = false; + + let colMin, colMax, rowMin, rowMax; + + if (p.vertical) { + colMin = + movement.selectedCase.col - 1 < 0 + ? 0 + : movement.selectedCase.col - 1; + colMax = + movement.selectedCase.col + 1 > 9 + ? 9 + : movement.selectedCase.col + 1; + rowMin = + movement.selectedCase.row - 1 < 0 + ? 0 + : movement.selectedCase.row - 1; + rowMax = + movement.selectedCase.row + p.size > 9 + ? 9 + : movement.selectedCase.row + p.size; + } else { + colMin = + movement.selectedCase.col - 1 < 0 + ? 0 + : movement.selectedCase.col - 1; + colMax = + movement.selectedCase.col + p.size > 9 + ? 9 + : movement.selectedCase.col + p.size; + rowMin = + movement.selectedCase.row - 1 < 0 + ? 0 + : movement.selectedCase.row - 1; + rowMax = + movement.selectedCase.row + 1 > 9 + ? 9 + : movement.selectedCase.row + 1; + } + + for (let i = colMin; i <= colMax; i++) { + for (let j = rowMin; j <= rowMax; j++) { + if ( + player.grid.cases[i][j].isShip && + player.grid.cases[i][j].piece.id !== p.id + ) + isValid = false; + } + } + } else { + if (p.vertical && movement.selectedCase.x + p.size > 10) + isValid = false; + if (!p.vertical && movement.selectedCase.y + p.size > 10) + isValid = false; + } + } + }); + return isValid; +} + function clickNewCase(player, piece) { const clickNewCasehandler = function (event) { let selectedCase = getCursorPosition(ownCanvas, event); player.pieces.forEach((p) => { - if (p.id === piece.id && p.isSelected) { + if ( + p.id === piece.id && + p.isSelected && + validMoove(player, piece, { type: "move", selectedCase: selectedCase }) + ) { for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = ""; @@ -133,15 +205,15 @@ function clickNewCase(player, piece) { } } p.startPos = { x: selectedCase.col, y: selectedCase.row }; - if (p.isVertical) { + if (p.vertical) { p.endPos = { - x: selectedCase.col + piece.size - 1, - y: selectedCase.row, + x: selectedCase.col, + y: selectedCase.row + piece.size - 1, }; } else { p.endPos = { - x: selectedCase.col, - y: selectedCase.row + piece.size - 1, + x: selectedCase.col + piece.size - 1, + y: selectedCase.row, }; } for (let i = p.startPos.x; i <= p.endPos.x; i++) { @@ -163,7 +235,14 @@ function rotatePiece(player, piece) { event.preventDefault(); player.pieces.forEach((p) => { - if (p.id === piece.id && p.isSelected) { + if ( + p.id === piece.id && + p.isSelected && + validMoove(player, piece, { + type: "rotation", + selectedCase: p.startPos, + }) + ) { for (let i = p.startPos.x; i <= p.endPos.x; i++) { for (let j = p.startPos.y; j <= p.endPos.y; j++) { player.grid.cases[i][j].piece = "";