We begin here with a fully functional "demo"-application. You could set any provided options, then click the SET button. But for the first interesting example: select and delete the PGN content of the cassette, then click the Load button.
field_size show_PGN show_moves with_annotation with_FEN
My PGNbrowser is a jQuery widget that could be attached to a textarea element, using for example $('#id_of_textarea').pgnbrowser();. If nothing is contained in this <textarea> then the widget will expose a chess diagram with the initial position and a bar with game-navigation buttons (but in this context only the "Reverse" button has sense); but more importantly will appear the Load button: if the user inserts a PGN chess game in the <textarea>, then clicking the Load button the widget will also expose the list of the (clickable) moves and the list of the annotations, extracted from the PGN (and in this context, the game-navigation buttons are all effective).
Note. The inserted in textarea PGN must contain a single chess game.
Of course, for this to happen it is needed that your HTML-source look something like this:
<head> <link href="pgnbrowser.css" rel="stylesheet" type="text/css" /> <script src="jquery-1.6.2.min.js"></script> <script src="jquery.pgnbrw.pgnbrowser.js"></script> </head> <body> <textarea id="txtPGN"></textarea> <script type="text/javascript"> $(function() { $('#txtPGN').pgnbrowser(); }); </script> </body>
The mentioned CSS and JS "pgnbrowser" files (supposed here to be in the same directory as your page) could be obtained from Github (soon!); should be added that the CSS uses some sprites of chessmen, supposed to exists in an "images/" subdirectory.
An instance of the widget (which is unique for the given textarea element) could be created with the set of options seen in this sketch of the widget construction:
$.widget("pgnbrw.pgnbrowser", { options: { show_PGN: true, // show PGN textarea show_moves: true, with_annotation: true, with_FEN: true, field_size: 32 // chess field size (pixels) }, _create: function() { // create the basic DOM infrastructure (independent of PGN) }, _init: function() { // parse PGN and create x88-BOARD infrastructure // verify the legality of the moves (using x88-BOARD) // set the corresponding DOM (incluging handlers) for moves-list }, // methods used by _create() or _init() and another ("public") methods })
For example, to drop out the FEN and use a 21px size for the chessboard fields:
$('#id_textarea').pgnbrowser({with_FEN: false, field_size: 21});
The handler associated with the Load button do not re-create the existent instance, but only execute the ._init() method - which parse the PGN extracting the pgn-tags, the moves part and the annotations, then verify the legality of the moves and constitute the DOM divisions for the list of moves (with corresponding handlers).
But if it is needed to re-instantiate the widget on the same textarea element (changing some options), then the current instance must be first destroyed:
$('#id_textarea').pgnbrowser('destroy') .pgnbrowser({show_PGN: false, field_size: 24});
as is done by the handler for the SET button when you change the provided checkboxes in the above "demo".
We are provided these options (and ignore anothers) by good reasons…
So, showing (and not hidding) the textarea element is not only for to first give the PGN - but also for to permit modifying it (adding annotations, for example); of course, saving the modified content is a supplementary problem, but the user could in final simply Copy&Paste from browser in the <textarea> element within his HTML-source.
If navigating the current loaded game will find that only a part of the game is interesting, then we could copy the FEN of this particular position and insert it in the textarea, in the PGN-tags part:
[FEN "rnb1kb1r/pp1ppppp/8/2p5/1q1Pn3/1P2BN2/P1P1PPPP/RN1QKB1R w KQkq - 2 6"]
letting in PGN only the moves beginning from the indicated FEN position (then clicking Load, we will see that only this remaining part of the PGN is expressed). Of cource, the FEN option is also useful if we wish to use a chess position analysis software.
Occasionally, the moves list or the move annotations are not necesary - so we provide the options for to not show these (but we mention that the moves-list <div> exists anyway in DOM - because the principal handlers for the game-navigation were based on some custom attributes - as "ChessFen" - inserted along the _init() execution in some childs of this <div>).
The list of the game moves can be automatically traversed by clicking the "Go" ⊞ button, but is to mention that this could be interrupted at any moment by clicking another button (Reverse, Next, etc.) or otherwise by clicking anywhere in the navigation bar.
For if you would like to set the initial position at a given move within the PGN, not an option but a "public" method goToMove() is provided:
$('#txtPGN').pgnbrowser() .pgnbrowser('goToMove', 10, true);
In this example, the initial seen on the diagram position will be set at the tenth black move.
Three infrastructures are interlaced: a "BOARD" which is a x88-representation of the position, fully inherited from my chessJSengine (including the corresponding infrastructure: a legal moves generator, the _makemove() and _takeback() procedures, etc.); a "diagram" constructed in DOM and a CSS definition of the "diagram", which were based on a sprite of pieces and most important on a very clever chess CSS-class construction, provided in 2008 by chess.dynarch.com.
Essentially, the extracted from PGN moves are succesivelly maked on BOARD (in memory, without "displaying" anything), accrediting that are legal moves; then are inserted as HTML-links in the DOM, with certain custom attributes which are used by the associated handlers for to update the curent "diagram" in the DOM.
Of course, for this the initial PGN text was analyzed, verifying the proper syntax and converting the moves from SAN-notation to 32-bit move representation used by the "BOARD" infrastructure.
Only apparently, this internal alternation between PGN world and x88-BOARD world could be inefficient; in practice is proved that it is not so.
vezi Cărţile mele (de programare)