-
+
+
We have a winner
-
+
+
+
+
@@ -33,6 +36,8 @@
+
+
@@ -56,9 +61,11 @@
-
You have to play
-
Hit !
-
WIN !
+
+
You have to play
+ Hit !
+ WIN !
+
diff --git a/public/scripts/app.js b/public/scripts/app.js
index 8a1c8f2..1f90563 100644
--- a/public/scripts/app.js
+++ b/public/scripts/app.js
@@ -21,7 +21,6 @@ socket.on("start game", (username) => {
const ennemyBoard = document.querySelector("#ennemy_board");
ennemyBoard.classList.remove("hidden-element");
- console.log(username)
drawGrid();
drawEnnemyGrid();
@@ -43,7 +42,6 @@ socket.on("play", () => {
});
socket.on("played move", (isHit, isWin) => {
- console.log("test")
const hitNotification = document.querySelector("#hit_notification");
const winNotification = document.querySelector("#win_notification");
@@ -64,6 +62,24 @@ socket.on('opponent left', () => {
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() {
const modal = document.getElementById('gameEndedModal');
modal.style.display = 'block';
@@ -98,12 +114,20 @@ function onJoinRoom() {
const loader = document.querySelector("#loader");
const roomKey = document.querySelector("#roomKey").value;
const roomkeyHolder = document.querySelector("#roomkeyHolder");
-
- loader.classList.add("hidden-element");
+ const errorHolder = document.querySelector("#errorHandler")
roomId = roomKey;
- roomkeyHolder.innerHTML += `Your room key is :
` + roomId + ``;
- 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 :
` + roomId + ``;
+ }
+ });
};
return handler;
@@ -120,15 +144,8 @@ document.getElementById('closeModalButton').addEventListener('click', () => {
drawGrid()
});
-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()
-});
+document.getElementById('goToMenuButton').addEventListener('click', () => {
+ socket.emit("game ended", roomId);
+})
setTimeout(startConnection, 100);
\ No newline at end of file
diff --git a/public/scripts/connection.js b/public/scripts/connection.js
index e3a8068..723c2a1 100644
--- a/public/scripts/connection.js
+++ b/public/scripts/connection.js
@@ -15,8 +15,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
});
const result = await response.json();
- console.log("test")
- console.log(result)
if (response.ok) {
messageDiv.textContent = 'User registered successfully!';
@@ -27,7 +25,6 @@ document.getElementById('registerForm').addEventListener('submit', async functio
messageDiv.style.color = 'red';
}
} catch (error) {
- console.log("testE")
messageDiv.textContent = `Error: ${error.message}`;
messageDiv.style.color = 'red';
}
@@ -60,7 +57,6 @@ document.getElementById('logInForm').addEventListener('submit', async function (
messageDiv.style.color = 'red';
}
} catch (error) {
- console.log("testEL")
messageDiv.textContent = `Error: ${error.message}`;
messageDiv.style.color = 'red';
}
diff --git a/public/scripts/game.js b/public/scripts/game.js
index f0312d6..ade024a 100644
--- a/public/scripts/game.js
+++ b/public/scripts/game.js
@@ -10,11 +10,7 @@ const CASE_SIZE = 30;
let selectedPiece = "";
export function drawGrid() {
- ownCtx.clearRect(0, 0, ownCanvas.height, ownCanvas.width);
-
ownCtx.strokeStyle = "black";
-
- ownCtx.clearRect(0, 0, 301, 301)
socket.emit("get player", roomId, socket.id, (response) => {
let player = response.player;
player.pieces.forEach((piece) => {
@@ -43,6 +39,16 @@ export function drawGrid() {
for (let i = 0; i < player.grid.cases.length; i++) {
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(
i * CASE_SIZE + 1,
j * CASE_SIZE + 1,
@@ -71,12 +77,20 @@ export function drawGrid() {
export function drawEnnemyGrid() {
ennemyCtx.strokeStyle = "red";
- ennemyCtx.clearRect(0, 0, 301, 301)
socket.emit("get ennemy", roomId, socket.id, (response) => {
let player = response.player;
- console.log(player.grid.cases[0])
for (let i = 0; i < player.grid.cases.length; i++) {
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(
i * CASE_SIZE + 1,
j * CASE_SIZE + 1,
@@ -310,6 +324,7 @@ function clickChoose(event) {
let selectedCase = getCursorPosition(ownCanvas, event);
socket.emit("get player", " ", socket.id, (response) => {
+ // Sometimes i get an error there
let player = response.player;
if (player.grid.cases[selectedCase.col][selectedCase.row].isShip) {
const rotate_button = document.querySelector("#rotate");
diff --git a/public/scripts/gamePageInfo.js b/public/scripts/gamePageInfo.js
index 65544b8..b684368 100644
--- a/public/scripts/gamePageInfo.js
+++ b/public/scripts/gamePageInfo.js
@@ -1,3 +1,7 @@
+function deleteCookie(name) {
+ document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
+}
+
document.addEventListener('DOMContentLoaded', async () => {
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();
playerInfoDiv.textContent = `Logged in as: ${userInfo.pseudo}`;
- } else {
- playerInfoDiv.textContent = 'Error: Could not retrieve user information.';
}
} catch (error) {
playerInfoDiv.textContent = `Error: ${error.message}`;