From faf402285eee0aedf283bc4dad7d5fdc4812e50a Mon Sep 17 00:00:00 2001
From: suhanigarg29 <96908018+suhanigarg29@users.noreply.github.com>
Date: Fri, 11 Feb 2022 15:33:17 +0530
Subject: [PATCH 1/2] Update main.js

---
 main.js | 169 ++++++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 147 insertions(+), 22 deletions(-)

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

From 2d05495aa111b390c912ad4cc8c2169450c1783f Mon Sep 17 00:00:00 2001
From: suhanigarg29 <96908018+suhanigarg29@users.noreply.github.com>
Date: Fri, 11 Feb 2022 15:34:21 +0530
Subject: [PATCH 2/2] Update scenario.js

---
 scenario.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

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