When I start with the initial position or with a position defined by a FEN string, after having played some moves, pressing the "buttons:first" button, this initial position should be displayed.

At the moment, the program goes to the position after the first move.

When reading the specification of PGN, there is explicitly mentioned that import and export of games should be handled totally different. Today, the PGN viewer is able to read the standard export format (with some variations), but not all rules of the import format.

Therefore the parser should be made more robust, so that all kind of variations are possible and the reader does it work as expected.

Thank you very much for PGN viewer. How will the choices made while pawn promotion? queen, rook, knight or bishop. Thanks you.

I tried the following code:

var pgn = '[Event "PicoChess game"]\
        [Site "?"]\
        [Date "2016.08.16"]\
        [Round "?"]\
        [White "Player"]\
        [Black "Stockfish 7 64 POPCNT"]\
        [Result "0-1"]\
        [SetUp "1"]\
        [FEN "rnbqkbnr/1ppppppp/p7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2"]\
        2. Nc3 e5 3. Nf3 Qe7 4. Nd5 Qd8 5. Nxe5 Bc5 6. d4 Ba7 7. Bc4 h5 8. Nxf7 Qh4 9.\
        Nxc7+ Kf8 10. Qf3 g5 11. Bxg5 Qg4 12. Qxg4 hxg4 13. Nxh8 Bxd4 14. O-O-O Bxh8\
        15. Nxa8 d5 16. Rxd5 Nc6 17. Nc7 Nge7 18. Bh6+ Kg8 19. Rh5+ Be6 20. Bxe6+ Kh7\
        21. Bf8+ Kg6 1-0';

var cfg = { position: 'rnbqkbnr/1ppppppp/p7/8/4P3/8/PPPP1PPP/RNBQKBNR w KQkq - 0 2',
    pgn: pgn, locale: 'en', pieceStyle: 'merida' };
var board = pgnView('board', cfg);

This leads to:
SyntaxError: Expected " ", ".", "O-O", "O-O-O", "x", "{", [RNBQK] or [a-h] but "-" found.
and not working...If i change the result to 1/2 or * it works.

I saw a reference lately to http://fontawesome.io/ and liked it a lot. Try to build a style where the video player icons are used (http://fontawesome.io/icons/#video-player).

I am sure that there are additional icons there that could be used as well for editing and other things.

Currently the result of a game can only be included in result tag pair (see seven tag rooster, chapter 8.1.1 in PGN specification). It should be possible to include the result at the end of the moves as well.

http://chessboardjs.com/ has a nice documentation (which I borrowed in part), and part of it is that all examples may be opened in a separate window or tab. This is helpful, if you have a complex example and want to look at the sources, so you see it stripped down to the bare minimum. Sometimes, the examples are so big, that the layout of the examples (with navigation, ...) does not look well.

Hello,

I saw your post on Chess.com about this system you built. It looks really good and I think it could be the solution to a project I am working on.

Right now, I have chessboard.js and chess.js working together. However, I have needed something for displaying and navigating PGN.

I could only fine references to functionality for the JS you built. Since I know about the other 2 libraries, I am thinking it may be best to just integrate the PGNreader part of your code into my project.

Is this easy to do or have you modified chessboard.js and chess.js to work with your library? Could you give some guidance on adding your library to what I already have?

Any help you can provide here would be greatly appreciated.

lee

When I work on the code and test in different browsers, all is well in Chrome, IE, Safari, Vivaldi, but not in Firefox. In Firefox, I get the following message when opening the file examples/edit-pos.html.

downloadable font: download failed (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:1): 
bad URI or cross-site access not allowed source: file:///C:/Users/mliebelt/IdeaProjects/PgnViewerJS/font-awesome/fonts/fontawesome-webfont.woff2?v=4.5.0

I have searched around for solutions, but did not find anything simple. It seems to be that using CDN is the better solution, but that means that using PgnViewerJS using without internet is not possible any more.

Anyone with an idea how to fix that?

Hi,

I've made some minor improvements to your peg-rules.peg (see below). My changes are marked with SJS. Feel free to use my changes.

PgnViewerJS uses peg version 0.8.0. Peg has now been updated to 0.9.0 which breaks peg-rules.peg - it throws 'Can't find variable: hm' for valid pgn. I've raised an issue on the peg.js project but wondered if you might have any idea how to fix it. I've spent a few hours on it without success.

Cheers,

Steve

There are some anomalies with the move numbers:

• FEN is given, with move number included, but numbering starts with 1. It should start with the move number following the FEN string.
• FEN is given, last move black, but move numbering seems to be that white takes a move. When black starts, the move number should be something like "17... " and the next move with white should then be "18. "

