new tricks for an old dog: pgn4web chessboards for phpbb2

[casaschi]

Hello, I'm the author of the pgn4web javascript chessboard that can be used in websites, blogs and forums to display an interactive chessboard from PGN files.

As an old member of talkchess.com, I've been following the discussion about whether to upgrade the takchess.com forum software.
As part of that discussion, I saw a proposal to migrate to myBB and I did a quick test showing how a pgn4web chessboard bbcode could be easily added to a myBB forum. See here for an example:
http://pgn4web.createmybb3.com/thread-2.html

pgn4web has been designed for ease of integration in any software platform supporting javascript; while phpbb2 does not support an admin interface to create custom bbcodes, I wondered how difficult it would be to add a "pgn" bbcode to a phpbb2 forum. After some quick fiddling (with most time spent finding the install file for phpbb2 v2.023) it turns out to be fairly easy with some manual editing of a couple of files. You can see an example here:
http://freeshell.de/~casaschi/tmp/phpbb ... ic.php?t=2

I personally have no fundamental preference whether to upgrade the talkchess forum software or not. Just wanted to point out that whatever choice is made, you can add pgn4web based chessboard bbcode. In fact, you could have had a pgn4web based chessboard bbcode form more than two years, if anyone bothered to ask... it took me few minuted to adapt the code.

technical notes:

what I did in my test forum is just a feasibility study, it might need some fine tuning; for instance it enables the "pgn" bbcode but it deos not show it on the post editor... some PGN I tested required the "Disable Smilies in this post" tick to be checked (otherwise some character sequence in the PGN game would be interpreted as a smily, breaking the chessboard display)... other minor details might need testing and fine tuning, but it seems to work and it should be possible to fix any issue arising as it has been for many other platforms.

instructions how to setup the "pgn" bbcode, assuming using phpbb2 v2.023 (time required: less than one hour)

1) download the latest pgn4web-x.xx.zip package and unzip the content somewhere on the talkchess.com server; in the following I'll assume that the board.html file of the pgn4web package will be accessible externally as http://www.talkchess.com/pgn4web/board.html

2) patch the phpbb2 file includes/bbcode.php adding the following pieces of code in the obvious places (following a list of similar pieces of code for other bbcodes)

Code: Select all

// [pgn] and [/pgn] for chess games.
$text = str_replace("[pgn:$uid]", $bbcode_tpl['pgn_open'], $text);
$text = str_replace("[/pgn:$uid]", $bbcode_tpl['pgn_close'], $text);

Code: Select all

// [pgn] and [/pgn] for chess games.
$text = preg_replace("#\[pgn\](.*?)\[/pgn\]#si", "[pgn:$uid]\\1[/pgn:$uid]", $text);

3) patch the phpbb2 file templates/subSilver/posting_body.tpl and the same for all other installed templates, by replacing:

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

with

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]',[pgn],[/pgn],'[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

4) patch the phpbb2 file templates/subSilver/bbcode.tpl and the same for all other installed templates, again adding the following piece of code in the obvious place (following a list of similar pieces of code for other bbcodes)

Code: Select all

<!-- BEGIN pgn_open --><script type="text/javascript"> var pgn4webPath = "/pgn4web/"; var pgn4webTextareaIdNum; if &#40;pgn4webTextareaIdNum === undefined&#41; &#123; pgn4webTextareaIdNum = 1; &#125; pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++; document.write&#40;"<textarea id='" + pgn4webTextareaId +"' style='display&#58; none;'>"); </script><!-- END pgn_open -->
<!-- BEGIN pgn_close --></textarea> <script type='text/javascript'> document.getElementById&#40;pgn4webTextareaId&#41;.value = document.getElementById&#40;pgn4webTextareaId&#41;.value.replace&#40;/<\s*br\s*\/>/gi, ' '); height = 268; multiGamesRegexp = /\s*\&#91;\s*\w+\s*"&#91;^"&#93;*"\s*\&#93;\s*&#91;^\s\&#91;\&#93;&#93;+&#91;\s\S&#93;*\&#91;\s*\w+\s*"&#91;^"&#93;*"\s*\&#93;\s*/m; if &#40;multiGamesRegexp.test&#40;document.getElementById&#40;pgn4webTextareaId&#41;.value&#41;) &#123; height += 34; &#125; document.write&#40;"<iframe src='" + pgn4webPath + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=WdSO&dcs=LHCg&bbcs=LHCg&hm=b&hcs=lF6v&bd=c&cbcs=UJuI&ctcs=BoVy&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=WdSO&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId + "' frameborder=0 width=100% height=" + height + " scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>"); </script><!-- END pgn_close -->

