- HACKER CARDS
+ HACKER CRDS
Choose the card to stop hackers' attack
diff --git a/main.js b/main.js
index f242959..a0060db 100644
--- a/main.js
+++ b/main.js
@@ -8,19 +8,19 @@
// 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.
var playerLife = 5;
var hackerLife = 5;
-
+var cardSelected=false;
+var count=0;
+var c=2;
// Message to be displayed when the game is over
-var hackerWinnerMessage = "Write the message here";
-var playerWinnerMessage = "Write the message here";
+var hackerWinnerMessage = "You have been defeated.";
+var playerWinnerMessage = "Smart!Hacker has been arrested.";
// ---------------Game code starts here ---------------//
// declare a few handy variables like we've done :p
-
var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);
@@ -30,20 +30,27 @@ 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
+var allCardElementsArr = Array.from(document.querySelectorAll(".card"));
+var hackerCard = document.querySelector(".hacker-card");
+var playerCardsArr = Array.from(document.querySelectorAll(".player-card"));
+playerCardsArr.forEach((el) => {
+ el.addEventListener("click", () => {
+ console.log("check my card is clicked");
+ cardClicked(el);
+ });
+});
// An example of a function that controls what would happen when a card is clicked
-
-function cardClicked(cardEl) {
-
+function cardClicked(cardEl)
+ {
+ console.log("hji5");
if(cardSelected) { return; }
cardSelected = true;
- cardEl.classList.add("played-card");
+ count++;
+ 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
@@ -62,63 +69,191 @@ 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");
+ console.log("player power revealing");
}
// 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");
+ console.log("hacker power revealing");
}
// 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()
+{
+ console.log("comparing the card");
+ var playerCard = document.querySelector(".played-card");
+ var playerPower=parseInt(playerCard.lastElementChild.innerText);
+ var hackerPower=parseInt(hackerCard.lastElementChild.innerText);
+ if(playerPower>hackerPower)
+ {
+ c=0;
+ hackerLife=hackerLife-(playerPower-hackerPower);
+ hackerCard.classList.add("worse-card");
+ playerCard.classList.add("better-card");
+ console.log( "hackerLife is:");
+ console.log( hackerLife);
+ }
+ else
+ {
+ c=1;
+ playerLife=playerLife-(hackerPower-playerPower);
+ hackerCard.classList.add("better-card");
+ playerCard.classList.add("worse-card");
+ console.log( "plakerLife is:");
+ console.log( playerLife);
+ }
+ updateScores();
+ gameOver();
+ // setTimeout(function(){
+ // restartGame();
+ // },2000)
+ // playTurn();
+ console.log("scores has been updated");
}
//Use conditional statements and complete the function that shows the winner message
-function gameOver(winner) {
-
+function gameOver()
+{
+ console.log("gameover initial");
+ if(playerLife <= 0)
+ {
+ document.querySelector(".winner-section").style.display = "block";
+ document.querySelector(".next-turn").style.display = "none";
+ document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
+ console.log("gameover");
+ restartGame();
+ }
+ else if(hackerLife <= 0)
+ {
+ document.querySelector(".winner-section").style.display = "block";
+ document.querySelector(".next-turn").style.display = "none";
+ document.querySelector(".winner-message").innerHTML = playerWinnerMessage;
+ console.log("gameover");
+ restartGame();
+ }
}
-
// Write a function that starts the game
-function startGame() {
-
-}
-
-
-// Now write a function that starts the game over from scratch
-function restartGame(){
-
+function startGame()
+{
+ console.log("start the game");
+ document.querySelector(".game-board").classList.remove("before-game");
+ document.querySelector(".game-board").classList.add("during-game");
+ playTurn();
}
// 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;
+ 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) {
+ if (playerPercent < 0)
+ {
playerPercent = 0;
}
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";
// Now you write the code to update the hacker lifebar
+ // done the task
+ var hackerPercent = hackerLife / hackerStartLife * 100;
+ if (hackerPercent < 0)
+ {
+ hackerPercent = 0;
+ }
+ document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
+}
+function restartGame()
+{
+ playerLife = 5;
+ hackerLife = 5;
+ cardSelected=false;
+ count=0;
+ c=0;
+console.log("NEW GAME");
}
+function playTurn()
+{
+ console.log("count is :");
+ console.log(count);
+ cardSelected = false;
+ var playerCard = document.querySelector(".played-card");
+ var hackerCard = document.querySelector(".hacker-card");
+ if(c==0)
+ {
+ hackerCard.classList.remove("worse-card");
+ playerCard.classList.remove("better-card");
+ console.log("removed tags1");
-// Write a function that Plays one turn of the game
-function playTurn() {
+ playerCard.classList.remove("reveal-power");
+ hackerCard.classList.remove("reveal-power");
-}
+ var playerCard = document.querySelector(".played-card");
+ playerCard.classList.remove("played-card");
-// Finally write the function that reveals the cards. Use
-function revealCards(){
+ document.querySelector(".game-board").classList.remove("card-selected");
+ hackerCard.classList.remove("showCard");
+ playerCardsArr.forEach((el) => {
+ el.classList.remove("showCard");});
+ }
+ else if(c==1)
+ {
+ hackerCard.classList.remove("better-card");
+ playerCard.classList.remove("worse-card");
+ console.log( "removed tags2");
+
+ playerCard.classList.remove("reveal-power");
+ hackerCard.classList.remove("reveal-power");
+
+ var playerCard = document.querySelector(".played-card");
+ playerCard.classList.remove("played-card");
+
+ document.querySelector(".game-board").classList.remove("card-selected");
+ hackerCard.classList.remove("showCard");
+
+ playerCardsArr.forEach((el) => {
+ el.classList.remove("showCard");});
+ }
+
+ setTimeout(function(){
+ prrer();
+ },1000)
+ function prrer(){
+ playerCardsArr.forEach((el) => {
+ el.classList.add("showCard");});
+ console.log("showing 2nd one");
+ }
+
+ setTimeout(function(){
+ her();
+ },400)
+ function her(){
+ hackerCard.classList.add("showCard");
+ console.log("showing 2nd one");
+ }
+
+ hackerCard.firstElementChild.innerText = scenarios[count].hackerCard.description;
+ hackerCard.lastElementChild.innerText = scenarios[count].hackerCard.power;
+
+ playerCardsArr[0].firstElementChild.innerText = scenarios[count].playerCards[0].description;
+ playerCardsArr[1].firstElementChild.innerText = scenarios[count].playerCards[1].description;
+ playerCardsArr[2].firstElementChild.innerText = scenarios[count].playerCards[2].description;
+
+ playerCardsArr[0].lastElementChild.innerText = scenarios[count].playerCards[0].power;
+ playerCardsArr[1].lastElementChild.innerText = scenarios[count].playerCards[1].power;
+ playerCardsArr[2].lastElementChild.innerText = scenarios[count].playerCards[2].power;
}
\ No newline at end of file
diff --git a/scenario.js b/scenario.js
index f926d60..61e86a4 100644
--- a/scenario.js
+++ b/scenario.js
@@ -48,4 +48,128 @@ var scenarios = [
}
]
},
+ {
+ hackerCard : {
+ description : "Hello hello ,your bank account will be closed if you dont tell your OTP!!! ",
+ power : 3,
+ },
+ playerCards : [
+ {
+ description : "I will not tell OTP to strangers.",
+ power : 5,
+ },
+ {
+ description : "Wait a little,You are from which bank?",
+ power : 4,
+ },
+ {
+ description : "Yes my OTP is 620936.",
+ power : 1,
+ }
+ ]
+ },
+ { // add the text you'd want should appear on the hacker's card
+ hackerCard : {
+ description : "Hey,I am leaking your facebook photo",
+ 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 : " Please dont public it.",
+ power : 1,
+ },
+ {
+ description : "I am deactivating my account.",
+ power : 3,
+ },
+ {
+ description : "Haha!My account is private",
+ power : 5,
+ }
+ ]
+ },
+
+ {
+ hackerCard : {
+ description : "I sent a fraud link in message.",
+ power : 4,
+ },
+ playerCards : [
+ {
+ description : "I opened the link but only checked it.",
+ power : 3,
+ },
+ {
+ description : "I ignored the message as we should not click random link.",
+ power : 5,
+ },
+ {
+ description : "I filled the form in link.",
+ power : 1,
+ }
+ ]
+ },
+ { // 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,
+ },
+ // 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 : "8th.",
+ power : 3,
+ },
+ playerCards : [
+ {
+ description : "I checked .",
+ power : 5,
+ },
+ {
+ description : "I give .",
+ power : 4,
+ },
+ {
+ description : "I sent ",
+ power : 1,
+ }
+ ]
+ },
+ {
+ hackerCard : {
+ description : "9th.",
+ power : 3,
+ },
+ playerCards : [
+ {
+ description : " bank.",
+ power : 5,
+ },
+ {
+ description : "email.",
+ power : 4,
+ },
+ {
+ description : " account.",
+ power : 1,
+ }
+ ]
+ },
];
\ No newline at end of file
diff --git a/style.css b/style.css
index 9ceaaee..4c6e0fd 100644
--- a/style.css
+++ b/style.css
@@ -183,7 +183,8 @@ button:active {
animation: winnerAppear .4s ease-out;
}
-.winner-section button {
+.winner-section button
+{
margin-left: 15px;
}
@@ -409,7 +410,6 @@ button[disabled=true] {
background: none;
}
-
@keyframes showPower {
0% {
background: none;