Nate Eagle

Front-End Developer

GoKibitz: Building an SGF viewer from scratch

One of the best things about go is that there’s so much to analyze and talk about outside of playing actual games. One of my favorite things is to look at games with comments on them, either pro games with commentary from strong players (like those at Go Game Guru), amateur games with commentary from teachers (like those from my teacher, Yuan Zhou), or games by players around my strength working through the same kinds of issues I am, like my longtime friend and go rival, Ben Hong.

The best option out there right now for displaying game records on a webpage is Eidogo, created by Justin Kramer. I can’t say enough in praise of Kramer’s work: it’s JavaScript-driven and the primary renderer is html and css. It does a lot more than display game records; its joseki tutor and pro game pattern search are remarkable. More than that, Kramer’s source code is clean, well-formatted, and well-commented. It’s a pleasure to browse through his JavaScript on Github.

But Eidogo lacks some things I’d really like out of an SGF viewer. It doesn’t respond to the width of the container it’s placed in, which means it doesn’t always look great on mobile devices, and it’s almost always in its narrow form when embedded on sites, which leaves too small an area for extended comments, in my opinion. Then there’s the feature I want most of all: the ability to allow others to comment on individual moves. You can usually comment on the post that a game in is embedded in, but that forces awkward descriptions like, “That extension in move 56 seems slow for white…” I’d like to allow discussions to arise around the moves themselves, as if readers were able to asynchronously join in a review of the game itself.

I don’t blame Eidogo for any of this: Kramer developed Eidogo years ago, and with his own priorities. But it led me to try to create my own. I put off the project after a couple aborted starts: I’m not the programmer Kramer is, and I got stuck just writing a parser to translate SGF files (a text format created by Anders Kierulf) into JavaScript. But the wonderful thing about my job is that I get paid to learn more about programming, so when I sat down recently to try my luck again, I found the task more approachable than I had before.

So I may as well go ahead and announce the start of GoKibitz, which is beginning life as an SGF viewer, but will hopefully grow to be an editor and more. I’ve got a very basic demo up, which you can view below. It only really works in Chrome right now. I have no intention of supporting older browsers, but it will eventually work correctly in Firefox and other modern browsers.

It’s got some animation, which shows a bit of the direction I want to take the renderer, but the renderer itself is pretty half-baked right now. The logic for rendering is separate from everything else, and it’s the part I’ve spent the least time on. (I just wanted to create something to actually see stones to help keep myself motivated.) I’m probably going to move to something like Paper JS for rendering so that I can do more creative things with how the board, stones, and animations look. My dream is to have GoKibitz feel a little bit more like games from Hikaru no Go, which used glowing stones, dramatic perspectives, and lots of other techniques to convey the drama of a game of go.

And, of course, at some point I’ll have to figure out how I want to enable per-move commenting. Do hook into a service like Disqus? Do I create my own API, powered by my own DB? Obviously there’s tons of work left to be done. As the proud father of a nearly one-year-old boy, I don’t have tons of time, either. But I’m enjoying myself so far, and I think that there are a decent amount of people who’d really appreciate a more dynamic way of showing and interacting with go games.

I hope you enjoy the demo (direct link) and, if you’re code-inclined, feel free to check out the source. You can also follow the project on Twitter.