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

Functionality of hacker card completed. #24

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

Functionality of hacker card completed. #24

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 dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,17 @@

<title>Hacker Card</title>
<script src="./scenario.js"></script>
<link rel="stylesheet" href="/assets/index.f7c0789e.css">
<link rel="stylesheet" href="/assets/index.a6374add.css">
</head>

<body class="text-primary m-0 p-0">
<div id="app" class="game-board">
<div class="hacker-area">
<h1>
<strong>HACKER CARDS</strong> <br />
Choose the card to stop hackers' attack
<div class="hacker-name"></div>
<div class="stop-hacker"></div>
</h1>

<div class="stats hacker-stats">
<div class="life-bar">
<div class="life-left hacker-color"></div>
Expand Down Expand Up @@ -70,7 +70,7 @@ <h1>
<div class="winner-section">
<div>
<span class="winner-message">You got hacked!</span>
<button class="restart" onclick="location.reload()">Play Again!</button>
<button class="restart" onclick="restartGame()">Play Again!</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
Expand Down
6 changes: 3 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
<div class="hacker-area">
<h1>
<strong>HACKER CARDS</strong> <br />
Choose the card to stop hackers' attack
<div class="hacker-name"></div>
<div class="stop-hacker"></div>
</h1>

<div class="stats hacker-stats">
<div class="life-bar">
<div class="life-left hacker-color"></div>
Expand Down Expand Up @@ -69,7 +69,7 @@ <h1>
<div class="winner-section">
<div>
<span class="winner-message">You got hacked!</span>
<button class="restart" onclick="location.reload()">Play Again!</button>
<button class="restart" onclick="restartGame()">Play Again!</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
Expand Down
170 changes: 140 additions & 30 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,28 @@
// HELLO FELLOW CODERS! WE WELCOME YOU TO THE WORLD OF JAVASCRIPT

var firstNames = ["1337", "t0xic", "phantom", "ALPhA", "v1rus", "biTe", "krypt0", "cyb3r", "Bi0", "acid", "gh0st", "Lord", "r4dical"];
var secondNames = ["PWNER", "H4X0R", "buRn", "MuX", "d3st0y3r", "phreak", "Plague", "0verride", "Chaos"];

var hackerFirstName = firstNames[Math.floor(Math.random()*firstNames.length)];
var hackerSecondName = secondNames[Math.floor(Math.random()*secondNames.length)];
var hackerName = hackerFirstName + " " + hackerSecondName;

// console.log(hackerName);
var playerName="";
let firstTime=true;
while(playerName==""){
if(firstTime){
firstTime=false;
playerName = window.prompt("Enter your First Name: ");
}
else{
playerName = window.prompt("Please enter a Valid First Name: ");
}
}
if(playerName==null) playerName="You";
else playerName = playerName.toUpperCase()[0] + playerName.toLowerCase().substring(1,playerName.length);
document.querySelector(".player-stats .name").innerHTML = playerName;

//----- 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
Expand All @@ -8,19 +31,20 @@

// 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 = hackerName + " has stole your data :(";
var playerWinnerMessage = "Bravo! you saved yourself from " + hackerName;

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

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

let index=0;
var cardSelected = false;
var playerStartLife = parseInt(playerLife);
var hackerStartLife = parseInt(hackerLife);

Expand All @@ -32,6 +56,21 @@ document.querySelector(".game-board").classList.add("before-game");

var allCardElements = document.querySelectorAll(".card");

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

var nextTurnButton = document.querySelector(".next-turn");

var hackerPhotu = document.querySelector(".hacker-stats .thumbnail");
var playerPhotu = document.querySelector(".player-stats .thumbnail");

var allPlayerCardElements = document.querySelectorAll(".player-card");
for(let i=0;i<allPlayerCardElements.length;++i){
allPlayerCardElements[i].addEventListener("click", (e)=>{
// console.log("Player card clicked");
cardClicked(allPlayerCardElements[i]);
});
}

// Adds click handler to all player card elements so that your cards are actionable


Expand All @@ -52,73 +91,144 @@ function cardClicked(cardEl) {
},500)

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

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

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

}

// Write a function that shows the power level on the hacker card
function revealHackerPower(){
hackerCard.classList.add("reveal-power");
}

