From b0d1d635831041a39b4374a1f72e58e902da653f Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Fri, 11 Feb 2022 18:47:49 +0530 Subject: [PATCH 01/12] change 1 --- main.js | 243 ++++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 202 insertions(+), 41 deletions(-) diff --git a/main.js b/main.js index f242959..11eadb8 100644 --- a/main.js +++ b/main.js @@ -14,10 +14,10 @@ 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 = "Hacker defeated you!"; +var playerWinnerMessage = "You defeated the hacker!"; - // ---------------Game code starts here ---------------// +// ---------------Game code starts here ---------------// // declare a few handy variables like we've done :p @@ -33,92 +33,253 @@ 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; + 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) - // 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(){ - revealPlayerPower(); - },800) - - setTimeout(function(){ - compareCards(); - }, 1400); + setTimeout(function() { + compareCards(); + }, 1400); } // Now write a function that shows the power level on the player card -function revealPlayerPower(){ - +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(){ - +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(){ - +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(){ +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(){ +function updateScores() { - // Here these update life totals for each player - document.querySelector(".player-stats .life-total").innerHTML = playerLife; + // 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 + "%"; - // 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 + // 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(){ - +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 From 11950e1b8b50331ebef68724ed75b57d3dadcd85 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Fri, 11 Feb 2022 19:01:48 +0530 Subject: [PATCH 02/12] second change --- scenario.js | 116 ++++++++++++++++++++++++++++++++++------------------ 1 file changed, 76 insertions(+), 40 deletions(-) diff --git a/scenario.js b/scenario.js index f926d60..841d29b 100644 --- a/scenario.js +++ b/scenario.js @@ -6,46 +6,82 @@ // 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 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, + } + ] }, - // 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 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, + } + ] }, - 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 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: "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, + } + ] + } ]; \ No newline at end of file From 3598a910dde4632dd1a2ac3b1349707bdce91fc6 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Fri, 11 Feb 2022 19:04:14 +0530 Subject: [PATCH 03/12] third change --- main.js | 350 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 314 insertions(+), 36 deletions(-) diff --git a/main.js b/main.js index 11eadb8..7d0f868 100644 --- a/main.js +++ b/main.js @@ -1,38 +1,310 @@ -// 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 = "Hacker defeated you!"; +// 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")) { @@ -42,8 +314,8 @@ for (var i = 0; i < allCardElements.length; i++) { } } -// 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; } @@ -53,33 +325,33 @@ function cardClicked(cardEl) { 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 + // 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); } -// Now write a function that shows the power level on the player card +// 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 +// 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"); @@ -109,20 +381,21 @@ function compareCards() { 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 +// Shows the winner message function gameOver(winner) { document.querySelector(".game-board").classList.add("game-over"); document.querySelector(".winner-section").style.display = "flex"; @@ -139,7 +412,7 @@ function gameOver(winner) { } -// 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"); @@ -147,7 +420,7 @@ function startGame() { } -// Now write a function that starts the game over from scratch +// Start the game over from scratch function restartGame() { document.querySelector(".game-board").classList.remove("game-over"); document.querySelector(".game-board").classList.remove("during-game"); @@ -171,27 +444,32 @@ function restartGame() { 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. +// Updates the displayed life bar and life totals function updateScores() { - // Here these update life totals for each player + // 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 + + // 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 - + // 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--) { @@ -204,7 +482,7 @@ function shuffleArray(a) { } -// Write a function that Plays one turn of the game +// Plays one turn of the game function playTurn() { roundFinished = true; @@ -229,8 +507,9 @@ function playTurn() { }, 500); } -// Finally write the function that reveals the cards. Use function revealCards() { + + var j = 0; var cardIndexes = shuffleArray([0, 1, 2]); @@ -281,5 +560,4 @@ function revealCards() { // Display the hacker card hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; -} } \ No newline at end of file From 2514010d82f0f79fe17078c6f24b725318f76ccb Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 10:45:41 +0530 Subject: [PATCH 04/12] POLYGLOT --- main.js | 83 +++++++++++++++++++++++++-------------------------------- 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/main.js b/main.js index 7d0f868..f77576b 100644 --- a/main.js +++ b/main.js @@ -283,41 +283,34 @@ // hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; // } // }// Set starting life totals here -var playerLife = 5; -var hackerLife = 5; - +let playerLife = 5; +let hackerLife = 5; // Message when the game is over -var hackerWinnerMessage = "Game over: You got hacked!"; -var playerWinnerMessage = "You defeated the hacker!"; - - +let hackerWinnerMessage = "Game Over: You got hacked!"; +let playerWinnerMessage = "Congratuations : You defeated the hacker!"; // Game code starts here -var playerStartLife = parseInt(playerLife); -var hackerStartLife = parseInt(hackerLife); - -var roundFinished = false; -var cardSelected = false; +let playerStartLife = parseInt(playerLife); +let hackerStartLife = parseInt(hackerLife); +let roundFinished = false; +let cardSelected = false; updateScores(); document.querySelector(".game-board").classList.add("before-game"); -var allCardElements = document.querySelectorAll(".card"); +let allCardElements = document.querySelectorAll(".card"); // Adds click handler to all player card elements -for (var i = 0; i < allCardElements.length; i++) { - var card = allCardElements[i]; +for (let i = 0; i < allCardElements.length; i++) { + let 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; @@ -343,27 +336,27 @@ function cardClicked(cardEl) { // Shows the power level on the player card function revealPlayerPower() { - var playerCard = document.querySelector(".played-card"); + let 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"); + let hackerCard = document.querySelector(".hacker-card"); hackerCard.classList.add("reveal-power"); } function compareCards() { - var playerCard = document.querySelector(".played-card"); - var playerPowerEl = playerCard.querySelector(".power"); + let playerCard = document.querySelector(".played-card"); + let playerPowerEl = playerCard.querySelector(".power"); - var hackerCard = document.querySelector(".hacker-card"); - var hackerPowerEl = hackerCard.querySelector(".power"); + let hackerCard = document.querySelector(".hacker-card"); + let hackerPowerEl = hackerCard.querySelector(".power"); - var playerPower = parseInt(playerPowerEl.innerHTML); - var hackerPower = parseInt(hackerPowerEl.innerHTML); + let playerPower = parseInt(playerPowerEl.innerHTML); + let hackerPower = parseInt(hackerPowerEl.innerHTML); - var powerDifference = playerPower - hackerPower; + let powerDifference = playerPower - hackerPower; if (powerDifference < 0) { // Player Loses @@ -429,11 +422,11 @@ function restartGame() { document.querySelector(".winner-section").style.display = "none"; document.querySelector(".hacker-card").style.display = "none"; - var cards = allCardElements; + let cards = allCardElements; document.querySelector("button").removeAttribute("disabled"); - for (var i = 0; i < cards.length; i++) { + for (let i = 0; i < cards.length; i++) { cards[i].style.display = "none"; } @@ -454,14 +447,14 @@ function updateScores() { document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; // Update the player lifebar - var playerPercent = playerLife / playerStartLife * 100; + let 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 + let hackerPercent = hackerLife / hackerStartLife * 100 if (hackerPercent < 0) { hackerPercent = 0; } @@ -471,7 +464,7 @@ function updateScores() { // Shuffles an array function shuffleArray(a) { - var j, x, i; + let j, x, i; for (i = a.length; i; i--) { j = Math.floor(Math.random() * i); x = a[i - 1]; @@ -497,8 +490,8 @@ function playTurn() { // 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]; + for (let i = 0; i < allCardElements.length; i++) { + let card = allCardElements[i]; card.classList.remove("showCard"); } @@ -510,43 +503,40 @@ function playTurn() { function revealCards() { - var j = 0; - var cardIndexes = shuffleArray([0, 1, 2]); + let j = 0; + let 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]; + let randomScenarioIndex = Math.floor(Math.random() * scenarios.length); + let 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"); + let hackerCard = scenario.hackerCard; + let 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]; + let playerCards = scenario.playerCards; + for (let i = 0; i < allCardElements.length; i++) { + let 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() { @@ -556,7 +546,6 @@ function revealCards() { } }(card, i), parseInt(i + 1) * 200); } - // Display the hacker card hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; From ae056b78a8a21284289aaf3e1b2d5ae6a473f5fc Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 11:52:39 +0530 Subject: [PATCH 05/12] POLYGLOT --- main.js | 53 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 40 insertions(+), 13 deletions(-) diff --git a/main.js b/main.js index f77576b..008c62b 100644 --- a/main.js +++ b/main.js @@ -287,13 +287,30 @@ let playerLife = 5; let hackerLife = 5; // Message when the game is over let hackerWinnerMessage = "Game Over: You got hacked!"; -let playerWinnerMessage = "Congratuations : You defeated the hacker!"; +let playerWinnerMessage = "Congratuations: You defeated the hacker!"; +let NoResultGameMessage = "Oops: No Result of this match"; // Game code starts here let playerStartLife = parseInt(playerLife); let hackerStartLife = parseInt(hackerLife); + let roundFinished = false; let cardSelected = false; +let initial = 0; +let playerName; + +// we will declare the functions for you and you will complete those +GiveName(); + +function GiveName() { + playerName = prompt("Enter Name :") + if ((playerName == "") || (playerName === null)) { + alert("Invalid name entered"); + GiveName() + } else { + document.getElementById("player").innerHTML = playerName; + } +} updateScores(); document.querySelector(".game-board").classList.add("before-game"); @@ -309,7 +326,7 @@ for (let i = 0; i < allCardElements.length; i++) { }); } } -// When a card is clicked +// When a card is clicked following function will occur: function cardClicked(cardEl) { if (cardSelected) { return; } cardSelected = true; @@ -356,15 +373,15 @@ function compareCards() { let playerPower = parseInt(playerPowerEl.innerHTML); let hackerPower = parseInt(hackerPowerEl.innerHTML); - let powerDifference = playerPower - hackerPower; + let power_Difference = playerPower - hackerPower; - if (powerDifference < 0) { + if (power_Difference < 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) { + } else if (power_Difference > 0) { // Player Wins hackerLife = hackerLife - powerDifference; playerCard.classList.add("better-card"); @@ -381,6 +398,9 @@ function compareCards() { gameOver("Hacker"); } else if (hackerLife <= 0) { gameOver("Player") + } else if (initial >= 3) { + gameOver("No-Result"); + initial = 0; } roundFinished = true; @@ -398,9 +418,15 @@ function gameOver(winner) { if (winner == "Hacker") { document.querySelector(".winner-message").innerHTML = hackerWinnerMessage; document.querySelector(".winner-section").classList.add("hacker-color"); - } else { + document.querySelector("button.next-turn").setAttribute("disabled"); + } else if (winner == "Player") { document.querySelector(".winner-message").innerHTML = playerWinnerMessage; document.querySelector(".winner-section").classList.add("player-color"); + document.querySelector("button.next-turn").setAttribute("disabled"); + } else { + document.querySelector(".winner-message").innerHTML = noResultMessage; + document.querySelector(".winner-section").classList.add("hacker-color"); + document.querySelector("button.next-turn").setAttribute("disabled"); } } @@ -463,21 +489,21 @@ function updateScores() { // Shuffles an array -function shuffleArray(a) { +function shuffleArray(s_arr) { let j, x, i; - for (i = a.length; i; i--) { + for (i = s_arr.length; i; i--) { j = Math.floor(Math.random() * i); - x = a[i - 1]; - a[i - 1] = a[j]; - a[j] = x; + x = s_arr[i - 1]; + s_arr[i - 1] = arr[j]; + s_arr[j] = x; } - return a; + return s_arr; } // Plays one turn of the game function playTurn() { - + initial = initial + 1; roundFinished = true; cardSelected = false; @@ -525,6 +551,7 @@ function revealCards() { for (let i = 0; i < allCardElements.length; i++) { let card = allCardElements[i]; + card.classList.remove("worse-card"); card.classList.remove("better-card"); card.classList.remove("played-card"); From 3411b4f3af62ddb45dd261987cd3b340f76f6c25 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:12:30 +0530 Subject: [PATCH 06/12] satyam --- main.js | 80 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 40 insertions(+), 40 deletions(-) diff --git a/main.js b/main.js index 008c62b..af6481e 100644 --- a/main.js +++ b/main.js @@ -2,7 +2,7 @@ // //----- 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 devare 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! @@ -283,21 +283,21 @@ // hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; // } // }// Set starting life totals here -let playerLife = 5; -let hackerLife = 5; +var playerLife = 5; +var hackerLife = 5; // Message when the game is over -let hackerWinnerMessage = "Game Over: You got hacked!"; -let playerWinnerMessage = "Congratuations: You defeated the hacker!"; -let NoResultGameMessage = "Oops: No Result of this match"; +var hackerWinnerMessage = "Game Over: You got hacked!"; +var playerWinnerMessage = "Congratuations: You defeated the hacker!"; +var NoResultGameMessage = "Oops: No Result of this match"; // Game code starts here -let playerStartLife = parseInt(playerLife); -let hackerStartLife = parseInt(hackerLife); +var playerStartLife = parseInt(playerLife); +var hackerStartLife = parseInt(hackerLife); -let roundFinished = false; -let cardSelected = false; +var roundFinished = false; +var cardSelected = false; -let initial = 0; -let playerName; +var initial = 0; +var playerName; // we will declare the functions for you and you will complete those GiveName(); @@ -315,11 +315,11 @@ updateScores(); document.querySelector(".game-board").classList.add("before-game"); -let allCardElements = document.querySelectorAll(".card"); +var allCardElements = document.querySelectorAll(".card"); // Adds click handler to all player card elements -for (let i = 0; i < allCardElements.length; i++) { - let card = allCardElements[i]; +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); @@ -353,27 +353,27 @@ function cardClicked(cardEl) { // Shows the power level on the player card function revealPlayerPower() { - let playerCard = document.querySelector(".played-card"); + var playerCard = document.querySelector(".played-card"); playerCard.classList.add("reveal-power"); } // Shows the power level on the hacker card function revealHackerPower() { - let hackerCard = document.querySelector(".hacker-card"); + var hackerCard = document.querySelector(".hacker-card"); hackerCard.classList.add("reveal-power"); } function compareCards() { - let playerCard = document.querySelector(".played-card"); - let playerPowerEl = playerCard.querySelector(".power"); + var playerCard = document.querySelector(".played-card"); + var playerPowerEl = playerCard.querySelector(".power"); - let hackerCard = document.querySelector(".hacker-card"); - let hackerPowerEl = hackerCard.querySelector(".power"); + var hackerCard = document.querySelector(".hacker-card"); + var hackerPowerEl = hackerCard.querySelector(".power"); - let playerPower = parseInt(playerPowerEl.innerHTML); - let hackerPower = parseInt(hackerPowerEl.innerHTML); + var playerPower = parseInt(playerPowerEl.innerHTML); + var hackerPower = parseInt(hackerPowerEl.innerHTML); - let power_Difference = playerPower - hackerPower; + var power_Difference = playerPower - hackerPower; if (power_Difference < 0) { // Player Loses @@ -448,11 +448,11 @@ function restartGame() { document.querySelector(".winner-section").style.display = "none"; document.querySelector(".hacker-card").style.display = "none"; - let cards = allCardElements; + var cards = allCardElements; document.querySelector("button").removeAttribute("disabled"); - for (let i = 0; i < cards.length; i++) { + for (var i = 0; i < cards.length; i++) { cards[i].style.display = "none"; } @@ -473,14 +473,14 @@ function updateScores() { document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; // Update the player lifebar - let playerPercent = playerLife / playerStartLife * 100; + var playerPercent = playerLife / playerStartLife * 100; if (playerPercent < 0) { playerPercent = 0; } document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Update the hacker lifebar - let hackerPercent = hackerLife / hackerStartLife * 100 + var hackerPercent = hackerLife / hackerStartLife * 100 if (hackerPercent < 0) { hackerPercent = 0; } @@ -490,7 +490,7 @@ function updateScores() { // Shuffles an array function shuffleArray(s_arr) { - let j, x, i; + var j, x, i; for (i = s_arr.length; i; i--) { j = Math.floor(Math.random() * i); x = s_arr[i - 1]; @@ -516,8 +516,8 @@ function playTurn() { // Hides the "next turn" button, will show again when turn is over document.querySelector(".next-turn").setAttribute("disabled", "true"); - for (let i = 0; i < allCardElements.length; i++) { - let card = allCardElements[i]; + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; card.classList.remove("showCard"); } @@ -529,28 +529,28 @@ function playTurn() { function revealCards() { - let j = 0; - let cardIndexes = shuffleArray([0, 1, 2]); + var j = 0; + var cardIndexes = shuffleArray([0, 1, 2]); // Get scenario cards console.log("scenarios.length == " + scenarios.length); - let randomScenarioIndex = Math.floor(Math.random() * scenarios.length); - let scenario = scenarios[randomScenarioIndex]; + 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); - let hackerCard = scenario.hackerCard; - let hackerCardEl = document.querySelector(".hacker-area .card"); + var hackerCard = scenario.hackerCard; + var hackerCardEl = document.querySelector(".hacker-area .card"); // Contents of the player cards - let playerCards = scenario.playerCards; + var playerCards = scenario.playerCards; - for (let i = 0; i < allCardElements.length; i++) { - let card = allCardElements[i]; + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; card.classList.remove("worse-card"); card.classList.remove("better-card"); From 5887f088a5e4e8c261a024cc4082e084e9fb0195 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:16:06 +0530 Subject: [PATCH 07/12] satyam --- main.js | 309 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 155 insertions(+), 154 deletions(-) diff --git a/main.js b/main.js index af6481e..d0f5b42 100644 --- a/main.js +++ b/main.js @@ -288,7 +288,7 @@ var hackerLife = 5; // Message when the game is over var hackerWinnerMessage = "Game Over: You got hacked!"; var playerWinnerMessage = "Congratuations: You defeated the hacker!"; -var NoResultGameMessage = "Oops: No Result of this match"; +//var NoResultGameMessage = "Oops: No Result of this match"; // Game code starts here var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); @@ -296,21 +296,22 @@ var hackerStartLife = parseInt(hackerLife); var roundFinished = false; var cardSelected = false; -var initial = 0; -var playerName; +//var initial = 0; +//var playerName; // we will declare the functions for you and you will complete those -GiveName(); - -function GiveName() { - playerName = prompt("Enter Name :") - if ((playerName == "") || (playerName === null)) { - alert("Invalid name entered"); - GiveName() - } else { - document.getElementById("player").innerHTML = playerName; - } -} +// +//GiveName(); + +// function GiveName() { +// playerName = prompt("Enter Name :") +// if ((playerName == "") || (playerName === null)) { +// alert("Invalid name entered"); +// GiveName() +// } else { +// document.getElementById("player").innerHTML = playerName; +// } +// } updateScores(); document.querySelector(".game-board").classList.add("before-game"); @@ -396,184 +397,184 @@ function compareCards() { if (playerLife <= 0) { gameOver("Hacker"); - } else if (hackerLife <= 0) { + } else { gameOver("Player") - } else if (initial >= 3) { - gameOver("No-Result"); - initial = 0; - } - - roundFinished = true; + // } else if (initial >= 3) { + // gameOver("No-Result"); + // initial = 0; + // } - document.querySelector("button.next-turn").removeAttribute("disabled"); -} + roundFinished = true; -// 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"); - document.querySelector("button.next-turn").setAttribute("disabled"); - } else if (winner == "Player") { - document.querySelector(".winner-message").innerHTML = playerWinnerMessage; - document.querySelector(".winner-section").classList.add("player-color"); - document.querySelector("button.next-turn").setAttribute("disabled"); - } else { - document.querySelector(".winner-message").innerHTML = noResultMessage; - document.querySelector(".winner-section").classList.add("hacker-color"); - document.querySelector("button.next-turn").setAttribute("disabled"); + 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"); + //document.querySelector("button.next-turn").setAttribute("disabled"); + } else { + document.querySelector(".winner-message").innerHTML = playerWinnerMessage; + document.querySelector(".winner-section").classList.add("player-color"); + //document.querySelector("button.next-turn").setAttribute("disabled"); + // } else { + // document.querySelector(".winner-message").innerHTML = noResultMessage; + // document.querySelector(".winner-section").classList.add("hacker-color"); + // //document.querySelector("button.next-turn").setAttribute("disabled"); + // } + } -// Starts the game -function startGame() { - document.querySelector(".game-board").classList.remove("before-game"); - document.querySelector(".game-board").classList.add("during-game"); - playTurn(); -} + // 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"; + // 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"); - var cards = allCardElements; + document.querySelector(".winner-section").style.display = "none"; + document.querySelector(".hacker-card").style.display = "none"; - document.querySelector("button").removeAttribute("disabled"); + var cards = allCardElements; - for (var i = 0; i < cards.length; i++) { - cards[i].style.display = "none"; - } + document.querySelector("button").removeAttribute("disabled"); - playerLife = playerStartLife; - hackerLife = hackerStartLife; + for (var i = 0; i < cards.length; i++) { + cards[i].style.display = "none"; + } - roundFinished = true; - cardSelected = false; + playerLife = playerStartLife; + hackerLife = hackerStartLife; - updateScores(); -} + roundFinished = true; + cardSelected = false; -// Updates the displayed life bar and life totals -function updateScores() { + updateScores(); + } - // Update life totals for each player - document.querySelector(".player-stats .life-total").innerHTML = playerLife; - document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; + // Updates the displayed life bar and life totals + function updateScores() { - // Update the player lifebar - var playerPercent = playerLife / playerStartLife * 100; - if (playerPercent < 0) { - playerPercent = 0; - } - document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; + // Update life totals for each player + document.querySelector(".player-stats .life-total").innerHTML = playerLife; + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; - // Update the hacker lifebar - var hackerPercent = hackerLife / hackerStartLife * 100 - if (hackerPercent < 0) { - hackerPercent = 0; - } - document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%"; -} + // 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(s_arr) { - var j, x, i; - for (i = s_arr.length; i; i--) { - j = Math.floor(Math.random() * i); - x = s_arr[i - 1]; - s_arr[i - 1] = arr[j]; - s_arr[j] = x; - } - return s_arr; -} + // Shuffles an array + function shuffleArray(s_arr) { + var j, x, i; + for (i = s_arr.length; i; i--) { + j = Math.floor(Math.random() * i); + x = s_arr[i - 1]; + s_arr[i - 1] = arr[j]; + s_arr[j] = x; + } + return s_arr; + } -// Plays one turn of the game -function playTurn() { - initial = initial + 1; - roundFinished = true; - cardSelected = false; - document.querySelector(".game-board").classList.remove("card-selected"); + // Plays one turn of the game + function playTurn() { + initial = initial + 1; + roundFinished = true; + cardSelected = false; - // Remove "ouch" class from player and hacker thumbnails - document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); - document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); + document.querySelector(".game-board").classList.remove("card-selected"); - // Hides the "next turn" button, will show again when turn is over - document.querySelector(".next-turn").setAttribute("disabled", "true"); + // Remove "ouch" class from player and hacker thumbnails + document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); + document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); - for (var i = 0; i < allCardElements.length; i++) { - var card = allCardElements[i]; - card.classList.remove("showCard"); - } + // Hides the "next turn" button, will show again when turn is over + document.querySelector(".next-turn").setAttribute("disabled", "true"); - setTimeout(function() { - revealCards(); - }, 500); -} + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + card.classList.remove("showCard"); + } -function revealCards() { + setTimeout(function() { + revealCards(); + }, 500); + } + function revealCards() { - var j = 0; - var cardIndexes = shuffleArray([0, 1, 2]); - // Get scenario cards - console.log("scenarios.length == " + scenarios.length); + var j = 0; + var cardIndexes = shuffleArray([0, 1, 2]); - var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); - var scenario = scenarios[randomScenarioIndex]; - console.log(scenario.hackerCard.description); + // Get scenario cards + console.log("scenarios.length == " + scenarios.length); - scenarios.splice(randomScenarioIndex, 1); + var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); + var scenario = scenarios[randomScenarioIndex]; + console.log(scenario.hackerCard.description); - console.log("scenarios.length after splice == " + scenarios.length); + scenarios.splice(randomScenarioIndex, 1); - var hackerCard = scenario.hackerCard; - var hackerCardEl = document.querySelector(".hacker-area .card"); + console.log("scenarios.length after splice == " + scenarios.length); - // Contents of the player cards - var playerCards = scenario.playerCards; + var hackerCard = scenario.hackerCard; + var hackerCardEl = document.querySelector(".hacker-area .card"); - for (var i = 0; i < allCardElements.length; i++) { - var card = allCardElements[i]; + // Contents of the player cards + var playerCards = scenario.playerCards; - 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() { + 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.style.display = "block"; - card.classList.add("showCard"); + 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); } - }(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 + // Display the hacker card + hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; + hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; + } \ No newline at end of file From 9e884a201e0bb1ad3f0cdb943ac1cc4d91a607f3 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:20:09 +0530 Subject: [PATCH 08/12] third commit --- main.js | 918 ++++++++++++++++++++++++++++++++++++-------------------- 1 file changed, 598 insertions(+), 320 deletions(-) diff --git a/main.js b/main.js index d0f5b42..c753fdb 100644 --- a/main.js +++ b/main.js @@ -1,38 +1,324 @@ -// // 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 devare 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 devare 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. -// var playerLife = 5; -// var hackerLife = 5; +// // // 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); +// // } -// // Message to be displayed when the game is over -// var hackerWinnerMessage = "Hacker defeated you!"; -// var playerWinnerMessage = "You defeated the hacker!"; +// // // Finally write the function that reveals the cards. Use +// // function revealCards() { +// // var j = 0; +// // var cardIndexes = shuffleArray([0, 1, 2]); -// // ---------------Game code starts here ---------------// +// // // Get scenario cards +// // console.log("scenarios.length == " + scenarios.length); -// // declare a few handy variables like we've done :p +// // 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 when the game is over +// var hackerWinnerMessage = "Game Over: You got hacked!"; +// var playerWinnerMessage = "Congratuations: You defeated the hacker!"; +// //var NoResultGameMessage = "Oops: No Result of this match"; +// // 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; + +// //var initial = 0; +// //var playerName; + +// // we will declare the functions for you and you will complete those +// // +// //GiveName(); + +// // function GiveName() { +// // playerName = prompt("Enter Name :") +// // if ((playerName == "") || (playerName === null)) { +// // alert("Invalid name entered"); +// // GiveName() +// // } else { +// // document.getElementById("player").innerHTML = playerName; +// // } +// // } // 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")) { @@ -41,11 +327,8 @@ // }); // } // } - -// // An example of a function that controls what would happen when a card is clicked - +// // When a card is clicked following function will occur: // function cardClicked(cardEl) { - // if (cardSelected) { return; } // cardSelected = true; @@ -53,33 +336,33 @@ // 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 +// // 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); // } -// // Now write a function that shows the power level on the player card +// // 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 +// // 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"); @@ -91,15 +374,15 @@ // var playerPower = parseInt(playerPowerEl.innerHTML); // var hackerPower = parseInt(hackerPowerEl.innerHTML); -// var powerDifference = playerPower - hackerPower; +// var power_Difference = playerPower - hackerPower; -// if (powerDifference < 0) { +// if (power_Difference < 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) { +// } else if (power_Difference > 0) { // // Player Wins // hackerLife = hackerLife - powerDifference; // playerCard.classList.add("better-card"); @@ -109,186 +392,200 @@ // playerCard.classList.add("tie-card"); // hackerCard.classList.add("tie-card"); // } + // updateScores(); + // if (playerLife <= 0) { // gameOver("Hacker"); -// } else if (hackerLife <= 0) { +// } else { // 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 - +// // } else if (initial >= 3) { +// // gameOver("No-Result"); +// // initial = 0; +// // } -// //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"); +// roundFinished = true; -// 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").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"); +// //document.querySelector("button.next-turn").setAttribute("disabled"); +// } else { +// document.querySelector(".winner-message").innerHTML = playerWinnerMessage; +// document.querySelector(".winner-section").classList.add("player-color"); +// //document.querySelector("button.next-turn").setAttribute("disabled"); +// // } else { +// // document.querySelector(".winner-message").innerHTML = noResultMessage; +// // document.querySelector(".winner-section").classList.add("hacker-color"); +// // //document.querySelector("button.next-turn").setAttribute("disabled"); +// // } +// } -// // 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(); -// } +// // 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"; +// // 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"); -// var cards = allCardElements; +// document.querySelector(".winner-section").style.display = "none"; +// document.querySelector(".hacker-card").style.display = "none"; -// document.querySelector("button").removeAttribute("disabled"); +// var cards = allCardElements; -// for (var i = 0; i < cards.length; i++) { -// cards[i].style.display = "none"; -// } +// document.querySelector("button").removeAttribute("disabled"); -// playerLife = playerStartLife; -// hackerLife = hackerStartLife; +// for (var i = 0; i < cards.length; i++) { +// cards[i].style.display = "none"; +// } -// roundFinished = true; -// cardSelected = false; +// playerLife = playerStartLife; +// hackerLife = hackerStartLife; -// updateScores(); +// 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 + "%"; +// // Updates the displayed life bar and life totals +// function updateScores() { -// // Now you write the code to update the hacker lifebar +// // 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 + "%"; -// 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; -// } +// // Update the hacker lifebar +// 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() { +// // Shuffles an array +// function shuffleArray(s_arr) { +// var j, x, i; +// for (i = s_arr.length; i; i--) { +// j = Math.floor(Math.random() * i); +// x = s_arr[i - 1]; +// s_arr[i - 1] = arr[j]; +// s_arr[j] = x; +// } +// return s_arr; +// } -// roundFinished = true; -// cardSelected = false; -// document.querySelector(".game-board").classList.remove("card-selected"); +// // Plays one turn of the game +// function playTurn() { +// initial = initial + 1; +// roundFinished = true; +// cardSelected = false; -// // Remove "ouch" class from player and hacker thumbnails -// document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); -// document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); +// document.querySelector(".game-board").classList.remove("card-selected"); -// // Hides the "next turn" button, will show again when turn is over -// document.querySelector(".next-turn").setAttribute("disabled", "true"); +// // Remove "ouch" class from player and hacker thumbnails +// document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); +// document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); -// for (var i = 0; i < allCardElements.length; i++) { -// var card = allCardElements[i]; -// card.classList.remove("showCard"); -// } +// // Hides the "next turn" button, will show again when turn is over +// document.querySelector(".next-turn").setAttribute("disabled", "true"); -// setTimeout(function() { -// revealCards(); -// }, 500); -// } +// for (var i = 0; i < allCardElements.length; i++) { +// var card = allCardElements[i]; +// card.classList.remove("showCard"); +// } -// // Finally write the function that reveals the cards. Use -// function revealCards() { -// var j = 0; -// var cardIndexes = shuffleArray([0, 1, 2]); +// setTimeout(function() { +// revealCards(); +// }, 500); +// } -// // Get scenario cards -// console.log("scenarios.length == " + scenarios.length); +// function revealCards() { -// var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); -// var scenario = scenarios[randomScenarioIndex]; -// console.log(scenario.hackerCard.description); -// scenarios.splice(randomScenarioIndex, 1); +// var j = 0; +// var cardIndexes = shuffleArray([0, 1, 2]); -// console.log("scenarios.length after splice == " + scenarios.length); +// // Get scenario cards +// console.log("scenarios.length == " + scenarios.length); -// var hackerCard = scenario.hackerCard; -// var hackerCardEl = document.querySelector(".hacker-area .card"); +// var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); +// var scenario = scenarios[randomScenarioIndex]; +// console.log(scenario.hackerCard.description); -// // Contents of the player cards -// var playerCards = scenario.playerCards; +// scenarios.splice(randomScenarioIndex, 1); -// for (var i = 0; i < allCardElements.length; i++) { -// var card = allCardElements[i]; +// console.log("scenarios.length after splice == " + scenarios.length); -// 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"); +// var hackerCard = scenario.hackerCard; +// var hackerCardEl = document.querySelector(".hacker-area .card"); -// // 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++; -// } +// // Contents of the player cards +// var playerCards = scenario.playerCards; + +// for (var i = 0; i < allCardElements.length; i++) { +// var card = allCardElements[i]; -// // Reveal each card one by one with a delay of 100ms -// setTimeout(function(card, j) { -// return function() { +// 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.style.display = "block"; -// card.classList.add("showCard"); +// 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); // } -// }(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 +// // 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 when the game is over -var hackerWinnerMessage = "Game Over: You got hacked!"; -var playerWinnerMessage = "Congratuations: You defeated the hacker!"; -//var NoResultGameMessage = "Oops: No Result of this match"; +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); @@ -296,22 +593,6 @@ var hackerStartLife = parseInt(hackerLife); var roundFinished = false; var cardSelected = false; -//var initial = 0; -//var playerName; - -// we will declare the functions for you and you will complete those -// -//GiveName(); - -// function GiveName() { -// playerName = prompt("Enter Name :") -// if ((playerName == "") || (playerName === null)) { -// alert("Invalid name entered"); -// GiveName() -// } else { -// document.getElementById("player").innerHTML = playerName; -// } -// } updateScores(); document.querySelector(".game-board").classList.add("before-game"); @@ -327,8 +608,11 @@ for (var i = 0; i < allCardElements.length; i++) { }); } } -// When a card is clicked following function will occur: + + +// When a card is clicked function cardClicked(cardEl) { + if (cardSelected) { return; } cardSelected = true; @@ -374,15 +658,15 @@ function compareCards() { var playerPower = parseInt(playerPowerEl.innerHTML); var hackerPower = parseInt(hackerPowerEl.innerHTML); - var power_Difference = playerPower - hackerPower; + var powerDifference = playerPower - hackerPower; - if (power_Difference < 0) { + 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 (power_Difference > 0) { + } else if (powerDifference > 0) { // Player Wins hackerLife = hackerLife - powerDifference; playerCard.classList.add("better-card"); @@ -397,184 +681,178 @@ function compareCards() { if (playerLife <= 0) { gameOver("Hacker"); - } else { + } else if (hackerLife <= 0) { gameOver("Player") - // } else if (initial >= 3) { - // gameOver("No-Result"); - // initial = 0; - // } + } + + roundFinished = true; - roundFinished = true; + document.querySelector("button.next-turn").removeAttribute("disabled"); +} - 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"); } +} - // 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"); - //document.querySelector("button.next-turn").setAttribute("disabled"); - } else { - document.querySelector(".winner-message").innerHTML = playerWinnerMessage; - document.querySelector(".winner-section").classList.add("player-color"); - //document.querySelector("button.next-turn").setAttribute("disabled"); - // } else { - // document.querySelector(".winner-message").innerHTML = noResultMessage; - // document.querySelector(".winner-section").classList.add("hacker-color"); - // //document.querySelector("button.next-turn").setAttribute("disabled"); - // } - } +// Starts the game +function startGame() { + document.querySelector(".game-board").classList.remove("before-game"); + document.querySelector(".game-board").classList.add("during-game"); + playTurn(); +} - // 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"); - // 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"; - document.querySelector(".winner-section").style.display = "none"; - document.querySelector(".hacker-card").style.display = "none"; + var cards = allCardElements; - var cards = allCardElements; + document.querySelector("button").removeAttribute("disabled"); - document.querySelector("button").removeAttribute("disabled"); + for (var i = 0; i < cards.length; i++) { + cards[i].style.display = "none"; + } - for (var i = 0; i < cards.length; i++) { - cards[i].style.display = "none"; - } + playerLife = playerStartLife; + hackerLife = hackerStartLife; - playerLife = playerStartLife; - hackerLife = hackerStartLife; + roundFinished = true; + cardSelected = false; - roundFinished = true; - cardSelected = false; + updateScores(); +} - updateScores(); - } +// Updates the displayed life bar and life totals +function 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 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 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 + "%"; +} - // 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; +} - // Shuffles an array - function shuffleArray(s_arr) { - var j, x, i; - for (i = s_arr.length; i; i--) { - j = Math.floor(Math.random() * i); - x = s_arr[i - 1]; - s_arr[i - 1] = arr[j]; - s_arr[j] = x; - } - return s_arr; - } +// Plays one turn of the game +function playTurn() { - // Plays one turn of the game - function playTurn() { - initial = initial + 1; - roundFinished = true; - cardSelected = false; + roundFinished = true; + cardSelected = false; - document.querySelector(".game-board").classList.remove("card-selected"); + 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"); + // 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"); + // 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"); - } + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; + card.classList.remove("showCard"); + } + + setTimeout(function() { + revealCards(); + }, 500); +} + +function revealCards() { - setTimeout(function() { - revealCards(); - }, 500); - } - function revealCards() { + var j = 0; + var cardIndexes = shuffleArray([0, 1, 2]); + // Get scenario cards + console.log("scenarios.length == " + scenarios.length); - var j = 0; - var cardIndexes = shuffleArray([0, 1, 2]); + var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); + var scenario = scenarios[randomScenarioIndex]; + console.log(scenario.hackerCard.description); - // Get scenario cards - console.log("scenarios.length == " + scenarios.length); + scenarios.splice(randomScenarioIndex, 1); - var randomScenarioIndex = Math.floor(Math.random() * scenarios.length); - var scenario = scenarios[randomScenarioIndex]; - console.log(scenario.hackerCard.description); + console.log("scenarios.length after splice == " + scenarios.length); - scenarios.splice(randomScenarioIndex, 1); + var hackerCard = scenario.hackerCard; + var hackerCardEl = document.querySelector(".hacker-area .card"); - console.log("scenarios.length after splice == " + scenarios.length); + // Contents of the player cards + var playerCards = scenario.playerCards; - var hackerCard = scenario.hackerCard; - var hackerCardEl = document.querySelector(".hacker-area .card"); + for (var i = 0; i < allCardElements.length; i++) { + var card = allCardElements[i]; - // Contents of the player cards - var playerCards = scenario.playerCards; + 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"); - for (var i = 0; i < allCardElements.length; i++) { - var card = allCardElements[i]; + // 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++; + } - card.classList.remove("worse-card"); - card.classList.remove("better-card"); - card.classList.remove("played-card"); - card.classList.remove("tie-card"); + // Reveal each card one by one with a delay of 100ms + setTimeout(function(card, j) { + return function() { 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); + card.style.display = "block"; + card.classList.add("showCard"); } - // Display the hacker card - hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; - hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; - } \ No newline at end of file + }(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 From b18b3518037fc7d78e4539ca5fca4a8d1ff37a0a Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:22:22 +0530 Subject: [PATCH 09/12] third commit --- main.js | 581 +------------------------------------------------------- 1 file changed, 1 insertion(+), 580 deletions(-) diff --git a/main.js b/main.js index c753fdb..522369d 100644 --- a/main.js +++ b/main.js @@ -1,583 +1,4 @@ -// // // 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. ----- // - -// // //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 devare 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! - -// // // 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; - -// // // 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 when the game is over -// var hackerWinnerMessage = "Game Over: You got hacked!"; -// var playerWinnerMessage = "Congratuations: You defeated the hacker!"; -// //var NoResultGameMessage = "Oops: No Result of this match"; -// // Game code starts here -// var playerStartLife = parseInt(playerLife); -// var hackerStartLife = parseInt(hackerLife); - -// var roundFinished = false; -// var cardSelected = false; - -// //var initial = 0; -// //var playerName; - -// // we will declare the functions for you and you will complete those -// // -// //GiveName(); - -// // function GiveName() { -// // playerName = prompt("Enter Name :") -// // if ((playerName == "") || (playerName === null)) { -// // alert("Invalid name entered"); -// // GiveName() -// // } else { -// // document.getElementById("player").innerHTML = playerName; -// // } -// // } -// 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 following function will occur: -// 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 power_Difference = playerPower - hackerPower; - -// if (power_Difference < 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 (power_Difference > 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 { -// gameOver("Player") -// // } else if (initial >= 3) { -// // gameOver("No-Result"); -// // initial = 0; -// // } - -// 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"); -// //document.querySelector("button.next-turn").setAttribute("disabled"); -// } else { -// document.querySelector(".winner-message").innerHTML = playerWinnerMessage; -// document.querySelector(".winner-section").classList.add("player-color"); -// //document.querySelector("button.next-turn").setAttribute("disabled"); -// // } else { -// // document.querySelector(".winner-message").innerHTML = noResultMessage; -// // document.querySelector(".winner-section").classList.add("hacker-color"); -// // //document.querySelector("button.next-turn").setAttribute("disabled"); -// // } -// } - - -// // 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(s_arr) { -// var j, x, i; -// for (i = s_arr.length; i; i--) { -// j = Math.floor(Math.random() * i); -// x = s_arr[i - 1]; -// s_arr[i - 1] = arr[j]; -// s_arr[j] = x; -// } -// return s_arr; -// } - - -// // Plays one turn of the game -// function playTurn() { -// initial = initial + 1; -// 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 -// 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 +// Set starting life totals here var playerLife = 5; var hackerLife = 5; From 877c1759e1cacfc82b609e71297b51c52a4ff9f0 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:27:50 +0530 Subject: [PATCH 10/12] 3rd --- main.js | 286 +++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 285 insertions(+), 1 deletion(-) diff --git a/main.js b/main.js index 522369d..7d0f868 100644 --- a/main.js +++ b/main.js @@ -1,4 +1,288 @@ -// Set starting life totals here +// // 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. ----- // + +// //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! + +// // 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; + +// // 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; From 3c8b074cc3fa485263a7cf251fa22dd6fac4b26c Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 12:32:50 +0530 Subject: [PATCH 11/12] change in style.css --- style.css | 535 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 275 insertions(+), 260 deletions(-) diff --git a/style.css b/style.css index 9ceaaee..4b8e61d 100644 --- a/style.css +++ b/style.css @@ -1,369 +1,385 @@ /* 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: 16px; + font-weight: 400; + color: rgba(255, 255, 255, .6); + font-style: italic; + position: absolute; + top: 0; } h1 strong { - color: white; - font-style: normal; + color: white; + font-style: normal; } .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: #77e65b; } -.player-area { - background-position: top; - align-items: top; - background-color: #2563eb; +#5be685 .player-area { + background-position: top; + align-items: top; + background-color: #eba625; } .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; } .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: 15px; } .winner-message { - color: white; - font-size: 22px; - font-weight: 700; - position: relative; - top: 1px; + color: white; + font-size: 22px; + font-weight: 700; + position: relative; + 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 +387,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 From bed6750e7ff74e8f37b134dffa3111e4136963f1 Mon Sep 17 00:00:00 2001 From: Satyam9119 Date: Sat, 12 Feb 2022 13:53:12 +0530 Subject: [PATCH 12/12] semi-final change --- index.html | 115 +++++++++++++++++++++++++-------------------------- package.json | 40 +++++++++--------- scenario.js | 44 ++++++++++++++------ style.css | 29 ++++++++----- 4 files changed, 125 insertions(+), 103 deletions(-) diff --git a/index.html b/index.html index bb03a42..f5d6ec6 100644 --- a/index.html +++ b/index.html @@ -2,80 +2,77 @@ - - - - - + + + + + - Hacker Card - + Hacker Card + -
-
-

