I had an idea already some months ago to make a less ugly computer go board. A week ago, I finally got around to implementing it and decided to share the library freely for noncommercial use:

http://www.jgoboard.com/

As a proof of concept, I also made a simple (but good-looking ) SGF viewer - format support is not perfect but should work on most decent browsers:

http://www.jgoboard.com/sgf.html

Here's the viewer in action (you can use arrow keys on most browsers to navigate):

http://www.jgoboard.com/sgf.html?url=http://www.jgoboard.com/sgf/shusaku.sgf

If there's demand, I might also make a version that is easy to embed on other websites to view SGF files, much like what can be done with EidoGo and some Flash-based viewers.

I'd be happy to hear any comments or improvement suggestions anyone might have.

I just wanted to be the first to say that it looks beautiful. Great work!

That's beautiful. One thing that stands out, though, is how the stones are perfectly aligned. There's a Mac program called Goban (http://www.sente.ch/software/goban/), which, as you can see from the screen shot, is the only go program I've seen that slightly mis-aligns the stones so they look more realistic. My guess is that doing this with javascript is not easy, but there is often more realism in imperfection.

Edit: well, there you go; I didn't see the shuffle option, until the next poster mentioned it.

Excellent job!

_________________
My blog about Macs and more: Kirkville

That's amazing! Any chance of you building it into an offline sgf viewer?
I especially liked the option to shuffle or align stones, and the use of shadows. Really cool!

Really, really, nice.

Thanks for all the comments so far!



Offline use would require some way to "open" an SGF file, and I don't know if it can be done using plain JavaScript. Of course one could make a text box where you could paste SGF contents, but that would perhaps be a bit cumbersome for most users. I'll keep the idea in mind, however, and maybe do it at some point if I find an easy way.

If you check out his sgf-viewer, there is an option called "shuffle" this does exactly what you desire.

EDIT: Didn't see your edit.

That would work for me.

If you want to avoid reinventing the wheel in terms of functionality, you could almost certainly use stylesheets to apply your look to an eidogo player. If you want some prior art to crib off of, take a look at my wordpress plugin which includes a mini-mode for eidogo done using a stylesheet.

_________________
KGS 4 kyu - Game Archive - Keyboard Otaku

Looks really good so far. As far as the SGF viewer goes, some functionality to see the most recent stone played would be nice. Perhaps a glow effect or something would work without distracting from the style. I know you're going for photorealistic, but a point arises where function overrides form.

_________________
Someday I want to be strong enough to earn KGS[-].

It would be cool if KGS would implement something like this...

_________________
"There are no limits. There are plateaus, but you must not stay there, you must go beyond them. If it kills you, it kills you. A man must constantly exceed his level." -- Bruce Lee

I agree it quite a striking visual. Good job.



I wonder how much the advent of the 'marked last move' has changed/weakened the average players perception of game. Does this do anything to distract from assessing the whole board situation? There is obviously no such marker in a face to face game, unless you can swallow enough your pride to ask your opponent where they played. I know I find it hard, if feels like I should know what the board looked like before my opponent played and should be able to figure it out myself.

Yeah, but if you're clicking through a game (especially a pro or beginner game) you may not know where to look for the next move. I do understand your point, and it's an interesting one. However, I also see merit in the convenience, in addition to not wanting to miss an atari that I 'should have seen'.

_________________
Someday I want to be strong enough to earn KGS[-].

Typically you can see your opponent's hand. In any case, a simple solution that wouldn't spoil the look would be to indicate the coordinate next to the move number. Something like "Move: 1 (D10)" would help you if you can't immediately spot where the stone was placed.

Great stuff, jokkebk!

Is there any way to resize the board? With my smallish laptop screen, I can just barely fit the board. Adding sound would be cool too. I love it...

_________________
"This is a game that rewards patience and balance. You must think like a man of action and act like a man of thought."
-Jonas Skarssen

The library comes also with small and large versions of the board, but they require a different CSS to be used. I think switching CSS files can be done in JavaScript, so I might implement changing board size in SGF viewer when I have the time. Sound seems to be slightly problematic with JavaScript, I did a quick Google and seemed like you'd need to either make it browser-specific or use Flash. Yuck.



Yes I had not yet implemented SGF properties AW, AE or coordinate ranges with setup properties. I fixed that his morning and now it should work with all types of setup nodes. Also found a bug - you could press the disabled "previous move" -link to remove stones placed in the root node (i.e. handicap stones and initial board setup) and never get them back.

EidoGo player has tons of functionality and it would require quite a lot of effort to support all its use cases with the graphics from jGoBoard - I think I'll leave that to someone else who might benefit from the results. I'm planning to use the library for a DGS-type game server so I just want a good-looking board with minimum dependencies on other projects.

For someone who is interested, board graphics and stones are also licensed under Creative Commons and it should be easy to scale them and use with EidoGo. Shadows might be a pain though, because they will be larger than the intersection squares and need to be positioned between the board and stones (with different sizing along board edges) - tweaking EidoGo to add new placeholders in DOM would likely be necessary.

jokkebk,

Very pretty, thanks! Questions:

1. would you like to have high-resolution photos of nice slate & shell stones...
2. ...so that the shell stones can have different grain patterns and rotated randomly;
3. could you fix the shadow -- right now the light source seems to be coming from the lower right corner.
the shadow is definitely nice, but could you move the light source to the upper-right corner instead?

Thanks, great job!

I made some additional updates to the SGF viewer, it now has additional options to switch between three board sizes: large, normal, and small.



Thanks for the offer (and kind words I edited out for the sake of brevity)!

1. If you want, you (or anyone else interested) could download the jgoboard-1.0.zip from website and redo the jgo/large images - if you keep the same dimensions, no CSS editing or anything else is needed (to test the images, you need to replace "jgoboard.css" with "jgoboard_large.css" in demo.html though). Let me know if the results are good, I would be glad to make different "themes" available at jgoboard.com

2. Rotation will be a problem with HTML+CSS, I wouldn't count on proper browser support for CSS3 element rotation any time soon (even the browsers that support it are currently painfully slow and ugly with rotated elements) - the most feasible option would be to have 3-5 different stone images for white stones which have different angles and grain patterns, and just randomly use them.

3. LOL, I wouldn't say the shadow is "broken", because the viewpoint is basically from above the board. But you're right though that human eye is accustomed to light coming from above, so it's a good improvement, I'll try to address that at some point.

I actually found a way to load files in Firefox 3.6 which supports a new File API defined by W3C. It's now implemented in sgf.html.

If you want to view the whole thing offline, you need to download the http://www.jgoboard.com/data/jgoboard-1.0.zip, unzip it and augment it with the following two files:

http://www.jgoboard.com/sgf.html (put it alongside with demo.html)
http://www.jgoboard.com/css/style.css (put it in css/ -folder with demo.css)

After this, just open sgf.html with Firefox 3.6 or later, and you should be able to load any UTF-8 encoded SGF file offline.