Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
@MastanSayyad
MastanSayyad authored Jul 25, 2024
2 parents cf3046a + 0b85dea commit b474b51
Show file tree
Hide file tree
Showing 3 changed files with 218 additions and 11 deletions.
81 changes: 80 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -580,6 +580,7 @@ <h5>Feedback Form</h5>
<label for="star-5" class="star-5 fas fa-star"></label>
</div>
</div>

<div class="footer">
<span class="text"></span>
<span class="numb"></span>
Expand Down Expand Up @@ -668,8 +669,84 @@ <h3>Thank You!</h3>
document.getElementById("thankYouPopup").classList.add("hidden");
}
</script>


<div class="PlayerTextBox" style="display: none;">
<h1 class="heading"
style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:rgb(52, 76, 100);">
▂ ▄ █ <span >Enter player names!!!</span> █ ▄ ▂
</h1>

<div class="playerNameField" style="display: none;">
<label for="player1" >Player 1 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player1" maxlength="30" value="Player 1"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player2" >Player 2 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player2" maxlength="30" value="Player 2"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player3" >Player 3 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player3" maxlength="30" value="Player 3"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player4" >Player 4 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player4" maxlength="30" value="Player 4"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player5" >Player 5 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player5" maxlength="30" value="Player 5"/>
</div>


<div class="playerNameField" style="display: none;">
<label for="player6" >Player 6 : <span class="details">(Max 30 characters)</span></label>
<input type="text" id="player6" maxlength="30" value="Player 6"/>
</div>

<button id="true-start-btn" class="true-start-btn" onclick="startGame()">START</button>


</div>

<style>
.settings .info {
display: flex;
flex-direction: column;
gap: 1.4rem;
width: 100%;
max-width: 550px;
padding: 1rem;
font-size: 20px;
padding-left: 7%;
}

.settings .PlayerTextBox {
display: flex;
flex-direction: column;
gap: 1.4rem;
width: 100%;
max-width: 550px;
padding: 1rem;
font-size: 20px;
padding-left: 7%;
}

</style>

<div class="form" id="instructions">

<div class="main-form">
<div class="form">

<!-- <h1 class="heading">▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂</h1> -->
<h1 class="heading">▂ ▄ █ MAXIMISE BOXES!! █ ▄ ▂</h1>
<div class="Font">
Expand Down Expand Up @@ -718,8 +795,10 @@ <h3 class="instructions-heading" style="font-size: 35px ;">Instructions</h3>
<div class="button-container">

<a href="./pages/game.html" style=" font-family: Arsenal SC, sans-seri;font-weight: 700;font-style: normal;" class="start-btn button1" id="start-btn" aria-label="START">

START
</a>
</a> -->
<button class="ready-btn" onclick="showPlayerTextBox()">READY</button>
<button class="reset-btn button1" id="reset-btn">RESET</button>
<button id="music-toggle" style=" font-family: Arsenal SC, sans-seri;font-weight: 700;font-style: normal;" onclick="toggleMusic()">
MUSIC OFF
Expand Down
146 changes: 137 additions & 9 deletions js/game.js
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,12 @@
var players_dict = [
{ name: "Player 1", color: "pink", filledBoxes: 0 },
{ name: "Player 2", color: "skyblue", filledBoxes: 0 },
{ name: "Player 3", color: "lightgreen", filledBoxes: 0 },
{ name: "Player 4", color: "magenta", filledBoxes: 0 },
{ name: "Player 5", color: "yellow", filledBoxes: 0 },
{ name: "Player 6", color: "orange", filledBoxes: 0 },
];

class Game {
static instance; // Singleton instance of Game class

Expand All @@ -14,22 +23,28 @@ class Game {
playerSwitch: [],
playerWin: [],
};
console.log("The original player dict: ")
printDict()

// Retrieve the players_dict and game settings from localStorage
// const players_dicts = JSON.parse(localStorage.getItem('players_dict'));
// const { rows, columns, playersCount } = JSON.parse(localStorage.getItem('game_settings'));
// name1 = localStorage.getItem("name1");


this.players = [
{ name: "Player 1", color: "pink", filledBoxes: 0 },
{ name: "Player 2", color: "skyblue", filledBoxes: 0 },
{ name: "Player 3", color: "lightgreen", filledBoxes: 0 },
{ name: "Player 4", color: "magenta", filledBoxes: 0 },
{ name: "Player 5", color: "yellow", filledBoxes: 0 },
{ name: "Player 6", color: "orange", filledBoxes: 0 },
];
this.players = players_dict
console.log("The game's player dict: ", this.players)


let p = this.players.length - playersCount;
for (let i = 0; i < p; i++) this.players.pop();

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

}

