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

first commit #32

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

first commit #32

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
8 changes: 4 additions & 4 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,17 +46,17 @@ <h1>
<div class="name">You</div>
</div>

<div class="card player-card player-color">
<div class="card player-card player-color" onclick="cardClicked(document.getElementsByClassName('card')[1])">
<div class="text"></div>
<div class="power"></div>
</div>

<div class="card player-card player-color">
<div class="card player-card player-color" onclick="cardClicked(document.getElementsByClassName('card')[2])">
<div class="text"></div>
<div class="power"></div>
</div>

<div class="card player-card player-color">
<div class="card player-card player-color" onclick="cardClicked(document.getElementsByClassName('card')[3])">
<div class="text"></div>
<div class="power"></div>
</div>
Expand All @@ -68,7 +68,7 @@ <h1>

<div class="winner-section">
<div>
<span class="winner-message">You got hacked!</span>
<span class="winner-message">Winner Message</span>
<button class="restart" onclick="location.reload()">Play Again!</button>
</div>
</div>
Expand Down
162 changes: 132 additions & 30 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,17 @@
// Life of the player and the hacker.
var playerLife = 5;
var hackerLife = 5;
var cardSelected = false;
var scoreDifferenceOFPAndH = undefined;
var playerCardScore = 0;
var hackerCardScore = 0;
var turnNumber = 0

// Message to be displayed when the game is over
var hackerWinnerMessage = "Write the message here";
var playerWinnerMessage = "Write the message here";
var hackerWinnerMessage = "You got hacked!";
var playerWinnerMessage = "You defeated the hacker!";

// ---------------Game code starts here ---------------//
// ---------------Game code starts here ---------------//

// declare a few handy variables like we've done :p

Expand All @@ -38,87 +43,184 @@ var allCardElements = document.querySelectorAll(".card");
// An example of a function that controls what would happen when a card is clicked

function cardClicked(cardEl) {
// console.log("cardClicked");

if(cardSelected) { return; }
if (cardSelected) { return 0; }
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(){
setTimeout(function () {
revealHackerPower();
},500)
}, 500)

