Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

changed bgColor #38

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

changed bgColor #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
251 changes: 207 additions & 44 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,39 @@
// 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.
// Set starting life totals here
var playerLife = 5;
var hackerLife = 5;

// Message to be displayed when the game is over
var hackerWinnerMessage = "Write the message here";
var playerWinnerMessage = "Write the message here";

// ---------------Game code starts here ---------------//
// Message when the game is over
var hackerWinnerMessage = "Game over: You got hacked!";
var playerWinnerMessage = "You defeated the hecker!";

// 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;

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

// Adds click handler to all player card elements
for(var i = 0; i < allCardElements.length; i++) {
var card = allCardElements[i];
if(card.classList.contains("player-card")) {
card.addEventListener("click",function(e){
cardClicked(this);
});
}
}

// An example of a function that controls what would happen when a card is clicked

// When a card is clicked
function cardClicked(cardEl) {

if(cardSelected) { return; }
Expand All @@ -46,79 +43,245 @@ 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");
var playerPowerEl = playerCard.querySelector(".power");

var hackerCard = document.querySelector(".hacker-card");
var hackerPowerEl = hackerCard.querySelector(".power");

var playerPower = parseInt(playerPowerEl.innerHTML);
var hackerPower = parseInt(hackerPowerEl.innerHTML);

var powerDifference = playerPower - hackerPower;

if (powerDifference < 0) {
// Player Loses
playerLife = playerLife + powerDifference;
hackerCard.classList.add("better-card");
playerCard.classList.add("worse-card");
document.querySelector(".player-stats .thumbnail").classList.add("ouch");
} else if (powerDifference > 0) {
// Player Wins
hackerLife = hackerLife - powerDifference;
playerCard.classList.add("better-card");
hackerCard.classList.add("worse-card");
document.querySelector(".hacker-stats .thumbnail").classList.add("ouch");
} else {
playerCard.classList.add("tie-card");
hackerCard.classList.add("tie-card");
}

updateScores();

if(playerLife <= 0) {
gameOver("Hacker");
} else if (hackerLife <= 0){
gameOver("Player")
}

roundFinished = true;

document.querySelector("button.next-turn").removeAttribute("disabled");
}

//Use conditional statements and complete the function that shows the winner message
// Shows the winner message
function gameOver(winner) {

document.querySelector(".game-board").classList.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
// 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
// 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();
}

// 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
playerLife = (playerLife<0)?0:playerLife;
hackerLife = (hackerLife<0)?0:hackerLife;
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 + "%";
}



// Write a function that Plays one turn of the game
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;
}


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(){

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;
}
42 changes: 42 additions & 0 deletions scenario.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,46 @@ 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,
}
]
},
{
hackerCard : {
description : "I asked for your credit card's CVV to 'renew it'.",
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 : "Banks never ask for CVV.",
power : 4,
},
{
description : "I reported your number to the bank's online fraud division.",
power : 5,
},
{
description : "I gave you all the deatils.",
power : 1,
}
]
}
];
Loading