Variant Gallery

Multiple variants rendered simultaneously. Each controller is independent with its own game state, AI, and event listeners.

View source
import MCE from './js/chess-engine.js';
import './js/chess-moves.js';
import './js/chess-play.js';
import './js/chess-variants.js';
import './js/board-renderer.js';
import './js/chess-ai.js';
import { createGameController } from './js/game-controller-core.js';

const VARIANTS = ['standard', 'atomic', 'kingOfTheHill', 'capablanca', 'horde', 'racingKings'];

VARIANTS.forEach(key => {
  const game = MCE.createGame(key);
  const container = document.createElement('div');
  gallery.appendChild(container);

  createGameController(container, game, {
    players: { w: 'ai', b: 'ai' },
    aiDepth: 3,
    onGameEnd: (result) => console.log(key, result)
  });
});

Programmatic Control

Load positions from FEN, make moves, undo, trigger AI, and observe the event stream in real time.

View source
import MCE from './js/chess-engine.js';
import { createGameController } from './js/game-controller-core.js';
// ... other imports omitted for brevity

const game = MCE.createGame('standard');
const ctrl = createGameController(
  document.getElementById('board'), game, {
    players: { w: 'human', b: 'human' },
    onMove: (move) => log(`Move: ${MCE.sqToAlgebraic(move.from, game)}${MCE.sqToAlgebraic(move.to, game)}`),
    onGameEnd: (result) => log(`Game over: ${result}`),
    onTurnChange: (turn) => log(`Turn: ${turn}`)
  }
);

// Programmatic API
ctrl.undo();
ctrl.setFlipped(true);
ctrl.setDifficulty(4);
ctrl.getGame(); // current game object

Themes and Styles

The same position rendered with different board themes and piece styles. Themes swap at runtime without resetting the game.

View source
import MCE from './js/chess-engine.js';
import { renderBoard, setTheme, setPieceStyle } from './js/board-renderer.js';

const game = MCE.createGame('standard');

// Theme 1: Classic wood
setTheme('classic');
renderBoard(document.getElementById('board1'), game, { size: 280 });

// Theme 2: Cosmic dark
setTheme('cosmic');
renderBoard(document.getElementById('board2'), game, { size: 280 });

// Theme 3: Neon with alternate piece style
setTheme('neon');
setPieceStyle('staunton');
renderBoard(document.getElementById('board3'), game, { size: 280 });

// Swap at runtime — no reload needed
setTheme('tournament');
ctrl.render();

AI vs AI

Watch two AI players battle in real time. Adjust difficulty and variant on the fly. The AI runs synchronously at low depths for instant response.

Moves: 0
Status: Ready
View source
import MCE from './js/chess-engine.js';
import { createGameController } from './js/game-controller-core.js';

const game = MCE.createGame('atomic');
let moveCount = 0;

const ctrl = createGameController(container, game, {
  players: { w: 'ai', b: 'ai' },
  aiDepth: 3,
  onMove: (move) => {
    moveCount++;
    document.getElementById('counter').textContent = moveCount;
  },
  onGameEnd: (result) => {
    document.getElementById('status').textContent = result;
  }
});

// Change difficulty mid-game
ctrl.setDifficulty(4);