Hacker Card using Javascript

_config.yml

@@ -0,0 +1 @@
+theme: jekyll-theme-cayman

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 were hacked";
+var playerWinnerMessage = "You defeated the hacker";
 
           // ---------------Game code starts here ---------------//
 
@@ -24,6 +24,9 @@ var playerWinnerMessage = "Write the message here";
 var playerStartLife = parseInt(playerLife);
 var hackerStartLife = parseInt(hackerLife);
 
+var roundEnd = false;
+var cardSelected = false;
+
 // we will declare the functions for you and you will complete those 
 updateScores();
 
@@ -33,7 +36,12 @@ 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++)
+{
+  if(allCardElements[i].classList.contains("player-card")){
+    allCardElements[i].addEventListener("click",function(e){cardClicked(this);});
+  };
+}
 
 // An example of a function that controls what would happen when a card is clicked
 
@@ -62,35 +70,114 @@ function cardClicked(cardEl) {
 
 // Now write a function that shows the power level on the player card
 function revealPlayerPower(){
-
+  document.querySelector(".played-card").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(){
+  var playerscore = parseInt(document.querySelector(".played-card").querySelector(".power").innerHTML);
+  var hackerscore = parseInt(document.querySelector(".hacker-card").querySelector(".power").innerHTML);
+
+
+  if(playerscore > hackerscore)
+  {
+    hackerLife -= playerscore-hackerscore;
+    document.querySelector(".played-card").classList.add("better-card");
+    document.querySelector(".hacker-card").classList.add("worse-card");
+    document.querySelector(".hacker-stats .thumbnail").classList.add("ouch");
+
+  }
+  else if(hackerscore > playerscore)
+  {
+    playerLife += playerscore-hackerscore;
+    document.querySelector(".played-card").classList.add("worse-card");
+    document.querySelector(".hacker-card").classList.add("better-card");
+    document.querySelector(".player-stats .thumbnail").classList.add("ouch");
+  }
+
+
+  else{
+    document.querySelector(".played-card").classList.add("tie-card");
+    document.querySelector(".hacker-card").classList.add("tie-card");
+  }
+
+  updateScores();
+
+  if(playerLife<=0)
+  {
+    gameOver("Hacker");
+  }
+  else if(hackerLife<=0)
+  {
+    gameOver("Player");
+  }
+
+  roundEnd = true;
+  if(playerLife>0 && hackerLife>0)
+  document.querySelector(".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").classList.remove("player-color");
+  document.querySelector(".winner-section").classList.remove("hacker-color");
+  document.querySelector(".winner-section").style.display = "flex" ;
+  document.querySelector(".next-turn").setAttribute("disabled","true");
+  if(winner=="Player")
+  {
+    document.querySelector(".winner-message").innerHTML = playerWinnerMessage;
+    document.querySelector(".winner-section").classList.add("player-color");
+    document.querySelector(".next-turn").setAttribute("disabled","true");
 
+  }
+  else{
+    document.querySelector(".winner-section").classList.add("hacker-color");
+    document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
+    document.querySelector(".next-turn").setAttribute("disabled","true");
+
+
+  }
 }
 
 
 // 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("button").removeAttribute("disabled");
+
+  for(var i=0 ; i< allCardElements.length ; i++)
+  {
+    allCardElements[i].style.display = "none";
+  }
+
+  playerLife = playerStartLife;
+  hackerLife = hackerStartLife;
+
+  roundEnd = 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
@@ -108,17 +195,69 @@ 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;
+  }
+  document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
 }
 
 
 
 // Write a function that Plays one turn of the game
 function playTurn() {
+  roundEnd = true;
+  cardSelected = false;
 
+  document.querySelector(".game-board").classList.remove("card-selected");
+  document.querySelector(".player-stats .thumbnail").classList.remove("ouch");
+  document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch");
+  document.querySelector(".next-turn").setAttribute("disabled","true");
+
+  for(var i=0 ; i<allCardElements.length ; i++)
+  {
+    allCardElements[i].classList.add("showCard");
+  }
+
+  setTimeout(function(){
+    revealCards();
+  }, 500);
 }
+var j=0,k=0;
 
 // Finally write the function that reveals the cards. Use 
 function revealCards(){
 
+
+
+
+  for(var i=0 ; i<allCardElements.length ; i++)
+  {
+    allCardElements[i].classList.remove("reveal-power");
+    allCardElements[i].classList.remove("worse-card");
+    allCardElements[i].classList.remove("better-card");
+    allCardElements[i].classList.remove("tie-card");
+    allCardElements[i].classList.remove("played-card");
+
+
+  if(allCardElements[i].classList.contains("player-card"))
+  {
+    allCardElements[i].querySelector(".text").innerHTML = scenarios[j].playerCards[k].description;
+    allCardElements[i].querySelector(".power").innerHTML = scenarios[j].playerCards[k].power;
+    document.querySelector(".hacker-area .card").querySelector(".text").innerHTML = scenarios[j].hackerCard.description;
+    document.querySelector(".hacker-area .card").querySelector(".power").innerHTML = scenarios[j].hackerCard.power;
+
+
+    k++;
+    if(k==3)
+    {
+      k=0;
+      j++;
+    }
+  }
+
+
+
+ }
 }

scenario.js

@@ -48,4 +48,104 @@ var scenarios = [
       }
     ]
   },
+  {
+    hackerCard : {
+      description : "I sent you an email where I asked to enter your email and password in a site",
+      power : 3,
+    },
+    playerCards : [
+      {
+        description : "I never enter my email and password in any unknown site",
+        power : 5,
+      },
+      {
+        description : "I entered the details but then changed my password",
+        power : 4,
+      },
+      {
+        description : "I entered my email and password.",
+        power : 1,
+      }
+    ]
+  },
+  {
+    hackerCard : {
+      description : "I sent you some file onlie with some attachment you need to download",
+      power : 3,
+    },
+    playerCards : [
+      {
+        description : "I scan it before downloading it",
+        power : 5,
+      },
+      {
+        description : "I scan it after downloading it ",
+        power : 4,
+      },
+      {
+        description : "I download it and do not scan it",
+        power : 1,
+      }
+    ]
+  },
+  {
+    hackerCard : {
+      description : "I gave you my USB drive",
+      power : 3,
+    },
+    playerCards : [
+      {
+        description : "I scanned that USB drive before using it",
+        power : 5,
+      },
+      {
+        description : "I did not use your USB as I did not have anti virus",
+        power : 4,
+      },
+      {
+        description : "I used your USB without scanning",
+        power : 1,
+      }
+    ]
+  },
+  {
+    hackerCard : {
+      description : "I have your Netflix password",
+      power : 3,
+    },
+    playerCards : [
+      {
+        description : "I changed my password and loged out of all devices",
+        power : 5,
+      },
+      {
+        description : "I changed my password but did not log out",
+        power : 4,
+      },
+      {
+        description : "I did not changed my password",
+        power : 1,
+      }
+    ]
+  },
+  {
+    hackerCard : {
+      description : "I am spamming your DM with fake OTPs",
+      power : 3,
+    },
+    playerCards : [
+      {
+        description : "I have spamming protection",
+        power : 5,
+      },
+      {
+        description : "I ignore those as I know I have not given my number to these sites",
+        power : 4,
+      },
+      {
+        description : "I panic!!!!",
+        power : 1,
+      }
+    ]
+  },
 ];