ChessBoardJS | Hacker News Reader

ChessBoardJS

chessboardjs.com

156 pointsca98am7968 comments

A while back, I attempted to write a chess site that let you paste in chess games in PGN text format, and then step through them. What I found was pretty shocking: the PGN format looks simple, but is remarkably difficult for a computer to parse.

The reason is that the PGN format only specifies the piece type and destination square of each move. Ne4: a knight moves to e4, and it's up to the parser to figure out which knight. So to parse PGN, you have to teach your parser how the pieces move.

That by itself is not too bad, but it gets worse. What if both knights can move to e4? Then the format disambiguates. Nge4: the knight on the g file moves to square e4. But "can move" is a tricky notion in chess. This knight cannot move because it is pinned to the king. That pawn can capture en passant this turn, but not next turn. So to write a PGN parser, you must build a chess engine capable of analyzing a board sufficiently to determine legal moves.

One might hope that reasonable PGN text would be nice and disambiguate whenever two pieces attack the same square, and not require legal move analysis. Alas, it is not so. The "two knights attack a square but one is pinned" case is specifically called out as NOT requiring disambiguation in the spec at http://www.saremba.de/chessgml/standards/pgn/pgn-complete.ht... .

A further consequence is that it is not possible to make a "generic PGN" parser that can handle chess variants, like suicide chess. The rules of chess are baked into the format itself, and the parser must have knowledge of the rules used to play the game that it is presenting.

This is a great write-up and is exactly the reason that ChessBoard is "just a board".

Proper PGN parsing and legal move validation is a complex and independent problem that nicely fits into it's own library and should be separate from any display logic.

For example: https://github.com/jhlywa/chess.js

I created this board a while ago that is connected to that chess.js

http://thingsilearned.com/projects/chess/

PGN isn't a format designed for parsing convenience. PGN is the exact notation any chess player uses for writing down games. I would never write down 1.e2-e4 for instance when simply 1.e4 is totally apparent. I find it very confusing when too much information is presented in this case. In the same vein, whenever you are presenting chess notation to a human it is preferable to not show the long notation. So any time you would want to display the notation of a chess game(which is pretty much everytime) you would need to parse the game with a program that understands the rules to produce the shorter notation.

I've found that the rules can be expressed quite elegantly and compactly in a language that supports pattern matching. I have a Haskell implementation [1] which is just under 300 lines of code including the parsing of SAN moves (standard algebraic notation) which is used in PGN files.

[1] https://github.com/ArnoVanLumig/chesshs

True, it would be tricky to get all the rules of chess into a JS file (sounds like a worthwhile open source challenge to me!), but it wouldn't be so hard to expose the features of a chess program like Crafty through an API and do the check via AJAX.

"it would be tricky to get all the rules of chess into a JS file"

Check out chess.js, https://github.com/jhlywa/chess.js, it does a pretty excellent job. The combination of chessboard.js and chess.js would result in a pretty sweet browser-based chess game.

Very impressive!

reminds me of the js1k/2010 #2 winner: http://js1k.com/2010-first/demo/750

This one is playable.

That's amazing. It just took me to pieces. As is written here [0] "it’s still strangely humbling to get your arse kicked by 1014 bytes"

[0] http://malevolent.com/weblog/archive/2010/09/07/1k-chess-sho...

I found it extremely novice and beat it in under 20 moves. What is your chess experience?

Not huge. I know how to play, but I haven't played much. I think I'd be able to beat a 1024 byte Go game though :)

I'd be interested to hear your progress against this 1024 byte chess game. It could make an interesting blog post - each game you play, with some analysis of what you do to try to win and whether that works or not. :-)

What's your experience?

I have played competitively for years.

Here is the complete code:

   for(B=i=y=u=b=i=5-5,x=10,I=[],l=[];B++<304;I[B-1]=B%x?B/x%x<2|B%x<2?7:B/x&4?0:l[i++]="ECDFBDCEAAAAAAAAIIIIIIIIMKLNJLKM@G@TSb~?A6J57IKJT576,+-48HLSUmgukgg OJNMLK  IDHGFE".charCodeAt(y++)-64:7);function X(c,h,e,s){c^=8;for(var o,S,C,A,R,T,G,d=e&&X(c,0)>1e4,n,N=-1e8,O=20,K=78-h<<9;++O<99;)if((o=I[T=O])&&(G=o^c)<7){A=G--&2?8:4;C=o-9?l[61+G]:49;do if(!(R=I[T+=l[C]])&&!!G|A<3||(R+1^c)>9&&G|A>2){if(!(R-2&7))return K;n=G|(c?T>29:T<91)?o:6^c;S=(R&&l[R&7|32]*2-h-G)+(n-o?110:!G&&(A<2)+1);if(e>h||1<e&e==h&&S>2|d){I[T]=n;I[O]=0;S-=X(c,h+1,e,S-N);if(!(h||e-1|B-O|T-b|S<-1e4))return W(),c&&setTimeout("X(8,0,2),X(8,0,1)",75);I[O]=o;I[T]=R}if(S>N||!h&S==N&&Math.random()<.5)if(N=S,e>1)if(h?s-S<0:(B=O,b=T,0))break}while(!R&G>2||(T=O,(G||A>2|(c?O>78:O<41)&!R)&&++C*--A))}return-K+768<N|d&&N}function W(){i="<table>";for(u=18;u<99;document.body.innerHTML=i+=++u%x-9?"<th width=60 height=60 onclick='I[b="+u+"]>8?W():X(0,0,1)'style='font-size:50px'bgcolor=#"+(u-B?u*.9&1||9:"d")+"0f0e0>&#"+(I[u]?9808+l[67+I[u]]:160):u++&&"<tr>")B=b}W()

