diff --git a/index.html b/index.html index 5d0de9e..af771bd 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,12 @@ * { box-sizing: border-box; } + .hidden { + display: none; + } + .show { + display: inline; + } body { font-family: sans-serif; @@ -26,13 +32,14 @@ } #container { - background-color: pink; + background-color: rgb(22, 147, 68); margin: 40px auto; max-width: 800px; padding: 38px 31px; } input { + background-color: rgb(92, 204, 133); font-size: 21px; line-height: 33px; margin: 0 0 23px 0; @@ -48,7 +55,7 @@ } #output-div { - background-color: lightgrey; + background-color: rgb(92, 204, 133); margin: 20px auto; padding: 20px; width: 100%; @@ -59,19 +66,24 @@ -

Basics! 🚀

+

♠ ♥️ HELLO! Black Jack! ♦️ ♣️

Input:

- +
- + + + +

Output:

-
+
+ Welcome to Sern's Cards! Click the submit button to get started! +
@@ -83,18 +95,63 @@

Basics! 🚀

var button = document.querySelector("#submit-button"); // When the submit button is clicked, access the text entered by the user in the input field // And pass it as an input parameter to the main function as defined in script.js + button.addEventListener("click", function () { // Set result to input value - var input = document.querySelector("#input-field"); + + // Store the output of main() in a new variable + var result = main(); + + // Display result in output element + var output = document.querySelector("#output-div"); + + output.innerHTML = result; + }); + + // new added button + + var standButton = document.querySelector("#stand-button"); + + standButton.addEventListener("click", function () { + // Set result to input value + + // Store the output of main() in a new variable + var result = showResults(); + + // Display result in output element + var output = document.querySelector("#output-div"); + + output.innerHTML = result; + }); + + // new added button 2 + + var hitButton = document.querySelector("#hit-button"); + + hitButton.addEventListener("click", function () { + // Set result to input value + // Store the output of main() in a new variable - var result = main(input.value); + var result = playerDraw(); // Display result in output element var output = document.querySelector("#output-div"); + output.innerHTML = result; + }); + + var refreshButton = document.querySelector("#refresh-button"); + + refreshButton.addEventListener("click", function () { + // Set result to input value + + // Store the output of main() in a new variable + var result = refreshPage(); - // Reset input value - input.value = ""; + // Display result in output element + var output = document.querySelector("#output-div"); + + output.innerHTML = result; }); diff --git a/script.js b/script.js index bbe8a29..0a3b966 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,535 @@ -var main = function (input) { - var myOutputValue = 'hello world'; - return myOutputValue; +var makeDeck = function () { + // Initialise an empty deck array + var cardDeck = []; + // Initialise an array of the 4 suits in our deck. We will loop over this array. + var suits = ["hearts ❤️", "diamonds ♦️", "clubs ♣️", "spades ♠️"]; + + // Loop over the suits array + var suitIndex = 0; + while (suitIndex < suits.length) { + // Store the current suit in a variable + var currentSuit = suits[suitIndex]; + + // Loop from 1 to 13 to create all cards for a given suit + // Notice rankCounter starts at 1 and not 0, and ends at 13 and not 12. + // This is an example of a loop without an array. + var rankCounter = 1; + while (rankCounter <= 13) { + // By default, the card name is the same as rankCounter + var cardName = rankCounter; + + // If rank is 1, 11, 12, or 13, set cardName to the ace or face card's name + if (cardName == 1) { + cardName = "Ace"; + } else if (cardName == 11) { + cardName = "Jack"; + } else if (cardName == 12) { + cardName = "Queen"; + } else if (cardName == 13) { + cardName = "King"; + } + + // Create a new card with the current name, suit, and rank + var card = { + name: cardName, + suit: currentSuit, + rank: rankCounter, + }; + + // Add the new card to the deck + cardDeck.push(card); + + // Increment rankCounter to iterate over the next rank + rankCounter += 1; + } + + // Increment the suit index to iterate over the next suit + suitIndex += 1; + } + + // Return the completed card deck + return cardDeck; +}; + +// Get a random index ranging from 0 (inclusive) to max (exclusive). +var getRandomIndex = function (max) { + return Math.floor(Math.random() * max); +}; + +// Shuffle the elements in the cardDeck array +var shuffleCards = function (cardDeck) { + // Loop over the card deck array once + var currentIndex = 0; + while (currentIndex < cardDeck.length) { + // Select a random index in the deck + var randomIndex = getRandomIndex(cardDeck.length); + // Select the card that corresponds to randomIndex + var randomCard = cardDeck[randomIndex]; + // Select the card that corresponds to currentIndex + var currentCard = cardDeck[currentIndex]; + // Swap positions of randomCard and currentCard in the deck + cardDeck[currentIndex] = randomCard; + cardDeck[randomIndex] = currentCard; + // Increment currentIndex + currentIndex = currentIndex + 1; + } + + // Return the shuffled deck + return cardDeck; +}; + +// Shuffle the deck and save it in a new variable shuffledDeck +// to communicate that we have shuffled the deck. +var shuffledDeck = shuffleCards(makeDeck()); + +var dealerTotal = 0; +var playerTotal = 0; +var dealerOutput = "Dealer Hand:
"; +var playerOutput = "Player Hand:
"; +var dealerHands = []; +var playerHands = []; +var dealerAceCount = 0; +var playerAceCount = 0; +var myImage = ""; + +var main = function () { + // Both dealer and palyer draw 2 cards from the top of the deck + + for (var i = 0; i < 2; i++) { + // dealer draw card and put it into "dealerHands" + var dealerCard = shuffledDeck.pop(); + if (dealerCard.rank == 1) { + dealerAceCount++; + } + var dealerPicked = { + name: dealerCard.name, + suit: dealerCard.suit, + rank: dealerCard.rank, + }; + + dealerHands.push(dealerPicked); + + // record the name and suit of the draw into dealerOutput + dealerOutput = + dealerOutput + `${dealerCard.name} of ${dealerCard.suit}
`; + + // This is to determine whether the dealer has a BlackJack; if not, then calculate the sum of ranks + if ( + (dealerCard.rank == 1 && dealerTotal == 10) || + (dealerCard.rank >= 10 && dealerTotal == 1) + ) { + dealerTotal = "blackJack"; + dealerOutput = dealerOutput + `Dealer had a Black Jack!! 🎉🎉
`; + } else if (dealerCard.rank < 10) { + dealerTotal = dealerTotal + dealerCard.rank; + } else { + dealerTotal = dealerTotal + 10; + } + // (From here, the codes below was repeated as above for playerHands) + // player draw card and put it into "playerHands" + var playerCard = shuffledDeck.pop(); + if (playerCard.rank == 1) { + playerAceCount++; + } + var playerPicked = { + name: playerCard.name, + suit: playerCard.suit, + rank: playerCard.rank, + }; + + playerHands.push(playerPicked); + + // record the name and suit of the draw into playerOutput + playerOutput = + playerOutput + `${playerCard.name} of ${playerCard.suit}
`; + + // This is to determine whether the player has a BlackJack; if not, then calculate the sum of ranks + if ( + (playerCard.rank == 1 && playerTotal == 10) || + (playerCard.rank >= 10 && playerTotal == 1) + ) { + playerTotal = "blackJack"; + playerOutput = playerOutput + `Player had a Black Jack!! 🎉🎉
`; + } else if (playerCard.rank < 10) { + playerTotal = playerTotal + playerCard.rank; + } else { + playerTotal = playerTotal + 10; + } + } + + // If there is an Ace in dealer's or player's hand, the Ace will be counted as 11 + + if (playerAceCount > 0 || dealerAceCount > 0) { + if (playerAceCount > 0 && playerTotal != "blackJack") { + playerTotal = playerTotal + 10; + } else if (dealerAceCount > 0 && dealerTotal != "blackJack") { + dealerTotal = dealerTotal + 10; + } + } + + // to ensure dealer and player hands total are greater than 15, otherwise draw a card + if (dealerTotal <= 16 || playerTotal <= 16) { + for (var a = 0; dealerTotal <= 16; a++) { + dealerCard = shuffledDeck.pop(); + if (dealerCard.rank == 1) { + dealerAceCount++; + } + var dealerPicked = { + name: dealerCard.name, + suit: dealerCard.suit, + rank: dealerCard.rank, + }; + + dealerHands.push(dealerPicked); + + console.log("dealerCard"); + console.log(dealerCard); + + dealerOutput = + dealerOutput + `${dealerCard.name} of ${dealerCard.suit}
`; + if (dealerCard.rank == 1) { + dealerTotal = dealerTotal + 11; + } else if (dealerCard.rank < 10) { + dealerTotal = dealerTotal + dealerCard.rank; + } else { + dealerTotal = dealerTotal + 10; + } + } + for (var b = 0; playerTotal <= 16; b++) { + playerCard = shuffledDeck.pop(); + if (playerCard.rank == 1) { + playerAceCount++; + } + var playerPicked = { + name: playerCard.name, + suit: playerCard.suit, + rank: playerCard.rank, + }; + + playerHands.push(playerPicked); + + console.log("playerCard"); + console.log(playerCard); + + playerOutput = + playerOutput + `${playerCard.name} of ${playerCard.suit}
`; + if (playerCard.rank == 1) { + playerTotal = playerTotal + 11; + } else if (playerCard.rank < 10) { + playerTotal = playerTotal + playerCard.rank; + } else { + playerTotal = playerTotal + 10; + } + } + } + + // to mark the bust BUT FOR THOSE WHO HAS ACE IN HAND, -10 points + if (dealerTotal > 21 || playerTotal > 21) { + if ( + dealerTotal > 21 && + dealerAceCount > 0 && + playerTotal > 21 && + playerAceCount > 0 + ) { + dealerTotal = dealerTotal - 10; + playerTotal = playerTotal - 10; + } else if (dealerTotal > 21 && dealerAceCount > 0) { + dealerTotal = dealerTotal - 10; + } else if (playerTotal > 21 && playerAceCount > 0) { + playerTotal = playerTotal - 10; + } + } + + // to ensure dealer and player hands total are greater than 15 AFTER ALL ACE WAS COUNTED AS 1 + if (dealerTotal <= 16 || playerTotal <= 16) { + for (var a = 0; dealerTotal <= 16; a++) { + dealerCard = shuffledDeck.pop(); + + var dealerPicked = { + name: dealerCard.name, + suit: dealerCard.suit, + rank: dealerCard.rank, + }; + + dealerHands.push(dealerPicked); + + console.log("dealerCard"); + console.log(dealerCard); + + dealerOutput = + dealerOutput + `${dealerCard.name} of ${dealerCard.suit}
`; + if (dealerCard.rank < 10) { + dealerTotal = dealerTotal + dealerCard.rank; + } else { + dealerTotal = dealerTotal + 10; + } + } + for (var b = 0; playerTotal <= 16; b++) { + playerCard = shuffledDeck.pop(); + + var playerPicked = { + name: playerCard.name, + suit: playerCard.suit, + rank: playerCard.rank, + }; + + playerHands.push(playerPicked); + + console.log("playerCard"); + console.log(playerCard); + + playerOutput = + playerOutput + `${playerCard.name} of ${playerCard.suit}
`; + if (playerCard.rank < 10) { + playerTotal = playerTotal + playerCard.rank; + } else { + playerTotal = playerTotal + 10; + } + } + } + + // to mark the bust AFTER ALL ACE WAS COUNTED AS 1 + if (dealerTotal > 21 || playerTotal > 21) { + if (dealerTotal > 21 && playerTotal <= 21) { + dealerOutput = dealerOutput + `Dealer busted. 😢
`; + } else if (playerTotal > 21 && dealerTotal <= 21) { + playerOutput = playerOutput + `Player busted. 😢
`; + } else if (dealerTotal > 21 && playerTotal > 21) { + dealerOutput = dealerOutput + `Dealer busted. 😢
`; + playerOutput = playerOutput + `Player busted. 😢
`; + } + } + + // Construct an output string to communicate which cards were drawn + + myOutputValue = dealerOutput + "
" + playerOutput; + + // Compare computer and player cards by rank attribute + // If computer card rank is greater than player card rank, computer wins + + // determine whether the game is over due to black jack or busted. + if (playerTotal == "blackJack") { + myOutputValue = myOutputValue + `
Player wins by Black Jack.`; + document.getElementById("submit-button").className = "hidden"; + document.getElementById("refresh-button").className = "show"; + myImage = + ''; + } else if (dealerTotal == "blackJack") { + myOutputValue = myOutputValue + `
Dealer wins by Black Jack.`; + document.getElementById("submit-button").className = "hidden"; + document.getElementById("refresh-button").className = "show"; + myImage = + ''; + } else if (dealerTotal > 21 && playerTotal > 21) { + myOutputValue = myOutputValue + "
Both dealer and player busted. 😢 😢 "; + document.getElementById("submit-button").className = "hidden"; + document.getElementById("refresh-button").className = "show"; + myImage = + ''; + } else if (dealerTotal > 21 && playerTotal <= 21) { + myOutputValue = myOutputValue + "
Player wins!"; + document.getElementById("submit-button").className = "hidden"; + document.getElementById("refresh-button").className = "show"; + myImage = + ''; + } else if (playerTotal > 21 && dealerTotal <= 21) { + myOutputValue = myOutputValue + "
Dealer wins!"; + document.getElementById("submit-button").className = "hidden"; + document.getElementById("refresh-button").className = "show"; + myImage = + ''; + } else { + //if the game is not over due to black jack or bust, ask player does he want to hit or stand? + // Also, reveal one of the dealer's hand to the player + var revealDealerCard = dealerHands.pop(); + myOutputValue = + playerOutput + + `
Now your hand totals is ${playerTotal}.
Would you like to draw another card?
For your information, one of the dealer's card is ${revealDealerCard.name} of ${revealDealerCard.suit}
Please click the "Hit" button for another card or click the "Stand" button for the results.`; + dealerHands.push(revealDealerCard); + + document.getElementById("hit-button").className = "show"; + document.getElementById("stand-button").className = "show"; + document.getElementById("submit-button").className = "hidden"; + + myImage = + ''; + } + console.log("dealerHands"); + console.log(dealerHands); + console.log("playerHands"); + console.log(playerHands); + console.log("dealerTotal"); + console.log(dealerTotal); + console.log("playerTotal"); + console.log(playerTotal); + console.log("playerAceCount"); + console.log(playerAceCount); + console.log("dealerAceCount"); + console.log(dealerAceCount); + // Return the fully-constructed output string + + return myOutputValue + "
" + myImage; +}; + +var playerDraw = function () { + var dealerIndex = 0; + var playerIndex = 0; + var dealerOutput = "Dealer Hand:
"; + var playerOutput = "Player Hand:
"; + + // calculate the total of dealerHands and record the name and suit + while (dealerIndex < dealerHands.length) { + var dealerCurrent = dealerHands[dealerIndex]; + dealerOutput = + dealerOutput + `${dealerCurrent.name} of ${dealerCurrent.suit}
`; + if (dealerCurrent.rank < 10) { + dealerTotal = dealerTotal + dealerCurrent.rank; + } else { + dealerTotal = dealerTotal + 10; + } + dealerIndex++; + } + + // calculate the total of playerHands and record the name and suit + while (playerIndex < playerHands.length) { + var playerCurrent = playerHands[playerIndex]; + playerOutput = + playerOutput + `${playerCurrent.name} of ${playerCurrent.suit}
`; + if (playerCurrent.rank < 10) { + playerTotal = playerTotal + playerCurrent.rank; + } else { + playerTotal = playerTotal + 10; + } + playerIndex++; + } + + //Draw an extra card for playerHands as the player's request + var playerCard = shuffledDeck.pop(); + + var playerPicked = { + name: playerCard.name, + suit: playerCard.suit, + rank: playerCard.rank, + }; + + playerHands.push(playerPicked); + + if (playerCard.rank < 10) { + playerTotal = playerTotal + playerCard.rank; + } else { + playerTotal = playerTotal + 10; + } + + playerOutput = + playerOutput + `${playerCurrent.name} of ${playerCurrent.suit}
`; + if (playerCurrent.rank < 10) { + playerTotal = playerTotal + playerCurrent.rank; + } else { + playerTotal = playerTotal + 10; + } + + var myOutputValue = dealerOutput + "
" + playerOutput; + + // to determine whether player busted due to the extra card, otherwise compare the dealerTotal and playerTotal + if (playerTotal > 21) { + myOutputValue = myOutputValue + "Player busted. 😢

Dealer wins."; + myImage = + ''; + } else if (dealerTotal > playerTotal) { + // Add conditional-dependent text to the output string + myOutputValue = myOutputValue + "
Dealer wins."; + myImage = + ''; + // Else if computer card rank is less than player card rank, player wins + } else if (dealerTotal < playerTotal) { + myOutputValue = myOutputValue + "
Player wins!"; + myImage = + ''; + // Otherwise (i.e. ranks are equal), it's a tie + } else { + myOutputValue = myOutputValue + "
It's a tie."; + myImage = + ''; + } + + document.getElementById("refresh-button").className = "show"; + document.getElementById("hit-button").className = "hidden"; + document.getElementById("stand-button").className = "hidden"; + // Return the fully-constructed output string + + return myOutputValue + "
" + myImage; +}; + +var showResults = function () { + var dealerIndex = 0; + var playerIndex = 0; + var dealerOutput = "Dealer Hand:
"; + var playerOutput = "Player Hand:
"; + + // calculate the total of dealerHands and record the name and suit + while (dealerIndex < dealerHands.length) { + var dealerCurrent = dealerHands[dealerIndex]; + dealerOutput = + dealerOutput + `${dealerCurrent.name} of ${dealerCurrent.suit}
`; + if (dealerCurrent.rank < 10) { + dealerTotal = dealerTotal + dealerCurrent.rank; + } else { + dealerTotal = dealerTotal + 10; + } + dealerIndex++; + } + + // calculate the total of playerHands and record the name and suit + while (playerIndex < playerHands.length) { + var playerCurrent = playerHands[playerIndex]; + playerOutput = + playerOutput + `${playerCurrent.name} of ${playerCurrent.suit}
`; + if (playerCurrent.rank < 10) { + playerTotal = playerTotal + playerCurrent.rank; + } else { + playerTotal = playerTotal + 10; + } + playerIndex++; + } + + var myOutputValue = dealerOutput + "
" + playerOutput; + + // to determine whether player busted due to the extra card, otherwise compare the dealerTotal and playerTotal + if (dealerTotal > playerTotal) { + // Add conditional-dependent text to the output string + myOutputValue = myOutputValue + "
Dealer wins."; + myImage = + ''; + // Else if computer card rank is less than player card rank, player wins + } else if (dealerTotal < playerTotal) { + myOutputValue = myOutputValue + "
Player wins!"; + myImage = + ''; + // Otherwise (i.e. ranks are equal), it's a tie + } else { + myOutputValue = myOutputValue + "
It's a tie."; + myImage = + ''; + } + + document.getElementById("refresh-button").className = "show"; + document.getElementById("hit-button").className = "hidden"; + document.getElementById("stand-button").className = "hidden"; + + console.log("dealerHands"); + console.log(dealerHands); + console.log("playerHands"); + console.log(playerHands); + console.log("playerAceCount"); + console.log(playerAceCount); + console.log("dealerAceCount"); + console.log(dealerAceCount); + + // Return the fully-constructed output string + return myOutputValue + "
" + myImage; +}; + +var refreshPage = function () { + window.location.reload(); + document.getElementById("submit-button").className = "show"; };