From a95c7dbeabb7bc22df81939f3f3131de4cf1e924 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Wed, 7 Aug 2024 15:47:30 +0530 Subject: [PATCH 1/3] Bugs fix --- js/game.js | 28 +++++++++++++++------------- pages/FAQs.html | 4 ---- styles/FAQs.css | 1 + 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/js/game.js b/js/game.js index bbba7ac..f3e54a4 100644 --- a/js/game.js +++ b/js/game.js @@ -56,13 +56,13 @@ class Game { `; menu.appendChild(timerContainer); this.timerDisplay = document.getElementById("timer"); - // this.stateIcon = document.getElementById("state").children[0]; + this.stateIcon = document.getElementById("state").children[0]; } // Start or restart the timer startTimer() { - // this.stateIcon.classList.add("fa-pause"); - // this.stateIcon.classList.remove("fa-play"); + this.stateIcon.classList.add("fa-pause"); + this.stateIcon.classList.remove("fa-play"); this.timerDisplay.style.color = "#333"; clearInterval(this.timer); this.timeLeft = 30; @@ -368,12 +368,13 @@ function renderPlayerInputs(count) { "magenta", "orange", ]; - + for (let i = 1; i <= count; i++) { const div = document.createElement("div"); div.classList.add("player-input"); - div.innerHTML = ` + div.innerHTML = `
avatar @@ -383,14 +384,15 @@ function renderPlayerInputs(count) {
${colors - .map( - (color, index) => - `
`; playerInputsDiv.appendChild(div); diff --git a/pages/FAQs.html b/pages/FAQs.html index 7485138..296eb90 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -3,13 +3,9 @@ - - - - FAQs diff --git a/styles/FAQs.css b/styles/FAQs.css index 244742f..3c9d186 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -34,6 +34,7 @@ body { padding: 1rem; margin-bottom: 1rem; text-shadow: #3e196e 2px 2px 5px; + background-color: #fff; } /* FAQ Image Styles */ From f5aecb11d7c10a3aa059f585d9cc8ad76b5ddacc Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Wed, 7 Aug 2024 16:12:48 +0530 Subject: [PATCH 2/3] removed scoreboard --- js/game.js | 42 ++++++++---------------------------------- pages/game.html | 4 +--- 2 files changed, 9 insertions(+), 37 deletions(-) diff --git a/js/game.js b/js/game.js index f3e54a4..3275520 100644 --- a/js/game.js +++ b/js/game.js @@ -4,7 +4,6 @@ class Game { constructor(playersInfo) { if (Game.instance == null) Game.instance = this; - this.playersUI = document.querySelector(".players"); this.playerNameUI = document.querySelector(".player-turn .name"); this.playerTurnBgUI = document.querySelector(".player-turn .bg"); @@ -142,7 +141,6 @@ class Game { // If a box is filled, increment players' score with the number of boxes filled by him/her and update UI onBoxFill() { this.currentPlayer.filledBoxes++; - this.updatePlayerScoreUI(); this.updateScoreboard(); if (this.isTimerStarted) { this.startTimer(); // Restart timer when a move is made @@ -168,25 +166,11 @@ class Game { scoreboard.innerHTML = ""; // Clear existing content this.players.forEach((player, index) => { - const div = document.createElement("div"); - div.classList.add("player"); - // Maintain filled boxes. - const b = document.createElement("b"); - b.classList.add("filled-boxes"); - b.textContent = player.filledBoxes; - b.style.background = player.color; - this.players[index]["filledBoxesUI"] = b; - - // Maintain player name. - const span = document.createElement("span"); - span.textContent = player.name; - - div.appendChild(b); - div.appendChild(span); - - // Adding score and name to the element - this.playersUI.appendChild(div); + const scoreUI = document.createElement("span"); + scoreUI.textContent = player.filledBoxes; + scoreUI.classList.add("player-score"); + this.players[index]["score"] = scoreUI; // Maintain player avatar in the scoreboard const avatarSrc = player.avatarID; @@ -197,18 +181,14 @@ class Game { scoreDiv.innerHTML = ` ${player.name} - 0 `; + scoreDiv.style.backgroundColor = player.color; scoreboard.appendChild(scoreDiv); + scoreDiv.appendChild(scoreUI); }); } - // Update player score UI used while switching player - updatePlayerScoreUI() { - this.currentPlayer.filledBoxesUI.innerText = this.currentPlayer.filledBoxes; - } - // Update player name UI used while switching player updatePlayerNameUI() { this.playerNameUI.innerText = this.currentPlayer.name; @@ -216,12 +196,7 @@ class Game { } updateScoreboard() { - this.players.forEach((player, index) => { - const scoreElement = document.getElementById(`player${index + 1}-score`); - if (scoreElement) { - scoreElement.textContent = player.filledBoxes; - } - }); + this.currentPlayer.score.innerText = this.currentPlayer.filledBoxes; } makeScoreboardDraggable() { @@ -323,9 +298,8 @@ class Game { this.currentPlayer = this.players[this.currentPlayerIndex]; - this.addPlayersUI(); + this.updateScoreboard(); this.updatePlayerNameUI(); - this.updatePlayerScoreUI(); if (this.players.length == 1) { this.invokeEvent("playerWin"); diff --git a/pages/game.html b/pages/game.html index 526b778..f2fdffe 100644 --- a/pages/game.html +++ b/pages/game.html @@ -78,9 +78,7 @@

Select Avatar

- -
- +
PlayerX's turn From 5dbf1b05531c46bdf025dd482bd7a32c35a080d1 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Wed, 7 Aug 2024 18:21:34 +0530 Subject: [PATCH 3/3] Issue resolved --- js/game.js | 17 ++- pages/game.html | 97 ++++++++--------- styles/game.style.css | 240 ++++++++++++++++++++++-------------------- 3 files changed, 189 insertions(+), 165 deletions(-) diff --git a/js/game.js b/js/game.js index 3275520..871e8c1 100644 --- a/js/game.js +++ b/js/game.js @@ -159,9 +159,6 @@ class Game { // Add players to UI addPlayersUI() { - const scoreboardContainer = document.querySelector(".scoreboard-container"); - scoreboardContainer.style.visibility = "visible"; - const scoreboard = document.querySelector(".scoreboard"); scoreboard.innerHTML = ""; // Clear existing content @@ -292,6 +289,10 @@ class Game { if (confirm("Are you sure you want to surrender?")) { this.players.splice(this.currentPlayerIndex, 1); + document + .querySelector(`.player${this.currentPlayerIndex + 1}-score`) + .classList.add("defeated"); + if (this.currentPlayerIndex >= this.players.length) { this.currentPlayerIndex = 0; } @@ -510,7 +511,6 @@ const scoreboard = document.querySelector(".scoreboard-container"); function tourGuide() { const tourSteps = document.querySelectorAll(".tour-step"); let currentStep = 0; - scoreboard.style.display = "block"; const showStep = (index) => { tourSteps.forEach((step, i) => { @@ -564,7 +564,11 @@ function tourGuide() { // Settings Button document.getElementById("setting-btn").addEventListener("click", () => { - menu.classList.toggle("menu-open"); + menu.style.display = "block"; +}); + +document.getElementById("close-menu").addEventListener("click", () => { + menu.style.display = "none"; }); // Surrender Button @@ -578,6 +582,9 @@ const help = document.getElementById("help"); help.addEventListener("click", () => { tourGuide(); stateChange("pause"); + if (window.innerWidth < 768) { + menu.style.display = "none"; + } }); // Restart Game diff --git a/pages/game.html b/pages/game.html index f2fdffe..174ceb3 100644 --- a/pages/game.html +++ b/pages/game.html @@ -78,59 +78,62 @@

Select Avatar

- -
-
- PlayerX's turn -
-
- - -
-
-
-
-
- - -