setTimeout(function(){
setTimeout(function () {
revealPlayerPower();
},800)
setTimeout(function(){
}, 800)

setTimeout(function () {
compareCards();
}, 1400);
}

// Now write a function that shows the power level on the player card
function revealPlayerPower(){

function revealPlayerPower() {
// console.log("revealPlayerPower");
document.getElementsByClassName('played-card')[0].classList.add('reveal-power');
}

// Write a function that shows the power level on the hacker card
function revealHackerPower(){

function revealHackerPower() {
// console.log("revealHackerPower");
document.getElementsByClassName('card')[0].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() {
// console.log("compareCards");
playerCardScore = parseInt(document.getElementsByClassName('played-card')[0].lastElementChild.innerHTML);
hackerCardScore = parseInt(document.getElementsByClassName('power')[0].innerText);
scoreDifferenceOFPAndH = playerCardScore - hackerCardScore;
if (scoreDifferenceOFPAndH > 0) {
document.getElementsByClassName('played-card')[0].classList.add('better-card');
document.getElementsByClassName('card')[0].classList.add('worse-card');
} else if (scoreDifferenceOFPAndH < 0) {
document.getElementsByClassName('card')[0].classList.add('better-card');
document.getElementsByClassName('played-card')[0].classList.add('worse-card');
} else {
document.getElementsByClassName('card')[0].classList.add('tie-card');
document.getElementsByClassName('played-card')[0].classList.add('tie-card');
}
if (scoreDifferenceOFPAndH > 0) {
hackerLife -= scoreDifferenceOFPAndH;
} else {
playerLife += scoreDifferenceOFPAndH;
}
updateScores();
}

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

// console.log('gameOver');
scoreDifferenceOFPAndH = undefined;
if (winner === 'h') {
document.getElementsByClassName('winner-message')[0].innerHTML = 'You got hacked!';
} else if (winner === 't') {
document.getElementsByClassName('winner-message')[0].innerHTML = "It's a tie!";
}

document.getElementsByClassName('restart')[0].classList.add('game-over');
document.getElementsByClassName('winner-section')[0].classList.add('winnerDeclared');
}


// Write a function that starts the game
function startGame() {
// console.log('startGame');
document.getElementsByClassName('card')[0].children[0].innerHTML = scenarios[turnNumber].hackerCard.description;
document.getElementsByClassName('card')[0].children[1].innerHTML = scenarios[turnNumber].hackerCard.power;

}
document.getElementsByClassName('card')[1].firstElementChild.innerHTML = scenarios[turnNumber].playerCards[0].description;
document.getElementsByClassName('card')[1].lastElementChild.innerHTML = scenarios[turnNumber].playerCards[0].power;

document.getElementsByClassName('card')[2].firstElementChild.innerHTML = scenarios[turnNumber].playerCards[1].description;
document.getElementsByClassName('card')[2].lastElementChild.innerHTML = scenarios[turnNumber].playerCards[1].power;

// Now write a function that starts the game over from scratch
function restartGame(){
document.getElementsByClassName('card')[3].firstElementChild.innerHTML = scenarios[turnNumber].playerCards[2].description;
document.getElementsByClassName('card')[3].lastElementChild.innerHTML = scenarios[turnNumber].playerCards[2].power;

document.querySelector(".game-board").classList.remove("before-game");
turnNumber++;
revealCards();
}


// Now write a function that starts the game over from scratch
// ** worked without it
// function restartGame() {}

// 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() {
// console.log('updateScores');
if (scoreDifferenceOFPAndH > 0) {
document.getElementsByClassName('thumbnail')[0].classList.add('ouch');
} else if (scoreDifferenceOFPAndH < 0) {
document.getElementsByClassName('thumbnail')[1].classList.add('ouch');
}
// Here these update life totals for each player
document.querySelector(".player-stats .life-total").innerHTML = playerLife;

// We've added the code to update the player lifebar
var playerPercent = playerLife / playerStartLife * 100;
if (playerPercent < 0) {
playerPercent = 0;
playerLife = 0;
}
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";
document.querySelector(".player-stats .life-total").innerHTML = playerLife;
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";

// Now you write the code to update the hacker lifebar

var hackerPercent = hackerLife / hackerStartLife * 100;
if (hackerPercent < 0) {
hackerPercent = 0;
hackerLife = 0;
}
document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife;
document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
if (playerLife === 0) {
gameOver('h');
} else if (hackerLife === 0) {
gameOver('p');
} else if (turnNumber === 4) {
gameOver('t');
} else if (scoreDifferenceOFPAndH != undefined) {
console.log("In 2nd else if");
document.getElementsByClassName('player-area')[0].classList.add('during-game');
}
}



// Write a function that Plays one turn of the game
function playTurn() {
// console.log("playTurn");
document.getElementsByClassName('player-area')[0].classList.remove('during-game');

for (let i = 0; i < 4; i++) {
document.getElementsByClassName('card')[i].classList.remove('showCard');
}


document.getElementsByClassName('played-card')[0].classList.remove('reveal-power');
document.getElementsByClassName('card')[0].classList.remove('reveal-power');
if (scoreDifferenceOFPAndH > 0) {
document.getElementsByClassName('played-card')[0].classList.remove('better-card');
document.getElementsByClassName('card')[0].classList.remove('worse-card');
} else if (scoreDifferenceOFPAndH < 0) {
document.getElementsByClassName('card')[0].classList.remove('better-card');
document.getElementsByClassName('played-card')[0].classList.remove('worse-card');
} else {
document.getElementsByClassName('card')[0].classList.remove('tie-card');
document.getElementsByClassName('played-card')[0].classList.remove('tie-card');
}
document.getElementsByClassName('played-card')[0].classList.remove('played-card');

cardSelected = false;
document.querySelector(".game-board").classList.remove("card-selected");

if (scoreDifferenceOFPAndH > 0) {
document.getElementsByClassName('thumbnail')[0].classList.remove('ouch');
} else if (scoreDifferenceOFPAndH < 0) {
document.getElementsByClassName('thumbnail')[1].classList.remove('ouch');
}

startGame();
}

// Finally write the function that reveals the cards. Use
function revealCards(){

function revealCards() {
for (let i = 0; i < 4; i++) {
document.getElementsByClassName('card')[i].classList.add('showCard');
}
}
80 changes: 60 additions & 20 deletions scenario.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,44 +8,84 @@

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,
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 : [
playerCards: [
{
description : "I never use public wifi networks.",
power : 5,
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 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,
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 : [
playerCards: [
{
description : "I checked the email address - the message didn’t come from my bank.",
power : 5,
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 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,
description: "I sent the details you asked for so you could check on my account.",
power: 1,
}
]
},
{
hackerCard: {
description: "Question 3",
power: 5,
},
playerCards: [
{
description: "Option 3.1",
power: 5,
},
{
description: "Option 3.2",
power: 3,
},
{
description: "Option 3.3",
power: 2,
}
]
},
{
hackerCard: {
description: "Question 4",
power: 2,
},
playerCards: [
{
description: "Option 4.1",
power: 5,
},
{
description: "Option 4.2",
power: 2,
},
{
description: "Option 4.3",
power: 1,
}
]
}
];
Loading