Comments/Ratings for a Single Item

前 pronounces qián and 後 pronounces hòu.

This article definitely needs a modern interactive diagram!

This article definitely needs a modern interactive diagram!

It would help to first have SVG and PNG versions of every Alfaerie piece currently being used in the western diagram on this page. Last I checked, the images I'm using for the Guard and Elephant do not.

Also, since this page illustrates the game with both a Chinese style diagram and a western style diagram, it would be best if interactive diagrams supported the changing of the board at the same time as the pieces change. Well, I suppose I could handle this in JavaScript if I added support for multiple sets in the manner that I previously have. But I think HG has been building in native support for multiple sets, and I don't yet know how this works and whether it would also include native support for changing the board at the same time.

It would help to first have SVG and PNG versions of every Alfaerie piece currently being used in the western diagram on this page.

But why use these symbols? The Advisors are normal Ferzes, and we do have an Alfaerie PNG symbol for that. And there also is an alfaerie Elephant.

But I think HG has been building in native support for multiple sets, and I don't yet know how this works and whether it would also include native support for changing the board at the same time.

Alas, the native support I have been building is for different setups (type of pieces and their locations). Not for changing the visual representation of a given setup. Changing through custom-made buttons should not be too difficult; in the favorable case of compatible piece-image names iw ould just be a matter of changing the graphicsDir and background. The square shades should remain transparent. (If all representations use a whole-board image, that is.)

But why use these symbols?

For the same reasons I chose them. First, this Elephant faces in the same direction as the Horse symbol, which I am using because David designed it for the Mao. For the Guard, the image with the sword fits with calling the piece a Guard, and using this piece instead of the Ferz makes the set reusable for Korean Chess or for Storm the Ivory Tower, in which the piece is not a Ferz. This is particularly important for Game Courier, which makes the same group of sets available for Xiangqi, Janggi, and Storm the Ivory Tower. So, it's not just for this page that I want them but for Game Courier too.

How is this?

It looks good except that it's a bit hard to make out the edges of the sword. Could you use a thicker stroke width for the edges of the sword?

I had used the same sword I made for the drunk elephant. Reload the image and it should be twice the thickness now.

The notion of a palace guard would be served better by the Alfaerie Spearman symbol (w/bnspearman.png). The regular Alfaerie Elephant looks to the left too. The glyph especially designed for the Horse has always seemed to be the most silly glyph of the entire set. For completely unclear reasons it looks like a horse wearing a tie... There still might be some justification for using it as a Shogi Knight, as the rearmost part is cutoff. But to me this in no way suggests the piece would be lame.

And if Alfaerie has no decent graphics for these pieces, why use it for the Western representation. There are plenty of other sets. The XBoard set has a decent Elephant...

I might modify the Interactive Diagram in the comment I am replying to to support multiple piece sets and boards, but since it is from 2016, and you indicated some issues with how it handles King moves, I was first wondering if it would benefit from any improvements that have been made to Interactive Diagrams in the nine (technically 8.5) years since it was made.

Indeed, in the modern version shown here the piece confinement doesn't need scripting anymore, but can be done with morph definitions. Enforcing the 'face off' rule can now simply be done with an fkR move on the Kings. For a non-checkered board shading one still has to provide a custom script, though. The I.D. looks for a function xxxShade(x, y) on the page, where xxx is the value of the satellite parameter. This function can return a 0 or 1 for selecting the defined light and dark shades, or a string like '#123456' for defining an arbitrary other color.

The best way for doing what you want is probably to make what that function returns dependent on some parameter that can be set by the buttons that select the theme. Unless you define the light and dark shades as transparent in all cases, and then provide a whole-board image for each of those. (And assign that to the variable background when the corresponding button is pressed.)

Play Xiangqi with the Interactive Diagram below. Use the buttons to change the set or board. Changing the set will also change the board to the one that should go best with it, but for more fine-tuned control, the board buttons let you change the board without changing the set.

On an iPad, iPhone and Mac (i.e. using the Safari browser) the background image is replicated above the board, so you end up with two boards, one populated, one not. Also on an iPhone it's unreadable due to squashing and clipping of the boards. This is similar to when betzaNew.js is used without a background image, except then you just get a blank area above the board the same size as the board. Diagrams look fine in betza.js, though obviously you can't do certain things with the older script.

