5 Steps to Chess Viewer Deluxe

I discovered that Chess Viewer Deluxe opened much faster without any "Kill" page message from chrome when I created a whole new sister blog to The Chess Nut Blog.  This blog page now opens faster than it did before.  If I get rid of all the widgets, I bet this blog would be even faster, but it would lose its appeal.  I called the new sister site,  Chess Nut Games and it will house the game files so that you can view multiple games from each year.  Of course I posted a link to the Chess Nut Game blog from the home page of The Chess Nut Blog called Games.  You can spot this tab or button in the upper right side of the page menu.    Here are some other quirks that I did my best to work out in 5 steps.

Why is this cool?  Because you can display multiple games without using someone else's server to store game data, and it looks rather nice with an easy-to-use interface.  Flash PGN viewers (that I have found) only show one game at a time.  My favorite Flash viewer being ChessFlash PGN Viewer.


Step 1.  Deploy Chess Viewer Deluxe.  Before you  create a page with the above code embedded in the page editor, you must first do the following:

1.  Enter Template editor.
2.  Click button to Edit HTML.
3.  Scroll until you find </head>
4.  Copy this code and paste it immediately before the </head> code:

< -- Chess Viewer stub -->

<script src=’http://chesstuff.googlecode.com/svn/deployChessViewer.js’

type=’text/javascript’/>

Step 2.  Embed the Chess Viewer Deluxe interface. I used the following code to get the Chess Viewer Deluxe interface embedded onto a website page:

Step 3.  Get your PGN data.  Here is the PGN data as entered into the code for the Chess Viewer Deluxe interface:

[Event "2011 SIO"]
[Site "Twin Falls"]
[Date "2011.11.12"]
[Round "4"]
[Result "1-0"]
[White "Porth, Adam"]
[Black "Veraschagin, Alexandr"]
[ECO "C41"]
[WhiteElo "1271"]
[BlackElo "1281"]


1.e4 e5 2.Nf3 d6 3.c3 Nf6 4.d4 exd4 5.Qa4+ Nc6 6.cxd4 Bd7 7.d5 Ne5 8.Qd4 Nxf3+ 9.gxf3 h6 10.Nc3 a6 11.Be3 c6 12.Bc4 c5 13.Qd2 b5 14.Be2 b4 15.Nd1 a5 16.Bc4 Qb8 17.b3 Bb5 18.Nb2 Bxc4 19.Nxc4 Be7 20.Bf4 Qb5 21.Bxd6 Ra6 22.Qd3 Nd7 23.Rg1 g6 24.Be5 Nxe5 25.Nd6+ Rxd6 26.Qxb5+ Nd7 27.Rc1 0-0 28.Qxa5 1-0

You can enter another game right after that one and produce a PGN viewer that displays multiple games.

Step 4.  Change the moves into HTML.  The PGN data should be interpreted or massaged into HTML format.  I wanted to get games out of the Fritz database and just copy and paste it into the code.  Here is how I discovered how to get the job done:

1.  Select your game from the Fritz database.
2.  Right click the game and select output and then Selection to text file . . . 
3.  Choose the file format HTML and save it somewhere so you can retrieve it (I save to the desktop and then delete it after I am done).
4.  Open that file up (it will open in a browser).
5.  I can now copy and paste the moves, but not the game data which I have to hand enter.

Step 5.  Repeatedly visit your site.  In this way you will feel like the hard work is appreciated by many people as your hit count goes up.

By the way, what a pain in the ass trying to display HTML code examples on a blog post.  I went ahead and copied the code and pasted it on a PowerPoint slide, and then saved the slide as a JPEG image.

I also just discovered a way to post code in posts without blogger interpreting it:
1.  In the Post editor, click on the options button on the right side of the screen when you are ready to post.
2.  Choose to Show HTML literally

My hope is that my three days of trying to figure this out will save you some time.  Plus, I will be able to visit here if'n I forget how to do all this!