hacker card game(edited by Amey Naik)

main.js

@@ -14,8 +14,8 @@ 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 WON BUT ARE NOT HONEST ";
+var playerWinnerMessage = "KUDOS YOU WON IT";
 
           // ---------------Game code starts here ---------------//
 
@@ -24,16 +24,39 @@ var playerWinnerMessage = "Write the message here";
 var playerStartLife = parseInt(playerLife);
 var hackerStartLife = parseInt(hackerLife);
 
+// get the hacker card and player card 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();
+updateScores(e);
+
 
 // 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");
 
 // 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
 
@@ -45,46 +68,121 @@ function cardClicked(cardEl) {
   cardEl.classList.add("played-card");
 
   document.querySelector(".game-board").classList.add("card-selected");
+  console.log("yupp! you just clicked a card");
 
   // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power
   setTimeout(function(){
     revealHackerPower();
   },500)
 
   setTimeout(function(){
-    revealPlayerPower();
+    revealPlayerPower(cardEl);
   },800)
 
-  setTimeout(function(){
+  setTimeout(function(cardEl){
     compareCards();
   }, 1400);
 }
 
 // Now write a function that shows the power level on the player card
-function revealPlayerPower(){
-
+function revealPlayerPower(cardEl){
+  cardEl.classList.toggle("show-power");
 }
 
 // Write a function that shows the power level on the hacker card
 function revealHackerPower(){
-
+  hackercard.classList.toggle("show-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(cardchosenbyuser){
+  let winner; 
+  const playerPower = parseInt(cardchosenbyuser.lastElementChild.innerText);
+  const hackerPower = parseInt(hackercard.lastElementChild.innerText);
+  console.log(playerPower);
+
+  if (playerPower > hackerPower) {
+    --hackerLife;
+    lifeCounts[0].innerText = hackerLife;
+    hackercard.classList.toggle("worse-card");
+    cardchosenbyuser.classList.toggle("better-card");
+    winner = 1;
+  } else {
+    --playerLife;
+    lifeCounts[1].innerText = playerLife;
+    hackercard.classList.toggle("better-card");
+    cardchosenbyuser.classList.toggle("worse-card");
+    winner = 0;
+  }
+
+  lifeCounts[0].innerText = hackerLife;
+  lifeCounts[1].innerText = playerLife;
 
+  updateScores();
+  isGameOver();
+  nextTurn(cardchosenbyuser, winner);
+}
+// Function to bootstrap the next turn process
+function nextTurn(cardchosenbyuser, 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");
+    }
+
+    cardchosenbyuser.classList.toggle("played-card");
+    cardchosenbyuser.classList.toggle("show-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 winnermessagediv = document.querySelector(".winner-message");
+    if (playerLife <= 0) {
+      winnermessagediv.innerText = hackerWinnerMessage;
+    } else {
+      winnermessagediv.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();
 }
 
 
@@ -108,17 +206,42 @@ 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 + "%";
 }
 
 
-
 // Write a function that Plays one turn of the game
 function playTurn() {
 
-}
+  let turnNumber = turn % 5
 
-// Finally write the function that reveals the cards. Use 
-function revealCards(){
+  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");
+
+    console.log("I'm inside the playerCards forEach");
+
+  });
+
+
+
+  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;
+}

scenario.js

@@ -48,4 +48,64 @@ var scenarios = [
       }
     ]
   },
-];
+  {
+    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 have sent u a mail which will destroy your computer if u dont pay the price",
+      power: 4,
+    },
+    playerCards : [
+      {
+        description : "I will not pay the price let it be ",
+        power:5,
+      },
+      {
+        description: "okay I'm ready to pay",
+        power: 3,
+      },
+      {
+        description : "I'm ready to destroy u too",
+        power: 5
+      }
+    ]
+  }
+];