<chess-board>

A web component for displaying chess positions.

Demo

Check it live.

Usage

1. Import Web Components' polyfill:

   <script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.min.js"></script>

2. Import Custom Element:

   <link rel="import" href="/bower_components/chess-board/dist/chess-board.html">

3. Start using it!

   <chess-board>rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1</chess-board>

Options

Attribute	Description
unicode	Display chess pices with unicode characters.
frame	Display file and rank arround the chessboard
reverse	Display the chessboard with black pieces at the bottom.

Methods

put()

Put the white queen on the a4 square

var board = new ChessBoard();
board.put("a4", "Q");

set a4 square empty

var board = new ChessBoard();
board.put("a4", "");

move()

move a piece from a4 to a1

var board = new ChessBoard();
board.move("a4", "a1");

The pieces are defined as in Forsyth–Edwards Notation

P // ♙ white pawn
N // ♘ white knight
B // ♗ white bishop
R // ♖ white rook
Q // ♕ white queen
K // ♔ white king
 
p // ♟ black pawn
n // ♞ black knight
b // ♝ black bishop
r // ♜ black rook
q // ♛ black queen
k // ♚ black king

clearBoard()

var board = new ChessBoard();
board.clearBoard();

setting board position

var board = new ChessBoard();
board.fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR";

getting board position

var board = new ChessBoard();
board.fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR";
board.move("a2", "a3");
 
var currentFen = board.fen;

License

MIT © Sigurd Fosseng