Check out Grant Acedrex, our featured variant for April, 2024.

Enter Your Reply

The Comment You're Replying To
H. G. Muller wrote on Tue, Nov 3, 2015 12:08 PM UTC:

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

files = 10; ranks = 8;
ids[7] = 'J'; names[7] = 'Janus'; moves[7] = 'BN'; imag[7] = "Janus.png";
board[0][2] = 7; board[0][7] = 7;
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.


Edit Form
Conduct Guidelines
This is a Chess variants website, not a general forum.
Please limit your comments to Chess variants or the operation of this site.
Keep this website a safe space for Chess variant hobbyists of all stripes.
Because we want people to feel comfortable here no matter what their political or religious beliefs might be, we ask you to avoid discussing politics, religion, or other controversial subjects here. No matter how passionately you feel about any of these subjects, just take it someplace else.
Quick Markdown Guide

By default, new comments may be entered as Markdown, simple markup syntax designed to be readable and not look like markup. Comments stored as Markdown will be converted to HTML by Parsedown before displaying them. This follows the Github Flavored Markdown Spec with support for Markdown Extra. For a good overview of Markdown in general, check out the Markdown Guide. Here is a quick comparison of some commonly used Markdown with the rendered result:

Top level header: <H1>

Block quote

Second paragraph in block quote

First Paragraph of response. Italics, bold, and bold italics.

Second Paragraph after blank line. Here is some HTML code mixed in with the Markdown, and here is the same <U>HTML code</U> enclosed by backticks.

Secondary Header: <H2>

  • Unordered list item
  • Second unordered list item
  • New unordered list
    • Nested list item

Third Level header <H3>

  1. An ordered list item.
  2. A second ordered list item with the same number.
  3. A third ordered list item.
Here is some preformatted text.
  This line begins with some indentation.
    This begins with even more indentation.
And this line has no indentation.

Alt text for a graphic image

A definition list
A list of terms, each with one or more definitions following it.
An HTML construct using the tags <DL>, <DT> and <DD>.
A term
Its definition after a colon.
A second definition.
A third definition.
Another term following a blank line
The definition of that term.