Comments/Ratings for a Single Item
Interactive diagrams. Diagrams that interactively show piece moves.[All Comments] [Add Comment or Rating]
💡📝H. G. Muller wrote on Sun, Nov 22, 2015 12:16 PM UTC:> Ideally, I would like something like this that still uses a graphic image when JavaScript is disabled.
This is exactly what I did in my Chu Shogi description on this site, which is intended as the 'show case' for how this feature can be applied. Of course the article already did have a static image, so I just put that between {noscript} {/noscript} tags, so it would show up when JavaScript is turned off.
But that would not make the text description of the diagram go away. When JavaScript is active it replaces the description text by the HTML table description of the diagram, but when it is not active, it obviously cannot do anything.
I guess this can be avoided by giving the {div id="diagram"} element an initial style="display:none" qualifier, and have the JavaScript then change this to display:inherit after having replaced it by the diagram. I'll add that statement to the .js file. The initial invisiblility, and alternative noscript content would obviously have to be provided by those who want to incorporate the diagram in their text. If I expand this article with a design wizzard similar to what I have now on http://hgm.nubati.net/variants/diagram/design.html I can make it add the display:none qualifier. The submission script would then also have to do that when it processes a [diagram] directive in a non-HTML submission.💡📝H. G. Muller wrote on Sun, Nov 22, 2015 01:36 PM UTC:> It would work only when rule enforcement is already programmed, and how it works would depend upon how the rules were enforced. However, I could devise a means for letting the user provide the same data for a diagram without programming the rules.
Well, I don't know GAME code, but it seems to be a programming language. Which is way beyond the abilities of the average non-programmer user to provide. The whole idea of the rule-aware interactive diagram was that a noob user should be able to define the game. E.g. for Elven Chess all that would have to be provided by one not using a design wizard is
[diagram] files=10 ranks=10 promotionZone=3 promoChoice=QNRB symmetry=rotate pawn:P::pawn:a3-j3 dwarf:D:K:man:a2,j2 knight:N::knight:b2,i2 bishop:B::bishop:c2,h2 rook:R::rook:a1,j1 elf:E:BW:cardinal:d2 goblin:G:RF:marshall:g2 queen:Q::queen:f2 warlock:W:KNADmabKcaKcabK:lion:e2 king:K::king:f1 [/diagram]and that this would be enough to display a nice diagram, allow move entry with rule checking, and possibly provide a (low-level) computer opponent. Now compare that to the GAME code you would need to provide to implement a rule-checking Elven Chess preset... When you are satisfied with the default graphics representation (which we could make alfaerie), there isn't much you have to provide. And to use custom graphics all you would have to add is (say)
graphicsDir=../member.graphics/MSmyvariant/ whitePrefix=White blackPrefix=Black graphicsType=png squareSize=36There also isn't anything hard to understand there.
The only advantage I can see of solving this on the server side is that it would also work when JavaScript is disabled. That could be a legetimate design goal, but in that case I think it would be essential to provide a sort of compiler in the submission script that transforms a similarly simple description of the game to GAME code.
I have already started to implement what I described. I have rewritten subroutines that check for checkmate and stalemate to additionally create an array of all legal moves, which it then passes to JavaScript. When the JavaScript is showing legal moves, it does not rely on the GAME Code that created the array. The showing of legal moves is done entirely on the client side with JavaScript. The calculation of which moves are legal is done beforehand on the server with GAME Code. So, what could be done is to have Game Courier create a diagram, copy the diagram and JavaScript for it to another page, and manually add an array of all legal moves for the position displayed in the diagram.
💡📝H. G. Muller wrote on Sun, Nov 22, 2015 02:27 PM UTC:So it now also works when rule enforcement is not already programmed?
At present, I am only focusing on adding the ability to display legal moves within Game Courier, and this requires code for enforcing the rules. Nevertheless, it is presently possible to use Game Courier to create interactive diagrams without the rules programmed if you know what to copy from the page source and how to write the legalMoves JavaScript array. In the future, I will make this simpler for the user.
>> Ideally, I would like something like this that still uses a graphic image when JavaScript is disabled.
> This is exactly what I did in my Chu Shogi description on this site, which is intended as the 'show case' for how this feature can be applied.
I just went there, turned off JavaScript, and didn't see the diagram anymore.
> Of course the article already did have a static image, so I just put that between {noscript} {/noscript} tags, so it would show up when JavaScript is turned off.
I searched the source of your Chu Shogi page for noscript, and it didn't turn up.
> But that would not make the text description of the diagram go away. When JavaScript is active it replaces the description text by the HTML table description of the diagram, but when it is not active, it obviously cannot do anything.
You could just put the parameters for the JavaScript code in the JavaScript as a series of variable assignments. Or you could encapsulate your code in a function and pass parameters in the function call.💡📝H. G. Muller wrote on Wed, Dec 16, 2015 03:15 PM UTC:Okay, the static image now shows up when JavaScript is off, and no parameters show up on the page when it is off.
Hi H.G. Is there a (preferably simple) way for your 'Interactive Diagrams' to generate diagrams for unusual board shapes such as hexagonal, circular or custom boards?
💡📝H. G. Muller wrote on Wed, Jan 20, 2016 07:34 AM UTC:Thanks H.G. for your reply. "Custom board" diagrams are described this way in Game Courier documentation, so it seems your answer of 'no' is right on, as I had very oddly shaped boards as one possible thought, for one thing. For now, I had been a bit curious about circular boards, and wished to test making a diagram for one from scratch, by simple means if possible. If I wish to, I think I can cut and paste the http address for an existing setup diagram, such as I've seen on a number of webpages on this website. I'd be confined to using the setup that it depicts, unless I combined it with other (preferably circular!?) setup[s], to create a 3D (or even 4D?!) variant of my own, for example. Even using just one circular board setup diagram, however, I might invent my own rules for the piece movements to be used for any possible variant of mine, to be played on that circular board. Recall (naturally) that many variants have been created using just the setup for standard chess. In regard to diagrams for "custom boards" again, I also was thinking of, say, even 8x8 boards with graphics on individual squares (or some of them). I think I've seen at least one such board used for a variant included on this website. A whimsical thought that came to me the other day would be to somehow combine Chess and Snakes & Ladders, though it would be a very involved and lengthy project to complete, I suspect.
💡📝H. G. Muller wrote on Tue, Jan 26, 2016 04:49 PM UTC:It is a good idea to test out your future submission techniques, but it escapes me why you have to do it in the comments to my interactive diagrams submission. If you don;t want to pollute your own submissions with non-informative and possibly failed experiments, why do you pollute mine? This is totally off topic. The Interactive diagrams are not 3D, and not circular, but limited rectangular 2D boards, as this is how HTML tables look.
1. Is it possible to add and foul, a piece that imitates the last move of the opponent?
2. I'd like on a 10x10 board to make the promotion zone from rank 8 to rank 10 for pawns. Pawns should promote to maximum rooks at ranks 8 and 9 and everything on rank 10. Can I do that?
Thanks, for this wonderful tool you just uncovered for me!
💡📝H. G. Muller wrote on Tue, Sep 13, 2016 12:28 PM UTC:Describing a Fool is currently impossible, as there is no Betza notation for that. Because the diagram doesn't enforce turn order, the concept of 'previous move' is a bit fuzzy. Although it is used to implement e.p. capture. So I suppose it should not be too difficult to fix this.
As to promotions: when you specify a zone depth of 3 it would ask you to choose a piece from the legend every time you move a Pawn to rank 8, 9 or 10. By specifying a promoChoice that includes P it will also allow non-promotions. But you could then always pick all allowed pieces everywhere. To refuse 'promotion' to P on rank 10, and to N, B and Q on rank 8 and 9, you would have to put additional JavaScript in your submitted page. Before performing any move the diagram tries to call a function WeirdPromotion that it does not define itself, and which must specify the piece to appear on the to-square, as a result of the move coordinates and proposed piece. I use that in Werewolf Chess to force pieces that capture a Werewolf to turn into one:
function WeirdPromotion(x1, y1, x2, y2, promo) {
if((board[y1][x1] & 15) != 6 && // King immune
(board[y2][x2] & 15) == 5) promo = board[y1][x1] & 1024 | 5 + 512;
return promo; // normally a no-op
}
It should be possible to provide code here that would turn a Pawn on 10th rank to Q, and the choice of a Queen into a Rook on 8th and 9th.
Note that the diagram is not (yet) intended as a way to actually play the game. Just as a convenient way to demonstrate how the pieces move.
Still is a very useful tool, so thaks for it!
What do I do with the result, as I'd like to experiment with playing the game a little bit before submiting it. Earlier I've deleted a pawn and I had to do it all over again. I do not want to repeat that. Now that I tried it a bit it doesn't seem worthy for publishing IMO.
💡📝H. G. Muller wrote on Tue, Sep 13, 2016 03:47 PM UTC:When you have pressed the 'Create HTML' button after having set up the initial position, a text pane will appear right of the diagram, which displays the text that you have to paste in a HTML document at the point where you want to make the diagram appear. You would have to paste that in the submission form of your article (e.g. in the 'Setup' section) to make the diagram appear there.
If you want to use it in another place than an article here on CVP, you would have to also copy the .js file to which the HTML text refers to the proper place, as well as the piece graphics used. If you want to use the diagram on your own computer, you can design it with complete URL for the graphics directory, pointing to the chessvariants.com website, (and later edit the nameof the js file in the diagram definition to a complete URL), and paste it in some HTML page. It would then only work in your browser when you are on-line, though.
25 comments displayed
Permalink to the exact comments currently displayed.