From 6d408b4079b09ee6a243edf83659f854ff70b982 Mon Sep 17 00:00:00 2001
From: Arunabh <arunabh.gupta.min20@itbhu.ac.in>
Date: Mon, 14 Feb 2022 22:44:36 +0530
Subject: [PATCH 1/3] changed the main.js file

---
 main.js | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 64 insertions(+), 8 deletions(-)

diff --git a/main.js b/main.js
index f242959..971bcb8 100644
--- a/main.js
+++ b/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 = "Hacker won the game. ";
+var playerWinnerMessage = "You won the game, Hacker lost";
 
           // ---------------Game code starts here ---------------//
 
@@ -27,20 +27,38 @@ var hackerStartLife = parseInt(hackerLife);
 // we will declare the functions for you and you will complete those 
 updateScores();
 
+//card is not selected currently
+var cardSelected = false;
 // 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
 
+// Adds click handler to all player card elements so that your cards are actionable
+for(var i=0; i<allCardElements.length; i++){
+  // allCardElements[i].addEventListener('click',cardClicked(allCardElements[i]));
+  allCardElements[i].addEventListener('click', function(){
+    // cardClicked(allCardElements[i]);
+    // console.log("card is clicked")
+    cardSelected = true; 
+    // revealPlayerPower();
+    //cardClicked(allCardElements[i]);
+  })
+  // console.log(allCardElements[i]);
+}
 
 // An example of a function that controls what would happen when a card is clicked
 
 function cardClicked(cardEl) {
-
-  if(cardSelected) { return; }
-  cardSelected = true;
+  //var cardSelected = cardEl;
+  if(cardSelected) {
+    return;
+  }
+  else{
+    cardSelected = true;
+  }
+  console.log(cardEl);
 
   cardEl.classList.add("played-card");
 
@@ -62,28 +80,58 @@ function cardClicked(cardEl) {
 
 // Now write a function that shows the power level on the player card
 function revealPlayerPower(){
-  
+  var cards = document.querySelectorAll(".card .power");
+  for(var i=0; i<cards.length; i++){
+    
+    cards[i].style.color = "black";
+    //console.log("color is",cards[i].style.color);
+    
+  }
+  //revealingPlayerCard.style.color = "black";
+ 
 }
 
 // Write a function that shows the power level on the hacker card
 function revealHackerPower(){
-
+  // document.querySelector(".hacker-card .power").innerHTML = hackerLife;
+  // console.log(document.querySelector(".hacker-card .power").innerHTML);
+  let poer = document.querySelector(".hacker-card .power").innerHTML = scenarios[0].hackerCard.power;
+  console.log(poer);
 }
 // 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(){
 
+
 }
 
 //Use conditional statements and complete the function that shows the winner message
 function gameOver(winner) {
+
   
 }
 
 
 // Write a function that starts the game
 function startGame() {
+  var cards = document.getElementsByClassName('card');
+  // console.log(cards.length)
+  for(var i=0; i<cards.length ; i++){
+    // console.log(cards[i].innerHTML);
+    if(i==0){
+      cards[i].querySelector('.text').innerHTML = scenarios[0].hackerCard.description;
+      cards[i].querySelector('.power').innerHTML = scenarios[0].hackerCard.power;
+    }
+    else{
+      cards[i].querySelector('.text').innerHTML = scenarios[0].playerCards[i-1].description;
+      cards[i].querySelector('.power').innerHTML = scenarios[0].playerCards[i-1].power;
+    }
+    
+    // cards[i].querySelector('.text').innerHTML = scenarios[0].hackerCard.description;
+    cards[i].style.opacity = 1;
+  }
+  //revealPlayerPower();
 
 }
 
@@ -108,6 +156,14 @@ 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(hackerPercent < 0){
+    hackerPercent = 0;
+  }
+
+  
 
 }
 

From f6f3241f9d1a5dd8f98a8b7beccd38aa53c171a7 Mon Sep 17 00:00:00 2001
From: Arunabh <arunabh.gupta.min20@itbhu.ac.in>
Date: Tue, 15 Feb 2022 06:25:38 +0530
Subject: [PATCH 2/3] final changes

---
 index.html |   8 +--
 main.js    | 154 +++++++++++++++++++++++++++++++----------------------
 style.css  |   6 +--
 3 files changed, 98 insertions(+), 70 deletions(-)

diff --git a/index.html b/index.html
index bb03a42..7e8faf5 100644
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@ <h1>
         <div class="name">Hacker</div>
       </div>
 
-      <div class="card hacker-card hacker-color">
+      <div class="card hacker-card hacker-color" id="hacker">
         <div class="text"></div>
         <div class="power"></div>
       </div>
@@ -46,17 +46,17 @@ <h1>
         <div class="name">You</div>
       </div>
 
