1# 2# pgn4web javascript chessboard 3# copyright (C) 2009-2016 Paolo Casaschi 4# see README file and http://pgn4web.casaschi.net 5# for credits, license and more details 6# 7 8 9PGN4WEB: javascript chess games viewer for websites, blogs and live broadcasts. 10 11 12ABOUT 13 14pgn4web is a software package providing a chess games viewer for websites and 15blogs, including live games broadcast support; pgn4web also provides a variety 16of online web services, including a chess viewer and a board generator tool for 17adding chess games to websites and blogs without any coding; pgn4web integrates 18with several popular web platforms and services. 19 20*** 21*** THIS README FILE IS A SUMMARY OF THE PGN4WEB DOCUMENTATION 22*** MORE EXTENSIVE AND UPDATED DOCUMENTATION IS AVAILABLE 23*** FROM THE PGN4WEB SUPPORT WIKI REACHABLE FROM http://pgn4web.casaschi.net 24*** PLEASE RELY ON THE SUPPORT WIKI RATHER THAN THIS README ONLY 25*** 26 27Project homepage: http://pgn4web.casaschi.net (including downloads and wiki) 28Contact email: pgn4web@casaschi.net 29 30Features: 31- display chess games form PGN files on websites and blogs 32- supports live broadcasts of chess games with automatic refresh of remote PGNs 33- interactive browsing of game variations and comments 34- shortcut keys for navigating through the game, for selecting games and much 35 more; uses chessboard squares as input buttons; on supported touchscreen 36 devices uses touch gestures across the chessboard 37- fully customizable display: each item (board, button bar, game selection 38 menu, PGN header info, game text, game comment and more) can be displayed 39 (or hidden) at pleasure in your html file 40- supports different bitmaps for chess pieces (even custom bitmaps) and 41 different chessboard sizes 42- uses figurine fonts for chess moves and chess informant style symbols for 43 comments and annotations 44- provides a chess viewer web service, see http://pgn4web-viewer.casaschi.net 45- provides a board generator web service for adding chess games to websites and 46 blogs without any coding, see http://pgn4web-board-generator.casaschi.net 47- integrates with popular web platforms and services such as blogger, drupal, 48 google sites, joomla, mediawiki, phpBB, wordpress.org and many others. 49- supports puzzles presentation modes 50- integrates with HTML5 video 51- supports Chess960 (a.k.a. Fischer random chess) games 52 53Limitations: 54- only one chessboard for html file (use frames if you need to display 55 more in the same view) 56 57Bugs: 58- no major issue at the moment of writing, please check the project 59 issues tracker at http://pgn4web-project.casaschi.net/tickets/ 60 61User feedback: 62Please email the pgn4web project (pgn4web@casaschi.net) your feedback, 63suggestions and bug reports. Please send for review any PGN file that 64pgn4web fails parsing correctly. 65 66Enjoy! 67 68 69DEBUGGING 70 71Errors alert messages are logged by pgn4web, such as failure to load PGN 72data, incorrect PGN games or incorrect FEN strings. 73When an error is encountered, the top left chessboard square will flash 74to signal the exception. 75The error alert log can be reviewed clicking on the same top left 76chessboard square. 77 78 79HOW TO USE pgn4we.js 80 81To enable pgn4web, add a SCRIPT instance at the top of your HTML file: 82 83 <script src="pgn4web.js" type="text/javascript"></script> 84 85The PGN input can be specified either as URL within another SCRIPT instance 86with at least the call to 87 88 SetPgnUrl("http://yoursite/yourpath/yourfile.pgn") 89 90and optionally any of the other calls listed below. 91 92Or the PGN file can be pasted in the body of the HTML file 93within a hidden FORM/TEXTAREA statement with the ID pgnText: 94 95 <!-- paste your PGN below and make sure you dont specify an external source with SetPgnUrl() --> 96 <form style="display: none;"><textarea style="display: none;" id="pgnText"> 97 98 ... your PGN text ... 99 100 </textarea></form> 101 <!-- paste your PGN above and make sure you dont specify an external source with SetPgnUrl() --> 102 103Example: 104 105 <script type="text/javascript"> 106 "use strict"; 107 108 SetPgnUrl("yourpath/yourfile.pgn"); // if set, this has precedence over the inline PGN in the HTML file 109 SetImagePath("images"); 110 SetImageType("png"); 111 SetHighlightOption(true); // true or false 112 SetGameSelectorOptions(null, false, 0, 0, 0, 15, 15, 0, 10); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate); 113 SetCommentsIntoMoveText(false); 114 SetCommentsOnSeparateLines(false); 115 SetAutoplayDelay(1000); // milliseconds 116 SetAutostartAutoplay(false); 117 SetAutoplayNextGame(false); // if set, move to the next game at the end of the current game during autoplay 118 SetInitialGame(1); // number of game to be shown at load, from 1 (default); values (keep the quotes) of "first", "last", "random" are accepted; other string values assumed as PGN search string 119 SetInitialVariation(0); // number for the variation to be shown at load, 0 (default) for main variation 120 SetInitialHalfmove(0,false); // halfmove number to be shown at load, 0 (default) for start position; values (keep the quotes) of "start", "end", "random", "comment" (go to first comment or variation), "variation" (go to the first variation) are also accepted. Second parameter if true applies the setting to every selected game instead of startup only 121 SetShortcutKeysEnabled(false); 122 123 SetLiveBroadcast(1, false, false, false, false); // set live broadcast; parameters are delay (refresh delay in minutes, 0 means no broadcast, default 0) alertFlag (if true, displays debug error messages, default false) demoFlag (if true starts broadcast demo mode, default false) stepFlag (if true, autoplays updates in steps, default false) endlessFlag (if true, keeps polling for new moves even after all games are finished) 124 125 </script> 126 127Then the script will automagically add content into your HTML file 128to any <div> or <span> containers with the following IDs: 129 130 <div id="GameSelector"></div> 131 <div id="GameSearch"></div> 132 <div id="GameLastMove"></div> 133 <div id="GameLastVariations"></div> 134 <div id="GameNextMove"></div> 135 <div id="GameNextVariations"></div> 136 <div id="GameSideToMove"></div> 137 <div id="GameLastComment"></div> 138 <div id="GameBoard"></div> 139 <div id="GameButtons"></div> 140 <div id="GameEvent"></div> 141 <div id="GameRound"></div> 142 <div id="GameSite"></div> 143 <div id="GameDate"></div> 144 <div id="GameWhite"></div> 145 <div id="GameBlack"></div> 146 <div id="GameResult"></div> 147 <div id="GameText"></div> 148 149 <div id="GameWhiteClock"></div> 150 <div id="GameBlackClock"></div> 151 <div id="GameLiveStatus"></div> 152 <div id="GameLiveLastModified"></div> 153 154The file template.css shows a list of customization style options. 155For better chessboard display, it is recommended to explicitly enforce 156chessboard and square size using the ".boardTable", ".whiteSquare" and 157".blackSquare" CSS classes, such as: 158 /* account for chessboard and squares border here, if any */ 159 .boardTable { width:326px; height:326px; border-width:3px; } 160 .whiteSquare, .blackSquare { width:40px; height:40px; } 161 162See template.html file for an example. 163See *mini.html* for an example of embedding the PGN content into the HTML file. 164See http://pgn4web.casaschi.net/demo/ usage example, including a live broadcast 165demo. 166See http://pgn4web-blog.casaschi for a usage example within a blog using the 167iframe html tag. 168 169The pgn4web scripts and pages are optimized for the HTML5 doctype declaration: 170<!DOCTYPE HTML> 171 172 173CHESS FIGURINE DISPLAY OF MOVES 174 175pgn4web allows displaying chess moves text using the supplied figurine fonts: 176'pgn4web ChessSansAlpha', 'pgn4web ChessSansMerida', 'pgn4web ChessSansPiratf', 177'pgn4web ChessSansUscf' and 'pgn4web ChessSansUsual'. These fonts are based on 178the Liberation Sans font, see credits section for more details, that is provided 179as well for overall consistent display of moves, text and headers. 180 181To enable figurine display of chess moves text, make sure you include the 182corresponding fonts/pgn4web-font-ChessSansPiratf.css file toghether with the 183font/pgn4web-font-LiberationSans.css file into your HTML file: 184 185 <link href="fonts/pgn4web-font-LiberationSans.css" type="text/css" rel="stylesheet" /> 186 <link href="fonts/pgn4web-font-ChessSansPiratf.css" type="text/css" rel="stylesheet" /> 187 188or into your CSS file: 189 190 @import url("fonts/pgn4web-font-LiberationSans.css"); 191 @import url("fonts/pgn4web-font-ChessSansPiratf.css"); 192 193Then set the font-family for the .move, .variation and .commentMove classes to 194the chess font of your choice and the rest of the page to the Liberation Sans 195font. For example in your CSS file: 196 197 body { 198 font-family: 'pgn4web Liberation Sans', sans-serif; 199 } 200 .move, .variation, .commentMove { 201 font-family: 'pgn4web ChessSansPiratf', 'pgn4web Liberation Sans', sans-serif; 202 } 203 204When using chess figurine fonts it's strongly recommended to activate the 205"smooth fonts display" feature of the client operating system (active by 206default on most current systems). 207 208See the template.html and template.css files for an example. 209 210 211CHESS INFORMANT SYMBOLS 212 213pgn4web allows for showing chess informant style symbols when the corresponding 214PGN NAGs (Numeric Annotation Glyphs) are found in the PGN comments. This feature 215is disabled by default; in order to enable it in your HTML page, please include 216the script below immediately after the main pgn4web script: 217 218 <script src="pgn4web.js" type="text/javascript"></script> 219 <script src="fonts/chess-informant-NAG-symbols.js" type="text/javascript"></script> 220 221Please note, differently than when using the figurine fonts, if the user's web 222browser does not support web fonts, there's not elegant textual fallback. 223 224See the chess-informant-template.html and the collection-example.thml (chess 225informant sample) files for an example. 226 227 228THE BOARD GENERATOR WEB TOOL 229 230The board widget allows showing games and positions in web pages and blogs, 231without any html coding for each game, where the chessboard widget is created 232using a given HTML code within the web page or blog. 233 234Just go to the board widget generator site on 235 http://pgn4web-board-generator.casaschi.net 236the enter your PGN games and configure the options. The tool will 237automatically generate some HTML code that you can cut and paste in your web 238page or your blog. 239 240 241THE LIVE BROADCAST OF GAMES 242 243By setting SetLiveBroadcast(delay, alertFlag, demoFlag, stepFlag, endlessFlag) 244in the HTML file, pgn4web will periodically refresh the PGN file, showing the 245live progress of the games. PGN files produced by the DGT chessboards are 246supported. 247 248SetLiveBroadcast(delay, alertFlag, demoFlag, stepFlag, endlessFlag) parameters: 249 - delay = refresh interval in minutes, decimals allowed (default 1) 250 - alertFlag = if set true, shows alert debug messages (default false) 251 - demoFlag = if set true, sets live demo mode (default false) 252 - stepFlag = if set true, autoplays updates in steps (default false) 253 - endlessFlag = if set true, keeps polling for new moves even atfer all games 254 are finished (default false) 255 256If you set stepFlag, please note that the autoplay delay is set by 257SetAutoplayDelay(delay), where no more than 2000ms should be used for live 258broadcasts. 259 260By default, polling for new moves stops once all games are finished; a game is 261deemed finished when the Result header tag is different from "*"); when 262endlessFlag is set, the polling for new moves continues endlessly. 263 264The bash shell script live-grab.sh, executed on your server allows for grabbing 265the updated game source from anywhere on the Internet to your server. 266 267Clock information as provided by the DGT chessboards in PGN move comments, such 268as {[%clk 1:59:59]}, and in the PGN header, such as [WhiteClock "2:00:00"], 269[BlackClock "2:00:00"] and [Clock "W/1:59:59"] is displayed in the following 270sections: 271 272 <div id="GameWhiteClock"></div> 273 <div id="GameBlackClock"></div> 274 275The status of the live broadcast is displayed in the following sections: 276 277 <div id="GameLiveStatus"></div> 278 <div id="GameLiveLastRefreshed"></div> 279 <div id="GameLiveLastReceived"></div> 280 <div id="GameLiveLastModifiedServer"></div> 281 282Clicking on the H6 square will force a games refresh. 283Clicking on the A6/B6 squares will pause/restart the automatic games refresh. 284 285The file live-template.html shows a very basic example. 286 287A demo facility is available to test the live broadcast functionality. 288If the demo flag is set in SetLiveBroadcast() and a set of full games is 289provided, the tool will simulate a slow progress of the game. Set the 290proper flag in live-template.html for an example. Please note, even during 291a demo, the PGN file is actually refreshed from the server for a more 292accurate testing. 293Alternatively, for a more realistic simulation, the bash shell script 294live-simulation.sh slowly updates the live.pgn file, simulating a real event. 295 296To setup a live broadcast please use any of the live*.html files. 297The live*.html files typically accept these parameters: 298 - pgnData = PGN file to load (default live.pgn) 299 - refreshMinutes = refresh interval in minutes, decimals allowed (default 1) 300 - refreshDemo = if set true, sets live demo mode 301 - help = if set true, shows additional help information 302 303For instance, make sure that the file myGames.pgn on your server is periodically 304refreshed with the live games, then add the following iframe to your page: 305<iframe frameborder=0 width=480 height=360 306 src=live-compact.html?pgnData=myGames.pgn> 307</iframe> 308 309Each live*.html file is customized to a different purpose and provides 310specific configuration parameters. 311 312http://pgn4web-live.casaschi.net will occasionally broadcast live major chess 313events. 314 315 316CUSTOMIZATION FUNCTIONS 317 318The following functions, if defined in the HTML file after loading pgn4web.js, 319allow for execution of custom commands at given points: 320- customFunctionOnPgnTextLoad(): when loading a new PGN file 321- customFunctionOnPgnGameLoad(): when loading a new game 322- customFunctionOnMove(): when a move is made 323- customFunctionOnAlert(message_string): when an error alert is raised 324- customFunctionOnCheckLiveBroadcastStatus(): when a live broadcast is checked 325Please note the order these functions are executed; for example, when loading 326a new PGN file at the end of the first game, first customFunctionOnMove() is 327executed, then (when the game has been loaded and the move positioning 328completed) customFunctionOnPgnGameLoad() is executed and finally (when the 329selected game is fully loaded) customFunctionOnPgnTextLoad() is executed. 330 331The function customPgnHeaderTag(customTagString, htmlElementIdString, gameNumber) 332is available for use in customFunctionOnPgnGameLoad() to parse custom PGN header 333tags and automatically assign their value to the given HTML elements. The function 334returns the custom tag value and the `gameNumber` parameter, if unassigned, 335defaults to the current game. 336The function customPgnCommentTag(customTagString, htmlElementIdString, plyNumber) 337is available for use in customFunctionOnMove() to parse custom PGN comment tags 338like { [%pgn4web info] } and automatically assign their value to the given HTML 339elements. The function returns the custom tag value and the `plyNumber` parameter, 340if unassigned, defaults to the current ply. 341 342See twic944.html or live.html for examples. 343 344The following functions, if defined in the HTML file after loading pgn4web.js, 345allow for execution of custom commands when shift + a number key is pressed: 346- customShortcutKey_Shift_0() 347- customShortcutKey_Shift_1() 348... 349- customShortcutKey_Shift_9() 350 351 352SHORTCUT KEYS AND TEXT FORMS 353 354When the HTML page contains the following script command 355 356 SetShortcutKeysEnabled(true); 357 358then all keystrokes for that active page are captured and processed by pgn4web; 359this allows for instance to browse the game using the arrow keys. If no other 360precautions are taken, this has also the undesirable side effect of capturing 361keystrokes intended by the user for typing in text forms when present in the 362same page: this makes the text forms unusable. 363 364In order to have fully functional text forms in pgn4web pages, the following 365"onFocus" and "onBlur" actions should be added to the textarea forms: 366 367 <textarea onFocus="disableShortcutKeysAndStoreStatus();" 368 onBlur="restoreShortcutKeysStatus();"></textarea> 369 370See the inputform.html HTML file for an example. 371 372 373TECHNICAL NOTES ABOUT WEB BROWSERS 374 375pgn4web is developed and tested with recent versions of a variety of 376browsers (Arora, Blackberry browser, Chrome, Epiphany, Firefox, Internet 377Explorer, Opera, Safari) on a variety of personal computer platforms 378(Linux/Debian, MacOS, Windows) and some smartphone/pda platform (Android, 379Blackberry, Apple iOS for iPhone/iPad/iPod). 380Not every browser version (please upgrade to a recent release) has been 381tested and not every combination of browser/platform has been validated. 382If you have any issue with using pgn4web on your platform, please email 383pgn4web@casaschi.net 384 385Note about Google Chrome: you might experience problems when testing HTML 386pages from your local computer while developing your site. This is a 387security limitation of the browser with respect to loading local files. 388The limitation can be bypassed by starting Google Chrome with the command 389line switch '--allow-file-access-from-files'. Browsing pgn4web websites 390with Google Chrome should work properly. 391 392Note about Internet Explorer v7 and above: under some circumstances you might 393experience problems when testing HTML pages from your local computer while 394developing your site. If this happens to you, read notes at 395http://pgn4web-project.casaschi.net/tickets/23/ 396 397 398PGN STANDARD SUPPORT 399 400pgn4web mostly supports the PGN standard for chess games notation (see 401http://www.tim-mann.org/Standard). Notable exceptions and limitations: 402 403- variations are not parsed as such, but stored as comments; support for 404browsing variations is planned for a future release 405- if square brackets are present in the comments (or the game text) in a 406pattern similar to the PGN header pattern '[tag "value"]' then the game 407parsing might break. If your PGN file is not displayed properly, please 408check for characters "[" and "]" in the comments and try removing them. 409- only pieces initials in the English language are supported, the use of 410alternative languages as specified by the PGN standard is not supported 411(pgn4web can however display chess moves text using figurine notation, so 412the language issue should not be much of a problem, just make sure your 413chess software produces PGN data with English pieces initials). 414 415pgn4web also follows a set of proposed extensions to the PGN standard 416(see http://www.enpassant.dk/chess/palview/enhancedpgn.htm), more 417specifically: 418 419- understands the [%clk 1:59:58] tag in the PGN comment section as the 420 clock time after each move 421- understands the PGN tags [WhiteClock "2:00:00"] and 422 [BlackClock "2:00:00"] as the clock times at the beginning of the game 423- understands the PGN tag [Clock "W/1:59:59"] as the clock time of the 424 running clock 425- allows parsing of generic comment tags using the function 426 customPgnCommentTag() 427 428pgn4web also supports null moves in the "--" notation (used by a number of 429chess softwares like scid and chessbase), such as in 1. e4 -- 2. d4, and 430supports continuations (defined as variations where the last move played 431before the variation is not taken back prior to the start of the variation 432moves) in the "(*" notation, such as in 1. e4 (* 1... d5 2. exd5) e5 433 434Special characters, such as symbols and accented letters, can appear in PGN 435files as comments or as part of the header values; in order for pgn4web to 436display those characters correctly, the PGN file should be saved in unicode 437UTF-8 format. 438If you are forced to use PGN files encoded in a different format, you might 439try patching manually the pgn4web.js, search for "// patch: pgn encoding" and 440follow instructions. 441 442Please email me for review any PGN file that pgn4web fails parsing correctly. 443 444 445CHESS960 SUPPORT 446 447pgn4web supports Chess960 (a.k.a. Fischer random chess) and understands both 448the X-FEN and the Shredder-FEN extensions to the FEN notation. 449 450 451JAVASCRIPT CODING 452 453As of pgn4web version 1.72, the pgn4web.js code is checked with the lint 454tool (see online version at http://www.javascriptlint.com/online_lint.php). 455Plase note that warnings "lint warning: increment (++) and decrement (--) 456operators used as part of greater statement" are ignored. 457Lint validation should allow for easy compression of the javascript code, 458for instance using http://javascriptcompressor.com/ 459Although a compression beyond 50% can be achieved, only the uncompressed 460version is distributed, but if you want to use a compressed version on your 461site, the pgn4web.js code should support it. 462 463As of pgn4web version 2.71 strict mode is used, see statement: "use strict"; 464 465 466CREDITS AND LICENSE 467 468javascript modifications of Paolo Casaschi (pgn4web@casaschi.net) on code 469from the http://ficsgames.org database, in turn likely based on code from the 470LT PGN viewer at http://www.lutanho.net/pgn/pgnviewer.html 471 472PNG images from http://ixian.com/chess/jin-piece-sets (creative commons 473attribution-share alike 3.0 unported license) by Eric De Mund. 474SVG images from http://commons.wikimedia.org/wiki/Category:SVG_chess_pieces 475by Colin M.L. Burnett; licensed under GFDL (www.gnu.org/copyleft/fdl.html), 476CC-BY-SA-3.0 (www.creativecommons.org/licenses/by-sa/3.0/) or 477GPL (www.gnu.org/licenses/gpl.html), via Wikimedia Commons. SVG images from 478http://openclipart.org/search/?query=chess+symbols+set by Igor Krizanovskij 479and from http://openclipart.org/search/?query=Chess+tile both dedicated to 480the Public Domain (http://creativecommons.org/publicdomain/zero/1.0/) as any 481openclipart.org content. 482 483The figurine fonts are derived from the Liberation Sans font (released under 484GNU General Public License, see https://fedorahosted.org/liberation-fonts/) 485with the addition of chess pieces from freeware fonts: the alpha2 font (Peter 486Strickland), the good companion font (David L. Brown), the merida font (Armando 487H. Marroquin), the pirate font (Klaus Wolf) and the chess usual font (Armando 488H. Marroquin). The original chess fonts and more details are available at 489http://www.enpassant.dk/chess/fonteng.htm 490The chess informant symbols font is used with permission from the Chess 491Informant publishing company (http://www.chessinformant.rs). The chess ole 492figurin font is from the ChessOLE project (http://www.chessole.de, David Frank). 493 494Some of the PGN files for the examples are coming from "The Week in Chess" at 495http://www.theweekinchess.com (file twic944.pgn), from the scid project at 496http://scid.sourceforge.net (file tactics.pgn, with minor modifications), and 497from the Chess Informant publishing company at http://www.chessinformant.rs 498(file chess-informant-sample.pgn). 499 500The jscolor javascript code is maintained by Honza Odvarko 501(http://odvarko.cz/) and released under the GNU Lesser General Public License 502(http://www.gnu.org/copyleft/lesser.html) 503See http://jscolor.com/ 504 505The ECO code (http://en.wikipedia.org/wiki/Encyclopaedia_of_Chess_Openings) for 506game opening classification is a trademark of the Chess Informant publishing 507company (http://www.chessinformant.rs). 508 509 510The above items remains subject to their original licenses (if any). 511 512 513Remaining pgn4web code is copyright (C) 2009-2016 Paolo Casaschi 514 515This program is free software; you can redistribute it and/or modify 516it under the terms of the GNU General Public License as published by 517the Free Software Foundation; either version 2 of the License, or 518(at your option) any later version. 519 520This program is distributed in the hope that it will be useful, 521but WITHOUT ANY WARRANTY; without even the implied warranty of 522MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 523GNU General Public License for more details. 524 525You should have received a copy of the GNU General Public License along 526with this program; if not, write to the Free Software Foundation, Inc., 52751 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 528 529See license-gpl-2.0.txt license file. 530 531You are free to use pgn4web in your website or blog; you are not required to 532acknowledge the pgn4web project, but if you want to do so the following line 533might be used: 534javascript chess viewer courtesy of <a href=http://pgn4web.casaschi.net>pgn4web</a> 535 536You are also encouraged to notify pgn4web@casaschi.net that you are using 537pgn4web. 538 539END 540 541