Polyglot_JS Assignment

main.js

@@ -14,15 +14,16 @@ 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 = "Womp Womp Womp, the hacker has won!";
+var playerWinnerMessage = "Hurrah! You defeated the Hacker!";
 
           // ---------------Game code starts here ---------------//
 
 // declare a few handy variables like we've done :p
 
 var playerStartLife = parseInt(playerLife);
 var hackerStartLife = parseInt(hackerLife);
+var cardSelected = false;
 
 // we will declare the functions for you and you will complete those 
 updateScores();
@@ -33,7 +34,11 @@ 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(let i=0; i<allCardElements.length; i++) {
+  if(allCardElements[i].classList.contains("player-card")){
+    allCardElements[i].addEventListener('click', (e) => cardClicked(allCardElements[i]));
+  }
+}
 
 // An example of a function that controls what would happen when a card is clicked
 
@@ -52,7 +57,7 @@ function cardClicked(cardEl) {
   },500)
 
   setTimeout(function(){
-    revealPlayerPower();
+    revealPlayerPower(cardEl);
   },800)
 
   setTimeout(function(){
@@ -61,36 +66,102 @@ function cardClicked(cardEl) {
 }
 
 // Now write a function that shows the power level on the player card
-function revealPlayerPower(){
-
+function revealPlayerPower(cardEl){
+  cardEl.classList.add("reveal-power");
 }
 
 // Write a function that shows the power level on the hacker card
 function revealHackerPower(){
-
+  document.querySelector('.hacker-card').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(){
+  let playedCard = document.querySelector(".played-card");
+  let hackerCard = document.querySelector(".hacker-card");
+
+  let playerPoint = parseInt(playedCard.querySelector(".power").innerHTML);
+  let hackerPoint = parseInt(hackerCard.querySelector(".power").innerHTML);
+
+  let hackerIcon = document.querySelector(".hacker-stats .thumbnail");
+  let playerIcon = document.querySelector(".player-stats .thumbnail");
+
+  if(playerPoint>hackerPoint) {
+    playedCard.classList.add("better-card");
+    hackerCard.classList.add("worse-card");
+    hackerIcon.classList.add("ouch");
+    hackerLife -= (playerPoint-hackerPoint);
+  } else if(hackerPoint>playerPoint) {
+    playedCard.classList.add("worse-card");
+    hackerCard.classList.add("better-card");
+    playerIcon.classList.add("ouch");
+    playerLife -= (hackerPoint-playerPoint);
+  } else {
+    playedCard.classList.add("tie-card");
+    hackerCard.classList.add("tie-card");
+  }
+
+  updateScores();
+
+  if(playerLife<=0) {
+    gameOver(0); // hacker wins
+  } else if(hackerLife<=0) {
+    gameOver(1); // player wins
+  }
 
+  document.querySelector(".next-turn").removeAttribute("disabled");
 }
 
 //Use conditional statements and complete the function that shows the winner message
 function gameOver(winner) {
-
+  const winMessage = document.querySelector(".winner-message");
+  if(winner == 0) {
+    winMessage.textContent = hackerWinnerMessage;
+  } else if (winner == 1) {
+    winMessage.textContent = playerWinnerMessage;
+  } else {
+    winMessage.textContent = "Error"; // for my reference
+  }
+
+  document.querySelector(".game-board").classList.remove("during-game");
+  document.querySelector(".game-board").classList.add("game-over");
+  document.querySelector(".winner-section").style.display = "flex"; //changing it from none
 }
 
 
 // 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(){
+  // revert all changed made during the game
+  playerLife = parseInt(playerStartLife);
+  hackerLife = parseInt(hackerStartLife);
+
+  let playedCard = document.querySelector(".played-card");
+  playedCard.classList.remove("played-card");
+
+  document.querySelector(".game-board").classList.remove("card-selected");
+  cardSelected = false;
+
+  document.querySelector(".game-board").classList.remove("game-over");
+  document.querySelector(".game-board").classList.add("before-game");
 
+  // left more
+  document.querySelector(".winner-section").style.display = "none";
+  document.querySelector(".next-turn").removeAttribute("disabled");
+
+  for(let i=0; i<allCardElements.length; i++) {
+    allCardElements[i].style.display = "none";
+  }
+
+  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
@@ -108,17 +179,64 @@ 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;
+  var hackerPercent = hackerLife / hackerStartLife * 100;
+  if (hackerLife < 0) {
+    hackerPercent = 0;
+  }
+  document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
 }
 
-
+function shuffleArray(arr) {
+  arr.sort(() => Math.random() - 0.5);
+}
 
 // Write a function that Plays one turn of the game
 function playTurn() {
+  document.querySelector(".game-board").classList.remove("card-selected");
+  cardSelected = false;
+  document.querySelector(".next-turn").setAttribute("disabled", true);
+
+  let hackerIcon = document.querySelector(".hacker-stats .thumbnail");
+  let playerIcon = document.querySelector(".player-stats .thumbnail");
+  hackerIcon.classList.remove("ouch");
+  playerIcon.classList.remove("ouch");
+
+  for(let i=0; i<allCardElements.length; i++) {
+      allCardElements[i].classList.remove("reveal-power");
+      allCardElements[i].classList.remove("showCard");
+      allCardElements[i].classList.remove("worse-card");
+      allCardElements[i].classList.remove("better-card");
+      allCardElements[i].classList.remove("tie-card");
+      allCardElements[i].classList.remove("played-card");
+  }
 
+  let index = Math.floor(Math.random() * scenarios.length);
+
+  let cardPicking = [0, 1, 2];
+  shuffleArray(cardPicking);
+
+  // getting the content ready in the cards
+  let hackerCard = document.querySelector(".hacker-card");
+  hackerCard.querySelector(".text").innerHTML = scenarios[index].hackerCard.description;
+  hackerCard.querySelector(".power").innerHTML = scenarios[index].hackerCard.power;
+  hackerCard.classList.add("prepared");
+
+  for(let i=0; i<allCardElements.length; i++) {
+    if(allCardElements[i].classList.contains("player-card")){
+      allCardElements[i].querySelector(".text").innerHTML = scenarios[index].playerCards[cardPicking[i-1]].description;
+      allCardElements[i].querySelector(".power").innerHTML = scenarios[index].playerCards[cardPicking[i-1]].power;
+      allCardElements[i].classList.add("prepared");
+    }
+  }
+
+  // setTimeout(revealCards, 1000);
+  revealCards();
 }
 
 // Finally write the function that reveals the cards. Use 
 function revealCards(){
-
+  for(let i=0; i<allCardElements.length; i++) {
+    allCardElements[i].classList.add("showCard");
+  }
 }

scenario.js

@@ -48,4 +48,67 @@ var scenarios = [
       }
     ]
   },
+  { // add the text you'd want should appear on the hacker's card
+    hackerCard : {
+      description : "I sent you a mail congratulating you for winning the lottery and ask for a giftcard for the transaction costs.",
+      power : 3,
+    },
+    // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+    playerCards : [
+      {
+        description : "I report the email as scam.",
+        power : 5,
+      },
+      {
+        description : "I don't buy the giftcard and ask for the money first.",
+        power : 2,
+      },
+      {
+        description : "I send them the required giftcard and wait for my award.",
+        power : 1,
+      }
+    ]
+  },
+  { // add the text you'd want should appear on the hacker's card
+    hackerCard : {
+      description : "I meet you on a forum and ask you for places to visit in your city.",
+      power : 4,
+    },
+    // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+    playerCards : [
+      {
+        description : "I don't give away any personal infomation online.",
+        power : 5,
+      },
+      {
+        description : "I tell you some places a few cities over so they don't know my city.",
+        power : 3,
+      },
+      {
+        description : "I tell you about all my favorite places to visit in the city.",
+        power : 1,
+      }
+    ]
+  },
+  { // add the text you'd want should appear on the hacker's card
+    hackerCard : {
+      description : "I try to crack your password to a major site.",
+      power : 3,
+    },
+    // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+    playerCards : [
+      {
+        description : "I have different strong passwords on all sites and change them regularly.",
+        power : 5,
+      },
+      {
+        description : "I have one strong password on all the sites I use.",
+        power : 4,
+      },
+      {
+        description : "I have a generic password that I can easily remember.",
+        power : 1,
+      }
+    ]
+  },
 ];