Everything createGameController can do, demonstrated live
Multiple variants rendered simultaneously. Each controller is independent with its own game state, AI, and event listeners.
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)
});
});
Load positions from FEN, make moves, undo, trigger AI, and observe the event stream in real time.
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
The same position rendered with different board themes and piece styles. Themes swap at runtime without resetting the game.
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();
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.
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);