Found the site lichess.org 2 months ago, and like it a lot. I would like to have the option to style the chessboard including notation as at lichess.org.

Here are some links to the analysis board of some games:

• http://en.lichess.org/U7V7PB7f#79
• http://en.lichess.org/hVIF9XUV#88

Especially the game when the computer analysis was done is interesting ...

Details

The different possibilities are:

• Show notation inline (has to be set by the user, default is not).
• Show notation as list, with variations inline.
• Show notation a slist, with variations as list as well. Find a way to show that those are variations (additionally to the parenthesis used).

There are many examples on the internet, on different site:

• chess24.com: Uses notation as list, with variations inline. You can use that on any game, so every user has the option to create his own variations.
• chess.com: see an article there with the included games. Notation is inline, variations as well.
• chessable: notation is inline (only).

PGN as a format allows to have more than one game. So it should be easy to provide a UI that allows to play through many games at the same place.

The following should be done to do that:

• Allow to parse many games at once. This could be done by enhancing the grammar, or by a pre-processing that splits the included games into many before using the parser.
• Add a drop-down box for selecting the game that should be shown. The display in the drop-down should include relevant information like players, round, ... which may depend on the kind of games that are played here.
• Add a configuration parameter, to make explicit that many games should be read at once.

Currently, the defaults are spread all over the source code. It would be nice to have the following:

• Centralize the defaults at one place, so it is easier to look them up.
• Allow to modify the defaults programmatically (without changing source code, of course), that will be used then instead of the defaults provided in the sources.

If should be possible to read the whole pgn from an external source, so it is easier to modify the pgn without modifying the original source (HTML, CSS, JavaScript, ...). In the future, it may be even possible to integrate a source with more than one game, and to step through the games in the viewer (not so easy to transport that to edit, board and print).

The source should be given in the normal format:

• As URL with a corresponding protocol (HTTP, HTTPS)
• As relative path to the file system (useful during development, so I can reuse pgn examples on a lot of example pages)

Currently it is not possible to underpromote a pawn in edit mode. When you move a pawn to the eight rank (for white) or first rank (for black), the pawn is automatically promoted to a queen (which is ok most of the time).

The edit mode should ask the user in such a situation to which the pawn should be promoted. The menu should allow the promotion with a menu of symbols in the right color, corresponding to the symbols used in the current game.

I have the following use case very often:

1. I have a complete PGN (by analysis with the computer).
2. I want to publish part of it (definitiv not all of it) on the internet.
3. I take the FEN string from the current position.
4. I have to snip out the PGN from that position only.

It would be nice to have the following:

• Use the FEN string from above
• Use the whole PGN, but the viewer only displays the moves from the given position.

Alternative, it could be possible to see the whole PGN, but to show the game from the start position instead.

Details

The following use cases may be interesting:

• Define the start position of the player by giving
  • a FEN string
  • a half-move number (counting from 1)
  • a move notation
    The PgnViewer will then search for the right position.
• Define if moves should be
  • cut before (default?)
  • left complete

Configuration

The configuration may be expanded by the following parameters. The example is the following PGN string: 1. e4 e5 2. Nf3 Nc6 3. Bb5 a6 4. Ba4 Nf6 5. O-O Be7 6. c3 O-O 7. Re1 d5 8. exd5 Nxd5 9. Nxe5 Nxe5 10. Rxe5 c6 11. d4 Bd6 12. Re1 Qh4 13. g3 Qh3 14. Qd3

• startPlay: no default. If not given, play starts from the first move. Possible values are
  • FEN string: r1bq1rk1/1pp1bppp/p1n2n2/3pp3/B3P3/2P2N2/PP1P1PPP/RNBQR1K1 w - - 0 8 as start point of the main variation in Mashall gambit.
  • half-move number: 14 (which is the half-move of black in move 7).
  • move notation: d5
• hideMovesBefore: true|false (default false). If true hides the moves in the pgn notation which are before startPlay.

It should be possible to integrate stockfish.js into the PgnViewerJS as a local chess engine to support the analysis. This would be very handy when using the edit mode to create the analysis of a game, but also in using the view mode to have some support for replaying a game.

These are the things that should go into the implementation:

• Easy to configure: just flip a bit
• Only download the big stockfish.js file when needed
• Find out if there is some customization available.
• Provide a UI (div) that shows (configurabe)
  • the number of variations that are computed (default 4)
  • the value the engine gives in each variant (in hundreds of pawn entities, like lichess.org)
