Open Source JavaScript Chess Board

Hi :)

I recently released an open source javascript chess board: http://chessboardjs.com/examples

Thought this community might be interested. Feedback welcome!

Thanks,

Chris

Great job. I was wondering is there a way that it can read  a PGN file from the filesystem or via copy and paste?

  Hello Oakmac!

  This is wonderful news!  I've been looking for a fully functional javascript lib like this for a while now.  I was resting my hopes on veltzer "jschess" on github, but development stopped on that right before it was done.   Your library supports movement of the pieces/drag drop etc. etc., which is awesome! 

  I am in the process of developing a website http://www.zenchess.com  I've owned it for years, but plan to make something interesting out of it.  

  Do you have a donation link anywhere?

+1

Looking forward to testing this out in the coming days. Until now have only been able to find a variety of PGN viewers which didn't fit my needs. Only features not covered by your examples that I would be interested in are undo move and underpromotion. I guess the first of these would be trivially easy to implement as I see it's covered by the chess.js library.

Would also like to donate to this. Many thanks for sharing.

Hi BlauePeter.  I am not positive, but it may be that your javascript is being executed before the page is fully loaded.  In that case the 'board1' div is not available when you are running your scripts.  

  I did a google search, normally people use jquery for most javascript related stuff and websites, so jquery has:

document.addEventListener('DOMContentLoaded',function(){/* ... */});

My apologies if that is not the actual issue, but I believe I had similar issues myself.

edit: make sure you include a jquery library as well

  BorgQueen:  I could write a tutorial for how to use this library, but maybe you should tell me exactly what you want to do?  

  I'm guessing you want to be able to display pgn games that were played in your club?  If that's so let me know here and I'll try to code up an example and tutorial.  Let me know if you already have a webpage set up so I can figure out a way to add it to your html page (i can probably just give you an example change to the html file and tell you whatever else you need to set up)

Hi BlauePeter, I'm a JS novice myself, but having alot of fun and learning heaps by messing around with this ChessBoard JS. First I notice you are missing the jQuery library, which you should download and link to your html file. http://jquery.com/

Secondly you do not need to include both the chessboard-0.3.0.min.js and chessboard-0.3.0.js files. They contain the same functionality, the min version is intended for production whereas the other is recommended for development as I understand it.

All the best.

The "min" version is typically compressed, with whitespace removed, including line breaks.  This means everything's on one line, which combined with shortening variable names to one or two letters, makes it practically impossible to read and debug.  The point of which isn't necessarily to obfuscate intellectual property, but rather to load as quickly as possible as the file should be as small as possible.

The other version should be readable and debuggable and that is why it is recommended when in development mode.  Hope this helps.

So If I wanted to put this board and a position on a different weebsite where I have administrating permission I have your permission to do so?

I may be off base since I am not an expert but aren't there already free game viewers available on the internet?

What would it be used for?

sftac

Here's one that does not require linking off somewhere else:

https://code.google.com/p/pgn4web

Here's another.

http://www.mistybeach.com/products/PGNViewer

what do you think of these?

https://github.com/oakmac/chessboardjs/

Actually it would not be difficult using ChessBoardJS as a PGN viewer when used in combination with the chess.js library. http://chessboardjs.com/examples#5000 and https://github.com/jhlywa/chess.js (load_pgn) should be all you need to get started.

Of course there are several PGN viewers around, however most of them I find are rather outdated, require additional browser plugins such as Java or are rather restrictive with what you can do with them. The ability to setup positions via a FEN string, or simply being able to move pieces on the board by dragging and dropping with no need for PGN files is awesome, and necessary for the current project I am working on.

So where can I get the HTML code for the board?

I have a few questions about the code.

1->What does do??

I have seen it in a lot of places where they tell you how to make chessboards.

2->what does  do??

3->Shouldn't

<--<script type="text/javascript" src='chessboard/js/jquery.js'> </script>
<script type="text/javascript" src='chessboard/js/chessboard-0.3.0.js'> </script>
<script type="text/javascript" src='chess_J/chess.js'> </script>
-->

be in head section if you are using HTML 5 or did I get that concept wrong?

4->Can you show the out put of the code using insert position or game??

5-> can we discuss this at length using messages?

thanks.

Hi folks :)

I posted here a while ago and promptly forgot about it; sorry!

Appreciate the kind words and feedback.

If anyone runs into issues the best place to get help is on the GitHub project issues: https://github.com/oakmac/chessboardjs/issues?state=open

-- Chris

This is awesome!

I have been using it to teach my students :=)

No offense tigerprowl, but it seems you are trying to make this library into something it is not.  This is not a full featured chess app.  This is a bare bones javascript library useful for programmers and no one else.  That being said, someone could fork the project possibly and do the things you are saying.  It just wouldn't affect the main repo.