makeBoard(rows, columns)
{
this.board = new Board(rows, columns);

this.isGameover = false;
Expand Down Expand Up @@ -255,11 +270,24 @@ document.addEventListener("DOMContentLoaded", () => {
bgMusic.volume = 0.1;
bgMusic.play();

console.log("Inside Dom Loader", players_dict)
if (localStorage.getItem("NameChanged"))
{
players_dict[0].name = localStorage.getItem("name1");
players_dict[1].name = localStorage.getItem("name2");
players_dict[2].name = localStorage.getItem("name3");
players_dict[3].name = localStorage.getItem("name4");
players_dict[4].name = localStorage.getItem("name5");
players_dict[5].name = localStorage.getItem("name6");
}
const rows = calculate(rowsInput, 5, 30);
const columns = calculate(columnsInput, 5, 30);
const playersCount = calculate(playersInput, 2, 6);



game = new Game(rows, columns, playersCount);
game.makeBoard(rows, columns)
const storedTheme = localStorage.getItem("selectedTheme");
const video = document.getElementById("myVideo");
video.src = `/assets/videos/${storedTheme}.mp4`;
Expand All @@ -278,4 +306,104 @@ document.addEventListener("DOMContentLoaded", () => {

function calculate(value, min, max) {
return Math.min(Math.max(value, min), max);
}

function showPlayerTextBox(){
playersCount = Number(document.getElementById("players-count").value)

console.log(playersCount)

var settingsElements = document.getElementsByClassName("PlayerTextBox");
settingsElements[0].style.display = "flex";

var PlayerNamesElements = document.getElementsByClassName("playerNameField");
for (var i = 0; i < PlayerNamesElements.length; i++) {
PlayerNamesElements[i].style.display= "none";
}

var PlayerNamesElements = document.getElementsByClassName("playerNameField");
for (var i = 0; i < playersCount; i++) {
PlayerNamesElements[i].style.display= "flex";
}

hideInstructions()
}


readyBtn.addEventListener("click", () => {
const playersCount = calculate(playersInput.value, 2, 6)
bgMusic.volume = 0.1;
bgMusic.play();
showPlayerTextBox(playersCount)

});


function startGame() {
const rows = calculate(rowsInput.value, 5, 30)
const columns = calculate(columnsInput.value, 5, 30)
const playersCount = calculate(playersInput.value, 2, 6)


// for (let i = 0; i < playersCount; i++) {
// const playerNum = i + 1;
// const playerId = "#player" + playerNum;
// const playerInput = document.querySelector(playerId);

// if (playerInput) {
// players_dict[i].name = playerInput.value;
// }
// }


try {
players_dict[0].name=document.querySelector("#player1").value
players_dict[1].name=document.querySelector("#player2").value
players_dict[2].name=document.querySelector("#player3").value
players_dict[3].name=document.querySelector("#player4").value
players_dict[4].name=document.querySelector("#player5").value
players_dict[5].name=document.querySelector("#player6").value

} catch (TypeError) {
;
}

try
{
localStorage.setItem("NameChanged", "yes");
localStorage.setItem("name1", players_dict[0].name);
localStorage.setItem("name2", players_dict[1].name);
localStorage.setItem("name3", players_dict[2].name);
localStorage.setItem("name4", players_dict[3].name);
localStorage.setItem("name5", players_dict[4].name);
localStorage.setItem("name6", players_dict[5].name);
}
catch (TypeError) {
;
}

printDict()

// Store the updated players_dict and game settings in localStorage
// localStorage.setItem('players_dicts', JSON.stringify(players_dict));
// localStorage.setItem('game_settings', JSON.stringify({ rows, columns, playersCount }));

game = new Game(rows, columns, playersCount)
window.location.href = "./pages/game.html";
game.makeBoard(rows, columns)
settingsUI.style.display = "none"
heading.style.display = "none"
};

function hideInstructions(){
console.log("Inside Hide Instructs")
document.getElementById("instructions").style.display = "none";
}

function hidePlayerTextBox(){
document.getElementsByClassName("settings").style.visibility = "visible";
}

function printDict() {
console.log("Here's the", players_dict)
}
2 changes: 1 addition & 1 deletion js/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
let rows = document.querySelector("#rows");
let columns = document.querySelector("#columns");
let players = document.querySelector("#players-count");
let startBtn = document.querySelector("#start-btn");
let startBtn = document.querySelector("#true-start-btn");
let selectedTheme = 1;

startBtn.addEventListener("click", function () {
Expand Down

0 comments on commit b474b51

Please sign in to comment.