Overview
Have you ever wanted to share chess games without having to use a Java Applet, Flash nor upload bunch of files via FTP to some remote server? Well, I wanted to. It was 2006 and it was quite difficult to get your games out there. This is when I built the Chess Pastebin. A site where you could upload your games to and share a simple link.
This project is about the actual Javascript library which does the heavy lifting of parsing the PGN file into a visual board. This page serves as examples and some usage documentation. The development documentation is available on the github project page.
Usage
JsPgnViewer is a JavaScript library like any other. If you want this for your website you download the package and configure to display the board and the games as you like. Here I have bunch of games configured and their respective configuration written out.
The configuration for the above board is as follows.
<!-- This defines the DIV where the board will get drawn -->
<div id="fen1_board" width="100%"></div>
<!-- This is the hidden DIV that contains the game PGN -->
<div id='fen1' style="visibility: hidden;display:none">
[Event "SOK theme63 corr"]
[Site "corr"]
[Date "1990.??.??"]
[Round "?"]
[White "Brinkmann, W"]
[Black "Hunstock, J"]
[Result "0-1"]
[ECO "A00"]
[SetUp "1"]
[FEN "r1b2k1B/pppp3p/2n2p2/8/3N2nq/1QP3bN/P2PP1Bp/R4K1R b - - 0 14"]
[PlyCount "21"]
[EventDate "1990.??.??"]
[EventType "tourn (corr)"]
[EventRounds "2"]
14... d6 15. Nf3 Qxh3 16. Qxb7 Bxb7 17. Bxh3 Nce5 18. Kg2 Bf4 19. Bxg4 Nxg4 20. Rhf1 Kf7 21. Kh3 h1=Q+ 22. Rxh1 Nf2+ 23. Kg2 Nxh1 24. Rxh1 Rxh8 0-1
</div>
<!-- For each board you need to write at least 2 lines of JS -->
<script>
var brd = new Board('fen1', {
// Here is couple of settings which are commented out
// The lib has reasonable defaults but those can be overridden
//'movesPaneWidth':'300px',
//'showMovesPane':true,
//'squareBorder':'1px solid #666666',
//'moveBorder':'0px solid #cccccc',
});
brd.init()
</script>
There are many options that can be used to configure the board. The best source of information for a complete list is the source code.
WordPress Usage
The software download also features a Wordpress package. It is a zip archive that can be uploaded to Wordpress as a plugin and it makes it more easier to use the plugin.
After installing the plugin you can embed PGN (or Yahoo chess format) in your blog post between the tags ###pgn### and %%%pgn%%% and the text gets substituted with a graphical board.