Skip to content

Commit

Permalink
Merge branch 'leaderboard' of https://github.com/hars-21/Dot-Box into…
Browse files Browse the repository at this point in the history 
… leaderboard
  • Loading branch information
@hars-21
hars-21 committed Aug 8, 2024
2 parents ed98616 + 6ad8f6f commit a271972
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 207 deletions.
65 changes: 23 additions & 42 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 @@ -150,7 +149,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 @@ -169,32 +167,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 @@ -205,31 +186,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 @@ -325,15 +297,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 @@ -544,7 +519,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 @@ -598,7 +572,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 @@ -612,6 +590,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/leaderboard.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 a271972

Please sign in to comment.