Skip to content

Commit

Permalink
Merge pull request #727 from hars-21/score
Browse files Browse the repository at this point in the history 
Scoreboard update
  • Loading branch information
@ayush-t02
ayush-t02 authored Aug 8, 2024
2 parents 8611149 + 3948d6e commit 6ad8f6f
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 217 deletions.
87 changes: 35 additions & 52 deletions js/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand Down Expand Up @@ -56,13 +55,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;
Expand Down Expand Up @@ -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
Expand All @@ -161,32 +159,15 @@ 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

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;
Expand All @@ -197,31 +178,22 @@ class Game {
scoreDiv.innerHTML = `
<img src="${avatarSrc}" class="avatar-sm">
<span>${player.name}</span>
<span id="player${index + 1}-score">0</span>
`;

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;
this.playerTurnBgUI.style.background = this.currentPlayer.color;
}

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() {
Expand Down Expand Up @@ -317,15 +289,18 @@ 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;
}

this.currentPlayer = this.players[this.currentPlayerIndex];

this.addPlayersUI();
this.updateScoreboard();
this.updatePlayerNameUI();
this.updatePlayerScoreUI();

if (this.players.length == 1) {
this.invokeEvent("playerWin");
Expand Down Expand Up @@ -368,12 +343,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 = `<label for="playerName${i}" class="player-label ${colors[i - 1]
}">Player ${i}</label>
div.innerHTML = `<label for="playerName${i}" class="player-label ${
colors[i - 1]
}">Player ${i}</label>
<div class="avatar">
<img src="../assets/avatars/${i}.png" alt="avatar" class="player-avatar" id="avatar${i}">
Expand All @@ -383,14 +359,15 @@ function renderPlayerInputs(count) {
<input type="text" id="playerName${i}" placeholder="Player ${i}" value="Player ${i}" class="playerNames">
<div class="player-colors">
${colors
.map(
(color, index) =>
`<label class="rad-label">
<input type="radio" class="playerColor" name="color${i}" value="${color}" ${index === i - 1 ? "checked" : ""
} onclick="validateColor(this)">
.map(
(color, index) =>
`<label class="rad-label">
<input type="radio" class="playerColor" name="color${i}" value="${color}" ${
index === i - 1 ? "checked" : ""
} onclick="validateColor(this)">
<div class="rad-design ${color}"></div></label>`
)
.join("")}
)
.join("")}
</div>
`;
playerInputsDiv.appendChild(div);
Expand Down Expand Up @@ -534,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) => {
Expand Down Expand Up @@ -588,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
Expand All @@ -602,6 +582,9 @@ const help = document.getElementById("help");
help.addEventListener("click", () => {
tourGuide();
stateChange("pause");
if (window.innerWidth < 768) {
menu.style.display = "none";
}
});

// Restart Game
Expand Down
3 changes: 0 additions & 3 deletions pages/FAQs.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- displays site properly based on user's device -->

<link rel="icon" href="../assets/favicon.ico" type="image/x-icon" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
Expand All @@ -24,8 +23,6 @@
/>
<!-- <link rel="stylesheet" href="../styles/mainstyle.css" /> -->
<link rel="stylesheet" href="../styles/global.css" />
<link rel="stylesheet" href="../styles/mainstyle.css" />
<link rel="stylesheet" href="../styles/index.style.css">
<link rel="stylesheet" href="../styles/FAQs.css" />

<title>FAQs</title>
Expand Down
99 changes: 50 additions & 49 deletions pages/game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,61 +78,62 @@ <h2>Select Avatar</h2>
</div>
</div>

<!-- Players -->
<div class="players"></div>

<div class="player-turn">
<div class="bg" style="margin-top: 40px">
<span class="name">PlayerX</span>'s turn
</div>
</div>

<!-- Game Page -->
<div class="game-wrapper">
<div class="game-container">
<div class="board"></div>
</div>
</div>

<!-- Menu -->
<div id="menu">
<div class="menu-header">
<h2>Settings</h2>
</div>
<div class="menu-body">
<div class="menu-links">
<a href="../index.html" id="home" class="link-btn">
<i class="fa-solid fa-house"></i> Home
</a>
<a href="../pages/404.html" id="leaderboard" class="link-btn">
<i class="fa-solid fa-people-group"></i> Leaderboard
</a>
<button id="help" class="link-btn">
Help <i class="fa-solid fa-circle-question"></i>
</button>
<button id="surrender" class="link-btn">
Surrender <i class="fa-solid fa-flag"></i>
</button>
<div id="layout">
<!-- Menu -->
<div id="menu">
<div class="menu-header">
<h2>Settings</h2>
</div>
<div class="menu-buttons">
<div id="restart" class="icon-btn">
<i class="fa-solid fa-arrow-rotate-right"></i>
</div>
<div id="state" class="icon-btn">
<i class="fa-solid fa-play"></i>
<div class="menu-body">
<div class="menu-links">
<a href="../index.html" id="home" class="link-btn">
<i class="fa-solid fa-house"></i> Home
</a>
<a href="../pages/404.html" id="leaderboard" class="link-btn">
<i class="fa-solid fa-people-group"></i> Leaderboard
</a>
<button id="help" class="link-btn">
Help <i class="fa-solid fa-circle-question"></i>
</button>
<button id="surrender" class="link-btn">
Surrender <i class="fa-solid fa-flag"></i>
</button>
</div>
<div id="music-toggle" class="icon-btn">
<i class="fa-solid fa-volume-high"></i>
<div class="menu-buttons">
<div id="restart" class="icon-btn">
<i class="fa-solid fa-arrow-rotate-right"></i>
</div>
<div id="state" class="icon-btn">
<i class="fa-solid fa-play"></i>
</div>
<div id="music-toggle" class="icon-btn">
<i class="fa-solid fa-volume-high"></i>
</div>
</div>
</div>
<i class="fas fa-xmark" id="close-menu"></i>
</div>
<div id="setting-btn"><i class="fa-solid fa-gear"></i></div>
</div>

<div class="scoreboard-container">
<h2>Scoreboard</h2>
<div class="scoreboard">
<!-- Scoreboard content will be dynamically added here -->
<!-- Game -->
<div class="game-wrapper">
<!-- Players Turn-->
<div class="player-turn">
<div class="bg"><span class="name">PlayerX</span>'s turn</div>
</div>

<!-- Game Board -->
<div class="game-container">
<div class="board"></div>
<div id="setting-btn">Settings</div>
</div>
</div>

<!-- Scoreboard -->
<div class="scoreboard-container">
<h2>Scoreboard</h2>
<div class="scoreboard">
<!-- Scoreboard content will be dynamically added here -->
</div>
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions styles/FAQs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ body {
padding: 1rem;
margin-bottom: 1rem;
text-shadow: #3e196e 2px 2px 5px;
background-color: #fff;
}

/* FAQ Image Styles */
Expand Down
Loading

0 comments on commit 6ad8f6f

Please sign in to comment.