Embedding a Chessboard inside Forum post

[vinayan]

hi,

I am looking to develop a plugin that can embed a chessboard inside a forum post. The board should have options like back and forward buttons to navigate through the moves list.See the example below.

chesstempo.com/pgn-viewer.html

The same viewer shown above provides a javascript api and html snippets(a "div" element is required)

Is something like this really possible through a plugin? I am a developer and I can handle javascript but would like to know if this is technically possible.

Thanks
Vinayan

[Chris]

It's possible

*The particular implementation you reference requires access to a server stored PGN file which you sort of have with proboards plugins but only with images. The example given shows it uses a relative URL to fetch the PGN but if it is also possible to grab a PGN cross-domain or via the data: scheme then you are good to go. The plugin I linked to uses data embedded directly into the post to accomplish a user controlled moves list (actually a list of FEN snapshots, it doesn't read PGN directly) but an engine that understands PGN notation and can convert to EPD for piece placement would be quite possible provided it can be flexible on where that PGN data is being stored.
I've used the images tab on a plugin to upload small audio files purposely misnamed as PNG and have it play ("You've got mail!") but the resulting URL will still not be relative since it is a storage.proboards subdomain.

---

Edit:

I dug a bit deeper into the API and found some bad news and some good news:

Nov 26, 2017 8:24:52 GMT -8 chesstempo.com said:

pgnFile A URL pointing to a PGN file to be parsed and displayed. This file MUST be located on the same server that your HTML files are loaded from. Multiple games in the same file will be parsed and the user will be given a dropdown list to select between them (with the first game in the file being shown by default).

which pretty much puts to rest that question regarding loading files cross domain.

The good news however is it also accepts an escaped string (apparently) in lieu of a referenced file making such a plugin very possible

Nov 26, 2017 8:24:52 GMT -8 chesstempo.com said:

pgnString A string holding one or more PGN formatted games for parsing and display. Any single quote characters in your PGN game(s) must be escaped, i.e. "Petrosian's turn" must be changed to "Petrosian\'s turn". Multiple games per pgnString are supported.

[vinayan]

hi Chris..thanks for the reply...i am still getting over the api and basic stuff with proboards..will get back if I achieve anything

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 27, 2017 3:13:03 GMT -8 vinayan said:

hi Chris..thanks for the reply...i am still getting over the api and basic stuff with proboards..will get back if I achieve anything

I don't know if you ever got to look at The Chess Plugin that wormo made but it had prev/next using epd strings saved to the key and could possibly be of assistance. However I believe it doesn't work right now because all of the images got removed from photobucket or something.

[Chris]

Nov 27, 2017 6:27:04 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I don't know if you ever got to look at The Chess Plugin that wormo made but it had prev/next using epd strings saved to the key and could possibly be of assistance. However I believe it doesn't work right now because all of the images got removed from photobucket or something.

Nov 26, 2017 7:02:51 GMT -8 Chris said:

It's possible

...
The plugin I linked to uses data embedded directly into the post to accomplish a user controlled moves list (actually a list of FEN snapshots, it doesn't read PGN directly) but an engine that understands PGN notation and can convert to EPD for piece placement would be quite possible provided it can be flexible on where that PGN data is being stored.

---

I made a proof of concept plugin to leverage the linked API as a starting point

Download Plugin

Instead of trying to create a new bbcode and all the problems that entails the code uses a marker on an existing bbcode to identify embedded PGN data and in this case the the font bbcode was chosen and when given a nonsensical (and fairly implausible to be accidentally entered) size value of "pgn" then it serves as a marker for PGN data contained within. The data in a PGN file however has the potential for being mistaken for bbcode due to the use of square brackets on some headers or within annotations so care should be taken to escape them which I leave up to you along with any other improvements that fits your fancy. I should also note that the coding guidelines forbid using externally hosted resources but if you try to copy and host the files within the plugin itself it will hit the 64K mark and truncate, this ultimately means the plugin won't be eligible for an online library listing.

The above example image embeds a PGN using the following within the post

[font size="pgn"][noparse][Event "2.f"][Site "Leningrad"][Date "1974.??.??"][Round "3"][White "Karpov, Anatoly"][Black "Spassky, Boris"][Result "1-0"][ECO "E91"][WhiteElo "2700"][BlackElo "2650"][Annotator "JvR"][PlyCount "109"][EventDate "1974.??.??"] 1. d4 Nf6 2. c4 g6 3. Nc3 Bg7 4. e4 d6 5. Nf3 O-O 6. Be2 c5 7. O-O Bg4 $5 { Spassky chooses a sharp opening.} 8. d5 Nbd7 9. Bg5 a6 10. a4 Qc7 11. Qd2 Rae8 12. h3 Bxf3 13. Bxf3 e6 $5 14. b3 Kh8 15. Be3 Ng8 16. Be2 e5 $5 17. g4 Qd8 18. Kg2 Qh4 $5 {Black takes the initiative on the kingside.} 19. f3 ({ The tactical justification is} 19. Bg5 Bh6) 19... Bh6 $2 { Tal, Keres and Botvinnik condemn this provocative move} ({and prefer} 19... f5) 20. g5 Bg7 21. Bf2 Qf4 22. Be3 Qh4 23. Qe1 $1 Qxe1 24. Rfxe1 h6 25. h4 hxg5 $2 ({A defence line against an attack on the queenside creates} 25... Ra8 26. Reb1 Rfb8 27. b4 Bf8 28. bxc5 Nxc5) 26. hxg5 Ne7 27. a5 f6 28. Reb1 fxg5 29. b4 $1 Nf5 $5 30. Bxg5 $1 ({Keres analyses} 30. exf5 e4 31. Bd2 exf3+ 32. Bxf3 gxf5 { Black has counter-play.}) 30... Nd4 31. bxc5 Nxc5 32. Rb6 Bf6 33. Rh1+ $1 Kg7 34. Bh6+ Kg8 35. Bxf8 Rxf8 36. Rxd6 Kg7 37. Bd1 Be7 ({Tal mentions} 37... Bd8 38. Na4 Bc7 39. Nxc5 Bxd6 40. Nxb7 {and 41.c5. White wins.}) 38. Rb6 Bd8 39. Rb1 Rf7 40. Na4 Nd3 41. Nb6 g5 42. Nc8 Nc5 43. Nd6 Rd7 44. Nf5+ Nxf5 45. exf5 e4 46. fxe4 Nxe4 47. Ba4 Re7 48. Rbe1 Nc5 49. Rxe7+ Bxe7 50. Bc2 Bd8 51. Ra1 Kf6 52. d6 Nd7 53. Rb1 Ke5 54. Rd1 Kf4 55. Re1 1-0[/noparse][/font]

[Chris]

vinayan, I made a small change to the plugin above by adding a link to the chess tempo website at the bottom of the page to be in compliance with the API usage requirements (it was technically already there but the href was left blank due to an oversight on my part). The documentation for the API is very sparse but if you study the source code of the hosted files you'll find tons of undocumented features such as sound, last move square highlights, etc.