I can confirm that I’m having the same problem on my iPad, and when I try betza.js instead of betzaNew.js, that problem goes away. I will let HG advise on what to do.

Interesting. So it appears this mysterious blank area is symply the background image of the table, which defaults to a tansparent (?) area in case no background image or color was specified.

This suggests even more strongly that it is a bug in the iPhone browser software.

Changing through custom-made buttons should not be too difficult; in the favorable case of compatible piece-image names iw ould just be a matter of changing the graphicsDir and background.

Changing background with a button has had no effect. I think that the Display() function is not doing anything with its value.

You are right, Display() only takes care of the variable aspects of the position, and the board size and background are determined during initializaton. I think you shoud do this:

getElementById('board0').style.backgroundImage = 'url(xxx)';

Where the 0 in board0 is really the sequence number of the Diagram on the page (which should be 0 for the first Diagram), and xxx the URL of the image you want to instate as background.

Thanks, it is working now, and I will add more buttons later.

I would shift the grid in the oriental board image used in combination with Alfaerie a bit down. Unlike the oriental Xiangqi piece images, the Alfaerie pieces tend to be low in their cells.

They aren't meant to be used together. There is already a similar board designed specifically for Alfaerie, called chinese-alfaerie.png, though the Alfaerie pieces probably work best for boards using squares instead of intersections. Generally, disk pieces should go on boards with intersections, and Chess pieces should go on boards with squares.

So it appears this mysterious blank area is symply the background image of the table, which defaults to a tansparent (?) area in case no background image or color was specified.

As a test, I added this line to the Xiangqi Scans button of my Interactive Diagram that is further down in the comments:

getElementById('board0').style.backgroundRepeat='no-repeat'

The result I got in Safari on my iPad was that it showed the board only at the top, and it showed the pieces below the board without a background image.

The result I got in Safari on my iPad was that it showed the board only at the top, and it showed the pieces below the board without a background image.

This reminds me of a problem I experienced very long ago, with the Design Wizard at the bottom of the Interactive Diagram article. In step 2 of the design process, where you have to select participating pieces, there is a 'Stock' button. Pressing it brings up a dialog box with checkboxes for the most commonly used pieces.

The problem was that the text (piece names) that had to go next to the checkbox was completely misaligned w.r.t. the box. I had to specify a style with sizable negative margins on the checkbox to make it intellegible:

<input class="iclass" type="checkbox" id="p1" value="pawn" style="margin:0 -50px 0 -50px;">Pawn

I am thinking that if you did the layout with CSS instead of as a table, the problem of having an extra board or extra white space on Apple devices would go away. The two main ways I have done the layout with CSS for Game Courier are with grid for boards with squares or with absolute positioning over background images. I suppose a grid could take a background image. I did background images with absolute positioning, because grid did not yet exist when I wrote that code.

I am thinking that if you did the layout with CSS instead of as a table, the problem of having an extra board or extra white space on Apple devices would go away.

I don't really understand what it means to do the layout with CSS. I was under the impression that CSS is just a method for globally assigning style attributes to HTML elements. The same style elements that can also be set on a per-element basis by a style="name:value" attribute in a HTML element, or by assigning to it in JavaScript as <element>.style.name = value.

So if the board is not a table, how would a program specify which image should be drawn where on the page, and to reserve space for that?

In the Diagram script the function Display() is quite independent from the rest of the program; its only function is to read the board[rank][file] array, and draw the image. If there exists another method for making a board diagram appear on the screen, a routine using that method could easily be used as replacement without the rest of the program knowing about it.

Another issue is how to arrange mouse-click input. This is now handled by attaching event handlers (for mouse down or up, touch, hover etc.) to the individual cells, which get the (diagram number, rank, file) as parameters to indicate what was clicked. Each table cell would have its own calls to these handlers, passing the parameters to reveal their identity. If there is no table I don't know what HTML element would accept the clicks (a canvas?), but there could be some 'master handler' that gets passed the coordinates of the click location in some way in pixels, and then calculates which board cell such a click would belong to. And then call the existing handlers for that type of event passing tose deduced (rank, file) numbers.

None of this should be very difficult.