Cool web applet

Discussion of chess software programming and technical issues.

Moderators: hgm, Rebel, chrisw

User avatar
hgm
Posts: 27790
Joined: Fri Mar 10, 2006 10:06 am
Location: Amsterdam
Full name: H G Muller

Cool web applet

Post by hgm »

I created an 'interactive diagram' generator in JavaScript, which takes the description of Chess diagram between a HTML tag pair with the ID 'diagram', and converts it to a HTML table of piece images with all the event handlers added to it so that it can be used as Chess board. For instance, it highlights the moves of pieces you pick up.

Nice feature is that the pieces can be defined in the diagram description, through a line containing name, ID, move, image file and a list of starting squares. This is ideal for Chess variants with unorthodox pieces, as the diagram can still be aware of how everything moves.

An example is at http://hgm.nubati.net/variants/diagram . Especially interesting is how simple the page source looks. I used the diagram to set up a turn-based server at http://hgm.nubati.net/variants/werewolf , by combining it with some HTML elements and JavaScript code I had developed earlier for that (and revamped a bit). JavaScript-wise the turn-based client code is rather simple; the complexity there was mainly in the server script (actually a C program running as cgi).

I even made a web page that interactively designs the HTML code that defines such an interactive diagram: http://hgm.nubati.net/variants/diagram/design.html .
mar
Posts: 2554
Joined: Fri Nov 26, 2010 2:00 pm
Location: Czech Republic
Full name: Martin Sedlak

Re: Cool web applet

Post by mar »

Wow, that's pretty neat.

I tried the werewolf chess diagram and if I understand correctly, legged moves are simply a sequence executed as one.
I've reached a position where the wolf would check the king in one leg and capture it in second, does it mean it was technically a checkmate?
Just curious. I also noticed that I can execute a legged move as one (two same targets), is that ok?

I've never looked at Betza but it seems very powerful, really impressive.
Ferdy
Posts: 4833
Joined: Sun Aug 10, 2008 3:15 pm
Location: Philippines

Re: Cool web applet

Post by Ferdy »

Nice :) here I tried the mini shogi.

Image


There seems to be a problem on goldsilver, so I define its betza as fcmWF, now it looks like this.

Image

Betza of mini shogi pawn is also defined.
User avatar
hgm
Posts: 27790
Joined: Fri Mar 10, 2006 10:06 am
Location: Amsterdam
Full name: H G Muller

Re: Cool web applet

Post by hgm »

