H. G. Muller wrote on Tue, Nov 3, 2015 07:08 AM EST:
Now that the JavaScript applet works satisfactory, one of the applications could be to use it for 'interactive diagrams'. I posted an example of this here. Superficially it looks like a normal position diagram, but then you can click on it and start to manipulate the pieces, getting their moves highlighted etc.
Would it be possible to provide this on the chessvariants.orgs website?
I would really love to have the diagram that is now in my Macadamia Shogi article here to be such an interactive one. A picture already is worth a thousand words, but an interactive picture...
This does not seem that difficult to realize. The applet consists of 3 files: a .css style file and a .js javascript file, both of which would be the same for every diagram, and could be shared by all diagrams on the website. The third is the .html page describing the variant. Compared to a static picture, which would occur in there through an html 'img' tag, it appears as an (empty) 'table' element with a standard 'id', which will be filled by the JavaScript.
To make that work, the .html page also has to contain some JavaScript code in a 'script' tag in the page header, which defines the parameters of the game, by assigning those to JavaScript array variables that the shared script will use to generate the diagram. In the most basic form this is just defining the board dimensions, 'ids', 'names' and 'moves' for all the pieces, and their board location in the start position. A few lines like
would do it. (Only the location of the white pieces has to be given; by default the white setup will be mirrored to get the black one.) Then the image of the position will appear on page load by JavaScript magic, and the user can start to fool around with the pieces.
Some other variables, for which the default usually would be satisfactory, but which the occasional game would have to change, are 'pointSym' (set to 1 to rotate the white setup to get the black one instead of mirroring it), 'promoZone' (its depth, if more than just last rank), 'maxPromote' (if more pieces than just Pawns can promote), 'promoChoice' (if not "NBRQ"). Although it is perhaps already overextends the purpose of an interactive diagram to faithfully implement promotions.
Although posters of game descriptions can currently use HTML tags in their text, (which will go into the 'body' of the page), allowing them also to do that in the 'header', or in between 'script' tags in the header, might provide a security risk for viewers of such pages. But it should be possible to limit what can be posted there in the server PHP script that creates the html page from the submission form. E.g. the form could contain an extra field where people would have to write lines of the form
J:Janus:BN:Janus.png:c1,h1
which would specify the pieces, and having a few dedicated input fields for board dimensions, symmetry type, promotion zone depth... From this the JavaScript could be easily generated.
Of course there still is the issue of the actual piece graphics; the script addresses this by a variable 'graphDir', which by default could point to, say, the Alfaerie directory on this website. But which the poster could redefine to the location to where he uploaded his own piece images.
An alternative would be to let the user write the game definition in a few lines of the format above inside the 'table id="board"' tag. The shared JavaScript, which would be included in the header by default, could then look for a html element with this name, snatch the game definition from it, parse the lines to set its array variables, and then replace the definition by the table that makes the diagram. Actually I like that... The PHP submission script would not have to be altered at all; only the standard header that is prefixed to the submitted pages would have to be changed to include a {script type="text/javascript" src="diagram.js"}{/script} tag pair.
The editors of this site are invited to give their opinion on this.
Now that the JavaScript applet works satisfactory, one of the applications could be to use it for 'interactive diagrams'. I posted an example of this here. Superficially it looks like a normal position diagram, but then you can click on it and start to manipulate the pieces, getting their moves highlighted etc.
Would it be possible to provide this on the chessvariants.orgs website?
I would really love to have the diagram that is now in my Macadamia Shogi article here to be such an interactive one. A picture already is worth a thousand words, but an interactive picture...
This does not seem that difficult to realize. The applet consists of 3 files: a .css style file and a .js javascript file, both of which would be the same for every diagram, and could be shared by all diagrams on the website. The third is the .html page describing the variant. Compared to a static picture, which would occur in there through an html 'img' tag, it appears as an (empty) 'table' element with a standard 'id', which will be filled by the JavaScript.
To make that work, the .html page also has to contain some JavaScript code in a 'script' tag in the page header, which defines the parameters of the game, by assigning those to JavaScript array variables that the shared script will use to generate the diagram. In the most basic form this is just defining the board dimensions, 'ids', 'names' and 'moves' for all the pieces, and their board location in the start position. A few lines like
would do it. (Only the location of the white pieces has to be given; by default the white setup will be mirrored to get the black one.) Then the image of the position will appear on page load by JavaScript magic, and the user can start to fool around with the pieces.Some other variables, for which the default usually would be satisfactory, but which the occasional game would have to change, are 'pointSym' (set to 1 to rotate the white setup to get the black one instead of mirroring it), 'promoZone' (its depth, if more than just last rank), 'maxPromote' (if more pieces than just Pawns can promote), 'promoChoice' (if not "NBRQ"). Although it is perhaps already overextends the purpose of an interactive diagram to faithfully implement promotions.
Although posters of game descriptions can currently use HTML tags in their text, (which will go into the 'body' of the page), allowing them also to do that in the 'header', or in between 'script' tags in the header, might provide a security risk for viewers of such pages. But it should be possible to limit what can be posted there in the server PHP script that creates the html page from the submission form. E.g. the form could contain an extra field where people would have to write lines of the form
which would specify the pieces, and having a few dedicated input fields for board dimensions, symmetry type, promotion zone depth... From this the JavaScript could be easily generated.Of course there still is the issue of the actual piece graphics; the script addresses this by a variable 'graphDir', which by default could point to, say, the Alfaerie directory on this website. But which the poster could redefine to the location to where he uploaded his own piece images.
An alternative would be to let the user write the game definition in a few lines of the format above inside the 'table id="board"' tag. The shared JavaScript, which would be included in the header by default, could then look for a html element with this name, snatch the game definition from it, parse the lines to set its array variables, and then replace the definition by the table that makes the diagram. Actually I like that... The PHP submission script would not have to be altered at all; only the standard header that is prefixed to the submitted pages would have to be changed to include a {script type="text/javascript" src="diagram.js"}{/script} tag pair.
The editors of this site are invited to give their opinion on this.