• Provide configuration of the UI to allow the display in different ways

Here are some of the resources I have found, will search for more:

• original port with some minimal description (not yet tested)
• lichess used port with multi-variant support (that is not of interest to me at the moment)
• official stockfish port where the lichess port is a clone from
  • wiki pages usage UCI best explanation up to now how to use it
• nice description how to use in another port, will have to check that as well

There are multiple links available, which don't work at all. Provide at least the following:

• Consistent documentation, how to get the current "version"
• Provide not only the GitHub development version (by using the download zip button on the website), but a minimized distribution version, that may be used on other websites for displaying chess games.
• Provide older major and minor versions (if possible).

Currently the reader does not understand the Long Algebraic Notation, so code like

pgnReader({pgn: '4... Nf6xc4', fen: 'r1bqkb1r/pppp1ppp/2n2n2/4p3/2B1P3/5N2/PPPP1PPP/RNBQ1RK1 b kq - 5 4'});

results in the following error

SyntaxError: Expected " ", "!!", "!", "!?", "#", "$", "(", "*", "+", "0-1", "0:1", "1-0", "1/2-1/2", "1:0", "=", "?!", "?", "??", "D", "{", "∞", end of input, or integer but "x" found.

The reason for that is that only disambiguation (column XOR row) is allowed, but not both like in Nf6xc4.

See the documentation to move() in chess.js with the sloppy flag what should be possible out of the box.

Hi,
in your examples, if i click on a move in a variation, the board doesn't update (correctly).
That is only working on the main line.

So lets say I am able to load the pgn initially and mine is a real time chess app, how do i refresh the view once i have a new move made on the board? Is there a way to hook it up with a real time backend?

Currently, i am using this library to display games that are being played elsewhere, everytime a move is made on the "playing" board, that move is notified to my app which is using this library and should be able to reflect that move dynamically. Is that possible using this lib?

I was pretty sure that has worked in the past, but now the generation of the moves misses the "x" symbol for the capture of figures. Ensure again that this is included.