mar wrote:I tried the werewolf chess diagram and if I understand correctly, legged moves are simply a sequence executed as one.
Indeed. Technically a multi-leg move is a move that trancends the simple { board[to] = PerhapsPromoted(board[from]); board[from] = EMPTY; }. In orthodox Chess castling and e.p. capture are multi-leg moves, but the to-square still uniquely implies the move, so this problem can be treated as merely an implied side effect of a regular move. (Not so in Chess960 castling, though!). Multi-leg moves count as a single turn.
I've reached a position where the wolf would check the king in one leg and capture it in second, does it mean it was technically a checkmate? Just curious.
Technically it is already a check if your second leg can capture the King, and it is the opponent's turn. If it were your turn, his previous move would have been illegal. A multi-leg move is really a single move; the splitting into legs is mainly to solve the interface problem that the move is not uniquely specified by just a pair of squares. This splitting has no consequences for the game rules. (This is different in some multi-move variants like Marseillaise Chess, where your turn ends as soon as you could capture the King with a FIDE move. This is really anchored in the rules.) Compare International Draughts, where you sometimes can make multiple captures along different paths, and still end up on the same square. (E.g. 3 forward captures, left-right-right or right-left-right.)
I also noticed that I can execute a legged move as one (two same targets), is that ok?
For a Werewolf that is OK, because it also moves as King. The possibility to 'e.p.-capture' a neighbor by jumping over it is just an extra (cafK in the move descriptior: "capture and again {move or capture} in the 'forward' direction as a King", where the part in {} is the implied default on any final destination, and 'forward' in continuation legs by convention means "in the same direction". If the move descriptor would have been "mKcafK" it would describe an 8-fold Checker, which could only go theough non-captures to neighboring squares (mK). In that case, after you clicked the e.p. victim, the legal choices for the second leg would not show the square you already clicked again. It could really have been implied by the first click, but that is really a form of "one-click moving", which the interface is not smart enough to support. But the Werewolf has "KcafK", and when you click a neighboring enemy it could both be your final square through the K component, or the e.p. victim through cafK. You need another click to resolve that.
I've never looked at Betza but it seems very powerful, really impressive.
This uses the XBetza extension I also use in XBoard. The original Betza system was already quite powerful, but adding the 'a' modifier to describe multi-leg moves was my invention, and allows it to describe really complex pieces. (Which technically might not even be multi-legmovers, but have complex moves that are best described as two independent moves, even though the first one does not have any side effects. Such as a Bishop that can (optionally) turn one 90-degree corner anywhere along its trajectory: BmasB, where it must "move (i.e. not capture) and then again move 'sideways' (i.e. perpendicular), as a Bishop". The leading B in BmasB takes care of the optionality, by also adding the moves of a 'straight' Bishop.)

Unfortunately the description has not become more readable with this extension. An alternative notation,which is more intuitively clear, would be B(mB-sB), where the multi-leg nature stands out by the hyphen in mB-sB, for "move (without capturing) as Bishop, and then continue 'sideways' as Bishop". Perhaps I will make XBoard (and this applet) understand that notation (Betza 2.0) too, some day.
User avatar
hgm
Posts: 27790
Joined: Fri Mar 10, 2006 10:06 am
Location: Amsterdam
Full name: H G Muller

Re: Cool web applet

Post by hgm »

Ferdy wrote:Nice :) here I tried the mini shogi.
That reminds me: the applet does not support demotion on capture yet. I should allow that as a fourth holdings type. Now it would just stuff the promoted pieces into the holding, in 'Defect to capturer' mode.
There seems to be a problem on goldsilver, so I define its betza as fcmWF, now it looks like this.
Well, not all of the pieces you can select as image have moves defined for them. What you see after the 'Pick' button is really just a directory listing of the graphics directory you specified, and it could contain all kind of names that are completely unknown to the applet. So I just put in code to recognize some of the names of very common pieces, like the 6 FIDEs, Gold / Silver / Lance from Shogi, Cannon from Xiangqi, Archbishop/Cardinal and Chancellor/Marshall from Capablanca, Wizard and Champion from Omega Chess, Lion from Chu Shogi and the popular fairy pieces Nightrider, Grasshopper, Camel and Zebra. Only for these names the JavaScript would know a default move, and use it when the move string was empty. "GoldSilver" is not really a name of any known piece, it is just a (rather awkward) name of an XBoard image file.

Perhaps I should add a 'Pick' button behind the 'piece name' field, which would show you all these standard names as checkboxes, so you could just tick those you want, press 'OK' and get them all added in one big swoop. :idea:

Also note that in your mini-Shogi definition the King would be allowed to castle! (The default move for the recognized name 'King' is the FIDE move, and it contains the isO2 component for defining castling.) :lol:
Henk
Posts: 7216
Joined: Mon May 27, 2013 10:31 am

Re: Cool web applet

Post by Henk »

Pieces are not draggable.
User avatar
Guenther
Posts: 4605
Joined: Wed Oct 01, 2008 6:33 am
Location: Regensburg, Germany
Full name: Guenther Simon

Re: Cool web applet

Post by Guenther »

Henk wrote:Pieces are not draggable.
no problem here...
User avatar
hgm
Posts: 27790
Joined: Fri Mar 10, 2006 10:06 am
Location: Amsterdam
Full name: H G Muller

Re: Cool web applet

Post by hgm »

Henk wrote:Pieces are not draggable.
You are so right! :shock:

They used to be draggable, and then I added an extra onmousemove event to the board cells, to cancel a possible display of moves of a single piece there that you might have got from clicking on the piece name in the legend table, and forgot to close. And that kills the grabbing of the piece (which is a browser default action). They still dragged from legend table to board. (But the table images did not have the onmousemove event.)

For now I removed that onmousemove event from the board squares, and that made the dragged piece show again. (This is probably why it worked for Guenther.)

JavaScript still holds many mysteries for me. Perhaps someone here can enlighten me:

