Chess Widget Demo

Tactical Puzzles by ELO Rating

Back-Rank Mate

Fork Tactic

Pin Tactic

Discovered Attack

Auto-Flip Board (Black to Move)

Free Play Mode

Different Board Sizes

🆕 Alternative Solutions (Phase 1 Feature!)

<div class="chess-puzzle"
     data-solution="f1e1,e5e4,d1h5|f1e1,e5e4,d1f3">
<!-- Use pipe | to separate alternative solutions -->
</div>

🆕 Stockfish Counter-Move with Arrows (Phase 3 Feature!)

<div class="chess-puzzle"
     data-stockfish-enabled="true"
     data-stockfish-depth="10"
     data-stockfish-show-arrow="true">
<!-- Stockfish will show counter-moves with red arrows -->
</div>

🆕 Internationalization (Phase 1 Feature!)

<div class="chess-puzzle"
     data-lang="de"> <!-- German language -->
</div>

🎯 Phase 5: State Management & Wrong Move Retention

// Get the widget state instance
const puzzle = document.getElementById('my-puzzle').widgetState;

// Subscribe to all state changes
puzzle.on('stateChange', ({ previous, current, metadata }) => {
  console.log(`State changed: ${previous} → ${current}`);
});

// Subscribe to specific events
puzzle.on('wrongMove', ({ move }) => {
  console.warn(`Wrong move: ${move}`);
});

puzzle.on('puzzleSolved', () => {
  console.log('Congratulations! 🎉');
});

// Get current state
const currentState = puzzle.getState(); // 'not_started' | 'in_progress' | 'wrong_move' | 'solved'

// Get state history
const history = puzzle.getStateHistory();

How to Use

To add a chess widget to your website, simply include the CSS and JavaScript files, then add a div with the appropriate data attributes:

<!-- Include the widget files -->
<link rel="stylesheet" href="chess-widget.min.css">
<script src="chess-widget.min.js"></script>

<!-- Create a puzzle -->
<div class="chess-puzzle" 
     data-fen="r1bqkbnr/pppp1ppp/2n5/4p3/4P3/5N2/PPPP1PPP/RNBQKB1R w KQkq - 2 3"
     data-solution="d2d4,e5d4,c2c3"
     data-width="400">
</div>

Data Attributes

• Core Attributes:
• data-fen: The chess position in FEN notation (required)
• data-solution: Solution moves - comma-separated, use "|" for alternative paths (optional, enables puzzle mode)
• data-lang: Language code - "en" (English, default) or "de" (German) (optional)
• data-width: Board width in pixels (optional, default: 400)
• data-auto-flip: Auto-rotate board for black's turn (optional, set to "true" to enable)
• data-orientation: Fixed orientation - "white" or "black" (optional, overrides auto-flip)
• data-premove-enabled: Play first solution move automatically (optional, for Lichess imports)
• Stockfish Features:
• data-stockfish-enabled: Enable Stockfish counter-move feedback (optional, set to "true")
• data-stockfish-depth: Stockfish analysis depth 1-20 (optional, default: 12)
• data-stockfish-timeout: Max API wait time in ms (optional, default: 2000)
• data-stockfish-cache-enabled: Enable localStorage caching (optional, default: true)
• data-stockfish-show-arrow: Show red arrow for counter-move (optional, default: true)
• Phase 5 Features (State Management & Wrong Move Retention):
• data-expose-state-events: Enable external state tracking and events (optional, default: true)
• data-retain-wrong-moves: Keep wrong moves visible until manual undo (optional, default: false)

The widget is completely standalone with all dependencies (chessground and chess.js) bundled - no CDN calls required!