Make Blackjack

You are tasked with making the Blackjack card game.

Development

• Run npm install to install the dependencies.
• Run npm start to open the app for development. It uses Parcel. (Feel free to use any bundler or dev setup you like)

Considerations

• You may use any npm modules you like (e.g. React, Vue, Svelte, jQuery, etc). We start you off with no structure on purpose.
• Make as many files, folders as you like. This is your project.
• Styling is bonus.
• Testing is bonus.

Requirements

• A Dealer (subsisting of a very basic AI) and a Player (the user)
• A Deal Button - when clicked deals a new game.
• New game deals two cards to the Dealer and two cards to the Player
  • Dealer has one card face up, one face down
  • Player has all cards face up
• Display visibleScore for both players at all times, keep the Dealer's actual score hidden until the end.
• A Hit Button - when clicked adds another card to the Player's hand
  • If Player's hand score reaches 21, game is over and they win, move to the END OF THE GAME
  • If Player's hand score exceeds 21, game is over and they lose/bust, move to the END OF THE GAME
• A Stand Button - when clicked Player chooses to be done receiving cards.
  • Deal out cards to the Dealers hand until Dealer's score reaches 18 or higher, move to the END OF THE GAME
• Once Dealer is done receiving cards it is the END OF THE GAME:
  • Turn Dealer's face down card to be face up.
  • If either player busts, the other player automatically wins.
  • Calculate and display final scores of both players.
  • Announce the winner.
  • In case of tie, Player wins.
• You must use the included utilities, documentation is below.
• You may modify or extend the utilities.

---

Utilities

newShuffledPokerDeck()

Create a deck of 52 shuffled cards.

import { newShuffledDeck } from "./utils";

const deck = newShuffledDeck();

Here I've mapped the deck to just the face property of each card.

deck.map((card) => card.face);
// Outputs: ??,Q♦,2♠,5♦,10♦,10♠,3♦,Q♥,3♣,K♠,A♥,J♠,6♠,
//          K♦,7♣,10♥,A♣,8♦,9♣,5♥,J♦,8♥,3♠,8♣,4♣,5♠,4♠,
//          8♠,6♦,2♣,K♣,4♥,J♥,3♥,7♦,J♣,Q♣,Q♠,K♥,9♥,A♦,
//          9♦,2♦,6♥,7♥,5♣,6♣,9♠,10♣,2♥,4♦,A♠

Note: The first card is facedown so it shows ??

The card object

A single card has more properties though:

• face - the value and suit together. If faceDown shows '??'.
• value - one of [2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A"]
• suit - one of ["♣", "♦", "♥", "♠"]
• color - 'black' or 'red'
• score - calculates the blackjack value of the card 2–11.
• visibleScore - 0 if card is faceDown, otherwise works like score.
• faceDown - boolean

Here's the first card from our deck:

deck[0];
/* 
Outputs: 
{
    "face": "??",
    "value": 7,
    "suit": "♠",
    "color": "black",
    "visibleScore": 0,
    "score": 7,
    "faceDown": true
}
*/

calculateHandScore(arrOfCards: cards[], visibleOnly: boolean = false)

Calculates the score or visibleScore for an array of cards (a hand)

import { calculateHandScore } from "./utils";

const firstThreeCards = deck.slick(0, 3);

const trueHandScore = calculateHandScore(firstThreeCards);
const visibleHandScore = calculateHandScore(firstThreeCards, true);

Note: Handles Aces properly, treating them as 11 or 1 correctly. Note: Does not score facedown cards.

So if our hand was the first three cards in the deck: ??,Q♦,2♠. The facedown card is a 7.

Then our hand's score would be 19.

And our hand's visibleScore would be 12.

That's it!

Now go make a Blackjack Game