Everything in this diagram was working fine on my laptop (Win 8 + FireFox). I had onmousedown and onmouseup events defined on the piece names in the legend table, to call ShowMoves() with the piece number or with 0, respectively. ShowMoves() is a routine that shelves the board, clears it, puts the mentioned piece in the center, and then generates moves for it to set the highlights, so that you can see how that piece moves on an empty board. After that it immediately restores the original board position. With argument it just refreshes the board display (to get the original board positin back in view). So as long as you held the mouse button pressed, you would see the moves of the piece on an empty board. Great!

But then I tried it on my wife's tablet (Android). Touching the names in the table was completely ignored, I could not get the moves of the piece on an empty board there. I tried ontouch and similar events, and it never did anything. Touching the piece images in the table for click-click moving them to the board worked fine, though. After a lot of trying and cursing I finally found out that the onmouseup="ShowMoves(0)" event was killing the thing. Even when I made that routine a no-op by an immediate return, touching the piece names had no effect. So I finally had to throw out the event to make it work on a tablet.

This, however, meant that you switched to displaying the moves on empty board after mouse down, but would not get the original board back on mouse up. Internally it would already have been restored, but it would not be displayed until after you would have been clicking an invisible piece on it. So I changed to code to remember if the empty-board display was already on, and made a second touch for the same piece then clear it. But that was still sort of unacceptable, as it was not obvious you should do that, and many users would never figure out how to get the original position back. So I added the onmousemove="ShowMoves(0)" to the board squares, so that they would get the board back if they mover the mouse over it to do something there. But that now apparently kills the default startdrag event!

Could there be something wrong with ShowMoves(0) that it gives me so much trouble? The code is this:

Code: Select all

var spare = new Array();
var spareInit = 0;
var touched = 0;

function ShowMoves(p) {
  if(p == 0 || touched == p) {
    touched = 0;
    Display(); // back to game
    if(xx >= 0) GenMoves(hx1, hy1, (ex >= 0 ? 2 : 1)); // re-apply move-target highlights if piece was selected
    return;
  }
  touched = p;
  for&#40;var i=0; i<ranks; i++) &#123; // shelve board
    if&#40;!spareInit&#41; spare&#91;i&#93; = new Array&#40;);
    for&#40;var j=0; j<files; j++) &#123; spare&#91;i&#93;&#91;j&#93; = board&#91;i&#93;&#91;j&#93;; board&#91;i&#93;&#91;j&#93; = 0; &#125;
  &#125;
  var midX = files >> 1, midY = ranks-1 >> 1, sav1 = hx1, sav2 = hx2;
  board&#91;midY&#93;&#91;midX&#93; = p; hx1 = -1; hx2 = -1; // kills old highlights on from/toSqr
  Display&#40;); // display empty board w selected piece in center
  GenMoves&#40;midX, midY, 1+16&#41;; // highlight moves
  for&#40;var i=0; i<ranks; i++) &#123; // restore board
    for&#40;var j=0; j<files; j++) board&#91;i&#93;&#91;j&#93; = spare&#91;i&#93;&#91;j&#93;;
  &#125;
  spareInit = 1; hx1 = sav1; hx2 = sav2; // restore old from-to highlights
&#125;
Ferdy
Posts: 4833
Joined: Sun Aug 10, 2008 3:15 pm
Location: Philippines

Re: Cool web applet

Post by Ferdy »

I have a question regarding betza, while,

Betza: yafsW
would be a piece that makes a Bishop move after single W step, see image1
https://www.gnu.org/software/xboard/Betza.html

Image1:
Image


What will be the betza of a piece,
that makes a Bishop move after a double W step? See image2

Image2:
Image

Thanks.
User avatar
hgm
Posts: 27790
Joined: Fri Mar 10, 2006 10:06 am
Location: Amsterdam
Full name: H G Muller

Re: Cool web applet

Post by hgm »

afyafsW

You have to specify each step of the path with the aid of 'a' operators, two normal Wazir steps in the same direction, and then an outward diagonal slide. (This assumes the moves can be blocked on the square you labeled 'w'.)

Note that this only describes moves that indeed make all the steps; if you want it to also move to the initial two squares, you would have to list that separately:

WafWafyafsW or WnDafyafsW