- HACKER CARDS
- Choose the card to stop hackers' attack -

+
+
-
-
-
-
-
-
👿
-
Hacker
-
+

+ HACKER CARDS
Choose the card to stop hackers' attack ... +

-
-
-
-
-
+
+
+
+
+
+
👿
+
Hacker
+
-
-
-
-
+
+
+
+
-
-
👦
-
You
-
-
-
-
-
+
+
+
+
+
+
+
👦
+
player
+
+ +
+
+
+
-
-
-
-
+
+
+
+
-
-
-
-
+
+
+
+
- - + + +
-
-
-
- You got hacked! - +
+
+ You got hacked! + +
-
- - + + \ 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 841d29b..5a6271a 100644 --- a/scenario.js +++ b/scenario.js @@ -7,6 +7,26 @@ // 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 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, + } + ] + }, + { hackerCard: { description: "I set up a fake Wi-Fi station to steal people’s email and track them online.", power: 4, @@ -44,42 +64,40 @@ var scenarios = [{ // add the text you'd want should appear on the hacker's card power: 1, } ] - }, - { // add the text you'd want should appear on the hacker's card + }, { // 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, + 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 use public wifi networks.", + description: "I never share my OTP.", power: 5, }, { - description: "I browse the web, but I never do any personal business on a public wifi network.", + description: "I share my OTP to only the people whom I know.", power: 3, }, { - description: "I connect to any wifi network I can use in public.", + description: "I will share my OTP with you.", power: 1, } ] - }, - { + }, { hackerCard: { - description: "I sent a fake email from your bank asking for your account details.", + description: "I asked you for your bank details.", power: 3, }, playerCards: [{ - description: "I checked the email address - the message didn’t come from my bank.", + description: "I never share my bank details with anyone.", power: 5, }, { - description: "I never give out personal information in response to an email.", + description: "I will contact my bank to confirm about it.", power: 4, }, { - description: "I sent the details you asked for so you could check on my account.", + description: "I will share my bank details with you.", power: 1, } ] diff --git a/style.css b/style.css index 4b8e61d..be2f8e9 100644 --- a/style.css +++ b/style.css @@ -22,17 +22,18 @@ body { .hacker-area h1 { padding: 12px 10px 0 10px; margin: 0; - font-size: 16px; + font-size: 25px; font-weight: 400; - color: rgba(255, 255, 255, .6); + 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, @@ -51,13 +52,13 @@ h1 strong { .hacker-area { background-position: bottom; align-items: flex-end; - background-color: #77e65b; + background-color: #9df77a; } -#5be685 .player-area { +.player-area { background-position: top; align-items: top; - background-color: #eba625; + background-color: #0efdad; } .player-area .card { @@ -145,6 +146,7 @@ button.next-turn { transition: all .15s ease-out; background: black; display: none; + box-align: left; } .during-game .next-turn { @@ -183,14 +185,19 @@ button:active { } .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; + color: rgb(245, 125, 13); + font-size: 30px; font-weight: 700; - position: relative; + position: left; top: 1px; }