completed functions

index.html

@@ -43,7 +43,7 @@ <h1>
         </div>
         <div class="life-total"></div>
         <div class="thumbnail">👦</div>
-        <div class="name">You</div>
+        <div class="name" id="username">You</div>
       </div>
 
       <div class="card player-card player-color">
@@ -61,7 +61,7 @@ <h1>
         <div class="power"></div>
       </div>
 
-      <button class="start-game" onclick="startGame()">Start Game</button>
+      <button class="start-game"  onclick="startGame()">Start Game</button>
       <button class="next-turn" onclick="playTurn()">Next Turn</button>
     </div>
   </div>

main.js

@@ -14,15 +14,32 @@ 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 ---------------//
 
 // declare a few handy variables like we've done :p
 
 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;
+
 
 }

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,
+    }
+
+  ]
+
+}
 ];