User_Notes_phpBB

phpBB forum platform integration

Users of phpBB based forums can integrate the pgn4web chessboard in their posts using a custom bbcode for PGN games, like this:

[pgn] ... PGN data ... [/pgn]

The pgn4web test phpBB site provides an implementation example (this is a test site, things might occasionally be broken).

screenshot

integration guidelines

The following procedure requires phpBB version 3 or above and has been fully tested with phpBB version 3.0.6

See generic instructions for the forum administrator to create custom bbcodes in phpBB.

The forum administrator should create a new BBcode with BBcode usage string:

[pgn]{TEXT}[/pgn]

The reccomended value for the HTML replacement string is:

<textarea id='pgn4web_' style='display: none;'>
{TEXT}
</textarea>
<iframe id='pgn4web_board' frameborder='0' width='100%' height='0' 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 type='text/javascript'>
"use strict";
var pgn4webPath = "/pgn4web";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
var pgn4webBoardId = pgn4webTextareaId + "_board";
document.getElementById("pgn4web_").id = pgn4webTextareaId
document.getElementById("pgn4web_board").id = pgn4webBoardId
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
document.getElementById(pgn4webBoardId).src = pgn4webPath + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=TtKN&dcs=LHCg&bbcs=LHCg&hm=b&hcs=mF9_&bd=c&cbcs=RZmI&ctcs=zEtr&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=TtKN&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId;
var height = 268;
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; }
document.getElementById(pgn4webBoardId).height = height;
</script>

Please remember to set the variable pgn4webPath above to the path of the pgn4web folder on your site.

Please note these settings apply a predefined set of colors and options to match the default phpBB template; if you need to change any of the colors and options (the parameters after board.html in the code above) you can refer to the board widget instructions wiki page or ask for support.

The instructions above require pgn4web 1.91 or later and requires that phpBB and pgn4web are on the same domain.

In case you need to install phpBB and pgn4web on different domains, please use the following alternative value for the HTML replacement string. Please note that this alternative solution limits the size of the PGN data to approximately 2000 characters:

<script type="text/javascript">
"use strict";
var pgn4webURL = "http://pgn4web.casaschi.net";
if (!document.getElementById("pgn4webEncoderScript")) { document.write('<script id="pgn4webEncoderScript" type="text/javascript" src="' + pgn4webURL + '/pgn-encoder.js"><!--' + 'script-->'); }
</script>
<textarea id='pgn4web_' style='display: none;'>
{TEXT}
</textarea>
<iframe id='pgn4web_board' frameborder='0' width='100%' height='0' 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 type='text/javascript'>
"use strict";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
var pgn4webBoardId = pgn4webTextareaId + "_board";
document.getElementById("pgn4web_").id = pgn4webTextareaId
document.getElementById("pgn4web_board").id = pgn4webBoardId
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
var pgnText = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
document.getElementById(pgn4webBoardId).src = pgn4webURL + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=TtKN&dcs=LHCg&bbcs=LHCg&hm=b&hcs=mF9_&bd=c&cbcs=RZmI&ctcs=zEtr&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=TtKN&fp=13&hl=t&fh=b&fw=p&pe=" + EncodePGN(pgnText);
var height = 268;
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; }
document.getElementById(pgn4webBoardId).height = height;
</script>

Please remember to set the variable pgn4webURL above to the URL of the pgn4web server you plan to use.

caveats

• HTML tags are stripped from the PGN data, removing all text between < and > characters; please make sure your PGN data does not contain < and > characters.

further customizations

With minor modifications to the integration guidelines described above other bbcode tags can be created for specialized applications, for instance taking advantage of the board widget puzzle support.

[Anonymous]

Originally posted by: pa...@casaschi.net

how to stop the games from autoplaying

Some forum administrators prefer the chessboard to load without automatically starting autoplaying the games. In order to achieve that, simply replace in the bbcode definition am=l with am=n

[Anonymous]

Originally posted by: pa...@casaschi.net

supporting earlier versions of phpbb

The instruction in the wiki page above refer to phpbb version 3.

Earlier versions of phpbb do not provide configuration options for defining new bbcodes, however the following instructions should help setup a "pgn" bbcode manually patching the code.

Assuming using phpbb2 v2.023:

1) download the latest pgn4web-x.xx.zip package and unzip the content somewhere on the forum server; assume that the board.html file of the pgn4web package will be externally accessible from the forum server as http://www.example.com/pgn4web/board.html

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

// [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); 
// [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/bbcode.tpl and similarly for all other installed templates, adding the following code in the obvious place (following similar code for other bbcodes):

