Create script.js

1 files changed, 271 insertions, 0 deletions

diff --git a/scripts/script.js b/scripts/script.js
new file mode 100644
index 0000000..178df69
--- /dev/null
+++ b/scripts/script.js
@@ -0,0 +1,271 @@
+// Set starting life totals here
+var playerLife = 10;
+var hackerLife = 10;
+
+// Message when the game is over
+var hackerWinnerMessage = "Game over: You got hacked!";
+var playerWinnerMessage = "You defeated the hacker!";
+
+
+// Game code starts here
+var playerStartLife = parseInt(playerLife);
+var hackerStartLife = parseInt(hackerLife);
+
+var roundFinished = false;
+var cardSelected = false;
+
+updateScores();
+
+document.querySelector(".game-board").classList.add("before-game");
+
+var allCardElements = document.querySelectorAll(".card");
+
+// Adds click handler to all player card elements
+for(var i = 0; i < allCardElements.length; i++) {
+  var card = allCardElements[i];
+  if(card.classList.contains("player-card")) {
+    card.addEventListener("click",function(e){
+      cardClicked(this);
+    });
+  }
+}
+
+
+// When a card is clicked
+function cardClicked(cardEl) {
+
+  if(cardSelected) { return; }
+  cardSelected = true;
+
+  cardEl.classList.add("played-card");
+
+  document.querySelector(".game-board").classList.add("card-selected");
+
+  // Wait 500ms to reveal the hacker power
+  setTimeout(function(){
+    revealHackerPower();
+  },500)
+
+  // Wait 750ms to reveal the player power
+  setTimeout(function(){
+    revealPlayerPower();
+  },800)
+
+  // Wait 1250ms to compare the card scoers
+  setTimeout(function(){
+    compareCards();
+  }, 1400);
+}
+
+// Shows the power level on the player card
+function revealPlayerPower(){
+  var playerCard = document.querySelector(".played-card");
+  playerCard.classList.add("reveal-power");
+}
+
+// Shows the power level on the hacker card
+function revealHackerPower(){
+  var hackerCard = document.querySelector(".hacker-card");
+  hackerCard.classList.add("reveal-power");
+}
+
+function compareCards(){
+  var playerCard = document.querySelector(".played-card");
+  var playerPowerEl = playerCard.querySelector(".power");
+
+  var hackerCard = document.querySelector(".hacker-card");
+  var hackerPowerEl = hackerCard.querySelector(".power");
+
+  var playerPower = parseInt(playerPowerEl.innerHTML);
+  var hackerPower = parseInt(hackerPowerEl.innerHTML);
+
+  var powerDifference = playerPower - hackerPower;
+
+  if (powerDifference < 0) {
+    // Player Loses
+    playerLife = playerLife + powerDifference;
+    hackerCard.classList.add("better-card");
+    playerCard.classList.add("worse-card");
+    document.querySelector(".player-stats .thumbnail").classList.add("ouch");
+  } else if (powerDifference > 0) {
+    // Player Wins
+    hackerLife = hackerLife - powerDifference;
+    playerCard.classList.add("better-card");
+    hackerCard.classList.add("worse-card");
+    document.querySelector(".hacker-stats .thumbnail").classList.add("ouch");
+  } else {
+    playerCard.classList.add("tie-card");
+    hackerCard.classList.add("tie-card");
+  }
+
+  updateScores();
+
+  if(playerLife <= 0) {
+    gameOver("Hacker");
+  } else if (hackerLife <= 0){
+    gameOver("Player")
+  }
+
+  roundFinished = true;
+
+  document.querySelector("button.next-turn").removeAttribute("disabled");
+}
+
+// Shows the winner message
+function gameOver(winner) {
+  document.querySelector(".game-board").classList.add("game-over");
+  document.querySelector(".winner-section").style.display = "flex";
+  document.querySelector(".winner-section").classList.remove("player-color");
+  document.querySelector(".winner-section").classList.remove("hacker-color");
+
+  if(winner == "Hacker") {
+    document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
+    document.querySelector(".winner-section").classList.add("hacker-color");
+  } else {
+    document.querySelector(".winner-message").innerHTML = playerWinnerMessage;
+    document.querySelector(".winner-section").classList.add("player-color");
+  }
+}
+
+
+// Starts the game
+function startGame() {
+  document.querySelector(".game-board").classList.remove("before-game");
+  document.querySelector(".game-board").classList.add("during-game");
+  playTurn();
+}
+
+
+// Start 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(".hacker-card").style.display = "none";
+
+  var cards = allCardElements;
+
+  document.querySelector("button").removeAttribute("disabled");
+
+  for(var i = 0; i < cards.length; i++) {
+    cards[i].style.display = "none";
+  }
+
+  playerLife = playerStartLife;
+  hackerLife = hackerStartLife;
+
+  roundFinished = true;
+  cardSelected = false;
+
+  updateScores();
+}
+
+// Updates the displayed life bar and life totals
+function updateScores(){
+
+  // Update life totals for each player
+  document.querySelector(".player-stats .life-total").innerHTML = playerLife;
+  document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife;
+
+  // Update the player lifebar
+  var playerPercent = playerLife / playerStartLife * 100;
+  if (playerPercent < 0) {
+    playerPercent = 0;
+  }
+  document.querySelector(".player-stats .life-left").style.height =  playerPercent + "%";
+
+  // Update the hacker lifebar
+  var hackerPercent = hackerLife / hackerStartLife * 100
+  if (hackerPercent < 0) {
+    hackerPercent = 0;
+  }
+  document.querySelector(".hacker-stats .life-left").style.height =  hackerPercent + "%";
+}
+
+
+// Shuffles an array
+function shuffleArray(a) {
+  var j, x, i;
+  for (i = a.length; i; i--) {
+    j = Math.floor(Math.random() * i);
+    x = a[i - 1];
+    a[i - 1] = a[j];
+    a[j] = x;
+  }
+  return a;
+}
+
+
+// Plays one turn of the game
+function playTurn() {
+
+  roundFinished = true;
+  cardSelected = false;
+
+  document.querySelector(".game-board").classList.remove("card-selected");
+
+  // Remove "ouch" class from player and hacker thumbnails
+  document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch");
+  document.querySelector(".player-stats .thumbnail").classList.remove("ouch");
+
+  // Hides the "next turn" button, will show again when turn is over
+  document.querySelector(".next-turn").setAttribute("disabled", "true");
+
+  for(var i = 0; i < allCardElements.length; i++) {
+    var card = allCardElements[i];
+    card.classList.remove("showCard");
+  }
+
+  setTimeout(function(){
+    revealCards();
+  }, 500);
+}
+
+function revealCards(){
+  var j = 0;
+  var cardIndexes = shuffleArray([0,1,2]);
+
+
+  // Get scenario cards
+  var randomScenarioIndex = Math.floor(Math.random() * (scenarios.length));
+  var scenario = scenarios[randomScenarioIndex];
+
+  var hackerCard = scenario.hackerCard;
+  var hackerCardEl = document.querySelector(".hacker-area .card");
+
+  // Contents of the player cards
+  var playerCards = scenario.playerCards;
+
+  for(var i = 0; i < allCardElements.length; i++) {
+    var card = allCardElements[i];
+
+    card.classList.remove("worse-card");
+    card.classList.remove("better-card");
+    card.classList.remove("played-card");
+    card.classList.remove("tie-card");
+    card.classList.remove("prepared");
+    card.classList.remove("reveal-power");
+
+    // Display the payer card details
+    if(card.classList.contains("player-card")) {
+      card.querySelector(".text").innerHTML = playerCards[cardIndexes[j]].description;
+      card.querySelector(".power").innerHTML = playerCards[cardIndexes[j]].power;
+      j++;
+    }
+
+    // Reveal each card one by one with a delay of 100ms
+    setTimeout(function(card, j){
+      return function() {
+        card.classList.remove("prepared");
+        card.style.display = "block";
+        card.classList.add("showCard");
+      }
+    }(card,i), parseInt(i+1) * 200);
+  }
+
+  // Display the hacker card
+  hackerCardEl.querySelector(".text").innerHTML = hackerCard.description;
+  hackerCardEl.querySelector(".power").innerHTML = hackerCard.power;
+}