A web component for displaying chess positions.
-
Import Web Components' polyfill:
<script src="//cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.21/webcomponents.min.js"></script>
-
Import Custom Element:
<link rel="import" href="/bower_components/chess-board/dist/chess-board.html">
-
Start using it!
<chess-board>rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1</chess-board>
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. |
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 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
var board = new ChessBoard();
board.clearBoard();
var board = new ChessBoard();
board.fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR";
var board = new ChessBoard();
board.fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR";
board.move("a2", "a3");
var currentFen = board.fen;
MIT © Sigurd Fosseng