how do they do this ? do they write it in normal JS and optimze the hell out of it in terms of size? Is it some kind of special compiler or all done by hand ?

A combination, I suppose. First optimize the code so that the number of instructions are kept to a minimum and then use a minifier tool to shorten variable names and such. http://compressorrater.thruhere.net/

i love how he named his function arguments (c,h,e,s). nicely artistic touch.

How the hell does the AI work? It can't be included in that 1 kb, surely!

It seems to me it is not a "real" AI. I began a game, and after complete development on my side (about 5-6 moves), the opponent AI did only developed pawns, which shows off its limits.

I am not a javascript expert. but given the size of the code, I doubt there is a great IA underluying. Actually I've browsed the mignified code in order to find the AI implementation. The only clue I spot was a call to the Random() function. I won't state it for sure, because I wasn't able to understand the whole code. But I highly guessed it is the basis of the AI implementation. :-)

Play a full game and you'll be surprised, the AI is actually surprisingly good and gets better as the game progresses, especially given the size of the code.

Where's the unobfuscated code? I haven't been able to find it...

I am not sure you will find. It seems to me that the point of this demo is to submit minified javascript code for an online coder competition.

Ah, hmm, too bad... It would have been interesting.

One can write a decent negamax AI in < 10 lines of code.

thanks for sharing. i hope in the next version, castling the king is added.

yeah that's really awesome. But you can't castle, and a promoted pawn always becomes a queen

His 2kb version does everything else. http://nanochess.110mb.com/chess4.html

I beat it! I beat it!

The ability to castle is insignificant next to the power of the force.

https://en.wikipedia.org/wiki/List_of_burn_centers_in_the_Un...

Please don't bring reddit style here. There's plenty of reddit on reddit. This kind of snark detracts from what makes this site good.

Ouch ;)

On a less painful note, these types of scripts that do so much with so little are exactly the type of problem that interest me. I don't even care that I was beaten; I just love the fact that something like this exists.

Just goes to show how algorithmic chess can be. And code, no matter how "primitive" will trump neurons when it comes to algorithms.

I don't understand.

In American English, slang for an insult is a "burn".

e.g.

"You got burned" = "You were insulted"

The poster was making a joke that the OP had been insulted because this other JavaScript board is superior or something, hence, he directed him to treatment centers for a "burn".

This is very common on reddit.

This project needs a better example on the homepage, I think.

This one is interesting: http://chessboardjs.com/examples#3004

Agreed, it demonstrates that you could theoretically animate an entire chess game with a setInterval.

Funny; I actually built a demo that did this for the homepage, but decided it was too complex and scrapped it for later.

Nothing related but see: http://lichess.org/ (source code https://github.com/ornicar/lila)

Also has the best CAPTCHA ever. http://en.lichess.org/signup

Worst CAPTCHA ever. Trivial for a computer to work out, hard for a human.

Worst as in least effective, but best as in most amusing.

Worst sense of humor ever?

haha, nice! Although wouldn't computers be way better than humans at this?

Yeah, probably, I took a look at the code, it seems easy to extract positions with few jquery lines, and I guess there is probably an API for resolving chess mates problems!

Although, they would probably prefer having computers capable of playing chess sign up than humans that can't.

The project on github credits chessboardjs for the board editor. Quite related ;)

ChessBoard was built because the author of lichess.org contacted me about re-using some code from another project of mine.

I had always wanted to build the board as a separate component.

This is my favorite site to play on. Could not recommend more.

This doesn't seem to actually play chess.

I don't think it's meant to play chess, it's just to show chess positions (see the example page: http://chessboardjs.com/examples).

It is in a similar vein to this: http://andrewphoy.github.io/chess-replayer/. (Which is more full-featured.)

ChessBoard is designed to be "just a board" and integrate easily with chess engines, etc.

https://github.com/oakmac/chessboardjs/blob/master/README.md

I have an issue to build an example that demonstrates integration with chess.js and only allows legal moves (https://github.com/oakmac/chessboardjs/issues/19)

Not much to see here. Why is this JS? Usually JS requires some interaction. Even lightbox flew around and did something. This would be even easier as a chessboard PNG rendering REST service.

ChessBoard supports drag-and-drop pieces: http://chessboardjs.com/examples#2006

Drag and drop pieces and the pieces can take each other, so you could use this to animate/play-back a full game, or as the basis for a chess game.

Touche, tried dragging all the pieces I saw on the demos. Perhaps it's too late on a Friday for them to move.

Because PNG-rendering REST services wouldn't make it to the front page of HN

Mine from a decade ago is suitable for play-by-email http://wedusc.com/web-chess/?7567

Awesome, I have something similar for the game of Go: https://github.com/mapleoin/goboard.js

Unfortunately I didn't spend that much time writing beautiful docs for it.

Hi; this is a pleasant surprise :)

I wrote this component. Happy to answer questions, feedback, etc.

Pure HTML Chess Board with FEN support; http://azer.github.io/chessboard/initial.xml

There is also this game: http://multiplayerchess.com/

Should be fairly easy to make this understand the basic movements. Add some node-js multiplayer and off you go.

I actually built almost exactly this on top of dotcloud a while back:

http://chessjs-anirishduck.dotcloud.com/new

I initially based it off a wild idea my coworker and I had about a chess variant where any piece that captures another piece has the option of becoming that piece. I then expanded it with several other chess rule variants, including vanilla chess.

One thing worth mentioning is that the rules for chess are deceptively complex. Especially when it comes to valid moves avoiding check and moving out of check. See:

https://github.com/AnIrishDuck/chess.js/blob/master/chessjs/...

That actually sounds like a fun little practice project.

When's the Chinese checkers edition coming out?

anyone looked at http://bookmarkchess.com/

Reply on news.ycombinator.com