From db0405b56c9399e8faa904c508095b7bbdc82f57 Mon Sep 17 00:00:00 2001 From: Adrito-M Date: Mon, 14 Feb 2022 17:39:28 +0530 Subject: [PATCH] added functionalities --- main.js | 275 ++++++++++++++++++++++++++++++++++++++-------------- scenario.js | 20 ++++ style.css | 2 +- 3 files changed, 225 insertions(+), 72 deletions(-) diff --git a/main.js b/main.js index f242959..33402f0 100644 --- a/main.js +++ b/main.js @@ -1,124 +1,257 @@ -// 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 = "Write the message here"; -var playerWinnerMessage = "Write the message here"; +var hackerWinnerMessage = "YOU JUST GOT HECKED"; +var playerWinnerMessage = "HACKER GAVE UP SEEING YOUR CYBER CONSCIOUSNESS"; - // ---------------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 +var roundFinished = false; +var cardSelected = false; + +var questionNumber = 0; + + 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 - - -// An example of a function that controls what would happen when a card is clicked +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); + }); + } +} 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) + setTimeout(function () { + revealHackerPower(); + }, 500) - setTimeout(function(){ - revealPlayerPower(); - },800) - - setTimeout(function(){ - compareCards(); - }, 1400); -} + setTimeout(function () { + revealPlayerPower(); + }, 800) -// Now write a function that shows the power level on the player card -function revealPlayerPower(){ - + setTimeout(function () { + compareCards(); + }, 1400); } -// Write a function that shows the power level on the hacker card -function revealHackerPower(){ - +function revealPlayerPower() { + var playerCard = document.querySelector(".played-card"); + playerCard.classList.add("reveal-power"); } -// Write a function to compare the cards. Here is where all your skills would come in handy! -// P.S: We've added the 'disabled' attribute in the CSS file for the button and you should use it in case you want a certain element to just go away or 'vanish' at a certain time. For eg: You'd definitely want the 'Next' button to go away after a player chooses a card right? -function compareCards(){ +function revealHackerPower() { + var hackerCard = document.querySelector(".hacker-card"); + hackerCard.classList.add("reveal-power"); +} +function compareCards() { + var playerCard = document.querySelector(".played-card"); + var playerPowerEl = playerCard.querySelector(".power"); + + var hackerCard = document.querySelector(".hacker-card"); + var hackerPowerEl = hackerCard.querySelector(".power"); + + var playerPower = parseInt(playerPowerEl.innerHTML); + var hackerPower = parseInt(hackerPowerEl.innerHTML); + + var powerDifference = playerPower - hackerPower; + + if (powerDifference < 0) { + playerLife = playerLife + powerDifference; + playerLife = playerLife < 0 ? 0 : playerLife; + hackerCard.classList.add("better-card"); + playerCard.classList.add("worse-card"); + document.querySelector(".player-stats .thumbnail").classList.add("ouch"); + } else if (powerDifference > 0) { + hackerLife = hackerLife - powerDifference; + hackerLife = hackerLife < 0 ? 0 : hackerLife; + playerCard.classList.add("better-card"); + hackerCard.classList.add("worse-card"); + document.querySelector(".hacker-stats .thumbnail").classList.add("ouch"); + } else { + playerCard.classList.add("tie-card"); + hackerCard.classList.add("tie-card"); + } + + updateScores(); + + if (playerLife == 0) { + gameOver("Hacker"); + } else if (hackerLife == 0) { + gameOver("Player") + } + + roundFinished = true; + + document.querySelector("button.next-turn").removeAttribute("disabled"); } -//Use conditional statements and complete the function that shows the winner message function gameOver(winner) { - + document.querySelector(".game-board").classList.remove("during-game"); + 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; -// 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(){ + roundFinished = true; + cardSelected = false; - // Here these update life totals for each player - document.querySelector(".player-stats .life-total").innerHTML = playerLife; + updateScores(); +} + +function updateScores() { - // 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 + "%"; + document.querySelector(".player-stats .life-total").innerHTML = playerLife; + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; - // Now you write the code to update the hacker lifebar + var playerPercent = playerLife / playerStartLife * 100; + if (playerPercent < 0) { + playerPercent = 0; + } + document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; + var hackerPercent = hackerLife / hackerStartLife * 100 + if (hackerPercent < 0) { + hackerPercent = 0; + } + document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%"; } +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() { + questionNumber += 1; + + roundFinished = true; + cardSelected = false; + + document.querySelector(".game-board").classList.remove("card-selected"); + + document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch"); + document.querySelector(".player-stats .thumbnail").classList.remove("ouch"); + + 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]); + + console.log("scenarios.length == " + scenarios.length); + + var randomScenarioIndex = questionNumber % scenarios.length; + + var scenario = scenarios[randomScenarioIndex]; + console.log(scenario.hackerCard.description); + + console.log("scenarios.length after splice == " + scenarios.length); + + var hackerCard = scenario.hackerCard; + var hackerCardEl = document.querySelector(".hacker-area .card"); + + 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"); + + if (card.classList.contains("player-card")) { + card.querySelector(".text").innerHTML = playerCards[cardIndexes[j]].description; + card.querySelector(".power").innerHTML = playerCards[cardIndexes[j]].power; + j++; + } + + setTimeout(function (card, j) { + return function () { + card.classList.remove("prepared"); + card.style.display = "block"; + card.classList.add("showCard"); + } + }(card, i), (i + 1) * 200); + } + hackerCardEl.querySelector(".text").innerHTML = hackerCard.description; + hackerCardEl.querySelector(".power").innerHTML = hackerCard.power; } \ No newline at end of file diff --git a/scenario.js b/scenario.js index f926d60..3606997 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,24 @@ var scenarios = [ } ] }, + { + hackerCard : { + description : "I sent you a free Discord Nitro Link.", + power : 4, + }, + playerCards : [ + { + description : "I dont click unknown links. I am aware of phishing attacks.", + power : 5, + }, + { + description : "I will ask mom if i should click the link.", + power : 2, + }, + { + description : "Wow, you are a generous hecker. Thank you ^w^", + power : 1, + } + ] + }, ]; \ No newline at end of file diff --git a/style.css b/style.css index 9ceaaee..63d8cdd 100644 --- a/style.css +++ b/style.css @@ -58,7 +58,7 @@ h1 strong { .player-area { background-position: top; align-items: top; - background-color: #2563eb; + background-color: #c0eb25; } .player-area .card {