diff --git a/main.js b/main.js index f242959..c04e64b 100644 --- a/main.js +++ b/main.js @@ -8,14 +8,13 @@ // Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js - // Life of the player and the hacker. var playerLife = 5; var hackerLife = 5; // Message to be displayed when the game is over -var hackerWinnerMessage = "Write the message here"; -var playerWinnerMessage = "Write the message here"; +var hackerWinnerMessage = "YOU LOSE"; +var playerWinnerMessage = "YOU BEAT THE HACKER! CONGRATS!"; // ---------------Game code starts here ---------------// @@ -24,78 +23,178 @@ var playerWinnerMessage = "Write the message here"; var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); +// Get the hacker and player cards DOM elements +const hackerCard = document.querySelector(".hacker-card"); +const playerCardsArr = Array.from(document.querySelectorAll(".player-card")); +console.log(hackerCard); + +const nextTurnButton = document.querySelector(".next-turn"); + +let cardSelected = false; +let turn = 0; + +const lifeCounts = Array.from(document.querySelectorAll(".life-total")); +lifeCounts[0].innerText = hackerStartLife; +lifeCounts[1].innerText = playerStartLife; + // we will declare the functions for you and you will complete those updateScores(); // you learnt DOM manipulation right? here's an example of the same. Go ahead and use manipulate the DOM! document.querySelector(".game-board").classList.add("before-game"); -var allCardElements = document.querySelectorAll(".card"); +var allCardElements = Array.from(document.querySelectorAll(".card")); // Adds click handler to all player card elements so that your cards are actionable +playerCardsArr.forEach((el) => { + console.log("I'm inside the playerCards eventHandler Adding forEach"); + el.addEventListener("click", () => { + console.log("You just clicked a card!"); + cardClicked(el); + }); +}); // An example of a function that controls what would happen when a card is clicked function cardClicked(cardEl) { + ++turn; + if(cardSelected) { return; } cardSelected = true; cardEl.classList.add("played-card"); document.querySelector(".game-board").classList.add("card-selected"); - + console.log("hey a card was just clicked") // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power - setTimeout(function(){ + setTimeout(function() { revealHackerPower(); },500) - setTimeout(function(){ - revealPlayerPower(); + setTimeout(function() { + revealPlayerPower(cardEl); },800) - setTimeout(function(){ - compareCards(); + setTimeout(function() { + compareCards(cardEl); }, 1400); } // Now write a function that shows the power level on the player card -function revealPlayerPower(){ - +function revealPlayerPower(cardEl) { + cardEl.classList.toggle("reveal-power"); } // Write a function that shows the power level on the hacker card function revealHackerPower(){ - + hackerCard.classList.toggle("reveal-power"); } // Write a function to compare the cards. Here is where all your skills would come in handy! // P.S: We've added the 'disabled' attribute in the CSS file for the button and you should use it in case you want a certain element to just go away or 'vanish' at a certain time. For eg: You'd definitely want the 'Next' button to go away after a player chooses a card right? -function compareCards(){ +function compareCards(cardSelectedByUser) { + + let winner; + const playerPower = parseInt(cardSelectedByUser.lastElementChild.innerText); + const hackerPower = parseInt(hackerCard.lastElementChild.innerText); + console.log(playerPower); + + if (playerPower > hackerPower) { + --hackerLife; + lifeCounts[0].innerText = hackerLife; + hackerCard.classList.toggle("worse-card"); + cardSelectedByUser.classList.toggle("better-card"); + winner = 1; + } else { + --playerLife; + lifeCounts[1].innerText = playerLife; + hackerCard.classList.toggle("better-card"); + cardSelectedByUser.classList.toggle("worse-card"); + winner = 0; + } + + lifeCounts[0].innerText = hackerLife; + lifeCounts[1].innerText = playerLife; + updateScores(); + isGameOver(); + nextTurn(cardSelectedByUser, winner); +} + +// Function to bootstrap the next turn process +function nextTurn(cardSelectedByUser, winner) { + console.log("Inside the nextTurn function"); + console.log(nextTurnButton); + + setTimeout(() => { nextTurnButton.style.display = "block"; }, 2000); + + setTimeout(() => { + hackerCard.classList.toggle("showCard"); + playerCardsArr.forEach((el) => { + el.classList.toggle("showCard"); + }); + + if (winner === 0) { // hacker won + cardSelectedByUser.classList.toggle("worse-card"); + hackerCard.classList.toggle("better-card"); + } else { + cardSelectedByUser.classList.toggle("better-card"); + hackerCard.classList.toggle("worse-card"); + } + + cardSelectedByUser.classList.toggle("played-card"); + cardSelectedByUser.classList.toggle("reveal-power"); + hackerCard.classList.toggle("reveal-power"); + + // turning off the global cardSelected, and in the DOM + cardSelected = false; + document.querySelector(".game-board").classList.toggle("card-selected"); +}, 1500); } //Use conditional statements and complete the function that shows the winner message -function gameOver(winner) { - +function isGameOver(winner) { + if ((playerLife <= 0) || (hackerLife <= 0)) { + const winnerSectionDiv = document.querySelector(".winner-section"); + console.log(winnerSectionDiv); + winnerSectionDiv.style.display = "block"; + + nextTurnButton.style.opacity = 0; + + const winnerMsgDiv = document.querySelector(".winner-message"); + if (playerLife <= 0) { + winnerMsgDiv.innerText = hackerWinnerMessage; + } else { + winnerMsgDiv.innerText = playerWinnerMessage; + } + } } // Write a function that starts the game function startGame() { + console.log(scenarios); + // Grab the start button and toggle it off + const startBtn = document.querySelector(".start-game"); + console.log(startBtn); + startBtn.setAttribute("disabled", "true"); + + // Play the first turn of the game + playTurn(); } // Now write a function that starts the game over from scratch -function restartGame(){ +function restartGame() { } // We've also used a cool life bar that displays the life left. Write a function that updates the displayed life bar and life totals // use innerHTML and a lot of other cool things to do this. -function updateScores(){ +function updateScores() { // Here these update life totals for each player document.querySelector(".player-stats .life-total").innerHTML = playerLife; @@ -108,7 +207,13 @@ function updateScores(){ document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Now you write the code to update the hacker lifebar + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; + let hackerPercent = hackerLife / hackerStartLife * 100; + if (hackerPercent < 0) { + hackerPercent = 0; + } + document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%"; } @@ -116,9 +221,29 @@ function updateScores(){ // Write a function that Plays one turn of the game function playTurn() { -} + let turnNumber = turn % 5 + + nextTurnButton.style.display = "none"; + // show the hacker card and player cards and sync all the info with the DOM + hackerCard.firstElementChild.innerText = scenarios[turnNumber].hackerCard.description; + console.log(hackerCard.lastElementChild); + hackerCard.lastElementChild.innerText = scenarios[turnNumber].hackerCard.power; + + hackerCard.classList.toggle("showCard"); + playerCardsArr.forEach((el) => { + el.classList.toggle("showCard"); -// Finally write the function that reveals the cards. Use -function revealCards(){ + console.log("I'm inside the playerCards forEach"); + /* el.addEventListener("click", () => { + cardClicked(el); + }); */ + }); -} \ No newline at end of file + playerCardsArr[0].firstElementChild.innerText = scenarios[turnNumber].playerCards[0].description; + playerCardsArr[1].firstElementChild.innerText = scenarios[turnNumber].playerCards[1].description; + playerCardsArr[2].firstElementChild.innerText = scenarios[turnNumber].playerCards[2].description; + + playerCardsArr[0].lastElementChild.innerText = scenarios[turnNumber].playerCards[0].power; + playerCardsArr[1].lastElementChild.innerText = scenarios[turnNumber].playerCards[1].power; + playerCardsArr[2].lastElementChild.innerText = scenarios[turnNumber].playerCards[2].power; +} diff --git a/scenario.js b/scenario.js index f926d60..0d3b2ed 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,64 @@ var scenarios = [ } ] }, -]; \ No newline at end of file + { + hackerCard : { + description : "I sent an unknonwn link with a catchy news", + power: 4, + }, + playerCards : [ + { + description : "I always open random links", + power:2, + }, + { + description: "I never open unknown links", + power: 5, + }, + { + description : "I would love to see what the news is", + power: 3 + } + ] + }, + { + hackerCard : { + description : "I made a website for you to download free games", + power: 3, + }, + playerCards : [ + { + description : "I only purchase legitimate games", + power:5, + }, + { + description: "woo hoo! Free game!", + power: 1, + }, + { + description : "will check my usual piracy website if it has the game for free", + power: 3 + } + ] + }, + { + hackerCard : { + description : "I made a manipulative video and asked you to pay money", + power: 4, + }, + playerCards : [ + { + description : "Would not pay up and change my IDs", + power:4, + }, + { + description: "Pay up", + power: 3, + }, + { + description : "Complain to cyber police", + power: 5 + } + ] + } +];