diff --git a/main.js b/main.js index f242959..c7365bc 100644 --- a/main.js +++ b/main.js @@ -8,21 +8,27 @@ // Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js +// Im unable to complete because im new to Javascript + // Life of the player and the hacker. var playerLife = 5; var hackerLife = 5; +cardSelected = false; +var i = 0; // Message to be displayed when the game is over -var hackerWinnerMessage = "Write the message here"; -var playerWinnerMessage = "Write the message here"; +var hackerWinnerMessage = "You Got Hacked!"; +var playerWinnerMessage = "You are safe Now!"; - // ---------------Game code starts here ---------------// +// ---------------Game code starts here ---------------// // declare a few handy variables like we've done :p var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); +var hackerCard = document.querySelector(".hacker-card"); +var playerCard = document.querySelectorAll(".played-card"); // we will declare the functions for you and you will complete those updateScores(); @@ -33,13 +39,20 @@ document.querySelector(".game-board").classList.add("before-game"); var allCardElements = document.querySelectorAll(".card"); // Adds click handler to all player card elements so that your cards are actionable - +for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + if (card.classList.contains("player-card")) { + card.addEventListener("click", function (e) { + cardClicked(this); + }); + } +} // An example of a function that controls what would happen when a card is clicked function cardClicked(cardEl) { - if(cardSelected) { return; } + if (cardSelected) { return; } cardSelected = true; cardEl.classList.add("played-card"); @@ -47,65 +60,103 @@ function cardClicked(cardEl) { document.querySelector(".game-board").classList.add("card-selected"); // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power - setTimeout(function(){ + setTimeout(function () { revealHackerPower(); - },500) + }, 500) - setTimeout(function(){ + setTimeout(function () { revealPlayerPower(); - },800) - - setTimeout(function(){ + }, 800) + + setTimeout(function () { compareCards(); }, 1400); } // Now write a function that shows the power level on the player card -function revealPlayerPower(){ - +function revealPlayerPower() { + playerCard.classList.add("reveal-power"); } // Write a function that shows the power level on the hacker card -function revealHackerPower(){ - +function revealHackerPower() { + hackerCard.classList.add("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() { + var playerPowerEl = playerCard.querySelector(".power"); + var hackerPowerEl = hackerCard.querySelector(".power"); + + var playerPower = parseInt(playerPowerEl.innerHTML); + var hackerPower = parseInt(hackerPowerEl.innerHTML); + + var powerDifference = playerPower - hackerPower; + if (powerDifference < 0) { + playerLife = playerLife + powerDifference; + hackerCard.classList.add("better-card"); + playerCard.classList.add("worse-card"); + } + else if (powerDifference > 0) { + hackerLife = hackerLife - powerDifference; + playerCard.classList.add("better-card"); + hackerCard.classList.add("worse-card"); + } + else { + playerCard.classList.add("tie-card"); + hackerCard.classList.add("tie-card"); + } + updateScores(); + + if (playerLife <= 0) { gameOver("Hacker"); } + if (hackerLife <= 0) { gameOver("player"); } } //Use conditional statements and complete the function that shows the winner message -function gameOver(winner) { - +function gameOver(winner) +{ + if (winner == "Hacker") + { + document.querySelector(".winner-message").innerHTML = hackerWinnerMessage; + } + else if (winner == "Player") + { + document.querySelector(".winner-message").innerHTML = playerWinnerMessage; + } } // Write a function that starts the game -function startGame() { - +function startGame() +{ + document.querySelector(".game-board").classList.remove("before-game"); + document.querySelector(".game-board").classList.add("during-game"); + revealCards(); } - // 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; // We've added the code to update the player lifebar var playerPercent = playerLife / playerStartLife * 100; - if (playerPercent < 0) { + if (playerPercent < 0) + { playerPercent = 0; } - document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; + document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Now you write the code to update the hacker lifebar @@ -114,11 +165,22 @@ function updateScores(){ // Write a function that Plays one turn of the game -function playTurn() { - +function playTurn() +{ + cardSelected = false; + revealCards(); } // Finally write the function that reveals the cards. Use -function revealCards(){ - -} \ No newline at end of file +function revealCards() +{ + i=0; + for(var j=0;j<4;j++){ + document.querySelectorAll(".card")[j].style.opacity=10; + } + hackerCard.querySelector(".text").innerHTML = scenarios[i].hackerCard.description; + playerCard[0].querySelector(".text").innerHTML = scenarios[i].playerCards[0].description; + playerCard[1].querySelector(".text").innerHTML = scenarios[i].playerCards[1].description; + playerCard[2].querySelector(".text").innerHTML = scenarios[i].playerCards[2].description; + i++; +} diff --git a/scenario.js b/scenario.js index f926d60..6150f50 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,24 @@ var scenarios = [ } ] }, + { + hackerCard : { + description : "I have sent you a survey-form asking your personal details.", + power : 2, + }, + playerCards : [ + { + description : "I ignored the survey-form.", + power : 5, + }, + { + description : "I never give out personal information in response to a survey-form.", + power : 4, + }, + { + description : "I filled the form but i never filled the password.", + power : 1, + } + ] + }, ]; \ No newline at end of file