pgn4web:用于网站，博客和直播的javascript国际象棋游戏查看器-开源

# # pgn4web javascript chessboard # copyright (C) 2009-2020 Paolo Casaschi # see README file and http://pgn4web.casaschi.net # for credits, license and more details # PGN4WEB: javascript chess games viewer for websites, blogs and live broadcasts. ABOUT pgn4web is a software package providing a chess games viewer for websites and blogs, including live games broadcast support; pgn4web also provides a variety of online web services, including a chess viewer and a board generator tool for adding chess games to websites and blogs without any coding; pgn4web integrates with several popular web platforms and services. *** *** THIS README FILE IS A SUMMARY OF THE PGN4WEB DOCUMENTATION *** MORE EXTENSIVE AND UPDATED DOCUMENTATION IS AVAILABLE *** FROM THE PGN4WEB SUPPORT WIKI REACHABLE FROM http://pgn4web.casaschi.net *** PLEASE RELY ON THE SUPPORT WIKI RATHER THAN THIS README ONLY *** Project homepage: http://pgn4web.casaschi.net (including downloads and wiki) Contact email: pgn4web@casaschi.net Features: - display chess games form PGN files on websites and blogs - supports live broadcasts of chess games with automatic refresh of remote PGNs - interactive browsing of game variations and comments - shortcut keys for navigating through the game, for selecting games and much more; uses chessboard squares as input buttons; on supported touchscreen devices uses touch gestures across the chessboard - fully customizable display: each item (board, button bar, game selection menu, PGN header info, game text, game comment and more) can be displayed (or hidden) at pleasure in your html file - supports different bitmaps for chess pieces (even custom bitmaps) and different chessboard sizes - uses figurine fonts for chess moves and chess informant style symbols for comments and annotations - provides a chess viewer web service, see http://pgn4web.casaschi.net/viewer/ - provides a board generator web service for adding chess games to websites and blogs without any coding, see http://pgn4web-board-generator.casaschi.net - integrates with popular web platforms and services such as blogger, drupal, joomla, mediawiki, phpBB, wordpress.org and many others. - supports puzzles presentation modes - integrates with HTML5 video - supports Chess960 (a.k.a. Fischer random chess) games Limitations: - only one chessboard for html file (use frames if you need to display more in the same view) Bugs: - no major issue at the moment of writing, please check the project issues tracker at http://pgn4web-project.casaschi.net/tickets/ User feedback: Please email the pgn4web project (pgn4web@casaschi.net) your feedback, suggestions and bug reports. Please send for review any PGN file that pgn4web fails parsing correctly. Enjoy! DEBUGGING Errors alert messages are logged by pgn4web, such as failure to load PGN data, incorrect PGN games or incorrect FEN strings. When an error is encountered, the top left chessboard square will flash to signal the exception. The error alert log can be reviewed clicking on the same top left chessboard square. HOW TO USE pgn4we.js To enable pgn4web, add a SCRIPT instance at the top of your HTML file: <script src="pgn4web.js" type="text/javascript"></script> The PGN input can be specified either as URL within another SCRIPT instance with at least the call to SetPgnUrl("http://yoursite/yourpath/yourfile.pgn") and optionally any of the other calls listed below. Or the PGN file can be pasted in the body of the HTML file within a hidden FORM/TEXTAREA statement with the ID pgnText: <!-- paste your PGN below and make sure you dont specify an external source with SetPgnUrl() --> <form style="display: none;"><textarea style="display: none;" id="pgnText"> ... your PGN text ... </textarea></form> <!-- paste your PGN above and make sure you dont specify an external source with SetPgnUrl() --> Example: <script type="text/javascript"> "use strict"; SetPgnUrl("yourpath/yourfile.pgn"); // if set, this has precedence over the inline PGN in the HTML file SetImagePath("images"); SetImageType("png"); SetHighlightOption(true); // true or false SetGameSelectorOptions(null, false, 0, 0, 0, 15, 15, 0, 10); // (head, num, chEvent, chSite, chRound, chWhite, chBlack, chResult, chDate); SetCommentsIntoMoveText(false); SetCommentsOnSeparateLines(false); SetAutoplayDelay(1000); // milliseconds SetAutostartAutoplay(false); SetAutoplayNextGame(false); // if set, move to the next game at the end of the current game during autoplay 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 SetInitialVariation(0); // number for the variation to be shown at load, 0 (default) for main variation 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 SetShortcutKeysEnabled(false); 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) </script> Then the script will automagically add content into your HTML file to any <div> or <span> containers with the following IDs: <div id="GameSelector"></div> <div id="GameSearch"></div> <div id="GameLastMove"></div> <div id="GameLastVariations"></div> <div id="GameNextMove"></div> <div id="GameNextVariations"></div> <div id="GameSideToMove"></div> <div id="GameLastComment"></div> <div id="GameBoard"></div> <div id="GameButtons"></div> <div id="GameEvent"></div> <div id="GameRound"></div> <div id="GameSite"></div> <div id="GameDate"></div> <div id="GameWhite"></div> <div id="GameBlack"></div> <div id="GameResult"></div> <div id="GameText"></div> <div id="GameWhiteClock"></div> <div id="GameBlackClock"></div> <div id="GameLiveStatus"></div> <div id="GameLiveLastModified"></div> The file template.css shows a list of customization style options. For better chessboard display, it is recommended to explicitly enforce chessboard and square size using the ".boardTable", ".whiteSquare" and ".blackSquare" CSS classes, such as: /* account for chessboard and squares border here, if any */ .boardTable { width:326px; height:326px; border-width:3px; } .whiteSquare, .blackSquare { width:40px; height:40px; } See template.html file for an example. See *mini.html* for an example of embedding the PGN content into the HTML file. See http://pgn4web.casaschi.net/demo/ usage example, including a live broadcast demo. See http://pgn4web-blog.casaschi for a usage example within a blog using the iframe html tag. The pgn4web scripts and pages are optimized for the HTML5 doctype declaration: <!DOCTYPE HTML> CHESS FIGURINE DISPLAY OF MOVES pgn4web allows displaying chess moves text using the supplied figurine fonts: 'pgn4web ChessSansAlpha', 'pgn4web ChessSansMerida', 'pgn4web ChessSansPiratf', 'pgn4web ChessSansUscf' and 'pgn4web ChessSansUsual'. These fonts are based on the Liberation Sans font, see credits section for more details, that is provided as well for overall consistent display of moves, text and headers. To enable figurine display of chess moves text, make sure you include the corresponding fonts/pgn4web-font-ChessSansPiratf.css file toghether with the font/pgn4web-font-LiberationSans.css file into your