-      <div class="card player-card player-color">
+      <div class="card player-card player-color" id="1">
         <div class="text"></div>
         <div class="power"></div>
       </div>
 
-      <div class="card player-card player-color">
+      <div class="card player-card player-color" id="2">
         <div class="text"></div>
         <div class="power"></div>
       </div>
 
-      <div class="card player-card player-color">
+      <div class="card player-card player-color" id="3">
         <div class="text"></div>
         <div class="power"></div>
       </div>
diff --git a/main.js b/main.js
index 971bcb8..873d766 100644
--- a/main.js
+++ b/main.js
@@ -17,7 +17,7 @@ var hackerLife = 5;
 var hackerWinnerMessage = "Hacker won the game. ";
 var playerWinnerMessage = "You won the game, Hacker lost";
 
-          // ---------------Game code starts here ---------------//
+// ---------------Game code starts here ---------------//
 
 // declare a few handy variables like we've done :p
 
@@ -29,6 +29,10 @@ updateScores();
 
 //card is not selected currently
 var cardSelected = false;
+
+//index of the scenerios
+let scene = 0;
+
 // 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");
 
@@ -36,114 +40,118 @@ 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++){
-  // allCardElements[i].addEventListener('click',cardClicked(allCardElements[i]));
-  allCardElements[i].addEventListener('click', function(){
-    // cardClicked(allCardElements[i]);
-    // console.log("card is clicked")
-    cardSelected = true; 
-    // revealPlayerPower();
-    //cardClicked(allCardElements[i]);
+for (var i = 1; i < allCardElements.length; i++) {
+  // console.log(`${i}`);
+  //console.log( document.getElementById(`${i}`).id);\
+  let id = document.getElementById(`${i}`).id;
+  allCardElements[i].addEventListener('click', function () {
+    cardClicked(parseInt(id));
   })
-  // console.log(allCardElements[i]);
 }
 
 // An example of a function that controls what would happen when a card is clicked
 
-function cardClicked(cardEl) {
+function cardClicked(id) {
   //var cardSelected = cardEl;
-  if(cardSelected) {
+  if (cardSelected) {
     return;
   }
-  else{
+  else {
     cardSelected = true;
   }
-  console.log(cardEl);
+  // cardE1 = document
+  // console.log(id);
+  let cardEl = document.getElementById(`${id}`);
+  //console.log(cardEl);
 
   cardEl.classList.add("played-card");
 
   document.querySelector(".game-board").classList.add("card-selected");
 
   // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power
-  setTimeout(function(){
+  setTimeout(function () {
     revealHackerPower();
-  },500)
+  }, 500)
 
-  setTimeout(function(){
-    revealPlayerPower();
-  },800)
-  
-  setTimeout(function(){
-    compareCards();
+  setTimeout(function () {
+    revealPlayerPower(id);
+  }, 800)
+
+  setTimeout(function () {
+    compareCards(id);
   }, 1400);
+
+
 }
 
 // Now write a function that shows the power level on the player card
-function revealPlayerPower(){
-  var cards = document.querySelectorAll(".card .power");
-  for(var i=0; i<cards.length; i++){
-    
-    cards[i].style.color = "black";
-    //console.log("color is",cards[i].style.color);
-    
-  }
-  //revealingPlayerCard.style.color = "black";
- 
+function revealPlayerPower(id) {
+  document.getElementById(`${id}`).querySelector(".power").style.color = "black";
+
 }
 
 // Write a function that shows the power level on the hacker card
-function revealHackerPower(){
-  // document.querySelector(".hacker-card .power").innerHTML = hackerLife;
-  // console.log(document.querySelector(".hacker-card .power").innerHTML);
-  let poer = document.querySelector(".hacker-card .power").innerHTML = scenarios[0].hackerCard.power;
-  console.log(poer);
+function revealHackerPower() {
+  document.querySelector(".hacker-card").querySelector(".power").style.color = "black";
+
 }
 // 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(id) {
+  let playerScore = parseInt(document.getElementById(`${id}`).querySelector(".power").innerHTML);
+  let hackerScore = parseInt(document.querySelector(".hacker-card").querySelector(".power").innerHTML);
+  if (playerScore > hackerScore) {
+    hackerLife -= hackerScore;
+  }
+  else if (hackerScore > playerScore) {
+    playerLife -= playerScore;
+  }
 
+  updateScores();
+  setTimeout(function () {
+    document.querySelector(".next-turn").style.display = 'block';
+  }, 300);
+  
 }
 
 //Use conditional statements and complete the function that shows the winner message
 function gameOver(winner) {
-
   
+
 }
 
 
 // Write a function that starts the game
 function startGame() {
   var cards = document.getElementsByClassName('card');
-  // console.log(cards.length)
-  for(var i=0; i<cards.length ; i++){
-    // console.log(cards[i].innerHTML);
-    if(i==0){
-      cards[i].querySelector('.text').innerHTML = scenarios[0].hackerCard.description;
-      cards[i].querySelector('.power').innerHTML = scenarios[0].hackerCard.power;
+  for (var i = 0; i < cards.length; i++) {
+    if (i == 0) {
+      cards[i].querySelector('.text').innerHTML = scenarios[scene].hackerCard.description;
+      cards[i].querySelector('.power').innerHTML = scenarios[scene].hackerCard.power;
     }
-    else{
-      cards[i].querySelector('.text').innerHTML = scenarios[0].playerCards[i-1].description;
-      cards[i].querySelector('.power').innerHTML = scenarios[0].playerCards[i-1].power;
+    else {
+      cards[i].querySelector('.text').innerHTML = scenarios[scene].playerCards[i - 1].description;
+      cards[i].querySelector('.power').innerHTML = scenarios[scene].playerCards[i - 1].power;
     }
-    
-    // cards[i].querySelector('.text').innerHTML = scenarios[0].hackerCard.description;
+
     cards[i].style.opacity = 1;
   }
-  //revealPlayerPower();
-
+  document.querySelector(".before-game .start-game").style.display = 'none';
+  document.querySelector(".next-turn").style.display = 'none';
+   
 }
 
 
 // Now write a function that starts the game over from scratch
-function restartGame(){
-
+function restartGame() {
+  scene=0;
+  startGame(); 
 }
 
 // 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;
@@ -153,28 +161,48 @@ function updateScores(){
   if (playerPercent < 0) {
     playerPercent = 0;
   }
-  document.querySelector(".player-stats .life-left").style.height =  playerPercent + "%";
+  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(hackerPercent < 0){
+  if (hackerPercent < 0) {
     hackerPercent = 0;
   }
-
-  
-
 }
 
 
 
 // Write a function that Plays one turn of the game
 function playTurn() {
+  // let btn = document.querySelector(".played-card"); 
+  
+  // console.log(window.getComputedStyle(btn).transform); 
+  var cards = document.getElementsByClassName('card');
+  for(var i=0; i<cards.length; i++){
+    // cards[i].style.opacity = 0;
+    cards[i].querySelector(".power").style.color = "white";
+    window.getComputedStyle(cards[i]).opacity = 0;
+    // cards[i].style.transform = 'translateY(0px)';
+    // console.log(cards[i]);
+  }
+  // console.log("next round is loaded")
+  scene = (scene+1)%(scenarios.length);
+  // // location.reload();
+  // startGame();
+  cardSelected=false;
+  setTimeout(function () {
+    startGame();
+  }, 600);
+  
 
 }
 
 // Finally write the function that reveals the cards. Use 
-function revealCards(){
-
+function revealCards() {
+  var cards = document.getElementsByClassName('card');
+  for(var i=0; i<cards.length; i++){
+    cards[i].querySelector(".power").style.color = "black";
+  }
 }
\ No newline at end of file
diff --git a/style.css b/style.css
index 9ceaaee..d898513 100644
--- a/style.css
+++ b/style.css
@@ -78,7 +78,7 @@ h1 strong {
   bottom: 0;
   background: white;
   width: 100%;
-  height: 50%;
+  height: 100%;
   transition: height .25s ease-out;
 }
 
@@ -148,7 +148,7 @@ button.next-turn {
   display: none;
 }
 
-.during-game .next-turn {
+.next-turn {
   display: block;
 }
 
@@ -160,7 +160,7 @@ button.start-game {
 }
 
 .before-game .start-game {
-  display: block;
+  display:block;
 }
 
 button:hover {

From f1096c717b25d2b74c650a87804f5761410d8bc5 Mon Sep 17 00:00:00 2001
From: Arunabh <arunabh.gupta.min20@itbhu.ac.in>
Date: Tue, 15 Feb 2022 06:26:55 +0530
Subject: [PATCH 3/3] final changes 2.0

---
 main.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index 873d766..24213e8 100644
--- a/main.js
+++ b/main.js
@@ -181,10 +181,10 @@ function playTurn() {
   // console.log(window.getComputedStyle(btn).transform); 
   var cards = document.getElementsByClassName('card');
   for(var i=0; i<cards.length; i++){
-    // cards[i].style.opacity = 0;
+    cards[i].style.opacity = 0;
     cards[i].querySelector(".power").style.color = "white";
-    window.getComputedStyle(cards[i]).opacity = 0;
-    // cards[i].style.transform = 'translateY(0px)';
+    //window.getComputedStyle(cards[i]).opacity = 0;
+    cards[i].style.transform = 'translateY(0px)';
     // console.log(cards[i]);
   }
   // console.log("next round is loaded")