Add interactive web visualization with Svelte

- Create Svelte + Tailwind + DaisyUI web app in web/ directory
- Add Python script to generate 96 strategy JSON files for all rule combinations
- Implement responsive layout with config sidebar and horizontal tables
- Use HSL colors for easy customization of action cell colors
- Update GitHub Actions workflow to build and deploy to GitHub Pages
- Add documentation in docs/ folder

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: hankhsu1996

.github/workflows/pages.yml

@@ -24,18 +24,31 @@ jobs:
       - name: Setup uv
         uses: astral-sh/setup-uv@v4
 
-      - name: Generate strategy tables
-        run: |
-          mkdir -p _site
-          uv run main.py --format html --output _site/index.html
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+          cache-dependency-path: web/package-lock.json
+
+      - name: Generate strategy JSON files
+        run: uv run python -m scripts.generate_strategies
+
+      - name: Install npm dependencies
+        working-directory: web
+        run: npm ci
+
+      - name: Build Svelte app
+        working-directory: web
+        run: npm run build
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: _site
+          path: web/dist
 
   deploy:
     environment:

.gitignore

@@ -10,8 +10,8 @@ dist/
 downloads/
 eggs/
 .eggs/
-lib/
-lib64/
+/lib/
+/lib64/
 parts/
 sdist/
 var/
@@ -38,6 +38,11 @@ htmlcov/
 
 # Generated files
 strategy.html
+web/public/strategies/
+
+# Web app
+web/node_modules/
+web/dist/
 
 # Linting cache
 .ruff_cache/

CLAUDE.md

@@ -2,76 +2,112 @@
 
 ## Project Overview
 
-A Python project that generates mathematically optimal blackjack basic strategy tables based on configurable game rules. The strategy is computed using Expected Value (EV) calculations.
+A Python project that generates mathematically optimal blackjack basic strategy tables based on configurable game rules. The strategy is computed using Expected Value (EV) calculations. Includes an interactive web app for visualization.
+
+**Live Demo**: https://hankhsu1996.github.io/blackjack-basic-strategy/
 
 ## Quick Start
 
+### Web App (Recommended)
+
+```bash
+# Generate strategy JSON files
+uv run python -m scripts.generate_strategies
+
+# Start dev server
+cd web && npm run dev
+```
+
+Open http://localhost:5173/blackjack-basic-strategy/
+
+### CLI
+
 ```bash
 # Text output to terminal
 uv run main.py
 
 # HTML output (color-coded)
 uv run main.py --format html
-
-# Custom output file
-uv run main.py --format html --output my-strategy.html
 ```
 
-## CLI Options
+## Project Structure
 
-| Option | Description |
-|--------|-------------|
-| `-f, --format` | Output format: `text` (default) or `html` |
-| `-o, --output` | Output file path (default: stdout for text, strategy.html for HTML) |
+```
+├── src/blackjack/       # Python strategy calculation
+│   ├── config.py        # GameConfig dataclass
+│   ├── cards.py         # Card values, probabilities
+│   ├── dealer.py        # Dealer outcome distribution
+│   ├── evaluator.py     # EV calculations
+│   ├── strategy.py      # Optimal action selection
+│   ├── tables.py        # Strategy data generation
+│   └── renderers.py     # Text/HTML renderers
+├── scripts/
+│   └── generate_strategies.py  # Generate JSON for web app
+├── web/                 # Svelte + Tailwind + DaisyUI
+│   ├── src/
+│   │   ├── App.svelte
+│   │   └── lib/
+│   │       ├── components/   # UI components
+│   │       ├── stores/       # Svelte stores
+│   │       ├── types/        # TypeScript types
+│   │       └── utils/        # Color utilities
+│   └── public/strategies/    # Pre-computed JSON (generated)
+└── main.py              # CLI entry point
+```
 
 ## Development
 
-Setup (installs dependencies automatically):
-```bash
-uv sync
-```
+### Python
 
-Run:
 ```bash
-uv run main.py
+uv sync                      # Install dependencies
+uv run main.py               # Run CLI
+uv run ruff check .          # Lint
+uv run ruff format .         # Format
 ```
 
-Lint:
-```bash
-uv run ruff check .
-```
+### Web App
 
-Format:
 ```bash
-uv run ruff format .
+cd web
+npm install                  # Install dependencies
+npm run dev                  # Dev server
+npm run build                # Production build
 ```
 
-Lint and fix auto-fixable issues:
+### Generate Strategy JSON
+
 ```bash
-uv run ruff check --fix .
+uv run python -m scripts.generate_strategies
 ```
 
-## Project Structure
+Generates 96 JSON files (6 deck options × 2⁴ boolean options) to `web/public/strategies/`.
 
-```
-src/blackjack/
-├── config.py      # GameConfig dataclass - all rule variations
-├── cards.py       # Card values, probabilities, hand_value()
-├── dealer.py      # DealerProbabilities - dealer outcome distribution
-├── evaluator.py   # EVCalculator - EV for stand/hit/double/split
-├── strategy.py    # BasicStrategy - optimal action selection
-├── tables.py      # StrategyTables - data generation
-└── renderers.py   # TextRenderer, HTMLRenderer - output formatting
-```
+## Configuration Options
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| num_decks | 6 | Number of decks (0 = infinite) |
+| dealer_hits_soft_17 | False | H17 vs S17 rule |
+| double_after_split | True | DAS allowed |
+| resplit_aces | False | RSA allowed |
+| dealer_peeks | True | Dealer checks for blackjack |
+
+## Action Codes
+
+- `S` - Stand
+- `H` - Hit
+- `D` / `Dh` / `Ds` - Double (or Hit/Stand if not allowed)
+- `P` / `Ph` - Split (or Hit if not allowed)
 
 ## Architecture
 
 ### Data Flow
 
 ```
-GameConfig → EVCalculator → BasicStrategy → StrategyTables → Renderer → Output
-                ↓                                ↓
-        DealerProbabilities              StrategyData
+GameConfig → EVCalculator → BasicStrategy → StrategyTables → JSON/Renderer
+                ↓
+        DealerProbabilities
 ```
 
 ### Key Classes