5) done! Try adding a chessboard bbcode to your post, just enclose a valid PGN text inbetween the "pgn" bbcode tags. It should work as you see here:
http://freeshell.de/~casaschi/tmp/phpbb ... ic.php?t=2

[IGarcia]

Increible nice!

[casaschi]

This is how a chessboard with two games would be added to a forum post:

[pgn]

[Event "World championship"]
[Site "Moscow URS"]
[Date "1985.10.15"]
[Round "16"]
[White "Karpov"]
[Black "Kasparov"]
[Result "0-1"]

1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6. c4 Nf6 7. N1c3 a6 8. Na3 d5 9. cxd5 exd5 10. exd5 Nb4 11. Be2 Bc5 12. O-O O-O 13. Bf3 Bf5 14. Bg5 Re8 15. Qd2 b5 16. Rad1 Nd3 17. Nab1 h6 18. Bh4 b4 19. Na4 Bd6 20. Bg3 Rc8 21. b3 g5 22. Bxd6 Qxd6 23. g3 Nd7 24. Bg2 Qf6 25. a3 a5 26. axb4 axb4 27. Qa2 Bg6 28. d6 g4 29. Qd2 Kg7 30. f3 Qxd6 31. fxg4 Qd4+ 32. Kh1 Nf6 33. Rf4 Ne4 34. Qxd3 Nf2+ 35. Rxf2 Bxd3 36. Rfd2 Qe3 37. Rxd3 Rc1 38. Nb2 Qf2 39. Nd2 Rxd1+ 40. Nxd1 Re1+ 0-1

[Event "World championship"]
[Site "Moscow URS"]
[Date "1985.10.03"]
[Round "12"]
[White "Karpov"]
[Black "Kasparov"]
[Result "1/2-1/2"]

1. e4 c5 2. Nf3 e6 3. d4 cxd4 4. Nxd4 Nc6 5. Nb5 d6 6. c4 Nf6 7. N1c3 a6 8. Na3 d5 9. exd5 exd5 10. cxd5 Nb4 11. Bc4 Bg4 12. Be2 Bxe2 13. Qxe2+ Qe7 14. Be3 Nbxd5 15. Nc2 Nxe3 16. Nxe3 Qe6 17. O-O Bc5 18. Rfe1 O-O 1/2-1/2

[/pgn]

If you see a chessboard here then [Sam] already added the custom bbcode.

Note: after adding the custom bbcode the post might not auto-update to show the chessboard, some caching might prevent it; usually, editing the post and submitting it again with a small change should fix it.

[Don]

The pgn4web "widget" is really quite awesome. I would like to take this opportunity to thank you for it. Most of the time we (or I) just take these things for granted and forget the people behind these tools.

Hello, I'm the author of the pgn4web javascript chessboard that can be used in websites, blogs and forums to display an interactive chessboard from PGN files.

As an old member of talkchess.com, I've been following the discussion about whether to upgrade the takchess.com forum software.
As part of that discussion, I saw a proposal to migrate to myBB and I did a quick test showing how a pgn4web chessboard bbcode could be easily added to a myBB forum. See here for an example:
http://pgn4web.createmybb3.com/thread-2.html

pgn4web has been designed for ease of integration in any software platform supporting javascript; while phpbb2 does not support an admin interface to create custom bbcodes, I wondered how difficult it would be to add a "pgn" bbcode to a phpbb2 forum. After some quick fiddling (with most time spent finding the install file for phpbb2 v2.023) it turns out to be fairly easy with some manual editing of a couple of files. You can see an example here:
http://freeshell.de/~casaschi/tmp/phpbb ... ic.php?t=2

I personally have no fundamental preference whether to upgrade the talkchess forum software or not. Just wanted to point out that whatever choice is made, you can add pgn4web based chessboard bbcode. In fact, you could have had a pgn4web based chessboard bbcode form more than two years, if anyone bothered to ask... it took me few minuted to adapt the code.

technical notes:

what I did in my test forum is just a feasibility study, it might need some fine tuning; for instance it enables the "pgn" bbcode but it deos not show it on the post editor... some PGN I tested required the "Disable Smilies in this post" tick to be checked (otherwise some character sequence in the PGN game would be interpreted as a smily, breaking the chessboard display)... other minor details might need testing and fine tuning, but it seems to work and it should be possible to fix any issue arising as it has been for many other platforms.

instructions how to setup the "pgn" bbcode, assuming using phpbb2 v2.023 (time required: less than one hour)

1) download the latest pgn4web-x.xx.zip package and unzip the content somewhere on the talkchess.com server; in the following I'll assume that the board.html file of the pgn4web package will be accessible externally as http://www.talkchess.com/pgn4web/board.html

2) patch the phpbb2 file includes/bbcode.php adding the following pieces of code in the obvious places (following a list of similar pieces of code for other bbcodes)

