Home

Awesome

<chess-board> travis npm

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

AttributeDescription
unicodeDisplay chess pices with unicode characters.
frameDisplay file and rank arround the chessboard
reverseDisplay 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