@@ -107,51 +143,34 @@ For finite decks (num_decks > 0), the calculator uses composition-dependent prob
 
 This matches real-world 4-8 deck basic strategy charts. For infinite deck (num_decks = 0), standard probabilities are used.
 
-## Configuration Options
+### Web App Stack
 
-| Parameter | Default | Description |
-|-----------|---------|-------------|
-| num_decks | 6 | Number of decks (0 = infinite) |
-| dealer_hits_soft_17 | False | H17 vs S17 rule |
-| double_after_split | True | DAS allowed |
-| resplit_aces | False | RSA allowed |
-| max_splits | 3 | Max splits (3 = up to 4 hands) |
-| blackjack_pays | 1.5 | 3:2 = 1.5, 6:5 = 1.2 |
-| dealer_peeks | True | Dealer checks for blackjack |
+- **Svelte 5** - Reactive UI framework
+- **Tailwind CSS** - Utility-first styling
+- **DaisyUI** - Component library
+- **Vite** - Build tool
 
-## Action Codes
+### Key Design Decisions
 
-- `S` - Stand
-- `H` - Hit
-- `D` - Double
-- `Dh` - Double if allowed, otherwise Hit
-- `Ds` - Double if allowed, otherwise Stand
-- `P` - Split
+1. **Pre-computed strategies**: 96 JSON files cover all rule combinations. Faster than runtime calculation.
+2. **HSL colors**: Easy to adjust whiteness/saturation for accessibility.
+3. **Responsive layout**: Desktop shows sidebar + horizontal tables; mobile uses collapsible config.
+
+## Deployment
+
+GitHub Actions automatically:
+1. Generates strategy JSON files
+2. Builds Svelte app
+3. Deploys to GitHub Pages
 
 ## Commit Format
 
 ```
 <Summary starting with verb, 50 chars or less>
 
-- First change description (wrap at 72 chars)
-- Second change description
-- 2-5 bullets based on change size
+- Bullet points (2-5)
 
 🤖 Generated with [Claude Code](https://claude.com/claude-code)
 
 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
 ```
-
-## Testing
-
-```bash
-python3 -m pytest tests/
-```
-
-## Dependencies
-
-Runtime: `tabulate` for table formatting
-
-Dev: `ruff` for linting and formatting
-
-Managed with `uv` - see https://docs.astral.sh/uv/

docs/strategy-calculation.md

@@ -0,0 +1,93 @@
+# Strategy Calculation
+
+This document explains how the blackjack basic strategy is calculated using Expected Value (EV) analysis.
+
+## Overview
+
+Basic strategy is the mathematically optimal way to play every hand in blackjack. For each combination of player hand and dealer upcard, we calculate the expected value of each possible action (stand, hit, double, split) and choose the one with the highest EV.
+
+## Expected Value Calculations
+
+### Stand EV
+
+When standing, the outcome depends entirely on the dealer's final hand:
+
+```
+EV(stand) = P(dealer busts) × 1
+          + Σ P(dealer gets X) × result(player_total vs X)
+```
+
+Where `result` is +1 (win), 0 (push), or -1 (lose).
+
+### Hit EV
+
+Hitting is recursive - after receiving a card, we again choose the best action:
+
+```
+EV(hit) = Σ P(draw card C) × [
+    if busted: -1
+    else: max(EV(stand), EV(hit))  # after adding card C
+]
+```
+
+### Double EV
+
+Doubling means doubling the bet, taking exactly one card, then standing:
+
+```
+EV(double) = 2 × Σ P(draw card C) × [
+    if busted: -1
+    else: EV(stand after adding C)
+]
+```
+
+### Split EV
+
+Splitting creates two hands, each starting with one of the paired cards:
+
+```
+EV(split) = 2 × Σ P(draw card C) × EV(optimal play of pair_card + C)
+```
+
+Special rules apply for split aces (often only one card allowed).
+
+## State Representation
+
+Instead of tracking exact card combinations, we use `(total, soft_aces)` tuples:
+
+- `total`: Current hand value (4-21)
+- `soft_aces`: Number of aces counted as 11 (0 or 1)
+
+This reduces the state space from exponential to ~40 states while preserving all information needed for optimal decisions.
+
+## Composition-Dependent Strategy
+
+For finite decks, the probability of drawing each card changes based on cards already seen:
+
+```python
+# Adjust probabilities for removed cards
+removed = player_cards + (dealer_upcard,)
+adj_probs = get_card_probabilities(num_decks, removed)
+```
+
+This creates slightly different strategies depending on the exact cards in play, matching real-world casino conditions.
+
+## Dealer Probabilities
+
+The dealer follows fixed rules (hit until 17+, stand on hard 17), so we can pre-compute outcome probabilities:
+
+```
+P(dealer final = X | upcard) for X in {17, 18, 19, 20, 21, bust}
+```
+
+For H17 rules, the dealer hits on soft 17, changing these probabilities.
+
+## Conditional on No Blackjack
+
+When the dealer peeks for blackjack (US rules), if the hand continues, we know the dealer doesn't have blackjack:
+
+```
+P(outcome | no blackjack) = P(outcome) / P(no blackjack)
+```
+
+This affects EVs when dealer shows 10 or Ace.