// Now write a function that shows the power level on the player card
function revealPlayerPower(cardEl){
cardEl.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(cardEl){
var playerCard=cardEl;
var playerPower = playerCard.querySelector(".power").innerHTML;
var hackerPower = hackerCard.querySelector(".power").innerHTML;

// console.log(playerPower, hackerPower);
if(playerPower>hackerPower){
playerCard.classList.add("better-card");
hackerCard.classList.add("worse-card");
hackerPhotu.classList.add("ouch");
hackerLife=hackerLife-(playerPower-hackerPower);
}
else if(hackerPower>playerPower){
playerCard.classList.add("worse-card");
hackerCard.classList.add("better-card");
playerPhotu.classList.add("ouch");
playerLife=playerLife-(hackerPower-playerPower);
}
else{
playerCard.classList.add("tie-card");
hackerCard.classList.add("tie-card");
}

updateScores();

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

nextTurnButton.removeAttribute("disabled");
}

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

}
var winnerDiv = document.querySelector(".winner-message");
if(winner==="Hacker"){
winnerDiv.innerHTML = hackerWinnerMessage;
}
else if(winner==="Player"){
winnerDiv.innerHTML = playerWinnerMessage;
}

document.querySelector(".game-board").classList.remove("during-game");
document.querySelector(".game-board").classList.add("game-over");
document.querySelector(".winner-section").style.display = "flex";
}

// Write a function that starts the game
function startGame() {
document.querySelector(".hacker-name").innerHTML = hackerName + " is trying to steal your data!";
document.querySelector(".stop-hacker").innerHTML = "Choose the card to stop " + hackerName + "'s attack"

document.querySelector(".hacker-stats .name").innerHTML = hackerFirstName;
document.querySelector(".player-stats .name").innerHTML = playerName;

var gameBoard = document.querySelector(".game-board");
gameBoard.classList.remove("before-game");
gameBoard.classList.add("during-game");
playTurn();
}

// Write a function that Plays one turn of the game
function playTurn() {
cardSelected = false;
nextTurnButton.setAttribute("disabled", true);
document.querySelector(".game-board").classList.remove("card-selected");

hackerPhotu.classList.remove("ouch");
playerPhotu.classList.remove("ouch");

for(let i of allCardElements) {
i.classList.remove("reveal-power", "showCard", "worse-card", "better-card", "played-card");
}

hackerCard.querySelector(".text").innerHTML = scenarios[index].hackerCard.description;
hackerCard.querySelector(".power").innerHTML = scenarios[index].hackerCard.power;
hackerCard.classList.add("prepared");

for(let i=0;i<allPlayerCardElements.length;++i){
allPlayerCardElements[i].querySelector(".text").innerHTML = scenarios[index].playerCards[i].description;
allPlayerCardElements[i].querySelector(".power").innerHTML = scenarios[index].playerCards[i].power;
allPlayerCardElements[i].classList.add("prepared");
}
index=(index+1)%scenarios.length;

setTimeout(function() {
revealCards();
}, 100);
}

// Finally write the function that reveals the cards. Use
function revealCards(){
for(let i=0; i<allCardElements.length; ++i) {
allCardElements[i].classList.add("showCard");
}
}

// Now write a function that starts the game over from scratch
function restartGame(){

location.reload();
}

// 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(){
// console.log(playerLife, hackerLife);

// Here these update life totals for each player
if(playerLife<0) playerLife=0;
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;
}
document.querySelector(".player-stats .life-left").style.height = playerPercent + "%";

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

}



// Write a function that Plays one turn of the game
function playTurn() {

}

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

if(hackerLife<0) hackerLife=0;
document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife;
var hackerPercent = hackerLife / hackerStartLife * 100;
document.querySelector(".hacker-stats .life-left").style.height = hackerPercent + "%";
}
43 changes: 43 additions & 0 deletions scenario.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ var scenarios = [
]
},
{
// 2
hackerCard : {
description : "I sent a fake email from your bank asking for your account details.",
power : 3,
Expand All @@ -48,4 +49,46 @@ var scenarios = [
}
]
},
{
// 3
hackerCard : {
description : "I sent a fake link via message claiming for a lottery of 20 lakhs INR.",
power : 4,
},
playerCards : [
{
description : "I opened the link but didnt fill the details.",
power : 3,
},
{
description : "I ignored the message as I didnt filled for any lottery.",
power : 5,
},
{
description : "I sent the details asked by him!",
power : 1,
}
]
},
{
// 4
hackerCard : {
description : "I sent an malicious software claiming free movies present in Netflix, amazon prime and hotstar.",
power : 3,
},
playerCards : [
{
description : "I use Telegram 😎.",
power : 4,
},
{
description : "I thought for a while then installed it.",
power : 2,
},
{
description : "I installed the app as I am a binge watcher.",
power : 1,
}
]
},
];
6 changes: 6 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,12 @@ h1 strong {
font-style: normal;
}

.hacker-name{
font-size: 22px;
font-weight: 400;
font-style: italic;
}

.hacker-area,
.player-area {
position: relative;
Expand Down