DHTML Chess

Bookmark and Share

Demos

Download

Files in package:

  • js/chess.js - Main javascript file for the widget
  • js/sack.js - Simple Ajax Code Kit from http://twilightuniverse.com/projects/sack
  • js/scrolltable.js - Simple javascript file used to create table with fixed header.
  • images/ - Main image folders for the chess pieces.
  • demo-images/ - Images used in the demos. Board backgrounds etc.
  • game_cache/ - Empty folder used by the php script save json data.
  • pgn/ - Collection of sample pgn files.
  • css/ - chess.css which is the main css file and css files used by the demos.
  • /chess.php - chess.js contacts this file via Ajax requests.
  • /PgnParser.class.php - PHP class used to convert pgn files to JSON format.
  • /ChessConfig.php - PHP configuration variables.

Key features

  • Displaying pgn files stored on the server.
  • Drag and drop capabilities which is useful for training.
  • Support for "live" broadcast.
  • Support for different chess sets.
  • Support for 5 different size of chess boards.
  • Pgn to JSON converter. (PHP class)

Licensing

I play chess at Chess.com!

The script is as all my other scripts licensed under the LGPL license.

Other media(images and sound files) however are NOT licensed under LGPL and should be used in this chess script only.

If you wish to use the graphics and/or sound files outside of this script, please contact post [at] dhtmlgoodies.com to get a obtain/purchase a special license.

General info

This script requires php support on the server. chess.js contacts a php script which again contacts a PHP pgn to json converter.

This php class converts portable game notation files(.pgn) to json(Javascript Object notation) which is sent back to the script.

This is illustrated in the figure below:

Class documentation

Class documentation is JsDoc format is available here

Configuration paramaters to the constructor.