When you repeat the move number after a comment like: `"{comment} 18..." leads to an error. The parser should ignore the (repeated) move number there.

See http://www.chessmail.de/forum/topic.html?key=b83d3446676d5f348&sv=4 for an example

After downloading the latest version as zip file from the 'dist' folder I checked the readme.md that references an 'example' folder that is not part of the zip file.

The easiest solution would be to include a link to the examples directory within the 'dist' directory into the readme.md.

When a move in a game may be made by different pieces, it is necessary to disambiguate that. PgnViewerJS can read thos disambiguation but does not include them when printing the moves.

See as example http://www.chessmail.de/forum/topic.html?key=443e5a8d53ba4233&sv=4 move 4 of black, where the original PGN text included the disambiguation.

See the chapter 8.2.3.4 of the PGN spec: http://www6.chessclub.com/help/PGN-spec

The examples on the web site look a little bit different.

• Normal: Button background is white, NAG menu is not so wide,
• Examples: Button background is shaded grey, NAG menu is wide.

Normal edit mode:

Example edit mode:

When I hover over the buttons in normal mode, the hover text for the buttons is:

• buttons:flipper
• buttons:first
• ...

It should instead display the internationalized name of the button e.g.

• English: buttons:flipper == "Flip sides", buttons:first == "Go to start"
• German: buttons:flipper == "Wechsel Seiten", buttons:first == "Gehe zur Startposition"
• ...

It would be nice to have a FEN view that displays the current FEN all the time. This view should be configurable, and the default in view mode would be "false" (not shown) and in edit model would be "true" (shown). In edit mode, it could be used to start with a special position, which would then remove all moves before.

There are a lot of examples included in the distribution of PgnViewerJS, but it is not easy to understand all possibilities that different configuration parameter give you. It would be nice if there there would be a UI that demonstrates the following:

• Provide in a UI all configuration elements per drop-down selections, checkboxes (for boolean configuration) for free text so that all possible values are visible in the UI at once.
• On every change of one of the parameter, update the UI to show the effect of the change.
• If necessary, provide variants of that configuration UI for the different modes: board, view, edit, print
• Display as output the following
  • the configuration hash that could be used directly as input
  • FEN and PGN as generated that could be used directly in other programs or online

The following example leads to an error: "26. f3 $4". You have to use instead: "26. f3$4" (without a whitespace in between).

See http://www.chessmail.de/forum/topic.html?key=cbe6a8b93c063f9ec&sv=6 for a<n example.

When you do the following, you will loose the option to remove NAGs later:

1. Select a move.
2. Select from the NAG menu e.g. '?'
3. Select another move.
4. Select again the previous move.

When you drop-down the NAG menu, you will see that the previously set NAG is not displayed. By selecting another NAG (or even the same), this will be added to the move as well, because NAGs are additive. You loose the option to deselect the previously set NAG.

Every time a user selects a move, the NAGs from that move should be pre-selected in the NAG menu..

Currently the edit mode is nearly finished. The only things that are lacking:

• Some cleanup of the UI ( it is pretty ugly ). Use instead some of the nice icons from Font Awesome.
• Allow to cut variations and / or main lines.
• Allow to promote variations:
  • When you have 3 variations, you may promote the third, so it becomes the second.
  • When you promote the first variation, it becomes the main line.

The documentation is getting better, but the reference part is just empty. Include at least references to all libraries ... used, including some hints why it was chosen, how it is used and included in the distribution.

Try to follow the recommendations in https://github.com/olivierlacan/keep-a-changelog Should be doable, and with the next (major) release, it should be seen that this makes a difference.

1. e4 e5 2. Nf3 c5 3. Bb5 Nc6 4. O-O Be7 5. c3 Nf6 6. Re1 O-O 7. d4 xd4 8. xd4 xd4 9. Bxc6 xc6 10. Nxd4 Bg4 11. f3 Bd7 12. Nc3 Qc7 13. Be3 Rd8 14. Qc2 Re8 15. Rd1 a5 16. a4 b6 17. b3 c5 18. Ne2 Bc6 19. Bf4 Qc8 20. Bg3 Nh5 21. Rxd8 Rxd8 22. Rd1 Nxg3 23. Rxd8 Qxd8 24. Nxg3 g5 25. Nf5 f6 26. Nxe7 Qxe7 27. Qd3 Qd7 28. Qxd7 Bxd7 29. Kf2 Kf7 30. Ke3 Ke6 31. g3 Ke5 32. f4 xf4 33. xf4 Ke6 34. h4 h5 35. Nd1 b5 36. Nb2 xa4 37. xa4 Bc6 38. f5 Kd7 39. Nc4 Bxa4 40. Nxa5 Kd6 41. Nc4 Kc6 42. Kd3 Bb5 43. Kc3 Kd7 44. Nb6 Kc6 45. Nd5 Bf1 46. Nxf6 Bg2 47. e5 Kc7 48. e6 Kd8 49. e7 Kc7 50. e8 Kb6 51. Nd7 Kc6 52. Ne5 Kd6 53. Qe6 Kc7 54. Qd7 Kb6 55. f6 c4 56. Nxc4 Ka6 57. Qc7 Kb5 58. Qb6 Ka4 59. Qb4

In the above game, some moves such as a "check" or last move Qb4 should have been Qb4# or at 23. Rxd8+ (signifying a check). Current implementation does not add '+' for a check or '#' for mate.

The page http://www.saremba.de/chessgml/standards/pgn/pgn-complete.htm has under chapter 17 additional languages. Currently, we have only English, French and German. It would be easy to add those different languages as well.

Hi,

at least at the edit mode (in the example section of yr webpage), i get "xd6" instead of "exd6" for a move e5xd6.
Thats the case for ALL pawn captures.Other pieces captures are okay.

In the following examples, the tags are not displayed well. Find a better way to give a default format, or even allow an individual display of the tags.

<script>
    pgnView('demo', { pgn: '  [Result "1-0"]  [White "Adolf Anderssen"]  [Black "Jean Dufresne"]  
           [ECO "C52"]  
           1.e4 e5 2.Nf3 Nc6 3.Bc4 Bc5 4.b4 Bxb4 5.c3 Ba5 6.d4 exd4 7.O-O  d3 8.Qb3 Qf6 9.e5 Qg6 10.Re1 Nge7 11.Ba3 b5 12.Qxb5 Rb8 13.Qa4  Bb6 14.Nbd2 Bb7 15.Ne4 Qf5 16.Bxd3 Qh5 17.Nf6+ gxf6 18.exf6  Rg8 19.Rad1 Qxf3 20.Rxe7+ Nxe7 21.Qxd7+ Kxd7 22.Bf5+ Ke8  23.Bd7+ Kf8 24.Bxe7# 1-0  ', 
        orientation: 'white', pieceStyle: 'merida', theme: '', boardSize: '', size: '400px', locale: 'en' });
</script>

Hi,

right now the JS file generate the other divs from the board-div (id).
I would like to put the divs inside the markup so i can style their place myself.
For example, i can give the IDs as parameter inside.

Jürgen

Hi mliebelt,

I thought you might be interested to know that I've used your fine work as a foundation for a Guess The Move prototype. I integrated PgnViewerJS into Meteor (a story in itself), added some enhancements and deployed it (just for fun) to chesstraining.meteor.com

Note that it doesn't work on the first move (e4), after that it's ok. I'll fix that soon.

Thanks for making public your excellent work. I'd be interested in your comments. You're welcome to the modified code.

All the best,

Steve

The following issue was entered by calvicius as a comment to another issue. Because it seems to be a different problem, I have added a separate issue for it. I hope I have got the intention right,

I have a problem with fen positions
Your edit.html example
originaly inits with position:'start'. So ... if I change the start position with a fen with side to move as black; lets say : position : 'rnbqkbnr/pp1p1ppp/4p3/4P3/2PQ4/2N5/PP3PPP/R1B1KBNR b KQkq - 0 6' always inittiates the process as white to move.

I have also tried to change in html like this :

    <script id="identificador_js" cadena="<?echo $cadena1; ?>" src="../js/pgnvjs.js"                          type="text/javascript">

and then change pgnvjs like this

//recuperamos la query string
var locojo=document.getElementById('identificador_js');
var esmio=locojo.getAttribute('cadena');

for receiving the fen chain, then I have changed this (ten lines below):

//var game = new Chess();
to
var game = new Chess(esmio); with "'"+esmio+"'" also

and the problem persists.

Also i think, the program should react on the SETUP tag. For example, if i dont give a "position" should use the SetupFen Value (this is the standard case). Right now, this seems to be ignored, and i have to filter out the value myself to give it inside the cfg.

• See the Wikipedia definition of Portable Game Notation, search for setup.
• Better description in the original specification

Currently http://mliebelt.github.io/PgnViewerJS/docu/index2.html shows the wrong version number.

The themes green and blue (created long ago) were based on additional icons. Those are now not used any more, but the use of Awesome Icon Font is not adapted yet. Find a simple solution to that:

• Ensure that the old icons work again XOR
• Use the new icons, but at least with a corresponding color scheme

Are you interested in integrating your viewer with https://github.com/mcostalba/scoutfish?

Scoutfish is a powerful searching tool with inside chess knowledge that is able to quickly find a subset of games matching a set of flexible and powerful conditions very quickly even in very big PGN databases. The output is a list of the games PGN.

What is missed is a way to allow the user to graphically define a query. In case you are interested please get a look at the README.md in the above link and let me know. Thanks.

When working on ticket #26, I noticed that the following is broken: 1. e4 e5 2. Nf3 d6 3. Bc4 Bg4 4. Nc3 h6 5. Nxe5 Bxd1 6. Bxf7 Ke7 7. Nd5 but this notation works: 1. e4 e5 2. Nf3 d6 3. Bc4 Bg4 4. Nc3 h6 5. Nxe5 Bxd1 6. Bxf7+ Ke7 7. Nd5#

The only difference here is that the original moves string does not contain the check and mate symbols. This seems to be a problem of the library used (chess.js), so I have to check that again.

Sometimes it would be easier to have the current FEN and the PGN displayed all the time in the UI. So no button to display it, but instead display it all the time. The UI for FEN could be used to setup a position then (which will be then the start position for the edit mode).
The current FEN would be helpful in view and edit mode, the PGN only in view mode.

When you use the edit mode that allows to edit the games, the locale for internationalization is not working as expected. I have created an example examples/edit.html which has 4 boards, with the following options:

1. edit mode, locale fr, no moves
2. edit move, locale de, some moves
3. view mode, locale en, some moves
4. view mode, locale fr, some moves

I have now the same locale for editing on board 1 and 2:

• When editing now on the first board, the moves are displayed in locale fr (which is ok).
• When editing now on the second board, the new moves are displayed in locale fr, but the old moves are displayed in the locale of the settings, de.

It seems that as locale for the editing, the last set locale of the board of a page is taken. This has only an effect on pages that have multiple boards with different locales, of course.

When a game is displayed by the viewer, and the PGN notation given to the viewer is syntactically wrong, no notation at all is emitted, and error of the PGN parser internally thrown is ignored and not shown to the user.

The viewer should be robust enough to show a meaningful error message (or an error message at least) where the moves are normally shown, to help the user understand why the game is not displayed as usual.

Add an error div that is used all the time for all kind of errors. Allow the user to steer a little bit when (and which) errors are shown. Try to find different categories for that.