Using Gameknot iChess Viewer With Hexo

general

I have a friend that likes to use the phrase back in the day. Well, back in the day, I used to use the chess playing website GameKnot an awful lot. I expecially liked their JavaScript game player because it was simple and looked pretty good.

This is a poor screenshot because with a proper game, there would be much more to see, but you get the idea.

That worked great on Blogger but when I moved off of that to Wordpress, it all stopped functioning, and I didn’t have the time to look into why. Moreover, sadly, that rendered all of my old games unplayable - a huge pain, but I lived with it.

Now I am thinking of moving away from Wordpress again, and wanted to see if this would work on my static site, Hexo with the glorious bonus that I can resurrect my old scripts which are stuck in their proprietary format.

Alas, it wasn’t straight forward and I suffered more problems, but I have a work-around which I am going to share with you. Note: I am assuming you are familliar with this chess playing script. If not, check out the ichess viewer here.

So how are we going to tackle this? We’re going to break this down into three steps.

1 - Altering ichess.js - the main code used to display the board interactively and storing it locally.
2 - Embedding the JavaScript in your Hexo page.
3 - Jigging with the styles

Let’s start with our first task.

1 - Altering the code

Your first thought is bound to be why!?

The main issue is that when you paste their code into your page, it tries to pick up the ichess.js file locally, rather than from their website (src="http://e.ichess.com/ichess.js").

We can help out script out by actually using a local copy, which we store. To grab it, go to: http://e.ichess.com/ichess.js and save it somewhere on your system as ichess-js. Pay attention to the fact that I didn’t save it with the extension .js because if you do, in Hexo, it will treat it as a new page. Not using hexo? Ignore that.

We’re now going to change the code inside so that when it tries to use assets, it will refer to our local folder, and not theirs.

Open the file up for editing, and search for this string: ichess_domain. We’re going to replace all instances where we see // with an empty string, like so:

1
src="//' + ichess_domain + "/img/chess" + p +

becomes:

1
src="' + ichess_domain + "/img/chess" + p +

If you look closely, you can see that I have removed those prefixed double-slashes, completely.

Now save that file into the folder that your post will either live, or grab its assets from, if appropriate - remember, this post is hexo focussed. Also, if you like, take a look at the sources on this page and grab my copy if you want.

2 - Grabbing the Assets

We now want to get our own copies of these three files: canmove_b.gif, canmove_w.gif and chess3.gif. You can find each of these at the following URLs:

Place the assets starting in the same folder as ichess.js, but under this folder hierarchy:

/e.ichess.com/img

3 - Embedding the code

To get this into your hexo page, you need to paste raw JavaScript and for that, we’re going to use the raw block. Add the following (minus the row numbers) in where you want the viewer to go:

1
2
3
{% raw %}

{% endraw %}

Now we need to paste in the generated code from GameKnot. Here’s the original.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- iChess v1.3, (c) 2007-2019 GameKnot.com -->
<script type="text/javascript" src="//e.ichess.com/ichess.js"></script>
<div id="ichess712140">Play <a href="http://gameknot.com/">chess online</a></div>
<script type="text/javascript">/*
*/if ((typeof ichess_create)!='undefined')/*
*/{o=new ichess_create(11,'ichess712140',3);if(o){/*
*/o.im('b2b4c7c6d2d3f7f5');/*
*/o.il(0,0,1);/*
*/o.ip([0], ['-']);/*
*/o.ia(['','','','']);/*
*/o.ih(0,'Chess%20game','%3F%3F%3F%20vs.%20%3F%3F%3F');/*
*/o.go(0,0);}}/*
*/</script>

We just need to refer to our local ichess-js, so change line 2 to have this src instead:

src="ichess-js"

Now, once you regenerate your pages, if your lucky, that might be enough. In my case, though, I had some theme CSS interfering with the interactive player. If that happens to you, what I am about to show you may be enough, but if not, play around in the Chrome dev tools (or your preferred tool) to see what you need to fix.

Just underneath the raw block, add this styling:

1
2
3
4
5
6
7
8
9
10
11
12
{% raw %}
<style>
article .content img, article .content video {
    max-width: none;
}
th, #ichess712140 {
    color: black !important;
}
#ichess926276-footer > tbody > tr > td:nth-child(2) {
    padding-bottom: 5px !important;
}
</style>

The max-width stopped my board from displaying the pieces properly, and my theme, cactus, had altered my text colours, so that’s what the next part does. Lastly, to make sure that the attribution and link back to GameKnot remains within the borders of the box, we put a little padding using the #ichessxxxxxx-footer selector.

One important thing to note: to ensure that I only altered the colouring of specific things, I referred to the div that would contain my chess board. In my case, that was going to have the ID of ichess712140. GameKnot may change this designation, so make sure you use the one it gives you, instead, and not mine. You’ll find that on line 3 above.

Finally, check out this cheeky snippet of a game.

Play online chess

Final Remarks

It goes without saying that whilst we have altered the code etc. please do not remove any copyright notices back to GameKnot etc. This is their excellent tool and attribution must remain.

Found this useful? Had any problems? Let me know.

Hi! Did you find this useful or interesting? I have an email list coming soon, but in the meantime, if you ready anything you fancy chatting about, I would love to hear from you. You can contact me here or at stephen ‘at’ logicalmoon.com