<!-- BEGIN pgn_open --><script type="text/javascript"> var pgn4webPath = "/pgn4web/"; var pgn4webTextareaIdNum; if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; } pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++; document.write("<textarea id='" + pgn4webTextareaId +"' style='display: none;'>"); </script><!-- END pgn_open --> 
<!-- BEGIN pgn_close --></textarea> <script type='text/javascript'> document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<\s*br\s*\/>/gi, ' '); height = 268; multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m; if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; } document.write("<iframe src='" + pgn4webPath + "/board.html?am=l&amp;d=3000&amp;ss=26&ps=d&amp;pf=d&amp;lcs=WdSO&amp;dcs=LHCg&amp;bbcs=LHCg&amp;hm=b&amp;hcs=lF6v&amp;bd=c&amp;cbcs=UJuI&amp;ctcs=BoVy&amp;hd=j&amp;md=f&amp;tm=13&amp;fhcs=$$$$&amp;fhs=14&amp;fmcs=$$$$&amp;fccs=v71$&amp;hmcs=M___&amp;fms=14&amp;fcs=m&amp;cd=i&amp;bcs=WdSO&amp;fp=13&amp;hl=t&amp;fh=b&amp;fw=p&amp;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 -->

4) done!

Keep in mind, this code has not been widely tested and might need further fine tuning. For instance, issues have been reported with some character sequence in the PGN game interpreted as a smiley, breaking the chessboard display unless the "Disable Smilies in this post" tick is checked.

[Anonymous]

Originally posted by: pa...@casaschi.net

the puzzle tag

The pgn tag can be easily modified into a tag optimized for puzzles, hiding the move text until the user clicks on the prompt in order to show the puzzle solution. In order to achieve that, simply replace in the bbcode definition am=l with am=n, hd=j with hd=v and md=f with md=p.

[Paolo Casaschi]

FEN positions display

the pgn tag defined above only understands PGN inputs; for a FEN string to be understood as PGN input, you have to supply PGN data in this format:

[SetUp "1"]
[FEN "r1bqkb1r/1p3ppp/p1n1pn2/3p4/2P1P3/N1N5/PP3PPP/R1BQKB1R w KQkq - 0 9"]
*

You can easily adapt the pgn above to accept FEN inputs directly, defining as BBcode usage string [pos]{TEXT}[/pos] (note that there seems to be an internal conflict if you try using fen as tag) and as HTML replacement the same code as in the main article, but constructing the PGN data from the FEN string by replacing

{TEXT}

with

[SetUp "1"]
[FEN "{TEXT}"]
*

[Paolo Casaschi]

extended options for the chessboard display

the suggested [pgn] bbcode only uses a subset of the pgn4web board widget. In order to allow taking advantage of all options of the pgn4web board widget, including setting the board square size, the following bbcode can be used.

bbcode usage:
[pgneo={TEXT1}]{TEXT2}[/pgneo]

html replacement:

<textarea id='pgn4web_' style='display: none;'>
{TEXT2}
</textarea>
<iframe id='pgn4web_board'  frameborder='0' width='100%' height='0' 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 type='text/javascript'>
"use strict";
var eo = "&" + "{TEXT1}";
var pgn4webPath = "";
var pgn4webTextareaIdNum;
if (pgn4webTextareaIdNum === undefined) { pgn4webTextareaIdNum = 1; }
var pgn4webTextareaId = "pgn4web_" + pgn4webTextareaIdNum++;
var pgn4webBoardId = pgn4webTextareaId + "_board";
document.getElementById("pgn4web_").id = pgn4webTextareaId
document.getElementById("pgn4web_board").id = pgn4webBoardId
document.getElementById(pgn4webTextareaId).value = document.getElementById(pgn4webTextareaId).value.replace(/<.*?>/g, ' ');
document.getElementById(pgn4webBoardId).src = pgn4webPath + "/board.html?am=l&d=3000&ss=26&ps=d&pf=d&lcs=TtKN&dcs=LHCg&bbcs=LHCg&hm=b&hcs=mF9_&bd=c&cbcs=RZmI&ctcs=zEtr&hd=j&md=f&tm=13&fhcs=$$$$&fhs=14&fmcs=$$$$&fccs=v71$&hmcs=M___&fms=14&fcs=m&cd=i&bcs=TtKN&fp=13&hl=t&fh=b&fw=p&pi=" + pgn4webTextareaId + eo;
var height = 268;
var multiGamesRegexp = /\s*\[\s*\w+\s*"[^"]*"\s*\]\s*[^\s\[\]]+[\s\S]*\[\s*\w+\s*"[^"]*"\s*\]\s*/m;
var eoMatches = eo.match(/&(h|height)=(\d+)(&|$)/);
if (eoMatches) { height = eoMatches[2]; } 
else { if (multiGamesRegexp.test(document.getElementById(pgn4webTextareaId).value)) { height += 34; } }
document.getElementById(pgn4webBoardId).height = height;
</script>

The {TEXT1} bbocde parameter should be set to a string of URL parameters for the board widgets; the list of available parameters can be displayed browsing to board.html?h=t; in addition the height (shortened as h) parameter can be used to set the chessboard widget height.

This example creates a chessboard with board widget height 400, square size 40 and font moves 20:

[pgneo=h=400&ss=40&fms=20]
[x""]e4 e6 d4 d5
[/pgneo]