I was not aware of this grid style at all. But after some reading up on it, it seems that it is pretty easy to mimic a HTML <table> with a HTML <div> element defined as container, and replace the <td> elements in it by <div> elements. The <tr> level can be omitted entirely, as the length of each table row is implied by the container <div> through its columns template. This is good, because it means there would hardly have to be any change in the current code to use a grid instead of a table. The <td> attribute colspan (which the I.D. only uses for the upper board rim) has an analog in the grid as well.
In detail: the board table currently is defined as
The cellpadding seems to become redundant, as the <div> daughters by default would have zero padding, unlike the <td> granddaughters. I have no doubt that a <div> would also support oncontextmenu and a background-image. That leaves the border-collapse style; I suppose the corresponding grid attribute is the column-gap. I am not sure whether setting that to 0 and giving the <div> daughters a border of 1px would make the borders coincide, or whether this would require column-gap to be 1 or -1.
In addition the container would need the style display:grid. The width and height attributes of the <td> elements would be moved to the container <div> as grid-template-columns and grid-template-rows. Cells for the board rim contain (apart from the now redundant height and width styles) only styles for their background and text coloring and alignment.(And in one case a colspan="N", which would become a column-start: 1/span N style.)
It looks like a simple patch; I will try it out.
The <td> elements for the board squares are currently defined with attributes
All the handlers would no doubt also work on a <div> element. I am not sure the align and valign HTML attributes would work on a <div>; they might have to be replaced by corresponding style specs. (These serve to position the move-highlighting marker images, which are cell content.) As for the styles, I think border works fine on a <div>, as well as font-size (needed only to display question marks in move diagrams to indicate hidden hopper moves when color highlighting is used). The background details should work too, as <div> elements can have background images. (The actual background-image (of the piece) would be set by Display().) So it is basically a matter of replacing the width and height styles (now handled by the container templates) by style instructions needed to center the content.
I was not aware of this grid style at all. But after some reading up on it, it seems that it is pretty easy to mimic a HTML <table> with a HTML <div> element defined as container, and replace the <td> elements in it by <div> elements. The <tr> level can be omitted entirely, as the length of each table row is implied by the container <div> through its columns template. This is good, because it means there would hardly have to be any change in the current code to use a grid instead of a table. The <td> attribute colspan (which the I.D. only uses for the upper board rim) has an analog in the grid as well.
In detail: the board table currently is defined as
<table id="board' + dnr + '" cellpadding="0" style=" border-collapse:collapse' + (background ? ';background-image:url(' + background + ')' : '') + ' "' + (coords < 0 ? ' border="1"' : '') +' oncontextmenu="return false;" ></table> // initially emptyThe cellpadding seems to become redundant, as the <div> daughters by default would have zero padding, unlike the <td> granddaughters. I have no doubt that a <div> would also support oncontextmenu and a background-image. That leaves the border-collapse style; I suppose the corresponding grid attribute is the column-gap. I am not sure whether setting that to 0 and giving the <div> daughters a border of 1px would make the borders coincide, or whether this would require column-gap to be 1 or -1.
In addition the container would need the style display:grid. The width and height attributes of the <td> elements would be moved to the container <div> as grid-template-columns and grid-template-rows. Cells for the board rim contain (apart from the now redundant height and width styles) only styles for their background and text coloring and alignment.(And in one case a colspan="N", which would become a column-start: 1/span N style.)
It looks like a simple patch; I will try it out.
The <td> elements for the board squares are currently defined with attributes
valign="center" align="center" style=" width:' + sqrSize + 'px; height:' + sqrSize + 'px' + '; border:' + bb + '; // bb = (borders ? 'thin solid black' : 'none'); font-size:xx-large; background-repeat:no-repeat; background-position: center center; background-size:contain " onmousedown="Down(' + bnr + ',' + j + ',' + h + ',event)" onmouseup="Up(' + bnr + ',' + j + ',' + h + ',event)" ontouch="Touch(' + bnr + ',' + j + ',' + h + ')" onmouseover="Hover(event)" ondragover="PreDrop(event)" ondrop="Drop(event)" ondragend="Relay(event)"All the handlers would no doubt also work on a <div> element. I am not sure the align and valign HTML attributes would work on a <div>; they might have to be replaced by corresponding style specs. (These serve to position the move-highlighting marker images, which are cell content.) As for the styles, I think border works fine on a <div>, as well as font-size (needed only to display question marks in move diagrams to indicate hidden hopper moves when color highlighting is used). The background details should work too, as <div> elements can have background images. (The actual background-image (of the piece) would be set by Display().) So it is basically a matter of replacing the width and height styles (now handled by the container templates) by style instructions needed to center the content.