Code: Select all

// [pgn] and [/pgn] for chess games.
$text = str_replace("[pgn:$uid]", $bbcode_tpl['pgn_open'], $text);
$text = str_replace("[/pgn:$uid]", $bbcode_tpl['pgn_close'], $text);

Code: Select all

// [pgn] and [/pgn] for chess games.
$text = preg_replace("#\[pgn\](.*?)\[/pgn\]#si", "[pgn:$uid]\\1[/pgn:$uid]", $text);

3) patch the phpbb2 file templates/subSilver/posting_body.tpl and the same for all other installed templates, by replacing:

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

with

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]',[pgn],[/pgn],'[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

4) patch the phpbb2 file templates/subSilver/bbcode.tpl and the same for all other installed templates, again adding the following piece of code in the obvious place (following a list of similar pieces of code for other bbcodes)

Code: Select all

<!-- BEGIN pgn_open --><script type="text/javascript"> var pgn4webPath = "/pgn4web/"; var pgn4webTextareaIdNum; if &#40;pgn4webTextareaIdNum === undefined&#41; &#123; pgn4webTextareaIdNum = 1; &#125; pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++; document.write&#40;"<textarea id='" + pgn4webTextareaId +"' style='display&#58; none;'>"); </script><!-- END pgn_open -->
<!-- BEGIN pgn_close --></textarea> <script type='text/javascript'> document.getElementById&#40;pgn4webTextareaId&#41;.value = document.getElementById&#40;pgn4webTextareaId&#41;.value.replace&#40;/<\s*br\s*\/>/gi, ' '); height = 268; multiGamesRegexp = /\s*\&#91;\s*\w+\s*"&#91;^"&#93;*"\s*\&#93;\s*&#91;^\s\&#91;\&#93;&#93;+&#91;\s\S&#93;*\&#91;\s*\w+\s*"&#91;^"&#93;*"\s*\&#93;\s*/m; if &#40;multiGamesRegexp.test&#40;document.getElementById&#40;pgn4webTextareaId&#41;.value&#41;) &#123; height += 34; &#125; document.write&#40;"<iframe src='" + pgn4webPath + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=WdSO&dcs=LHCg&bbcs=LHCg&hm=b&hcs=lF6v&bd=c&cbcs=UJuI&ctcs=BoVy&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=WdSO&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId + "' frameborder=0 width=100% height=" + height + " scrolling='no' marginheight='0' marginwidth='0'>your web browser and/or your host do not support iframes as required to display the chessboard</iframe>"); </script><!-- END pgn_close -->

5) done! Try adding a chessboard bbcode to your post, just enclose a valid PGN text inbetween the "pgn" bbcode tags. It should work as you see here:
http://freeshell.de/~casaschi/tmp/phpbb ... ic.php?t=2

[Adam Hair]

Thanks, Paolo. It would be great if this was incorporated into the forum software. A (computer) chess forum should have a pgn viewer, and I have always found pgn4web a great viewer.

[Graham Banks]

Thanks, Paolo. It would be great if this was incorporated into the forum software.....

Agreed!

[gerold]

Thanks, Paolo. It would be great if this was incorporated into the forum software.....

Agreed!

Agreed also. A big Plus on that idea.

[gladius]

5) done! Try adding a chessboard bbcode to your post, just enclose a valid PGN text inbetween the "pgn" bbcode tags. It should work as you see here:

Great stuff!

[IanO]

The pgn4web "widget" is really quite awesome. I would like to take this opportunity to thank you for it. Most of the time we (or I) just take these things for granted and forget the people behind these tools.

Hello, I'm the author of the pgn4web javascript chessboard that can be used in websites, blogs and forums to display an interactive chessboard from PGN files.

I'd also like to thank you for pgn4web. It is extremely full-featured and robust. I especially like the keyboard shortcuts and use of the board to access extra functionality. It has made the Schachcomputer wiki and forums a far more enjoyable experience.

And your latest phpBB2, analysis board, and GarboChess enhancements are fantastic! Hopefully we will see this on the TalkChess and Hiarcs forums soon. Maybe even the chess programming wiki.

[casaschi]

3) patch the phpbb2 file templates/subSilver/posting_body.tpl and the same for all other installed templates, by replacing:

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]','[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

with

Code: Select all

bbtags = new Array('[b]','[/b]','[i]','[/i]',[pgn],[/pgn],'[u]','[/u]','[quote]','[/quote]','[code]','[/code]','[list]','[/list]','[list=]','[/list]','[img]','[/img]','[url]','[/url]');

After some more fiddling and experimenting, it looks like this step is not strictly necessary for the bbcode to be properly translated (it might be required in order for the editor to facilitate inserting the bbcode, but this is beyond the intention of these instructions).