You configure this script mainly by sending paramaters to the constructor. These are the currently supported params:

  • cssPath: Path to css file. Default is "css/chess.css"(Optional)
  • imageFolder: Location of "images" folder. Default is "images/".(Optional)
  • squareSize: Size of squares. This param is used to determine size of the board. Supported values are: 30,45,60,75 and 90.(Optional, default is 60)
  • callbackOnGameLoaded: Name of function to executed once a game has been loaded from the server. Remember to pass only the name of this function. It will receive one argument which is the Object describing current game. See the description of the json below.(Optional)

  • callbackBeforeComments: Name of function to execute when you navigate to a move with a comment.(Optional)
  • callbackOnBeforeGameLoaded: Name of function to execute before a game is loaded from the server.(Optional)
  • callbackOnSwitchPgn: Name of function to execute when a new pgn file is selected.(Optional)
  • callbackOnStopAutoPlay: Name of function to execute when auto play mode ends.(Optional)
  • callbackOnWrongMove: Name of function to execute when drag and drop is enabled and user makes a wrong move.(Optional)
  • callbackOnCorrectMove: Name of function to execute when drag and drop is enabled and user makes the wrong move.(Optional)
  • callbackAfterLastMove: Name of function to execute after last move in a game is animated.(Optional)
  • autoPlayDelayBetweenMoves: Number of seconds to wait between each move in auto play mode. Default is 0.5.(Optional)
  • animationSpeed: Animation speed. Lower = faster. Default is 1.(Optional)
  • autoplayDelayBeforeComments: Auto play delay when you come to a move with a comment. Default is 0.(Optional)
  • stopAutoplayBeforeComments: If set to true, auto play will stop when it comes to a move with comments.
  • parentRef: Reference to a HTML element of your page where you want the chess board to be inserted. Example: "board" for <div id="board"></div>
  • flipBoardWhenBlackToStart: Flip the board automatically when black starts the game(example from fen positions) and when black wins the game.(Optional)
  • chessSet: Which chess pieces to use. Possible values: alpha,alphapale,smart,cases,leipzig,merida,motif and traveler. You can also change chess pieces at run time by calling the setChessSet method.(Optional)
  • elMovesInline: Reference to HTML element where you want the moves of the game to be displayed. (Optional)
  • elMovesInTable: Referece to one or more HTML tables. Use this if you want your move to be displayed inside table(s). Remember that the table must have a thead and a tbody element. The tbody element should be empty since it will be populated dynamically by the script. If you specify more than one table reference(i.e. array of tables), use the param below to control how many moves you want to display inside each table.(Optional)
  • elMovesInTableMaxMovesPerTable: Max number of moves per table, i.e. the tables defined in the elMovesInTable param. (Optional)
  • elPlayerNames: Reference to HTML element where you want the names of the player for currently displayed game to be inserted. It will be shown in the following format. "Name White vs Name Black".(Optional)
  • elActiveMove: Reference to HTML element where you want the currently displayed move to be inserted.(Optional)
  • examine: When set to true, you will be able to examin the displayed games. (Optional)
  • colorLightSquares: Color(RGB code) of light squares (Optional)
  • colorDarkSquares: Color(RGB code) of darl squares (Optional)
  • bgImageLightSquares: Path to backgrouns image for the light squares (Optional)
  • bgImageDarkSquares: Path to backgrouns image for the dark squares (Optional)
  • animate: Enables or disables animations. Default is true. (Optional)
  • sound: Enables or disables sound effects. Default is false. This option is still on an experimental stage (Optional).
  • indicateLastMove: Indicate last move with colored rectangles. Default is true. (Optional)
  • displayPrefaceCommentWithInlineMoves: Display comments before the game above the first move in the element specified by the elMovesInline attribute. default 0 true. (Optional)
  • elGameAttributes: Associative array of where you want game attributes from the pgn files to be inserted. See the code below for example. (Optional)
  • dragAndDropColor: Enables drag and drop for a specific color. Possible values: "white","black" or false. Default = false. (Optional). This can also be controlled by the setDragAndDropColor method. See the tactic demos for help.
  • liveUpdateInterval: This is used when you want to broadcast live games. It specifies the number of seconds between each update request from the client to the server. Default is 0(Off). (Optional)
  • elActiveComment: Reference to element where you want comment for active moves to be displayed. This is useful if the moves are displayed inside a table.
  • languageCode: This attribute is useful if you want to display the moves(inline or in table) in a specific language. Currently, the script supports "en"(default) and "no"(Norwegian). Example: if this attribute is set to "no", the move Qb3 will be displayed as Dd3.
  • keyboardSupport: Boolean attribute(true|false) used to define if keyboard support is activated. When enabled, you can use the arrow keys to walk through the moves of a game. Default value is true.

Public methods

