Comments/Ratings for a Single Item

Just to give a heads up. I have made a fork of betzaNew.js, which I'll try to alter to show the board and the pieces in side-by-side columns. I'll be experimenting with it on this page for a while.

I'll try to alter to show the board and the pieces in side-by-side columns.

You mean the same table that you can otherwise open below it? You can already do that by including a HTML table element with id="pieceTable" (or xxxTable when you defined satellite=xxx). TheDiagram script will fill that with the table it creates. You would have to provide your own surrounding table, however, to force them side by side. (Or whatever HTML method you would normally use for that.)

The way it works now is that it looks for the pieceList id on the page, and only if it doesn't find one it creates an (initially hidden) HTML element with this id below the board to make sure there is one. And then it creates the piece table there.

Just to give a heads up. I have made a fork of betzaNew.js, which I'll try to alter to show the board and the pieces in side-by-side columns. I'll be experimenting with it on this page for a while.

@HGMuller

My fork of betzaNew.js seems to be working now. All I changed was the line assigning the value of diag.innerHTML in the CreateAnchors() function. Here is the changed line:

diag.innerHTML = '<div id="container' + dnr + '" style="flex: 1 0 auto"><div style="flex: 1 0 auto"><p id="message' + dnr + '"> <b style="background:' + hicol + ((files + (rank1 >= 0))*sqrSize < 400 ? ';font-size:smaller' : '') + '"><a href="http://www.chessvariants.com/invention/interactive-diagrams">' + startMessage + '</p>' + '<table id="board' + dnr + '" cellpadding="0" style="border-collapse:collapse' + (background ? ';background-image:url(' + background + ')' : '') + '"'+ (coords < 0 ? ' border="1"' : '') +' oncontextmenu="return false;"></table></div><div style="flex: 1 0 auto">' + (pieceInfo != '' ? pieceInfo : ai == 2 ? '&nbsp;&nbsp;&nbsp;&nbsp;<i>This diagram plays chess!</i> ' + aiMessage + aiBar : '') + '</div></div>';

First, I grouped everything inside of two divs, so that I could use CSS flex to display the pieces alongside the board. To make sure everything worked right, I tested it on this page with some CSS modifications to show the pieces alongside the board, and I tested it on the Ultima page without any new CSS modifications to make sure there were no problems.

One problem I encountered on the Ultima page was that the board would shrink when I added the extra divs. Since Web Developer Tools showed me this was due to flex-shrink being set to 1, I added the style of "flex: 1 0 auto" to each of my new divs, which allows growth but forbids shrinking. With this change, the board displayed at full size. I also tested how much I could reduce the size of the board by reducing the window width, and it was the same as the official betzaNew.js script.

Another problem I encountered was that if I changed the display of the idiagram element to flex, the bare interactive diagram code would show up if JavaScript were off. To fix this, I added a container div around my two main divs. Since this div is written by JavaScript, I can freely add CSS on the page to change how it displays without causing any code to show up when JavaScript is off. With this done, the only CSS I needed to add to the page to make things work was this:

<style>
  div#container0 {
    display: flex;
    flex-flow: row wrap;
  }
</style>

The container0 id refers to the new container div. With this CSS, the piece table shows up on the right side of the board when the screen is wide enough. When it isn't wide enough, everything displays in a single column like it normally does. In tests I've run, the new divs do not stop anything from working, and they do not change how anything looks without the addition of the CSS code mentioned above. So I recommend merging this with the main betzaNew.js script.

Nice. But if you can afford to reserve space for the table, why would you still want to open and close it? You might as well display the table permanently. Or start with an open table. That the standard version of the ID adds a hidden table was sort of an emergency measure for still being able to access the table if the author did not find a place to fit it on his page.

Historically the development of the ID started with the user having to place 'anchors' for all of the different elements the script could generate (board, piece table, piece list) in his text. Later I let the script create any missing anchors by itself, in a hidden div.

If this only needs some change in the way it creates the anchors, you could make that change optional, under control of a parameter sideBySide=1.

