Canfield — Demon Patience

A fully playable Canfield (Demon Patience) solitaire card game in the browser, styled with glass-blue metallic UI reminiscent of JRPG menus, complete with an interactive smoky particle field that reacts to your interactions.

Features

• Full Canfield rules: Reserve auto-fill, base-rank foundations with wrap-around, alternating-color tableau with King-on-Ace wrap, group moves.
• Unlimited redeals: Draw from stock as many times as you need.
• Smooth drag-and-drop: Grab and move card sequences with real-time visual feedback.
• Tap-to-foundation: Single tap sends eligible cards straight up.
• Undo, Hint, Auto-finish: Full control over your moves.
• Reactive particles: A smoky, swirling background that bursts and flows in response to card interactions, button clicks, and deals.
• XP-style win cascade: Bouncing cards with trails when you clear all 52.
• Keyboard shortcuts: N new game, U undo, H hint, Space to deal.
• Responsive design: Scales to mobile and desktop.

How to Play

Setup

The game begins with:

• Reserve (13 cards on the left): Only the top card is playable.
• Stock (face-down deck): Click to draw 3 cards at a time (toggle to 1-card draw via the button).
• Waste (drawn cards): The top card is playable.
• Foundations (top right, 4 piles): The first card dealt determines the base rank for all foundations. Build up by suit, wrapping around (e.g., base 4 → 4, 5, 6, …, K, A, 2, 3).
• Tableau (4 columns): Build down by alternating color, with King wrapping onto Ace (e.g., 5 of hearts on 6 of clubs, then 4 of hearts, etc.).

Rules

• Foundations: Build up by suit starting from the base rank, wrapping around (K→A→2, etc.). Complete a foundation by reaching back to the rank before your base (all 13 cards).
• Tableau: Build down by alternating color; King can go on Ace. You can drag a valid sequence (run) as a group.
• Reserve: When a tableau column becomes empty, it automatically fills from the reserve's top card.
• Stock: Draw 3 (or 1) cards at a time. When the stock is empty, click the ↻ button to recycle the waste back to stock. Repeat infinitely.

Controls

• Drag a card/sequence onto a valid destination (foundation or tableau).
• Tap/click a single card to auto-send it to a foundation if it fits.
• New Game: Deal a fresh 52-card shuffle.
• Undo: Rewind your last move (doesn't reset the timer).
• Hint: Highlights a playable move.
• Auto: Sends all safe cards to the foundations (useful for finishing).
• Draw button: Toggle between drawing 1 or 3 cards at a time.
• Keyboard: N = new, U = undo, H = hint, Space = deal.

Scoring

• Card to foundation: +10 points.
• Card from foundation back to tableau: −15 points.
• Card from waste or reserve to tableau: +5 points.
• The game tracks moves, elapsed time, and how many times you've recycled the stock.

Win Condition

Get all 52 cards onto the foundations. On victory, cards bounce and cascade across the screen in the classic XP Solitaire style.

Design

The game features a dark glass-and-steel aesthetic inspired by old-school JRPG menu interfaces (think Final Fantasy VII Remake, BF6, Caves of Qud). The background is a moody gradient with layered glass panels, and a reactive particle field that swirls and bursts whenever you interact with cards or buttons.

Installation & Running

Simply open canfield.html in any modern web browser. No build step, no dependencies — it's a single self-contained HTML file with embedded CSS and JavaScript.

# Clone the repo
git clone https://github.com/yourusername/canfield.git
cd canfield

# Open in browser
open canfield.html
# or
firefox canfield.html
# or just double-click the file

Browser Compatibility

Works on any browser supporting ES6, CSS Grid/Flexbox, CSS Backdrop Filter, Pointer Events, and Canvas 2D. That includes modern Chrome, Firefox, Safari, and Edge on desktop and mobile.

Credits

Built with vanilla HTML5, CSS3, and JavaScript. No frameworks or external libraries. Card faces are rendered in real-time; the particle system uses a pseudo-curl noise drift.

License

MIT License — see LICENSE file for details.

Notes

• This is Canfield with the "empty column auto-fill from reserve" rule. Some variants restrict empty columns differently — easy to adjust if preferred.
• The game runs entirely in the browser; no data is sent anywhere.
• Enjoy the particle effects — they're there to make every interaction feel satisfying.

Happy shuffling!