Countdown Numbers Game Solver

A TypeScript solver for the Countdown numbers game.

The Game

In the Countdown numbers game, you are given six integers and a target number. Using basic arithmetic operations (+, -, *, /), combine the six numbers to reach the target. Each number can only be used once, and all intermediate results must be positive integers.

Website

A beautiful web interface is available in the website/ directory, built with TypeScript and Vite.

🌐 Live Demo: The website is automatically deployed to my website.

Features:

• Site header and footer with breadcrumb navigation (johnsy.com / Countdown)
• Green-on-black display for the target
• Six blue number cards for input
• Keyboard navigation with Tab and Enter
• Solution display with step-by-step calculations
• Solutions grouped by number of steps (fewest first)
• Intermediate results highlighted with yellow background
• Responsive design for mobile and desktop
• Query parameter support for pre-filling values and auto-solving
• Shareable permalinks to individual solutions

Query Parameters

You can pre-fill the target and numbers using URL query parameters:

Comma-separated format:

?target=355&numbers=3,3,5,6,8,100

Individual parameters:

?target=355&n1=3&n2=3&n3=5&n4=6&n5=8&n6=100

When all fields (target and 6 numbers) are provided via query parameters, the solver runs automatically.

Sharing Solutions

Each solution has a "Share" button that makes it easy to share solutions:

• On Apple devices (iOS/macOS), it opens the native share sheet
• On other devices, it copies the permalink to your clipboard

The permalink includes:

• Query parameters with the target and numbers
• An anchor link to the specific solution (e.g., #solution-123456)

When someone visits the permalink:

1. The form is automatically populated with the numbers
2. The solver runs automatically
3. The page scrolls to and highlights the specific solution

This makes it easy to share interesting solutions with others!

Running the Website

pnpm run dev      # Start development server
pnpm run build    # Build for production
pnpm run preview  # Preview production build

Lighthouse

Run Lighthouse (performance, accessibility, best-practices, SEO) against the production preview. Build first, then run. Set BASE_URL to match your deploy path if needed.

pnpm run build && pnpm run lighthouse

The report is written to lighthouse-report.json. The script requires all category scores to be 100 or it exits with an error.

Development

Prerequisites

This project uses Mise to manage tool versions (Node.js and pnpm).

Installing Mise

macOS/Linux:

curl https://mise.run | sh

Homebrew:

brew install mise

Other installation methods: See mise.jdx.dev

After installation, activate Mise in your shell:

# For bash
echo 'eval "$(mise activate bash)"' >> ~/.bashrc

# For zsh
echo 'eval "$(mise activate zsh)"' >> ~/.zshrc

# Then restart your shell or run:
source ~/.bashrc  # or ~/.zshrc

Setup

1. Install tools (Node.js and pnpm):

   mise install

2. Install dependencies:

   pnpm install

3. Install Playwright browsers (required for OG image generation):

   pnpm exec playwright install --with-deps chromium

That's it! Mise will automatically use the correct versions of Node.js (20) and pnpm (10) as specified in .mise.toml.

Note: The Open Graph preview image is generated automatically during the build process by screenshotting the actual website using Playwright.

Running Tests

pnpm test              # Run tests once
pnpm run test:watch    # Run tests in watch mode
pnpm run test:coverage # Run tests with coverage report

Code Quality

pnpm run type-check    # Check TypeScript types
pnpm run lint          # Run ESLint
pnpm run format        # Format code with Prettier
pnpm run format:check  # Check if code is formatted
pnpm run precommit     # Run all checks (format, lint, type-check, test)

CI/CD

A single CI/CD workflow runs on push, pull request, and workflow_dispatch:

1. build – Install deps, build website (with Playwright for OG image), cache website/dist.
2. lint-test – Restore cache (or build if miss), format check, lint, type-check, tests.
3. lighthouse – Restore cache (or build if miss), run Lighthouse (performance, accessibility, best-practices, SEO); must score 100 in all.
4. build-for-deploy – On main only, after build + lint-test + lighthouse succeed: rebuild and upload Pages artifact.
5. deploy – Deploy to GitHub Pages.

• Dependabot: Keeps dependencies up to date

  • Weekly updates for npm packages and GitHub Actions (labels: dependencies)

  • Groups minor and patch updates; PRs use merge commits. The auto-merge workflow enables merge when CI passes. Require the CI/CD status checks on main via branch protection, e.g. using the gh CLI:

    ./scripts/set-branch-protection.sh

    This requires the build, lint-test, and lighthouse checks to pass before merging (including Dependabot PRs).

License

MIT