mliebelt / pgn-viewer Goto Github PK
View Code? Open in Web Editor NEWSimple PGN viewer with the necessary features to display chess games
License: GNU General Public License v3.0
Simple PGN viewer with the necessary features to display chess games
License: GNU General Public License v3.0
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.
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.
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.
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.
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:
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.
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.
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.
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
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.
Currently http://mliebelt.github.io/PgnViewerJS/docu/index2.html shows the wrong version number.
Thank you very much for PGN viewer. How will the choices made while pawn promotion? queen, rook, knight or bishop. Thanks you.
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.
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.
When you do the following, you will loose the option to remove NAGs later:
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..
There are multiple links available, which don't work at all. Provide at least the following:
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.
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.
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?
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
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.
When I hover over the buttons in normal mode, the hover text for the buttons is:
It should instead display the internationalized name of the button e.g.
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 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
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.
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:
Here are some of the resources I have found, will search for more:
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:
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 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:
I have now the same locale for editing on board 1 and 2:
fr
(which is ok).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.
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:
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.
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.
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?
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.
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
There are some anomalies with the move numbers:
Currently, the defaults are spread all over the source code. It would be nice to have the following:
I have the following use case very often:
It would be nice to have the following:
Alternative, it could be possible to see the whole PGN, but to show the game from the start position instead.
The following use cases may be interesting:
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
r1bq1rk1/1pp1bppp/p1n2n2/3pp3/B3P3/2P2N2/PP1P1PPP/RNBQR1K1 w - - 0 8
as start point of the main variation in Mashall gambit.d5
hideMovesBefore
: true|false
(default false). If true hides the moves in the pgn notation which are before startPlay
.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.
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
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:
Currently the edit mode is nearly finished. The only things that are lacking:
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:
Especially the game when the computer analysis was done is interesting ...
The different possibilities are:
There are many examples on the internet, on different site:
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.
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.
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.
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.