This is an overview of the public methods:

  • showGame(gameIndex) - Show a game from selected pgn file(0 = first game)
  • showRandomGame() - Displays a random game from selected pgn file
  • setDragAndDropColor(color) - Specify drag and drop color. Possible values: "white","black" or false.
  • setPgn(pgnFile) - Specify path to new pgn file.
  • setSquareSize(squareSize) - Resize board - possible values: 30,45,60,75 and 90.
  • setChessSet(chessSet) -Specify chess set. Possible values: alpha,alphapale,smart,cases,leipzig,merida,motif and traveler.
  • flip() - Flips the board.
  • getNextMove() - Return notation of next move to be played.
  • getResult() - Return result of game.
  • getPgnFile() - Return path to currently used pgn file.
  • getStartColor() - Return starting color, black or white.
  • setFlipBoardWhenBlackToStart() - If true, the board will be flipped automatically when a game is displayed where black starts to move(i.e. position setup).
  • getCurrentGameIndex() - Return index of currently displayed game, i.e. index in pgn file(0 = first game).
  • displayGameListInSelect(selectBox) - Displays list of games in pgn file inside a select box. The argument selectBox is a reference(id, name or direct reference) to a select box on your page.
  • displayGameListInTable(tableReference) - Displays list of games in a HTML table. It's important that this table got a THEAD and TBODY element.
  • moveToStart() - Move to the start of currently displayed game.
  • moveToEnd() - Move to the end of currently displayed game.
  • move(numberOfMoves) - Move forward "numberOfMoves".
  • autoPlay() - Start autoplay mode.
  • stopAutoPlay() - Exit autoplay mode.
  • goToMove(moveNumber,color() - Go to a specific move, example 2, "black".

After you have created your chess object(example by using the example in the "live games" section below), you can call methods like this:

<a href="#" onclick="chessObj.flip();return false">Flip board</a>
<a href="#" onclick="chessObj.moveToStart();return false">To start</a>
<a href="#" onclick="chessObj.moveToEnd();return false">To End;</a>

Broadcast live games

It's very easy to broadcast live games with this script. The only thing you have to do is to send a "liveUpdateInterval" variable to the contstructor when you create your chess object. This variable describes number of seconds between each Ajax update request to the server. Example:

var chessObj = new DHTMLGoodies.Chess({
  liveUpdateInterval:30,
  bgImageDarkSquares:'demo-images/piece_bg_60_dark5.png',
  bgImageLightSquares:'demo-images/piece_bg_60_light.png',
  animationSpeed:1,
  callbackOnGameLoaded:'showDetails',
  parentRef:'board',
  pgnFile:'pgn/livegame.pgn',
  chessSet:'alphapale',
  squareSize:60,
  elMovesInline:'divMoves',
  elPlayerNames:'players',
  elGameAttributes:{
    round:'details_round',
    white:'details_white',
    black:'details_black',
    event:'details_event',
    result:'details_result',
    WhiteElo:'details_white_elo',
    BlackElo:'details_black_elo',
    date:'details_date'
  }
} );

Notice the first variable sent to the constructor: liveUpdateInterval:30. It specifies that the web browser should send update requests to the server in a 30 second interval.

JSON format

The figure below illustrates the JSON string sent to the script by the php class:

The PHP class parses pgn files and converts it into JSON format. JSON is a format which is easily read by most programming languages.

More info on json can be found at http://www.json.org.

JSON Cache

The PHP class converts pgn files to JSON. Since this requires some processing on the server, the script has a built-in cache functionality. It will try to store cached files in the folder specified in the ChessConfig.php file. It's important that PHP have write access to this folder. When the PHP script finds a cached version which is newer than the pgn file, it will send the content of this file back to the client instead of parsing the pgn file.

Q&A

Question: What do I do when the chess board isn't displayed correctly?

Answer: Make sure that you are using a strict or loose doctype. The doctype should be declared on line 1 of your html file. Examples:

Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Loose:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Question: The script doesn't load game data from the server

Answer: This sounds like an Ajax problem. Please read the article in my forum for help.

Question: After upgrading the script, the board labels appears on the board instead of at the left side of the board

Answer: Add this to your css file:

/** To make the board labels appear on the left and bottom side of the board */
div.ChessBoardFrame60{
  position:absolute;
  top:0px;
  right:0px;
}

This is the code for the board where the squares are 60x60 pixels. You may have to add ChessBoardFrame45 and ChessBoardFrame30 in case you're using different size boards.

Rate this script at Hotscripts.com

If you like my script, please rate it at HotScripts.com

Change log

  • January, 29th, 2008: Added a new chess board(walnut/maple) and implemented the keyboard shortcut Ctrl+Shift+F to flip the board
  • November, 12th, 2007: CSS fix for Safari and a pgn parser bugfix
  • August, 27th, 2007: Added support for keyboard events. The left and right arrow can now be used to walk through the moves of a game. You can set the keyboardSupport attribute to false in case you don't want this feature.
  • August, 15th, 2007: Added support for autoplay mode also when animation has been disabled.

Tweet

Advertisement:
A logo design contest at Logomyway
I play chess at Chess.com!
Batalf
Rating: 2049




About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2010 dhtmlgoodies.com