diff --git a/main.js b/main.js index f242959..2b19746 100644 --- a/main.js +++ b/main.js @@ -14,8 +14,8 @@ 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 WON BUT ARE NOT HONEST "; +var playerWinnerMessage = "KUDOS YOU WON IT"; // ---------------Game code starts here ---------------// @@ -24,8 +24,24 @@ var playerWinnerMessage = "Write the message here"; var playerStartLife = parseInt(playerLife); var hackerStartLife = parseInt(hackerLife); +// get the hacker card and player card dom elements +const hackercard = document.querySelector(".hacker-card"); +const playerCardsarr = Array.from(document.querySelectorAll(".player-card")); +console.log(hackercard); + +const nextturnbutton = document.querySelector(".next-turn"); + +let cardSelected = false; +let turn = 0; + +const lifeCounts = Array.from(document.querySelectorAll(".life-total")); +lifeCounts[0].innerText = hackerStartLife; +lifeCounts[1].innerText = playerStartLife; + + // we will declare the functions for you and you will complete those -updateScores(); +updateScores(e); + // 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"); @@ -33,7 +49,14 @@ 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 +playerCardsarr.forEach((el) => { + console.log("I'm inside the playerCards eventHandler Adding forEach"); + el.addEventListener("click", () => { + console.log("You just clicked a card!"); + cardClicked(el); + }); +}); // An example of a function that controls what would happen when a card is clicked @@ -45,6 +68,7 @@ function cardClicked(cardEl) { cardEl.classList.add("played-card"); document.querySelector(".game-board").classList.add("card-selected"); + console.log("yupp! you just clicked a card"); // Yes JS is cool and this would allow you to wait 500ms before revealing the hacker power setTimeout(function(){ @@ -52,39 +76,113 @@ function cardClicked(cardEl) { },500) setTimeout(function(){ - revealPlayerPower(); + revealPlayerPower(cardEl); },800) - setTimeout(function(){ + setTimeout(function(cardEl){ compareCards(); }, 1400); } // Now write a function that shows the power level on the player card -function revealPlayerPower(){ - +function revealPlayerPower(cardEl){ + cardEl.classList.toggle("show-power"); } // Write a function that shows the power level on the hacker card function revealHackerPower(){ - + hackercard.classList.toggle("show-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(cardchosenbyuser){ + let winner; + const playerPower = parseInt(cardchosenbyuser.lastElementChild.innerText); + const hackerPower = parseInt(hackercard.lastElementChild.innerText); + console.log(playerPower); + + if (playerPower > hackerPower) { + --hackerLife; + lifeCounts[0].innerText = hackerLife; + hackercard.classList.toggle("worse-card"); + cardchosenbyuser.classList.toggle("better-card"); + winner = 1; + } else { + --playerLife; + lifeCounts[1].innerText = playerLife; + hackercard.classList.toggle("better-card"); + cardchosenbyuser.classList.toggle("worse-card"); + winner = 0; + } + + lifeCounts[0].innerText = hackerLife; + lifeCounts[1].innerText = playerLife; + updateScores(); + isGameOver(); + nextTurn(cardchosenbyuser, winner); +} +// Function to bootstrap the next turn process +function nextTurn(cardchosenbyuser, winner) { + console.log("Inside the nextTurn function"); + console.log(nextturnbutton); + + setTimeout(() => { nextturnbutton.style.display = "block"; }, 2000); + + setTimeout(() => { + hackercard.classList.toggle("showCard"); + playerCardsarr.forEach((el) => { + el.classList.toggle("showCard"); + }); + + if (winner === 0) { // hacker won + cardSelectedByUser.classList.toggle("worse-card"); + hackercard.classList.toggle("better-card"); + } else { + cardSelectedByUser.classList.toggle("better-card"); + hackercard.classList.toggle("worse-card"); + } + + cardchosenbyuser.classList.toggle("played-card"); + cardchosenbyuser.classList.toggle("show-power"); + hackercard.classList.toggle("reveal-power"); + + // turning off the global cardSelected, and in the DOM + cardSelected = false; + document.querySelector(".game-board").classList.toggle("card-selected"); +}, 1500); } //Use conditional statements and complete the function that shows the winner message -function gameOver(winner) { - +function isGameOver(winner) { + if ((playerLife <= 0) || (hackerLife <= 0)) { + const winnerSectionDiv = document.querySelector(".winner-section"); + console.log(winnerSectionDiv); + winnerSectionDiv.style.display = "block"; + + nextturnbutton.style.opacity = 0; + + const winnermessagediv = document.querySelector(".winner-message"); + if (playerLife <= 0) { + winnermessagediv.innerText = hackerWinnerMessage; + } else { + winnermessagediv.innerText = playerWinnerMessage; + } + } } // Write a function that starts the game function startGame() { - +console.log(scenarios); +// Grab the start button and toggle it off +const startBtn = document.querySelector(".start-game"); +console.log(startBtn); +startBtn.setAttribute("disabled", "true"); + +// Play the first turn of the game +playTurn(); } @@ -108,17 +206,42 @@ function updateScores(){ document.querySelector(".player-stats .life-left").style.height = playerPercent + "%"; // Now you write the code to update the hacker lifebar + document.querySelector(".hacker-stats .life-total").innerHTML = hackerLife; + let 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 playTurn() { -} + let turnNumber = turn % 5 -// Finally write the function that reveals the cards. Use -function revealCards(){ + nextturnbutton.style.display = "none"; + // show the hacker card and player cards and sync all the info with the DOM + hackercard.firstElementChild.innerText = scenarios[turnNumber].hackerCard.description; + console.log(hackercard.lastElementChild); + hackercard.lastElementChild.innerText = scenarios[turnNumber].hackerCard.power; -} \ No newline at end of file + hackercard.classList.toggle("showCard"); + playerCardsarr.forEach((el) => { + el.classList.toggle("showCard"); + + console.log("I'm inside the playerCards forEach"); + + }); + + + + playerCardsarr[0].firstElementChild.innerText = scenarios[turnNumber].playerCards[0].description; + playerCardsarr[1].firstElementChild.innerText = scenarios[turnNumber].playerCards[1].description; + playerCardsarr[2].firstElementChild.innerText = scenarios[turnNumber].playerCards[2].description; + + playerCardsarr[0].lastElementChild.innerText = scenarios[turnNumber].playerCards[0].power; + playerCardsarr[1].lastElementChild.innerText = scenarios[turnNumber].playerCards[1].power; + playerCardsarr[2].lastElementChild.innerText = scenarios[turnNumber].playerCards[2].power; +} diff --git a/scenario.js b/scenario.js index f926d60..9c70ebe 100644 --- a/scenario.js +++ b/scenario.js @@ -48,4 +48,64 @@ var scenarios = [ } ] }, -]; \ No newline at end of file + { + hackerCard : { + description : "I sent an unknonwn link with a catchy news", + power: 4, + }, + playerCards : [ + { + description : "I always open random links", + power:2, + }, + { + description: "I never open unknown links", + power: 5, + }, + { + description : "I would love to see what the news is", + power: 3 + } + ] + }, + { + hackerCard : { + description : "I made a website for you to download free games", + power: 3, + }, + playerCards : [ + { + description : "I only purchase legitimate games", + power:5, + }, + { + description: "woo hoo! Free game!", + power: 1, + }, + { + description : "will check my usual piracy website if it has the game for free", + power: 3 + } + ] + }, + { + hackerCard : { + description : "i have sent u a mail which will destroy your computer if u dont pay the price", + power: 4, + }, + playerCards : [ + { + description : "I will not pay the price let it be ", + power:5, + }, + { + description: "okay I'm ready to pay", + power: 3, + }, + { + description : "I'm ready to destroy u too", + power: 5 + } + ] + } +];