A single-player Blackjack game with a responsive casino-style UI, built with React, TypeScript, and Vite.
Live site: https://black-jack-sp.vercel.app/
- Opening deal in casino order (player, dealer, player, dealer) with staggered card reveal and short deal-in motion
- Betting with chip bank, min / quarter / half / max quick picks, and stepper controls
- Hit, Stand, and New round flow with win, loss, and push outcomes
- Scores from visible cards during the deal, then full hands once play starts
- Responsive layout for smaller viewports, safe-area padding, and reduced-motion support for animations
- Custom tab icon and typography (Outfit + JetBrains Mono via Google Fonts)
- React 19
- TypeScript
- Vite 6
- ESLint (flat config)
- Clone the repository and install dependencies:
git clone <your-repo-url>
cd BlackJack-SP
npm install- Start the dev server:
npm run dev- Open the URL Vite prints (usually http://localhost:5173).
| Command | Description |
|---|---|
npm run build |
Typecheck + production build |
npm run preview |
Serve the production build locally |
npm run lint |
Run ESLint |
- Choose a bet and select Deal cards.
- Use Hit or Stand when it is your turn.
- Try to beat the dealer without going over 21.
- Use New round to return to betting.
src/
├── models/
│ ├── Deck.ts # Card types, deck, shuffle, draw
│ ├── Player.ts # Hand, chips, bets, blackjackScore helper
│ ├── Dealer.ts # Dealer + shoe behavior
│ └── Game.ts # Round flow, outcomes
├── App.tsx # UI, deal animation timing
├── main.tsx
└── styles/
├── index.css # Global base styles
└── App.css # Game UI styles
public/
└── blackjack-icon.svg # Favicon
- Dealer draws while their score is below 17 (stands on 17+).
- Push returns the bet; a player win pays 1:1 on the wager (you receive your bet back plus winnings equal to the bet).
- Starting bank: 100 chips; minimum bet: 1 chip.
Contributions are welcome. Open a pull request with a short description of the change and any testing you ran.