-
+
diff --git a/main.js b/main.js
index f242959..54390ea 100644
--- a/main.js
+++ b/main.js
@@ -14,8 +14,23 @@ 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 username ="";
+username=prompt("Enter a username (maximum 10 characters)");
+while(username == "" || username.length>10)
+ {
+ alert("Please enter a valid username");
+ username=prompt("Enter a username (maximum 10 characters)");
+ }
+ var username2=username[0].toUpperCase()+username.substring(1).toLowerCase();
+document.getElementById("username").innerHTML=username2;
+
+var hackerWinnerMessage = `Sorry ${username2} , You got hacked !`;
+var playerWinnerMessage = `Great job ${username2} , You won !`;
+
+
+
+
+
// ---------------Game code starts here ---------------//
@@ -23,6 +38,8 @@ var playerWinnerMessage = "Write the message here";
var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);
+var roundFinished = false;
+var cardSelected = false;
// we will declare the functions for you and you will complete those
updateScores();
@@ -33,7 +50,14 @@ 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++) {
+ var card = allCardElements[i];
+ if (card.classList.contains("player-card")) {
+ card.addEventListener("click", function(e) {
+ cardClicked(this);
+ });
+ }
+ }
// An example of a function that controls what would happen when a card is clicked
@@ -49,11 +73,11 @@ function cardClicked(cardEl) {
// Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power
setTimeout(function(){
revealHackerPower();
- },500)
+ }, 500);
setTimeout(function(){
revealPlayerPower();
- },800)
+ }, 800);
setTimeout(function(){
compareCards();
@@ -62,35 +86,110 @@ function cardClicked(cardEl) {
// Now write a function that shows the power level on the player card
function revealPlayerPower(){
-
+ var playerCard = document.querySelector(".played-card");
+ playerCard.classList.add("reveal-power");
}
// Write a function that shows the power level on the hacker card
function revealHackerPower(){
+ var hackerCard = document.querySelector(".hacker-card");
+ hackerCard.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 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) {
+
+ 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) {
+
+ 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");
+
}
//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").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");
+ }
+ document.querySelector("button.next-turn").setAttribute("disable")
}
// 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(".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();
}
// 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
@@ -99,6 +198,7 @@ function updateScores(){
// Here these update life totals for each player
document.querySelector(".player-stats .life-total").innerHTML = playerLife;
+ document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife;
// We've added the code to update the player lifebar
var playerPercent = playerLife / playerStartLife * 100;
@@ -108,17 +208,107 @@ function updateScores(){
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";
// Now you write the code to update the hacker lifebar
+ var hackerPercent = (hackerLife / hackerStartLife) * 100;
+ if (hackerPercent < 0) {
+ hackerPercent = 0;
+ }
+ document.querySelector(".hacker-stats .life-left").style.height =
+ hackerPercent + "%";
}
+function shuffleArray(s) {
+ let j, x, i;
+ for (i = s.length; i; i--) {
+ j = Math.floor(Math.random() * i);
+ x = s[i - 1];
+ s[i - 1] = s[j];
+ s[j] = x;
+ }
+ return s;
+}
// Write a function that Plays one turn of the game
function playTurn() {
+ roundFinished = true;
+ cardSelected = false;
+
+ document.querySelector(".game-board").classList.remove("card-selected");
+
+ // Remove "ouch" 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);
}
// Finally write the function that reveals the cards. Use
function revealCards(){
+
+ var j = 0;
+ var cardIndexes = shuffleArray([0, 1, 2]);
+
+ // Get scenario cards
+ console.log("scenarios.length == " + scenarios.length);
+
+ var randomScenarioIndex = Math.floor(Math.random() * scenarios.length);
+ var scenario = scenarios[randomScenarioIndex];
+ console.log(scenario.hackerCard.description);
+
+ scenarios.splice(randomScenarioIndex, 1);
+
+ console.log("scenarios.length after splice = " + scenarios.length);
+
+ 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++;
+ }
+
+ // Revealing 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);
+ }
+
+ // Displaying the hacker card
+ hackerCardEl.querySelector(".text").innerHTML = hackerCard.description;
+ hackerCardEl.querySelector(".power").innerHTML = hackerCard.power;
+
}
\ No newline at end of file
diff --git a/scenario.js b/scenario.js
index f926d60..3a150b0 100644
--- a/scenario.js
+++ b/scenario.js
@@ -48,4 +48,68 @@ var scenarios = [
}
]
},
+ {
+ hackerCard : {
+ description : "I sent a fake email to you for claiming your prize money.",
+ power: 3,
+ },
+ playerCards : [
+ {
+ description : "I opened it to claim the prize.",
+ power:1
+ },
+ {
+ description: "I saw the mail but didn't click on the link.",
+ power: 4,
+ },
+ {
+ description :" I am well aware of these frauds. So I never entertain such emails.",
+ power:5
+ },
+
+ ]
+ },
+ {
+ hackerCard : {
+ description : "I sent a message to you for downloading premium version of an app.",
+ power : 3,
+
+ },
+ playerCards : [
+ {
+ description : "I opened it but didn't download as I don't use that app.",
+ power : 2,
+ },
+ {
+ description : "I am aware of phishing. So I don't click on such links.",
+ power:5,
+ },
+ {
+ description : "I opened it as I wanted the premium version since a long time.",
+ power : 1,
+ },
+ ]
+},
+{
+ hackerCard : {
+ description : "I sent a you a malware disguised as an audio file on whatsapp .",
+ power:3,
+ },
+ playerCards : [
+ {
+ description : "I opened the file.",
+ power:1,
+ },
+ {
+ description : "I blocked and reported the contact and did not open the audio file.",
+ power: 5,
+ },
+ {
+ description : "I did not open the audio file and ignored the message.",
+ power : 3,
+ }
+
+ ]
+
+}
];
\ No newline at end of file