-
-
You got hacked!
-
+
+
+ You got hacked!
+
+
-
-
-
+
+
\ No newline at end of file
diff --git a/main.js b/main.js
index f242959..7d0f868 100644
--- a/main.js
+++ b/main.js
@@ -1,124 +1,563 @@
-// HELLO FELLOW CODERS! WE WELCOME YOU TO THE WORLD OF JAVASCRIPT
+// // HELLO FELLOW CODERS! WE WELCOME YOU TO THE WORLD OF JAVASCRIPT
-//----- We've curated this assignment for someone staring out in exploring the beauty of JavaScript and would urge you to go through the resources shared with you before you start with this. ----- //
+// //----- We've curated this assignment for someone staring out in exploring the beauty of JavaScript and would urge you to go through the resources shared with you before you start with this. ----- //
-//Go through the CSS file as well to get a hold of all the attributes we've added. You're free to add some of your own and maybe delete some of ours xD
+// //Go through the CSS file as well to get a hold of all the attributes we've added. You're free to add some of your own and maybe delete some of ours xD
-//The point is, we want you to have fun and use all the concepts while doing this task. In case of any doubts, feel free to reach out to us!
+// //The point is, we want you to have fun and use all the concepts while doing this task. In case of any doubts, feel free to reach out to us!
-// Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js
+// // Your main work would be here, in main.js and would advice you to also pay a visit to the scenario.js
-// Life of the player and the hacker.
+// // Life of the player and the hacker.
+// var playerLife = 5;
+// var hackerLife = 5;
+
+// // Message to be displayed when the game is over
+// var hackerWinnerMessage = "Hacker defeated you!";
+// var playerWinnerMessage = "You defeated the hacker!";
+
+// // ---------------Game code starts here ---------------//
+
+// // declare a few handy variables like we've done :p
+
+// var playerStartLife = parseInt(playerLife);
+// var hackerStartLife = parseInt(hackerLife);
+
+// // we will declare the functions for you and you will complete those
+// updateScores();
+
+// // 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
+// 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
+
+// function cardClicked(cardEl) {
+
+// if (cardSelected) { return; }
+// cardSelected = true;
+
+// 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() {
+// revealHackerPower();
+// }, 500)
+
+// setTimeout(function() {
+// revealPlayerPower();
+// }, 800)
+
+// setTimeout(function() {
+// compareCards();
+// }, 1400);
+// }
+
+// // 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) {
+// // 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");
+// }
+// //Use conditional statements and complete the function that shows the winner message
+// // Shows the winner message
+
+
+// //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");
+// }
+// }
+
+
+// // 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
+// // use innerHTML and a lot of other cool things to do this.
+// 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;
+// if (playerPercent < 0) {
+// playerPercent = 0;
+// }
+// document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";
+
+// // Now you write the code to update the hacker lifebar
+
+// }
+
+// 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;
+// }
+
+
+// // 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" 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);
+// }
+
+// // 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++;
+// }
+
+// // 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;
+// }
+// }// Set starting life totals here
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";
+// Message when the game is over
+var hackerWinnerMessage = "Game over: You got hacked!";
+var playerWinnerMessage = "You defeated the hacker!";
- // ---------------Game code starts here ---------------//
-
-// declare a few handy variables like we've done :p
+// Game code starts here
var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);
-// we will declare the functions for you and you will complete those
+var roundFinished = false;
+var cardSelected = false;
+
updateScores();
-// 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
+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
+// When a card is clicked
function cardClicked(cardEl) {
- if(cardSelected) { return; }
- cardSelected = true;
+ if (cardSelected) { return; }
+ cardSelected = true;
- cardEl.classList.add("played-card");
+ cardEl.classList.add("played-card");
- document.querySelector(".game-board").classList.add("card-selected");
+ 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(){
- revealHackerPower();
- },500)
+ // Wait 500ms to reveal the hacker power
+ setTimeout(function() {
+ revealHackerPower();
+ }, 500)
- setTimeout(function(){
- revealPlayerPower();
- },800)
-
- setTimeout(function(){
- compareCards();
- }, 1400);
-}
+ // Wait 750ms to reveal the player power
+ setTimeout(function() {
+ revealPlayerPower();
+ }, 800)
-// Now write a function that shows the power level on the player card
-function revealPlayerPower(){
-
+ // Wait 1250ms to compare the card scoers
+ setTimeout(function() {
+ compareCards();
+ }, 1400);
}
-// Write a function that shows the power level on the hacker card
-function revealHackerPower(){
-
+// Shows the power level on the player card
+function revealPlayerPower() {
+ var playerCard = document.querySelector(".played-card");
+ playerCard.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(){
+// 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");
}
-//Use conditional statements and complete the function that shows the winner message
+// 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");
+ }
}
-// Write a function that starts the game
+// 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(){
+// 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;
-// 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(){
+ document.querySelector("button").removeAttribute("disabled");
- // Here these update life totals for each player
- document.querySelector(".player-stats .life-total").innerHTML = playerLife;
+ for (var i = 0; i < cards.length; i++) {
+ cards[i].style.display = "none";
+ }
- // We've added the code to update the player lifebar
- var playerPercent = playerLife / playerStartLife * 100;
- if (playerPercent < 0) {
- playerPercent = 0;
- }
- document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";
+ playerLife = playerStartLife;
+ hackerLife = hackerStartLife;
- // Now you write the code to update the hacker lifebar
+ 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;
+}
-// Write a function that Plays one turn of the game
+
+// 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);
}
-// Finally write the function that reveals the cards. Use
-function revealCards(){
+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++;
+ }
+
+ // 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;
}
\ No newline at end of file
diff --git a/package.json b/package.json
index 88aae32..5aedf53 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,20 @@
-{
- "name": "ployglot-js",
- "version": "0.0.0",
- "scripts": {
- "dev": "vite",
- "build": "vite build",
- "preview": "vite preview",
- "test": "vitest",
- "coverage": "vitest --coverage",
- "test:ui": "vitest --ui",
- "test:run": "vitest run"
- },
- "devDependencies": {
- "@vitest/ui": "latest",
- "c8": "^7.11.0",
- "happy-dom": "^2.28.0",
- "vite": "^2.7.2",
- "vitest": "^0.2.0"
- }
-}
\ No newline at end of file
+ {
+ "name": "ployglot-js",
+ "version": "0.0.0",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test": "vitest",
+ "coverage": "vitest --coverage",
+ "test:ui": "vitest --ui",
+ "test:run": "vitest run"
+ },
+ "devDependencies": {
+ "@vitest/ui": "latest",
+ "c8": "^7.11.0",
+ "happy-dom": "^2.28.0",
+ "vite": "^2.7.2",
+ "vitest": "^0.2.0"
+ }
+ }
\ No newline at end of file
diff --git a/scenario.js b/scenario.js
index f926d60..5a6271a 100644
--- a/scenario.js
+++ b/scenario.js
@@ -6,46 +6,100 @@
// How 'power' works : write a power for the hacker's card and while you write powers for the player's cards, keep in mind that the power of the correct counters should be greater than the hacker's card's power.
-var scenarios = [
- { // add the text you'd want should appear on the hacker's card
- hackerCard : {
- description : "I set up a fake Wi-Fi station to steal people’s email and track them online.",
- power : 4,
+var scenarios = [{ // add the text you'd want should appear on the hacker's card
+ hackerCard: {
+ description: "I sent you a link in mail from unknown website.",
+ power: 3,
+ },
+ // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+ playerCards: [{
+ description: "I never click unknown links.",
+ power: 5,
+ },
+ {
+ description: "I am curious. So, I will click the link.",
+ power: 1,
+ },
+ {
+ description: "I will try to first verfiy the link from people I know.",
+ power: 3,
+ }
+ ]
},
- // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
- playerCards : [
- {
- description : "I never use public wifi networks.",
- power : 5,
- },
- {
- description : "I browse the web, but I never do any personal business on a public wifi network.",
- power : 3,
- },
- {
- description : "I connect to any wifi network I can use in public.",
- power : 1,
- }
- ]
- },
- {
- hackerCard : {
- description : "I sent a fake email from your bank asking for your account details.",
- power : 3,
+ {
+ hackerCard: {
+ description: "I set up a fake Wi-Fi station to steal people’s email and track them online.",
+ power: 4,
+ },
+ // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+ playerCards: [{
+ description: "I never use public wifi networks.",
+ power: 5,
+ },
+ {
+ description: "I browse the web, but I never do any personal business on a public wifi network.",
+ power: 3,
+ },
+ {
+ description: "I connect to any wifi network I can use in public.",
+ power: 1,
+ }
+ ]
},
- playerCards : [
- {
- description : "I checked the email address - the message didn’t come from my bank.",
- power : 5,
- },
- {
- description : "I never give out personal information in response to an email.",
- power : 4,
- },
- {
- description : "I sent the details you asked for so you could check on my account.",
- power : 1,
- }
- ]
- },
+ {
+ hackerCard: {
+ description: "I sent a fake email from your bank asking for your account details.",
+ power: 3,
+ },
+ playerCards: [{
+ description: "I checked the email address - the message didn’t come from my bank.",
+ power: 5,
+ },
+ {
+ description: "I never give out personal information in response to an email.",
+ power: 4,
+ },
+ {
+ description: "I sent the details you asked for so you could check on my account.",
+ power: 1,
+ }
+ ]
+ }, { // add the text you'd want should appear on the hacker's card
+ hackerCard: {
+ description: "I asked you to share your OTP with me.",
+ power: 3,
+ },
+ // add 3 card descriptions you'd want should appear on the player's card. Keeping in mind that at least ONE of them should be an apt counter!
+ playerCards: [{
+ description: "I never share my OTP.",
+ power: 5,
+ },
+ {
+ description: "I share my OTP to only the people whom I know.",
+ power: 3,
+ },
+ {
+ description: "I will share my OTP with you.",
+ power: 1,
+ }
+ ]
+ }, {
+ hackerCard: {
+ description: "I asked you for your bank details.",
+ power: 3,
+ },
+ playerCards: [{
+ description: "I never share my bank details with anyone.",
+ power: 5,
+ },
+ {
+ description: "I will contact my bank to confirm about it.",
+ power: 4,
+ },
+ {
+ description: "I will share my bank details with you.",
+ power: 1,
+ }
+ ]
+ }
];
\ No newline at end of file
diff --git a/style.css b/style.css
index 9ceaaee..be2f8e9 100644
--- a/style.css
+++ b/style.css
@@ -1,369 +1,392 @@
/* Hello there! We welcome you to the file responsible to beautify your task. Go through the elements once by searching for them and please don't get overwhelmed by these hundreds of lines of code because once you start knowing that they do, they're beautiful (here, quite literally xD)*/
#app {
- font-family: Avenir, Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-align: center;
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
}
-body{
- background-repeat: repeat;
- color: white;
-
+body {
+ background-repeat: repeat;
+ color: white;
}
.game-board {
- height: 100%;
- width: 100%;
- position: absolute;
- height: 100vh;
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ height: 100vh;
}
.hacker-area h1 {
- padding: 12px 10px 0 10px;
- margin: 0;
- font-size: 16px;
- font-weight: 400;
- color: rgba(255,255,255,.6);
- font-style: italic;
- position: absolute;
- top: 0;
+ padding: 12px 10px 0 10px;
+ margin: 0;
+ font-size: 25px;
+ font-weight: 400;
+ color: #003cff;
+ font-style: italic;
+ position: absolute;
+ top: 0;
}
h1 strong {
- color: white;
- font-style: normal;
+ color: rgb(255, 11, 11);
+ font-family: 'Times New Roman', Times, serif;
+ font-size: 50px;
}
.hacker-area,
.player-area {
- position: relative;
- display: flex;
- justify-content: center;
- padding: 30px 10px 30px 110px;
- min-height: 235px;
- background-repeat: repeat;
- background-size: 200px;
- height: 50vh;
- box-sizing: border-box;
+ position: relative;
+ display: flex;
+ justify-content: center;
+ padding: 30px 10px 30px 110px;
+ min-height: 235px;
+ background-repeat: repeat;
+ background-size: 200px;
+ height: 50vh;
+ box-sizing: border-box;
}
.hacker-area {
- background-position: bottom;
- align-items: flex-end;
- background-color: #e65b74;
+ background-position: bottom;
+ align-items: flex-end;
+ background-color: #9df77a;
}
.player-area {
- background-position: top;
- align-items: top;
- background-color: #2563eb;
+ background-position: top;
+ align-items: top;
+ background-color: #0efdad;
}
.player-area .card {
- cursor: pointer;
+ cursor: pointer;
}
.life-bar {
- background: rgba(255,255,255,.15);
- width: 10px;
- height: 90px;
- position: relative;
+ background: rgba(255, 255, 255, .15);
+ width: 10px;
+ height: 90px;
+ position: relative;
}
.life-left {
- position: absolute;
- left: 0;
- bottom: 0;
- background: white;
- width: 100%;
- height: 50%;
- transition: height .25s ease-out;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ background: white;
+ width: 100%;
+ height: 50%;
+ transition: height .25s ease-out;
}
.stats {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: 20px;
- position: absolute;
- left: 0;
- top: 0;
- bottom: 0;
- min-width: 90px;
- padding: 0 5px 0 5px;
- border-radius: 4px;
- background: rgba(0,0,0,.3);
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: 20px;
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ min-width: 90px;
+ padding: 0 5px 0 5px;
+ border-radius: 4px;
+ background: rgba(0, 0, 0, .3);
}
.stats .thumbnail {
- font-size: 40px;
- line-height: 40px;
- margin: 0 0 5px 0;
- text-shadow: 5px 5px 0px rgba(0,0,0,.2);
+ font-size: 40px;
+ line-height: 40px;
+ margin: 0 0 5px 0;
+ text-shadow: 5px 5px 0px rgba(0, 0, 0, .2);
}
.stats .thumbnail.ouch {
- animation: ouch .15s linear 3;
+ animation: ouch .15s linear 3;
}
.stats .name {
- font-size: 14px;
- font-weight: 700;
- line-height: 20px;
+ font-size: 14px;
+ font-weight: 700;
+ line-height: 20px;
}
.life-total {
- font-size: 20px;
- font-weight: 700;
- margin: 8px 0;
+ font-size: 20px;
+ font-weight: 700;
+ margin: 8px 0;
}
@keyframes ouch {
- 0% {
- transform: translateX(0);
- }
- 25% {
- transform: translateX(-10px);
- }
- 75% {
- transform: translateX(10px);
- }
- 100% {
- transform: translateX(0);
- }
+ 0% {
+ transform: translateX(0);
+ }
+ 25% {
+ transform: translateX(-10px);
+ }
+ 75% {
+ transform: translateX(10px);
+ }
+ 100% {
+ transform: translateX(0);
+ }
}
.game-over button {
- display: none;
+ display: none;
}
button.next-turn {
- position: fixed;
- bottom: 20px;
- transition: all .15s ease-out;
- background: black;
- display: none;
+ position: fixed;
+ bottom: 20px;
+ transition: all .15s ease-out;
+ background: black;
+ display: none;
+ box-align: left;
}
.during-game .next-turn {
- display: block;
+ display: block;
}
button.start-game {
- position: absolute;
- background: black;
- display: none;
- top: -20px;
+ position: absolute;
+ background: black;
+ display: none;
+ top: -20px;
}
.before-game .start-game {
- display: block;
+ display: block;
}
button:hover {
- transform: scale(1.03);
+ transform: scale(1.03);
}
button:active {
- transform: scale(.97);
+ transform: scale(.97);
}
.winner-section {
- display: none;
- position: fixed;
- padding: 15px 0;
- left: 0;
- right: 0;
- bottom: 0;
- align-items: center;
- justify-content: center;
- animation: winnerAppear .4s ease-out;
+ display: none;
+ position: fixed;
+ padding: 15px 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ align-items: center;
+ justify-content: center;
+ animation: winnerAppear .4s ease-out;
}
.winner-section button {
- margin-left: 15px;
+ margin-left: 300px;
+ color: rgb(238, 87, 87);
+ border-color: rgb(225, 159, 165);
+ border-radius: 25px;
+ font-weight: 1000;
+ font-size: 30px;
}
.winner-message {
- color: white;
- font-size: 22px;
- font-weight: 700;
- position: relative;
- top: 1px;
+ color: rgb(245, 125, 13);
+ font-size: 30px;
+ font-weight: 700;
+ position: left;
+ top: 1px;
}
@keyframes winnerAppear {
- 0% {
- transform: translateY(150px);
- }
- 60% {
- transform: translateY(-10px);
- }
- 100% {
- transform: translateY(0);
- }
+ 0% {
+ transform: translateY(150px);
+ }
+ 60% {
+ transform: translateY(-10px);
+ }
+ 100% {
+ transform: translateY(0);
+ }
}
button {
- font-size: 15px;
- line-height: 15px;
- padding: 8px 22px 9px 22px;
- box-sizing: border-box;
- font-weight: 700;
- border: solid 3px white;
- color: white;
- background: transparent;
- border-radius: 30px;
- transition: all ease-out .2s;
- cursor: pointer;
- outline: none;
- animation: buttonPulse .2s infinite ease-in-out;
+ font-size: 15px;
+ line-height: 15px;
+ padding: 8px 22px 9px 22px;
+ box-sizing: border-box;
+ font-weight: 700;
+ border: solid 3px white;
+ color: white;
+ background: transparent;
+ border-radius: 30px;
+ transition: all ease-out .2s;
+ cursor: pointer;
+ outline: none;
+ animation: buttonPulse .2s infinite ease-in-out;
}
@keyframes buttonPulse {
- 50% {
- transform: scale(1.02);
- }
+ 50% {
+ transform: scale(1.02);
+ }
}
button[disabled=true] {
- opacity: 0;
- transform: scale(.95);
- cursor: default;
+ opacity: 0;
+ transform: scale(.95);
+ cursor: default;
}
.card {
- opacity: 0;
- margin: 0 10px;
- width: 150px;
- height: 200px;
- padding: 10px 15px;
- color: black;
- font-size: 14px;
- line-height: 18px;
- font-weight: bold;
- position: relative;
- box-sizing: border-box;
- text-align: left;
- transition: all .15s ease-out;
- box-shadow: 0px 5px 5px rgba(0,0,0,.3);
- overflow: hidden;
+ opacity: 0;
+ margin: 0 10px;
+ width: 150px;
+ height: 200px;
+ padding: 10px 15px;
+ color: black;
+ font-size: 14px;
+ line-height: 18px;
+ font-weight: bold;
+ position: relative;
+ box-sizing: border-box;
+ text-align: left;
+ transition: all .15s ease-out;
+ box-shadow: 0px 5px 5px rgba(0, 0, 0, .3);
+ overflow: hidden;
}
.card:after {
- content: "";
- position: absolute;
- top: 0;
- left: -20%;
- width: 140%;
- height: 0%;
- background: white;
- animation: sheen infinite .5s ease-in-out;
- display: none;
- transform: rotate(-7deg);
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -20%;
+ width: 140%;
+ height: 0%;
+ background: white;
+ animation: sheen infinite .5s ease-in-out;
+ display: none;
+ transform: rotate(-7deg);
}
.game-board:not(.card-selected) .player-card:hover:after {
- display: block;
- animation: sheen .35s linear 1;
+ display: block;
+ animation: sheen .35s linear 1;
}
@keyframes sheen {
- 0% {
- top: -10%;
- height: 0%;
- opacity: 0;
- }
- 25% {
- top: -10%;
- height: 20%;
- opacity: .2;
- }
- 50% {
- top: 20%;
- height: 50%;
- opacity: .3;
- }
- 75% {
- top: 110%;
- height: 20%;
- opacity: .2;
- }
- 100% {
- top: 110%;
- height: 0%;
- opacity: 0;
- }
+ 0% {
+ top: -10%;
+ height: 0%;
+ opacity: 0;
+ }
+ 25% {
+ top: -10%;
+ height: 20%;
+ opacity: .2;
+ }
+ 50% {
+ top: 20%;
+ height: 50%;
+ opacity: .3;
+ }
+ 75% {
+ top: 110%;
+ height: 20%;
+ opacity: .2;
+ }
+ 100% {
+ top: 110%;
+ height: 0%;
+ opacity: 0;
+ }
}
.card.prepared {
- display: block;
- opacity: 0;
+ display: block;
+ opacity: 0;
}
.card.showCard {
- opacity: 1;
+ opacity: 1;
}
.hacker-card.showCard {
- animation: hackerShowCard .5s ease-out;
+ animation: hackerShowCard .5s ease-out;
}
+
/* When the hacker card appears */
+
@keyframes hackerShowCard {
- 0% { transform: translateY(-25px); opacity: .5; }
- 60% { transform: translateY(5px); }
- 100% { transform: translateY(0px); }
+ 0% {
+ transform: translateY(-25px);
+ opacity: .5;
+ }
+ 60% {
+ transform: translateY(5px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
}
.player-card.showCard {
- animation: playerShowCard .5s ease-out;
+ animation: playerShowCard .5s ease-out;
}
+
/* When the player card appears */
+
@keyframes playerShowCard {
- 0% { transform: translateY(25px); opacity: .5; }
- 60% { transform: translateY(-5px); }
- 100% { transform: translateY(0px); }
+ 0% {
+ transform: translateY(25px);
+ opacity: .5;
+ }
+ 60% {
+ transform: translateY(-5px);
+ }
+ 100% {
+ transform: translateY(0px);
+ }
}
.card.tie-card {
- transform: translateY(0px) !important;
+ transform: translateY(0px) !important;
}
.card.worse-card {
- background: #888;
+ background: #888;
}
.hacker-card.better-card {
- transform: scale(1.03);
+ transform: scale(1.03);
}
.hacker-card.worse-card {
- transform: scale(.90) translateY(-25px) rotate(3deg);
+ transform: scale(.90) translateY(-25px) rotate(3deg);
}
-
.game-board:not(.card-selected) .player-area .card:not(.played-card):hover {
- transform: translateY(-10px);
- box-shadow: 0px 15px 15px rgba(0,0,0,.3);
+ transform: translateY(-10px);
+ box-shadow: 0px 15px 15px rgba(0, 0, 0, .3);
}
.player-card.played-card {
- transform: translateY(-40px);
- box-shadow: 0px 15px 15px rgba(0,0,0,.3);
+ transform: translateY(-40px);
+ box-shadow: 0px 15px 15px rgba(0, 0, 0, .3);
}
.player-card.worse-card {
- transform: translateY(10px) rotate(3deg) !important;
- box-shadow: 0px 5px 5px rgba(0,0,0,.3);
+ transform: translateY(10px) rotate(3deg) !important;
+ box-shadow: 0px 5px 5px rgba(0, 0, 0, .3);
}
.player-card.better-card {
- transform: scale(1.03) translateY(-60px);
+ transform: scale(1.03) translateY(-60px);
}
@@ -371,61 +394,60 @@ button[disabled=true] {
.card.better-card:before,
.card.worse-card:before {
- font-size: 30px;
- position: absolute;
- bottom: 18px;
- right: 20px;
- color: rgba(0,0,0,.3);
- display: block;
+ font-size: 30px;
+ position: absolute;
+ bottom: 18px;
+ right: 20px;
+ color: rgba(0, 0, 0, .3);
+ display: block;
}
.card.better-card:before {
- content: "\2713";
+ content: "\2713";
}
.card.worse-card:before {
- content: "\2717";
+ content: "\2717";
}
.card .power {
- font-size: 30px;
- position: absolute;
- bottom: 12px;
- line-height: 30px;
- left: 10px;
- width: 30px;
- height: 30px;
- text-align: center;
- border-radius: 50%;
- color: rgba(0,0,0,0);
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
+ font-size: 30px;
+ position: absolute;
+ bottom: 12px;
+ line-height: 30px;
+ left: 10px;
+ width: 30px;
+ height: 30px;
+ text-align: center;
+ border-radius: 50%;
+ color: rgba(0, 0, 0, 0);
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
}
.card.reveal-power .power {
- color: black;
- animation: showPower .2s ease-out;
- background: none;
+ color: black;
+ animation: showPower .2s ease-out;
+ background: none;
}
-
@keyframes showPower {
- 0% {
- background: none;
- transform: scaleX(1);
- color: rgba(0,0,0,0);
- }
- 49% {
- color: rgba(0,0,0,0);
- transform: scaleX(0);
- }
- 51% {
- background: none;
- color: black;
- transform: scaleX(0);
- }
- 100% {
- transform: scaleX(1);
- }
+ 0% {
+ background: none;
+ transform: scaleX(1);
+ color: rgba(0, 0, 0, 0);
+ }
+ 49% {
+ color: rgba(0, 0, 0, 0);
+ transform: scaleX(0);
+ }
+ 51% {
+ background: none;
+ color: black;
+ transform: scaleX(0);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
}
\ No newline at end of file