👦
- You
+ You
diff --git a/main.js b/main.js
index f242959..3aead63 100644
--- a/main.js
+++ b/main.js
@@ -13,30 +13,55 @@
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";
- // ---------------Game code starts here ---------------//
+// Message to be displayed when the game is over
+var hackerWinnerMessage = "Game over: Hacker Won!!";
+var playerWinnerMessage = "Game over: You Won!!";
+var noWinnerMessage = "Game over: No-Result";
+ // ---------------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();
+var roundFinished = false;
+var cardSelected = false;
+var play =0;
+var playerName;
+
+// we will declare the functions for you and you will complete those
+updateName();
+updateScores();
+function updateName(){
+ playerName = prompt("Enter a Name ")
+ if ((playerName == "")||(playerName === null)){
+ alert("Please Enter a Name or Valid Input");
+ updateName()
+ }
+ else {
+ document.getElementById("player").innerHTML = playerName;
+ }
+}
// 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");
-
+var cardElements = document.querySelectorAll(".card");
// Adds click handler to all player card elements so that your cards are actionable
+for(var i = 0; i < cardElements.length; i++) {
+ var card = cardElements[i];
+ if(card.classList.contains("player-card")) {
+ card.addEventListener("click",function(e){
+ cardClicked(this);
+ (e).preventDefault();
+ });
+ }
+}
-// An example of a function that controls what would happen when a card is clicked
+
+// An example of a function that controls what would happen when a card is clicked
function cardClicked(cardEl) {
if(cardSelected) { return; }
@@ -60,65 +85,232 @@ function cardClicked(cardEl) {
}, 1400);
}
-// Now write a function that shows the power level on the player card
+//Shows the power level of player
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 of hacker
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?
-
+//Compares the power level of hacker and player
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 pwrDiff = playerPower - hackerPower;
+
+ if (pwrDiff < 0) {
+ // Player Loses
+ playerLife = playerLife + pwrDiff;
+ hackerCard.classList.add("better-card");
+ playerCard.classList.add("worse-card");
+ document.querySelector(".player-stats .thumbnail").classList.add("ouch");
+ } else if (pwrDiff > 0) {
+ // Player Wins
+ hackerLife = hackerLife - pwrDiff;
+ 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(0 >= playerLife) {
+ gameOver("Hacker");
+ } else if (0 >= hackerLife){
+ gameOver("Player")
+ }else if(play >=3){
+ gameOver("No-Winner");
+ play =0;
+ }
+
+ roundFinished = true;
+ document.querySelector("button.next-turn").removeAttribute("disabled");
}
-//Use conditional statements and complete the function that shows the winner message
+// Shows the winner message
function gameOver(winner) {
-
+ document.querySelector(".game-board").classList.add("game-over");
+ document.querySelector(".winner-section").style.display = "flex";
+ document.querySelector(".winner-section").classList.remove("player-color");
+ document.querySelector(".winner-section").classList.remove("hacker-color");
+
+ if(winner == "Hacker") {
+ document.querySelector(".winner-message").innerHTML = hackerWinnerMessage;
+ document.querySelector(".winner-section").classList.add("hacker-color");
+ document.querySelector("button.next-turn").setAttribute("disabled");
+ } else if(winner == "Player") {
+ document.querySelector(".winner-message").innerHTML = playerWinnerMessage+ "Congrats:"+ playerName;
+ document.querySelector(".winner-section").classList.add("player-color");
+ document.querySelector("button.next-turn").setAttribute("disabled");
+ }else{
+ document.querySelector(".winner-message").innerHTML = noWinnerMessage;
+ 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();
}
-// Now write a function that starts the game over from scratch
+//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 = cardElements;
+
+ 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.
+// 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 the card
+function shuffleArray(s) {
+ let j, x, i;
+ for (i = s.length; i; i--) {
+ j = Math.floor(Math.random() * i);
+ x = s[i - 1];
+ s[i - 1] = s[j];
+ s[j] = x;
+ }
+ return s;
+}
+
-// Write a function that Plays one turn of the game
+// Plays one turn of the game
function playTurn() {
+ play = play + 1;
+ roundFinished = true;
+ cardSelected = false;
-}
+ document.querySelector(".game-board").classList.remove("card-selected");
+
+ // Remove "ouch" from player and hacker thumbnails
+ document.querySelector(".hacker-stats .thumbnail").classList.remove("ouch");
+ document.querySelector(".player-stats .thumbnail").classList.remove("ouch");
+
+ // Hides the "next turn" button, will show again when turn is over
+ document.querySelector(".next-turn").setAttribute("disabled", "true");
-// Finally write the function that reveals the cards. Use
+ for(var i = 0; i < cardElements.length; i++) {
+ var card = cardElements[i];
+ card.classList.remove("showCard");
+ }
+
+ setTimeout(function(){
+ revealCards();
+ }, 500);
+}
+// Reveals Cards
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 < cardElements.length; i++) {
+ var card = cardElements[i];
+
+ card.classList.remove("worse-card");
+ card.classList.remove("better-card");
+ card.classList.remove("played-card");
+ card.classList.remove("tie-card");
+ card.classList.remove("prepared");
+ card.classList.remove("reveal-power");
+
+ // Display the payer card details
+ if(card.classList.contains("player-card")) {
+ card.querySelector(".text").innerHTML = playerCards[cardIndexes[j]].description;
+ card.querySelector(".power").innerHTML = playerCards[cardIndexes[j]].power;
+ j++;
+ }
+
+ // Revealing each card one by one with a delay of 100ms
+ setTimeout(function(card, j){
+ return function() {
+ card.classList.remove("prepared");
+ card.style.display = "block";
+ card.classList.add("showCard");
+ }
+ }(card,i), parseInt(i+1) * 200);
+ }
+
+ // Displaying the hacker card
+ hackerCardEl.querySelector(".text").innerHTML = hackerCard.description;
+ hackerCardEl.querySelector(".power").innerHTML = hackerCard.power;
}
\ No newline at end of file
diff --git a/scenario.js b/scenario.js
index f926d60..1c0be91 100644
--- a/scenario.js
+++ b/scenario.js
@@ -8,9 +8,28 @@
var scenarios = [
{ // add the text you'd want should appear on the hacker's card
+ hackerCard :{
+ description : "I have hacked your MS-Teams account and now you won't be able to submit your assingments.",
+ power : 2,
+ },
+ playerCards : [{
+ description : "I use Google-Classrooms to submit my assignments.",
+ power : 4,
+ },
+ {
+ description : "My Professor does not assign any assignments.",
+ power : 1,
+ },
+ {
+ description : "Our Offline classes are going to start,so we don't need MS-Teams",
+ power : 5,
+ }
+ ]
+ },
+ {
hackerCard : {
description : "I set up a fake Wi-Fi station to steal people’s email and track them online.",
- power : 4,
+ 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 : [
@@ -31,7 +50,7 @@ var scenarios = [
{
hackerCard : {
description : "I sent a fake email from your bank asking for your account details.",
- power : 3,
+ power : 2,
},
playerCards : [
{
diff --git a/style.css b/style.css
index 9ceaaee..e012d08 100644
--- a/style.css
+++ b/style.css
@@ -5,11 +5,12 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
+ font-size: 25px;
}
body{
background-repeat: repeat;
- color: white;
+ color: rgb(231, 222, 222);
}
@@ -23,17 +24,18 @@ body{
.hacker-area h1 {
padding: 12px 10px 0 10px;
margin: 0;
- font-size: 16px;
+ font-size: 35px;
font-weight: 400;
- color: rgba(255,255,255,.6);
- font-style: italic;
+ color: rgb(255, 115, 0);
+ font-family: 'Supermercado One', cursive;
position: absolute;
top: 0;
}
h1 strong {
- color: white;
- font-style: normal;
+ color: rgb(255, 0, 242);
+ font-family: 'Syne Tactile', cursive;
+ font-size: 58px;
}
.hacker-area,
@@ -52,13 +54,13 @@ h1 strong {
.hacker-area {
background-position: bottom;
align-items: flex-end;
- background-color: #e65b74;
+ background-color: #13b305;
}
.player-area {
background-position: top;
align-items: top;
- background-color: #2563eb;
+ background-color: #014e96;
}
.player-area .card {