ryancookdev / canvas-chess

A user interface for chess applications

Canvas Chess

Canvas Chess is a user interface for building chess applications. Developers can access the HTML5 board using a JavaScript API.

Basic usage:

1. Include Canvas Chess.
2. Add a container div.
3. Create and configure the board.

<script src="canvaschess.js"></script>

<div id="board"></div>

<script>
    var board = new CHESS.Board({
        container: 'board',
        height: '400px',
        width: '400px'
        piece_set: 'img/pieces/merida',
    });
</script>

Board Configuration

When you create a board, you can pass the following configurations settings:

• container - Required. The id of the div element that will contain the board.
• height and width - The size of the board in pixels. These are string values ending with 'px'. This is not required, since your application may prefer to set the size dynamically after the board is created.
• piece_set - Path to the folder containing your piece images, relative to the HTML file. By default, the path 'canvaschess/img/pieces/merida/' will be assumed.
• fen - The position, in Forsyth–Edwards Notation. Default is the standard starting position.
• mode - If this value is 'setup', the board will include a piece box. Pieces can be dragged on and off the board.
• show_labels - True by default. If false, the board will not include letters and numbers. This should be a boolean value, not a string.
• square_color_light - The color of the light squares. By default #ececd7.
• square_color_dark - The color of the dark squares. By default #7389b6.
• square_uri_light and square_uri_dark - If you prefer to use a square graphic instead of a solid color, set the URI to the image file.
• highlight_hover - False by default. If true, squares will be highlighted as you drag pieces over them. This should be a boolean value, not a string.
• square_hover_light - If highlight_hover is enabled, light squares will change to this color as you drag over them. By default #b4d990.
• square_hover_dark - If highlight_hover is enabled, dark squares will change to this color as you drag over them. By default #85c249.
• highlight_move - False by default. If true, the last move with be highlighted (both start and end square). This should be a boolean value, not a string.
• highlight_move_color - If highlight_move is enabled, the start and end square of the previous move will be highlighted with this color. By default #ff0000.
• highlight_move_opacity - If highlight_move is enabled, the highlight color will be transparent or opaque based on this value. This should be between '0' (fully transparent) and '1' (fully opaque). By default '0.5'.
• gc_opacity - Canvas Chess supports graphic commentary (colored arrows and squares drawn on the board). If this feature is used, then this value will determine the opacity of the arrows and squares. This should be between '0' (fully transparent) and '1' (fully opaque). By default '0.8'.

canvas-chess's Issues

Engine.isMate() does not consider pawn moves that block check

This results in the PGN viewer displaying a checkmate sign in cases where there is no checkmate.

Castling with check or checkmate is not handled correctly

A move in short algebraic notation is not recognized in the following cases:

• O-O-O+
• O-O+
• O-O-O#
• O-O#

CHESS.Board.move() does not handle moves with pawn promotions

If you create a chessboard, and then call the move method with a move in standard algebraic notation, which is a pawn promotion, e.g. "e8=Q", the move is not handled correctly and the pawn is not promoted.

Looking at the source code, the $.LongNotation.getLongNotation method does not support pawn promotions, and the Board.model.move method doesn't either, however there seems to be support for pawn promotions in the $.BoardMover.move method.

An en passant capture which removes a pawn that is giving check is not recognized as a legal move

For example in the position given by the following FEN:

4r1k1/7p/p3pQp1/3p2P1/1p1P1RK1/2P5/7q/8 b - -

After Black moves 1..h5+, the en passant capture 2.gxh6 is not recognized as a legal move.

Activating the board for move input does not work

After creating a new chessboard with

var chessboard = new CHESS.Board(...)

the call

chessboard.setActive(true);

does not succeed and runs into Javascript errors.

Bug in IE?

Hi there,
First I would like to thank you for setting up this great framework. So simple to use with great results.
However, in Internet Explorer 11 people are claiming not to see the moves. Indeed, also at Angry Bishop this can be seen. Weirdly, pressing Ctrl+F5 (removing cache) works... sometimes!
Is this something you've encountered before and what would you advise? Not to use IE altogether?

Many thanks in advance,
Bert Hollander

rmarkdown

I am interested in using this for rmarkdown in rstudio. Does this work?

Castling

I'd appreciate it if this excellent little programme could tolerate zeros in castling notation. Capital 'O' (O-O and O-O-O) are correct for PGN but FIDE specify zeroes (0-0 and 0-0-0), and so an awful lot of "PGN" files out there use zeros -- for example, those produced by ChessBase. (I've also contacted ChessBase.)

Engine.isMate() allows blocking a check with a pinned piece

This results in the PGN viewer showing no check mate sign in cases where the position is a check mate.

Move list inherits parent margins

Need to add the following:
.move_list li {
margin: 0;
}

Blocking a check with Queen, Rook or Bishop is considered an illegal move

When you have created a chessboard with a position where the King is in check, and then you call

chessboard.move(move)

with a move by a Queen, Rook or Bishop that blocks the check, the move is not made because it is considered illegal.