Chess Board - Programmatic API Demo

board.addPiece('e4', 'q', 'w', '45');
board.addPiece('d5', 'n', 'b', '180');

const board = document.getElementById('board');
board.addPiece('e4', 'q', 'w');
board.addPiece('e4', 'k', 'b');

// Get selected piece square
const selected = board.getSelectedPieceSquare();
if (selected) {
  console.log(`Piece selected at: ${selected}`);
}

// Select the piece on e4 and make e4 the current square
const wasSelected = board.selectPiece('e4');
console.log(wasSelected); // true when e4 contains a piece

// Keyboard workflow (Space or Enter):
// 1. Press Space or Enter on square with piece → selects it (scale 1.1 + blue glow)
// 2. Navigate to empty square
// 3. Press Space or Enter → moves piece there
// 4. Selection clears after move or on Escape/blur

// Rotate the piece on e4 by +45 degrees (relative to current rotation)
board.rotatePiece('e4', 45);
// Set the piece on e4 to 180 degrees
board.setPieceRotation('e4', '180');

board.setCellDecorators({
  e4: { backgroundColor: '#ffeb3b', innerBorder: 'solid 2px #d97706' },
  d4: { backgroundColor: 'rgba(59, 130, 246, 0.25)', innerBorder: 'solid 1px rgba(37, 99, 235, 0.8)' }
});

board.setStartingPosition();
board.setPieces([
  { square: 'e1', type: 'k', color: 'w', rotation: '0' },
  { square: 'e4', type: 'q', color: 'w', rotation: '45' }
]);
board.clearBoard();

board.setOrientation('white');
board.setOrientation('black');
board.toggleOrientation();

board.disabled = !board.disabled;
board.disablePieceSelection = !board.disablePieceSelection;
board.disablePieceAddition = !board.disablePieceAddition;

let rotation = 0;
setInterval(() => {
  rotation = (rotation + 45) % 360;
  board.setPieceRotation('d4', String(rotation));
}, 200);