diff --git a/index.html b/index.html index bb03a42..3213529 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@

👦
-
You
+
You
@@ -61,7 +61,7 @@

- + diff --git a/main.js b/main.js index f242959..54390ea 100644 --- a/main.js +++ b/main.js @@ -14,8 +14,23 @@ 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 username =""; +username=prompt("Enter a username (maximum 10 characters)"); +while(username == "" || username.length>10) + { + alert("Please enter a valid username"); + username=prompt("Enter a username (maximum 10 characters)"); + } + var username2=username[0].toUpperCase()+username.substring(1).toLowerCase(); +document.getElementById("username").innerHTML=username2; + +var hackerWinnerMessage = `Sorry ${username2} , You got hacked !`; +var playerWinnerMessage = `Great job ${username2} , You won !`; + + + + + // ---------------Game code starts here ---------------// @@ -23,6 +38,8 @@ var playerWinnerMessage = "Write the message here"; var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); +var roundFinished = false; +var cardSelected = false; // we will declare the functions for you and you will complete those updateScores(); @@ -33,7 +50,14 @@ 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 @@ -49,11 +73,11 @@ function cardClicked(cardEl) { // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power setTimeout(function(){ revealHackerPower(); - },500) + }, 500); setTimeout(function(){ revealPlayerPower(); - },800) + }, 800); setTimeout(function(){ compareCards(); @@ -62,35 +86,110 @@ function cardClicked(cardEl) { // Now write a function that shows the power level on the player card function revealPlayerPower(){ - + var playerCard = document.querySelector(".played-card"); + playerCard.classList.add("reveal-power"); } // Write a function that shows the power level on the hacker card function revealHackerPower(){ + var hackerCard = document.querySelector(".hacker-card"); + 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(){ + var playerCard = document.querySelector(".played-card"); + var playerPowerEl = playerCard.querySelector(".power"); + + var hackerCard = document.querySelector(".hacker-card"); + 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"); + document.querySelector(".player-stats .thumbnail").classList.add("ouch"); + } else if (powerDifference > 0) { + + hackerLife = hackerLife - powerDifference; + playerCard.classList.add("better-card"); + hackerCard.classList.add("worse-card"); + document.querySelector(".hacker-stats .thumbnail").classList.add("ouch"); + } else { + playerCard.classList.add("tie-card"); + hackerCard.classList.add("tie-card"); + } + updateScores(); + if (playerLife <= 0) { + gameOver("Hacker"); + } else if (hackerLife <= 0) { + gameOver("Player") + } + roundFinished = true; + document.querySelector("button.next-turn").removeAttribute("disabled"); + } //Use conditional statements and complete the function that shows the winner message function gameOver(winner) { - + document.querySelector(".game-board").classList.add("game-over"); + document.querySelector(".winner-section").style.display = "flex"; + document.querySelector(".winner-section").classList.remove("player-color"); + document.querySelector(".winner-section").classList.remove("hacker-color"); + + if (winner == "Hacker") { + document.querySelector(".winner-message").innerHTML = hackerWinnerMessage; + document.querySelector(".winner-section").classList.add("hacker-color"); + } else { + document.querySelector(".winner-message").innerHTML = playerWinnerMessage; + document.querySelector(".winner-section").classList.add("player-color"); + } + document.querySelector("button.next-turn").setAttribute("disable") } // Write a function that starts the game function startGame() { + document.querySelector(".game-board").classList.remove("before-game"); + document.querySelector(".game-board").classList.add("during-game"); + playTurn(); } // Now write a function that starts the game over from scratch function restartGame(){ + document.querySelector(".game-board").classList.remove("game-over"); + document.querySelector(".game-board").classList.remove("during-game"); + document.querySelector(".game-board").classList.add("before-game"); + + document.querySelector(".winner-section").style.display = "none"; + document.querySelector(".hacker-card").style.display = "none"; + + var cards =allCardElements; + + document.querySelector("button").removeAttribute("disabled"); + + for (var i = 0; i < cards.length; i++) { + cards[i].style.display = "none"; + } + + playerLife = playerStartLife; + hackerLife = hackerStartLife; + + roundFinished = true; + cardSelected = false; + updateScores(); } // 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 @@ -99,6 +198,7 @@ function updateScores(){ // Here these update life totals for each player document.querySelector(".player-stats .life-total").innerHTML = playerLife; + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; // We've added the code to update the player lifebar var playerPercent = playerLife / playerStartLife * 100; @@ -108,17 +208,107 @@ function updateScores(){ document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Now you write the code to update the hacker lifebar + var hackerPercent = (hackerLife / hackerStartLife) * 100; + if (hackerPercent < 0) { + hackerPercent = 0; + } + document.querySelector(".hacker-stats .life-left").style.height = + hackerPercent + "%"; } +function shuffleArray(s) { + let j, x, i; + for (i = s.length; i; i--) { + j = Math.floor(Math.random() * i); + x = s[i - 1]; + s[i - 1] = s[j]; + s[j] = x; + } + return s; +} // Write a function that Plays one turn of the game function playTurn() { + roundFinished = true; + cardSelected = false; + + document.querySelector(".game-board").classList.remove("card-selected"); + + // Remove "ouch" from player and hacker thumbnails + document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); + document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); + + // Hides the "next turn" button, will show again when turn is over + document.querySelector(".next-turn").setAttribute("disabled", "true"); + + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + card.classList.remove("showCard"); + } + setTimeout(function () { + revealCards(); + }, 500); } // Finally write the function that reveals the cards. Use function revealCards(){ + + var j = 0; + var cardIndexes = shuffleArray([0, 1, 2]); + + // Get scenario cards + console.log("scenarios.length == " + scenarios.length); + + var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); + var scenario = scenarios[randomScenarioIndex]; + console.log(scenario.hackerCard.description); + + scenarios.splice(randomScenarioIndex, 1); + + console.log("scenarios.length after splice = " + scenarios.length); + + var hackerCard = scenario.hackerCard; + var hackerCardEl = document.querySelector(".hacker-area .card"); + + // Contents of the player cards + var playerCards = scenario.playerCards; + + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + + card.classList.remove("worse-card"); + card.classList.remove("better-card"); + card.classList.remove("played-card"); + card.classList.remove("tie-card"); + card.classList.remove("prepared"); + card.classList.remove("reveal-power"); + + // Display the payer card details + if (card.classList.contains("player-card")) { + card.querySelector(".text").innerHTML = + playerCards[cardIndexes[j]].description; + card.querySelector(".power").innerHTML = + playerCards[cardIndexes[j]].power; + j++; + } + + // Revealing each card one by one with a delay of 100ms + setTimeout(function(card, j) + { + return function() { + card.classList.remove("prepared"); + card.style.display = "block"; + card.classList.add("showCard"); + } + }(card, i), parseInt(i + 1) * 200); + } + + // Displaying the hacker card + hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; + hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; + } \ No newline at end of file diff --git a/scenario.js b/scenario.js index f926d60..3a150b0 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,68 @@ var scenarios = [ } ] }, + { + hackerCard : { + description : "I sent a fake email to you for claiming your prize money.", + power: 3, + }, + playerCards : [ + { + description : "I opened it to claim the prize.", + power:1 + }, + { + description: "I saw the mail but didn't click on the link.", + power: 4, + }, + { + description :" I am well aware of these frauds. So I never entertain such emails.", + power:5 + }, + + ] + }, + { + hackerCard : { + description : "I sent a message to you for downloading premium version of an app.", + power : 3, + + }, + playerCards : [ + { + description : "I opened it but didn't download as I don't use that app.", + power : 2, + }, + { + description : "I am aware of phishing. So I don't click on such links.", + power:5, + }, + { + description : "I opened it as I wanted the premium version since a long time.", + power : 1, + }, + ] +}, +{ + hackerCard : { + description : "I sent a you a malware disguised as an audio file on whatsapp .", + power:3, + }, + playerCards : [ + { + description : "I opened the file.", + power:1, + }, + { + description : "I blocked and reported the contact and did not open the audio file.", + power: 5, + }, + { + description : "I did not open the audio file and ignored the message.", + power : 3, + } + + ] + +} ]; \ No newline at end of file