I have made progress with the five other articles. But I'm not sure about the parts with the interactive diagrams!

Nice. But if you can afford to reserve space for the table, why would you still want to open and close it?

I never thought about that, because I just went with what you had instead of trying to redo everything.

You might as well display the table permanently.

You could certainly choose to do that. Instead of giving the container div an id for making it easier to apply CSS to it, you could just give it the style of "display: flex; flex-flow: row wrap".

Or start with an open table. That the standard version of the ID adds a hidden table was sort of an emergency measure for still being able to access the table if the author did not find a place to fit it on his page.

While the page will not always be wide enough to display the board and piece table side-by-side, it should still be able to display everything in a single column. So, I don't think anyone would be having trouble fitting it on the page. It's more a matter of what you want to keep close together.

The way it currently works, it first displays nothing, then the piece table by itself, then a legend for symbols that appear on the board by itself, then both of these together, then neither again. If you want to keep the piece table displayed, I would recommend moving the symbol legend to the first div underneath the board, and displaying it only when someone clicks on a piece on the board or a piece name on the table.

If this only needs some change in the way it creates the anchors, you could make that change optional, under control of a parameter sideBySide=1.

It may make sense to just make the side-by-side view the default display. It will display side-by-side only when there is enough horizontal space, and it will display vertically when there isn't.

It may make sense to just make the side-by-side view the default display. It will display side-by-side only when there is enough horizontal space, and it will display vertically when there isn't.

Well, I don't know. The table is a bit intrusive (and can become enormosuly long for large variants), and it does not really belong in the Setup section of an article. In fact it is almost obsolete by now. For side-by-side view I usually display the pieceList next to the board, rather than the piece table. This looks much more like most articles used to look, but the piece names are still clickable to summon the move diagram. It does not show the piece images, but it lists the squares they are placed, so you could look them up on the board. And when you click the name you would see the image in the move diagram. And nowadays right-clicking a piece on the board will also summon its move diagram, with its name displayed above that. So there are plenty of ways for associating the piece names with the images and the moves. You don't need a bulky table for that.

Normally I only display the piece table permanently in drop games, where it acts as the 'hand' from which you drop. Or in games with a flexible setup, where you first have to set up the board from the table.

The table would fit better in the Pieces section, but in its current form it is not really suitable for that, as it doesn't contain a verbal description of the move, just the Betza notation. The script does contain a Betza-to-text converter, which can be invoked in the Play-Test Applet to get a table suitable for pasting into the Pieces section. But it is not perfect for the more complex multi-leg moves, so you cannot rely on it for automating the article. But combined with the possibilty of a little post-editing it can be a real time safer.

Normally I only display the piece table permanently in drop games, where it acts as the 'hand' from which you drop. Or in games with a flexible setup, where you first have to set up the board from the table.

Since this game is the latter, how do you do that?

Since this game is the latter, how do you do that?

@Fergus: Sorry, I missed this completely. The piece table can be made to appear as a 'satellite' element of the Diagram, by including a HTML element <table id="xxxTable"></table> in the page at the location where you want it to appear. For side-by-side display I usually define a 2x1 HTML table with the Diagram in the left cell, and the table in the right cell. The xxx is the same string as used in the satellite=xxx parameter in the diagram definition, and serves to indicate which table should contain the pieces of which Diagram when there is more than a single Diagram on the page. By default it would be 'piece'.

The piece table can be made to appear as a 'satellite' element of the Diagram, by including a HTML element

in the page at the location where you want it to appear. For side-by-side display I usually define a 2x1 HTML table with the Diagram in the left cell, and the table in the right cell. The xxx is the same string as used in the satellite=xxx parameter in the diagram definition, and serves to indicate which table should contain the pieces of which Diagram when there is more than a single Diagram on the page. By default it would be 'piece'.

I'm not going to do that, because I expect it would break the use of the flex CSS. There should just be a parameter I can set to not make it hidden when the page loads. Since you didn't provide one, I added one called displayPieces, and it seems to be working.

The author, Aurelian Florea, has updated this page.