Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reset modal state when starting a new game #301

Merged
merged 1 commit into from
May 19, 2024
Merged

Reset modal state when starting a new game #301

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 44 additions & 47 deletions Word Scramble Game/scripts/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
const wordText = document.querySelector(".word"),
hintText = document.querySelector(".hint span"),
timeText = document.querySelector(".time b"),
inputField = document.querySelector("input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word");
contentBox = document.querySelector(".container .content");
startArea = document.querySelector(".startArea");
scoreArea = document.querySelector(".score");
modalContent = document.querySelector(".modal-content");
hintText = document.querySelector(".hint span"),
timeText = document.querySelector(".time b"),
inputField = document.querySelector("input"),
refreshBtn = document.querySelector(".refresh-word"),
checkBtn = document.querySelector(".check-word"),
contentBox = document.querySelector(".container .content"),
startArea = document.querySelector(".startArea"),
scoreArea = document.querySelector(".score"),
modalContent = document.querySelector(".modal-content");

// Get the modal
var modal = document.getElementById("myModal");
Expand All @@ -19,14 +19,12 @@ var span = document.getElementsByClassName("close")[0];
var modalText = document.getElementById("modalText");

let correctWord, timer;
let score = 0;


let score = 0;

const initTimer = maxTime => {
clearInterval(timer);
timer = setInterval(() => {
if(maxTime > 0) {
if (maxTime > 0) {
maxTime--;
return timeText.innerText = maxTime;
}
Expand All @@ -40,9 +38,18 @@ const initTimer = maxTime => {
const start = () => {
contentBox.style.display = "block";
startArea.style.display = "none";
initGame();
resetModal();
score = 0; // Reset score to 0 when starting a new game
scoreArea.innerText = score; // Update score display
initGame();
}

const resetModal = () => {
modal.style.display = "none";
modalContent.classList.remove("modal-correct");
modalContent.classList.remove("modal-wrong");
modalText.innerHTML = ""; // Clear modal text
}

const endGame = () => {
clearInterval(timer);
Expand All @@ -54,9 +61,7 @@ const endGame = () => {
modalText.innerHTML = `
<center><br>Time off! <b>${correctWord.toUpperCase()}</b> was the correct word.
<br>You Lost The Game ! :(</center><br>
</center>
`;

}

const winGame = () => {
Expand All @@ -65,11 +70,14 @@ const winGame = () => {
startArea.style.display = "block";
modal.style.display = "block";
modalContent.classList.add("modal-correct");
modalText.innerHTML = `<br><center>Congrats You WIN THE GAME !!!!!!`;

modalText.innerHTML = `<br><center>Congrats You WIN THE GAME !!!!!!</center>`;
}

const initGame = () => {
if (score > 9) {
winGame();
return; // Exit initGame if the player has won
}
initTimer(30);
let randomObj = words[Math.floor(Math.random() * words.length)];
let wordArray = randomObj.word.split("");
Expand All @@ -80,64 +88,53 @@ const initGame = () => {

wordText.innerText = wordArray.join("");
hintText.innerText = randomObj.hint;
correctWord = randomObj.word.toLowerCase();;
correctWord = randomObj.word.toLowerCase();
inputField.value = "";
inputField.setAttribute("maxlength", correctWord.length);
scoreArea.innerHTML = score;

if(score > 9)
{
winGame();
}

}



const checkWord = () => {
let userWord = inputField.value.toLowerCase();

if(!userWord) {
if (!userWord) {
modal.style.display = "block";
modalContent.classList.remove("modal-wrong");
modalContent.classList.remove("modal-correct");
return modalText.innerHTML = `<br>Please enter the word to check!`;
}

if(userWord !== correctWord) {
if(score >= 1) {
score = score - 1;
if (userWord !== correctWord) {
if (score >= 1) {
score = score - 1;
scoreArea.innerHTML = score;
}
modal.style.display = "block";
modalContent.classList.add("modal-wrong");
return modalText.innerHTML = `<br>Oops! <b>${userWord}</b> is not a correct word`;
} else {
modal.style.display = "block";
modalContent.classList.remove("modal-wrong");
modalContent.classList.add("modal-correct");
modalText.innerHTML = `<br>Congrats! <b>${correctWord.toUpperCase()}</b> is the correct word`;
score++;
}
else
{
modal.style.display = "block";
modalContent.classList.remove("modal-wrong");
modalContent.classList.add("modal-correct");
modalText.innerHTML = `<br>Congrats! <b>${correctWord.toUpperCase()}</b> is the correct word`;
score++;
}


initGame();
}

refreshBtn.addEventListener("click", initGame);
checkBtn.addEventListener("click", checkWord);


// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modal.style.display = "none";
}
}
}

Loading