Edit Member Submitted Item

Edit: Description of Your Submission

Choose the format you will write in.

Format:

If you know HTML, please use HTML mode. Hypertext Markup Language is what most webpages are written in, and using it will give you the most control. To help you out, HTML mode uses CKEditor's Source mode, which will provide you with syntax highlighting and code formatting.
If you don't know HTML, Markdown is the recommended alternative. This is an intuitive markup language that provides appropriate HTML translations for common conventions used in Text documents, combining the power of HTML with the ease of writing plain text. Your Markdown will be stored in the database as Markdown, and it will be converted to HTML only when displayed. You may also mix in HTML, since it will remain unchanged when your Markdown is converted.
The Text format will display your text as is without additional formatting so long as you do not include any HTML tags. But if you do enter HTML, it will display it as HTML. This gives you the option to write HTML without CKEditor reformatting it.
In case you have more experience with word processors and are not at all familiar with markup languages, the WYSIWYG format will emulate the experience of using a word processor by showing you rendered HTML instead of your actual HTML code. If you are comforable with HTML or Markdown, it is best to avoid this mode. Even switching to it briefly can alter your HTML in undesirable ways.

Page Content

Place all your page content in the box below:

Since this is not a Game Rules page, please move any content here to the top section.

<p id="appearance">The description of the diagram consists of two parts: general parameters, and piece definitions.
The general parameters are set by lines of the keyword=value type;
below is an (incomplete) list of recognized keywords, and their default:
</p>
<pre style="font-size:smaller">files=8
ranks=8
graphicsDir=/graphics.dir/alfaerie/
squareSize=50
whitePrefix=w
blackPrefix=b
graphicsType=gif
lightShade=#FFFFFF
darkShade=#E0E0E0
rimColor=#FFFFFF
coordColor=#000000
background=
useMarkers=0
borders=1
firstRank=
</pre>
<p>
The shades apply to the board squares; for non-checkered boards you can make them the same.
(Bright colors are discouraged, as they interfere with the move highlighting.
This is not so much of a problem when you set <b>useMarkers=1</b> to highlight moves by marker symbols instead of by background color.
To make the diagram look more pretty as a static image,
you can define a <b>startShade</b> after having defined the <b>darkShade</b>,
which will be used instead of the latter before you start to interact with the diagram.)
The prefixes and graphics type will be used to construct the filenames of the images it is going to use;
by default it will prefix the names you give in the piece definitions by 'w' or 'b' to distingush the images for white and black pieces of the same type, and suffix them with '.gif'.
</p>
<p>
Specifying the single character <b>#</b> as color will result in the background of the page element containing the square will remain visible through it.
Specifying <b>borders=0</b> will suppress the lines separating the squares.
With the parameter <b>background=</b> one can specify the background image for the entire board, including the coordinate margins,
which can be useful for boards that need more than ordinary checkering.
(E.g. an oriental-style Xiangqi board.)
It is important here that the background image has exactly the same size as the board;
best way to get that is first make a screenshot of the diagram when it is still colored,
and overpaint that in the desired way with an image editor like MS Paint or GIMP.
</p>
<p>
By default the diagram is displayed without board coordinates.
By specifying <b>firstRank=N</b> you can enable display of coordinates next to the board,
where N indicates the number of the rank at the bottom (usually 1, although for some variants 0 is a better choice).
The color of the area in which the coordinates are displayed can be controlled through <b>rimColor</b>,
the color of the coordinates themselves by <b>coordColor</b> (by default white and black).
</p>

Since this is not a Game Rules page, please move any content here to the top section.

<p id="pieces">The second part of diagram definition lists the piece types, one line per piece.
Each line contains 5 or 6 items, separated by ':'.
These items are: (1) piece name, (2) piece ID, (3) move descriptor, (4) root-name of the image file, (5) starting square(s) and (optionally) (6) number of pieces that start in the hand.
The starting-squares field can contain a comma-separated list of squares.
Square <i>ranges</i> are also understood: <b>a2-h2</b> would mean all squares on 2nd rank, and <b>d4-e5</b> the four central squares.
A general parameter <b>symmetry</b> (which by default has the value 'mirror') affects how the list is interpreted.
When <b>symmetry=mirror</b> or <b>symmetry=rotate</b>, only white pieces have to be listed, and the locations of the corresponding black pieces will be derived from that. With <b>symmetry=none</b>, an extra comma separates the white from the black pieces.
(White pieces come first in that case.)
</p>
<table id="BetzaText" style="display:none" border="1">
<tr>
<td style="padding: 5px">
<h2>The XBetza extension
</h2>
<p>
The diagram uses an extension of <a href="https://www.chessvariants.com/page/MSbetza-notation-extended">Betza's funny notation</a>, to allow description of more complex moves.
The most versatile enhancement is that it allows description of moves as multiple steps belonging to the same atom.
To this end a new modifier <b>a</b> is introduced, acting as a separator of groups of other modifiers.
Each such group of modifiers then applies to a separate move of the same atom, forged into one overall ('multi-leg') move.
To get a more detailed explanation of how this can be used for description of lame leapers, bent sliders or locust capture,
click <u style="color:blue" onclick="OpenDiv('again')">here</u>.
<table id="again" border="1" style="display:none">
<tr>
<td style="padding: 10px">
<h3>Multi-leg moves
</h3>
<p>
When the <b>a</b> ('again') modifier is used amongst the modifiers prefixing an atom,
it sub-divides the other modifiers into groups, each group specifying a separate move of the atom,
which should be performed as a series.
Only when all steps of the series can be taken, the move would be legal.
A simple example is <b>mafcW</b>, which defines a move that starts with an <b>mW</b> step, and then <u>must</u> continue with a <b>fcW</b> step.
Directonal modifiers for a continuation leg are relative to the previous step, where <b>f</b> means in the same direction.
If the first step is not possible (because the adjacent square is not empty, and thus cannot be reached with an <b>m</b> move), then entire move is not possible.
So the example described a lame Dababba that can only capture.
</p>
<p>
Often the <b>a</b> modifier is needed to describe a change in direction.
E.g. <b>masR</b> would indicate a Rook that can turn one 90-degree corner on an empty square.
Direction changes of 45 or 135-degrees can be indicated, and would turn diagonal atoms into orthogonal ones and vice versa.
E.g. <b>mafsW</b> would be the Xiangqi Mao, making an outward diagonal step (<b>fs</b>) as second leg after an initial Wazir step to an empty square.
Without directional modifier a continuation leg can go in any direction except the one exactly opposite to the previous leg,
and without a mode specifier a non-final leg defaults to <b>m</b>, i.e. must step through empty squares only.
A final leg will by default both capture and move (<b>mc</b>), as usual.
</p>
<p>
Multi-leg moves can also be used for describing locust capture, by first capturing to the square containing the intended victim,
and then continuing to the final destination with a second step.
E.g. Checkers-like capture can be indicated by <b>fcafmF</b>: start capturing a piece diagonally in front of you (<b>fcF</b>),
and then continue in the same direction to an empty square with <b>fmF</b>.
If the first square is not containing an enemy piece, or the second step would not end on an empty square, the entire move is forbidden.
</p>
<p>
XBetza redefines the meaning of the hopper modifiers <b>p</b> and <b>g</b> when applied to non-final 'legs' of a multiple move indicated through the <b>a</b> separator.
In this case they mean the piece must jump <i>on</i> the piece it will be hopping, rather than <i>over</i> it,
and the range change implied by <b>g</b> will apply to the <i>subsequent</i> leg,
changing the slider atoms <b>B, R, Q</b> into the corresponding leaper atoms <b>F, W, K</b> for that
(dropping any explicit range specifiers).
So <b>gafQ</b> would be an alterative description of the Grasshopper.
This range change also works in the opposite direction; <b>gafK</b> would be the Contra-Grasshopper, continuing with a <b>Q</b> move after the 'platform'.
</p>
<p>
As a range-changing counterpart of the <b>m</b> modifier the new modifier <b>y</b> is introduced for non-final legs,
to indicate a direction and range change can take place on reaching an empty square,
such as occurs with bent sliders like the Griffon <b>FyafsF</b>: move first to an F square (<b>mF</b>), and then continue as <i>slider</i> at 45 degrees (so as <b>R</b>).
</p>
<p>
The modifier <b>i</b> used in a continuation leg stands for 'iso',
and means the corresponding slider move must have an equal number of steps as the preceding slider move.
This can be used to describe pieces like the Sissa (<b>maivsQ</b>,
the <b>vs</b> = <b>(f+b)(l+r)</b> = <b>fl + fr + bl + br</b> indicating all 45- and 135-degree turns),
or slider rifle capture (<b>mRcaibR</b>, capture and move exactly back).
As a quirk the diagram accepts the modifier <b>x</b> in a non-final leg of a multi-leg move
to 'activate' the piece originally on the square this leg reached,
and moves that piece to the final destination of the move, rather than the piece the move started with
(which remains in place).
E.g. in Knight-relay Chess the Knight would be <b>mNxaN</b>, acivating any piece a Knight jump away to move as a Knight.
</p>
</td>
</tr>
</table>
<p>
XBetza also introduces some new atoms and modifiers to make it easier to describe some common situations.
E.g. the <b>O</b> atom with a range is used to describe castling with the corner piece under the normal restrictions,
the range specifying the King displacement.
The <b>U</b> atom indicates a universal leaper (aka Kraken).
<b>C</b> (Camel) and <b>Z</b> (Zebra) are easier-to-remember synonyms for <b>L</b> and <b>J</b>, respectively.
New modifiers are <b>e</b> to indicate generalized e.p. capture,
i.e. a move to a square the previously moved lame leaper passed through, removing that lame leaper.
A leading modifier <b>i</b> indicates the move can only be made by virgin pieces,
and in combination with an <b>n</b> such a move will create e.p. capture rights.
The diagram allows the combination <b>nn</b> for indicating creation of e.p. rights on moves of non-virgin lame leapers.
</p>
<p>
The diagram supports the <b>z</b> and <b>q</b> modifiers in the usual meaning;
they can even be combined with <b>p</b> and <b>g</b> to define crooked or circular hoppers.
They cannot be used as part of a multi-leg move, however.
The modifier <b>j</b> on a distant leap forces the move to jump over something,
but like <b>n</b>, the squares jumped over are only well defined for purely orthogonal or diagonal leaps.
A <b>j</b> on a slider atom (e.g. <b>R, F4</b>) means the first square of the trajectory is ignored
(i.e. the first step is really a leap of double the distance), e.g. the Ski-Rook <b>jR</b>.
</p>
<p>
The modifier <b>k</b> can be used to indicate the move can only be used to capture a royal piece,
e.g. for implementing the rule in Xiangqi that Kings cannot face each other (<b>WkR</b>).
The diagram interprets an asterisk as a range needed to reach up to half the board
(which thus depends on the location of the piece), but at least 1.
This can be used to describe the position-dependent Pawn movement in some variants as <b>fmW*</b>,
which defies a strict Betza description.
Such a move will always create e.p. capture rights for an <b>e</b> move on any square it passes through.
</p>
<p><u style="color:blue" onclick="OpenDiv('BetzaText')">Close</u>
</p>
</td>
</tr>
</table>
<p>The name is arbitrary, and will appear in the legend table.
The ID has to be a single letter, and is referred to by the promoChoice string (see below).
By default the first letter of the piece name would be taken for this.
The move descriptor has to be in Betza notation;
the <u onclick="OpenDiv('BetzaText')" style="color:blue">XBetza extension</u>,
(which uses the 'a' ('again') operator for describing multi-leg moves) is understood.
For a few standard pieces (FIDE and a few common fairies) the name will be recognized, and the default move will be the move of the orthodox piece of that name.
(This prevents that you have to supply the awkward Betza description of the FIDE pawn!)
The default for the image root-name is the name of the piece.
Only when you are not satisfied with the default, the corresponding item has to be non-empty.
A few examples are
</p>
<pre style="font-size:smaller">archbishop:A:BN:cardinal:c1       (image name differs from piece name)
warrior:X:mNcK:centaur:b1,g1      (everything non-standard)
hawk:H:BN:bird::1                 (starts one in hand, uses w/bbird.gif image)
pawn::::a2-h2                     (fills 2nd rank, moves as FIDE by default)
knight:N:::c1,f1                  (must specify ID, as otherwise K would have been taken)
king::KisO3:king:f1               (non-standard castling (isO3) requires giving move)
rook::::a1,h1                     (nothing special; uses all defaults)
</pre>
<p>A <a href="https://www.chessvariants.com/page/MSinteractive-diagram-piece-sandbox">piece sandbox</a> has been provided to allow you to try out your own pieces before including them in your own diagrams.
</p>

Since this is not a Game Rules page, please move any content here to the top section.

<p id="rules">Amongst the general parameters there are also a few to specify game rules.
These are:
</p>
<pre style="font-size:smaller">holdingsType=0
promoZone=1
maxPromote=1
promoChoice=NBRQ
promoOffset=0
conversion=0
symmetry=mirror
</pre>
<p>If you want promotions to be faithfully performed when pieces are moved in the diagram, you would have to set correct values for the depth of the promotion zone (in ranks), the number of pieces that should promote when they get there (if <b>maxPromote=N</b> the first N piece types you define will promote), and the IDs of the pieces that can be promoted to (<b>promoChoice</b>. In the latter, a <b>*</b> prefixed to an ID indicates that choice will only be valid if pieces of that type are available in the 'hand' (where they presumably got by getting captured). A numeric suffix M on a piece (smaller than the <b>promoZone</b> depth) will restrict promotion to that piece to the last M ranks only. A <b>!</b> prefix means the choice is not available on last rank, and is typically used on a Pawn amongst the choices (to allow deferral on earlier ranks of a deep zone). The piece IDs can be comma separated, or simply concatenated. Shogi-style promotions can be specified by defining a numerical parameter <b>promoOffset</b>; in this case the only available choices are the piece itself (i.e. defer) and the piece type <b>promoOffset</b> places below it in the piece list. In this case the <b>promoChoice</b> is largely ignored, except that a piece ID in it that is prefixed with <b>!</b> will not be allowed to defer, and promote automatically.
</p>
<p>The parameter <b>holdingsType</b> specifies whether pieces can be held 'in hand', and how they get there. By default captured pieces are just discarded, but by setting <b>holdingsType=1</b> they would get back into the hand of their owner (so they become available as promotion choice, like in Grand Chess). With <b>holdingsType=-1</b> captured pieces would color-flip, and end up in the hand of their capturer, presumably for being dropped back onto the board, like in Crazyhouse.
</p>
<p>The parameter <b>conversion</b> can be set to the number of the piece type to which the <a href="http://www.chessvariants.org/varvar.dir/bcr.html">Bishop Conversion Rule</a> should be applied. Pieces of the specified type must then make their first moves to different square shades.
</p>
<p>The diagram will include a (normally collapsed) legend,
tabulating all piece types.
This is also used as holdings, and contains columns for how many piece of each type the players have in hand.
If there are pieces in hand, they can be dragged to the board.
Pieces captured on the board will transfer to the hand according to the <b>holdingsType</b> parameter.
Note that promotion choices for moves performed in the diagram will have to be made from this table,
(the allowed choices will be highlighted in pale blue).
The table will open automatically when a promotion choice is to be made.
It is also possible to make this table appear in a permanently visible location of your choice on the page,
as a satellite,
by putting an empty HTML table <b>
&lt;table id="pieceTable">
&lt;/table></b> in the desired location.
</p>
<h2 id="holes">Irregular boards
</h2>
<p>When you define a piece with the name 'hole', the Diagram will treat it as special.
It will not add it to the piece table, and will ignore any ID, move or image you specify for it.
Instead it will make the squares you list for it 'inaccessible';
i.e. it will black them out, and refrain from highlighting moves that otherwise would end on such squares.
This can be used to make boards with irregular shapes,
by specifying these as the smallest rectangle that contains them,
and covering the unwanted squares with holes.
To fine-tune the aestetic appearance of the diagram a parameter <b>holeColor</b> (black by default) can be specified.
</p>
<p>
Since the Diagram allows you to do illegal moves,  you can actually move pieces to the holes,
or even specify pieces to be put on squares that you earlier defined as holes, in the start position.
In that case the square will revert to a hole, rather than an empty square, when that piece moves away again.
I.e. it acts like a <a href="/rules/brouhaha">brouhaha square</a>.
</p>
<h2 id="zoning">Making use of Board Zones
</h2>
<p>The board can be divided into zones of arbitrary size and shapes.
Such zones can be used to change how pieces move (by changing their type, i.e. promoting them),
deny access, or terminate the game when they are reached.
The zones can be defined separately for each piece type,
through a parameter <b>morph</b> specified immediately after the definition line of the piece to which it applies.
</p>
<div style="float:left;margin:0 10px 0 0">
<table border="1" cellpadding="1">
<tr>
<td colspan="2"><b>morph summary</b>
</td>
</tr>
<tr>
<td>.
</td>
<td>normal square
</td>
</tr>
<tr>
<td>A-Z
</td>
<td>promote to mentioned piece
</td>
</tr>
<tr>
<td>*
</td>
<td>promotes with choice
</td>
</tr>
<tr>
<td>|
</td>
<td>optional shogi promotion
</td>
</tr>
<tr>
<td>^
</td>
<td>forced shogi promotion
</td>
</tr>
<tr>
<td>!
</td>
<td>cannot move there
</td>
</tr>
<tr>
<td>=
</td>
<td>no friendly capture there
</td>
</tr>
<tr>
<td>+
</td>
<td>delayed win
</td>
</tr>
<tr>
<td>#
</td>
<td>immediate win
</td>
</tr>
<tr>
<td>"
</td>
<td>repeat previous rank
</td>
</tr>
</table>
</div>
<p>
The value of this parameter is essentially an image of the board,
the ranks separated by slashes <b>/</b>,
starting with the highest rank (white's promotion zone).
Each character on a rank corresponds to a square,
and specifies what would happen when a piece of the given type lands on that square.
When that character is a piece ID, the piece would instantly promote to the type the ID stands for.
If it is an asterisk <b>*</b>, it invokes the promotion procedure as specified through <b>promoChoice</b>,
to let the user choose a piece to promote to.
(But: it won't let you promote to a piece that itself would change into another type on the promotion square if that has the same ID.)
</p>
<p>
You can offer different promotion choices for different pieces or on different squares.
With <b>promoChoice</b> you can define multiple choice sets, separated by slashes.
By default it uses the first such set, but when the square is marked by a digit 1-9 in the <b>morph</b> board,
this would use one of the subsequent sets for offering the choice.
On squares marked by a vertical bar the piece will be subject to shogi-like promotion:
promote to the piece implied by <b>promoOffset</b>, or defer promotion.
</p>
<p>
If it contains an exclamation point <b>!</b> the move will be rejected, and the piece would not be allowed to move to the square.
For an equal sign <b>=</b> the move would only be rejected if it contained a friendly piece (in case the XBetza move description would have allowed such friendly capture).
If it contains a <b>+</b> or <b>#</b>, the game would be won when the piece reaches the square;
for the <b>#</b> immediately (like capturing a King),
for the <b>+</b> as a delayed winning condition, which could still be trumped by King capture in the next half-move
(like Shatranj baring).
A period <b>.</b> means the square is not special.
</p>
<p>
If not all moves of a piece should result in the requested effect,
the moves that don't can be marked in the Betza description by writing a quote <b>'</b> behind the corresponding atom in the XBetza notation.
This also holds for effects specified by the <b>captureMatrix</b> explained in the next section.
So a piece that moves as <b>A'D'fW</b> for which the <b>morph</b> board specifies last-rank promotion
will only be allowed to promote with the <b>W</b> move, and not if it reaches last rank by a jump.
</p>
<p>
There are several shortcuts for avoiding you have to type the entire board.
Ranks that are not mentioned, or contain no characters at all, will be assumed to contain all non-special squares.
If fewer characters are present for a rank than the board width,
the characters that are given will be repeated to fill in the missing spots.
If a rank just contains a double quote <b>"</b> , it indicates a repetition of the previous rank.
</p>
<p>
So specifying <b>morph=Q</b> would mean the piece promotes to Q everywhere on last rank,
but moves undisturbed on the rest of the board.
For a diagonal variant where white would play from a1 to h8,
an L-shaped promotion zone consisting of 8th rank and the h-file could be defined through <b>morph=*/.......*/"/"/"/"/"/"</b> .
To promote to the piece that started on the square in an orthodox setup, with choice at e1/e8,
you would write (after the Pawn definition) <b>morph=RNBQ*BNR</b> .
For Xiangqi-like 'promotion' the Pawns would get <b>morph=Q/Q/Q/Q/Q</b>, where Q is the across-the-river Pawn.
The King and Advisors would get <b>morph=//////!/!!!.../"/"</b> to confine them to the Palace.
For King of the Hill the King would get <b>morph=///...++/"</b> to define the four central 'win squares'.
To implement a piece X that moves as C on all white squares of an 8x8 board you would write <b>morp=C./.C/C./.C/C./.C/C./.C</b> for it
(and presumably you would have the C morph back to X on all the dark squares in a similar way).
If multiple piece types have the same ID, the one latest in the table will be promoted to, but never the type itself.
This allows you to use the same ID for two types that morph into each other.
</p>
<h2 id="captures">Promotion on Capture, forbidden and mandatory Captures
</h2>
<p>Like the <b>morph</b> parameter can be used to define events (such as promotion, rejection) when a move reaches a certain square,
the <b>captureMatrix</b> parameter can be used to define events when a move of a piece of a given type captures a victim of a specific type, or goes to an empty square.
It defines a table, where the rows (separated by slashes <b>/</b> ) correspond to the moving pieces (in order of their definition lines),
while the characters in each row correspond to the various piece types in the destination square (starting with the empty square).
Also here a period <b>.</b> means nothing special happens, (and is the default for unmentioned victim types).
A double quote <b>"</b> can be used as a shortcut for repeating a row, while a digit indicates the previous symbol should be repeated that many times
(and assumes this to be the <b>.</b> if it is the first character on the row).
A double quote followed by a number means the previous row should be repeated that many times.
</p>
<div style="float:left;margin:0 10px 0 0">
<table border="1" cellpadding="1">
<tr>
<td colspan="2"><b>captureMatrix summary</b>
</td>
</tr>
<tr>
<td>.
</td>
<td>normal move/capture
</td>
</tr>
<tr>
<td>A-Z
</td>
<td>promote to mentioned piece
</td>
</tr>
<tr>
<td>a-z
</td>
<td>promote to enemy piece
</td>
</tr>
<tr>
<td>|
</td>
<td>(optional) shogi promotion
</td>
</tr>
<tr>
<td>!
</td>
<td>cannot move/capture that
</td>
</tr>
<tr>
<td>?
</td>
<td>cannot move/capture that
</td>
</tr>
<tr>
<td>%
</td>
<td>cannot move/capture if protected
</td>
</tr>
<tr>
<td>~
</td>
<td>must capture that
</td>
</tr>
<tr>
<td>^
</td>
<td>cannot hop over that
</td>
</tr>
<tr>
<td>$
</td>
<td>neither captures nor hops over that
</td>
</tr>
<tr>
<td>0
</td>
<td>kamikaze move
</td>
</tr>
<tr>
<td>@
</td>
<td>burn/explode
</td>
</tr>
<tr>
<td><i>:</i>
</td>
<td>move that makes opponent pass turn
</td>
</tr>
<tr>
<td>=
</td>
<td>same for all friendly captures
</td>
</tr>
<tr>
<td>"
</td>
<td>repeat previous row
</td>
</tr>
<tr>
<td><i>N</i>
</td>
<td>repeat previous symbol <i>N</i> times.
</td>
</tr>
</table>
</div>
<p>
An exclamation point <b>!</b> or question mark <b>?</b> indicate it is illegal for pieces of the given types to capture each other.
This can be used to define iron pieces (capturable by no other type),
or relatively iron (only capturable by some, often only excluding their own type as an anti-trade measure).
It can also be used to define an arbitrary 'pecking order', like in Stratego.
A percent sign <b>%</b> would make the capture illegal if recapture on the destination would be possible
(a more precise definition of the <b>protected</b> anti-trading parameter).
</p>
<p>
A piece ID indicates the capture would lead to forced promotion to the mentioned type.
This can be used to define promotion on capture, contageon, or pieces that morph into others on every move or capture (such as in Kyoto Shogi or micro-Shogi).
A vertical bar makes the capture result in an (optional) shogi promotion, as defined by <b>promoOffset</b>.
A lower-case version of the ID would promote to a piece of the opponent!
It is possible to also define such promotions (or illegality) for friendly captures, in variants that allow such moves.
The friendly victims would come directly after the piece types for normal captures, on the same row.
An <b>=</b> anywhere in the row would skip to the friendly-captures part, and set those to a copy of the normal captures.
You could still continue after it the row for overruling that copy, though.
</p>
<p>
A kamikaze capture is indicated by a <b>0</b> (zero); this will make both the capturer and captured piece disappear.
When the matrix contains an <b>@</b> sign it can also destroy pieces on adjacent squares.
The effect can be tuned with the parameter <b>atomicCapture=<i>N</i></b>.
With N=0 (the default) this would capture all enemy pieces in the 3x3 area centered on the destination.
For larger values of N it would destroy all adjacent pieces of either color, except the first N in the piece table, while the capturing piece would always disappear.
What 'adjacent' means here can be configured through the parameter <b>blastZone</b>, which can get the values <b>K</b> (the default), <b>W</b>, <b>F</b> or <b>N</b>.
</p>
<p>
It is also possible to grant some captures a higher priority than other moves,
by putting a tilde (<b>~</b>) in the corresponding capture-matrix element.
In a position where any such prioritized move would be legal it is then mandatory to play one of those.
The remaining moves can only be played when no legal prioritized move exists.
</p>
<p>
The capture matrix can also be used to exclude hopping of one specific piece type over another.
This would be caused by a <b>^</b> or <b>$</b> in the corresponding element of the capture matrix,
where the latter would forbid both hopping and capturing.
Also here the exclusion distinguishes friendly hopping from hopping over enemies.
</p>
<p>
A colon (<b>:</b>) indicates a move that freezes the opponent army for one turn,
allowing the player who makes it to play two moves in a row,
  as in <a href="/rules/shock-chess">Shock Chess</a>.
</p>
<h2>Pieces with Influence
</h2>
<p>
Some variants have pieces that affect the capabilities of adjacent pieces just by being there.
The Diagram supports this through the parameters <b>trackPieces=<i>N</i></b>, <b>trackedTypes=<i>M</i></b>, <b>spell</b> and <b>spellZone</b>.
The <i>N</i> here indicates which the first piece type that should cast such a spell on its surroundings,
and <i>M</i> (which by default is 1) how many subsequent piece types (all in piece-table order).
(Note the maximum number of pieces of the same type that can be tracked is two,
and the possibility to track more than one type was mainly added to provide a work-around for if you need more,
by diversifying the type into identical sub-types.)
</p>
<p>
The <b>spellZone</b> parameter can be given the values <b>K</b> (the default), <b>W</b>, <b>F</b> or <b>N</b>,
and determines which squares are affected by the presence of a piece of the tracked type.
There are various flavors of spells, selected by the <b>spell</b> parameter. Currently supported are:
</p>
<ul>
<li>burn - an enemy piece landing in the spell zone disappears instantly.</li>
<li>freeze - an enemy piece standing in the spell zone cannot move at all.</li>
<li>charm - an enemy piece standing in the spell zone cannot capture.</li>
<li>hide - sliders can hop over friendly pieces in the spell zone.</li>
<li>protect - a friendly piece in the spell zone cannot be captured by the opponent.</li>
<li>brake - enemy pieces cannot move through or out of the spell zone.</li>
</ul>
<h2 id="AI">Artificial Intelligence
</h2>
<p>
Since June 2020 the Diagram also comes with a built-in generic AI,
which makes it into a live demo that you can play against, at a human-friendly level.
This is still somewhat experimental, and might not work flawlessly for every variant.
To play sensibly the AI will have to know rule details that a diagram for just showing pseudo-legal moves doesn't care about.
It has a built-in algorithm for estimating piece values based on the moves,
but the resulting values will probably not be very good.
A number of new parameters were added to specify game rules:
</p>
<pre style="font-size:smaller">extinction=1
royal=N
baring=N
stalemate=draw
counterbare=draw
iron=N
antiTrade=N
counterStrike=N
protected=N
tradeThreshold=N
contageous=
</pre>
<p>
Here <b>N</b> represents the number of the piece type that gets the mentioned property.
So these parameters can occur multiple times with different values, to indicate more than one piece type has the property.
Loss of a <b>royal</b> piece is the primary termination condition, and decides the game instantly,
without having to worry about any retaliation.
The parameter <b>extinction</b> determines if capture of a single royal decides the game,
or that all royals have to be captured.
(The latter is the default, but when there is only a single royal it doesn't matter).
The <b>baring</b> condition is somewhat similar to extinction royalty,
in that it terminates a game when all pieces with this property have been eliminated.
But it is a <i>delayed</i> winning condition, which grants the opponent an 'after-move',
with which he might trump it by capturing a royal, or achieve 'counter-baring'.
In the latter case the result is determined by the parameter <b>counterbare</b>,
which (similar to the <b>stalemate</b> result)
can be a draw (the default) or a loss for the player that is stalemated or bared first.
When you specify <b>baring=0</b> all non-royal pieces will get this property.
</p>
<p>
The property <b>iron</b> means that the piece cannot be captured at all, by any other piece type.
In a sense this is the opposite of royalty: you would lose rather than win by capturing an iron piece,
which is a way of saying you can never do it.
A weaker form of this is <b>antiTrade</b>,
which forbids pieces that both have the property to capture each other,
but they can still be captured by other pieces.
The weakest property of this kind is <b>counterStrike</b>,
which endows pieces with temporary ironhood when a piece of the same type was captured in the preceding half-move.
</p>
<p>
The <b>protected</b> property grants temporary royalty,
and applies on the turn after a piece with this property captures one that also has it.
In practice this means pieces with this property are not allowed to capture each other when the victim is protected.
This property can be weakened by a threshold,
which would allow the capture when it would gain an amount of material equivalent to the value of the piece specified by <b>tradeThreshold</b>.
(Which is useful when the <b>protected</b> property is applied to a piece capable of multi-capture.)
</p>
<p>
It is also possible to make one or more pieces <i>contageous</i>, i.e. make any piece that captures them instantly change to that type (but keep their color).
The string parameter <b>contageous</b> can be set to the (concatenated or comma-separated) IDs of the pieces that have this property.
When an ID in this string is prefixed by a <b>!</b> it will not be contageous itself, but be immune to the contageon effect, and always keep its own type.
</p>
<p>
The AI can be disabled by specifying <b>enableAI=0</b>,
and it would be good to do that when it is known the AI would not be able to handle the variant properly
(such as variants with piece drops).
To make that the user still has a way to switch on the AI when the diagram is used with a permanent piece table elsewhere on the page as <b>satellite</b>,
(see below),
one should specify <b>enableAI=2</b>,
as the collapsable piece table that normally also contains the AI switch would not be added under the diagram in that case.
</p>
<h2 id="shuffle">Shuffle games
</h2>
<p>
It is also possible to specify the Diagram should shuffle pieces at the start of a new game.
It will not do that in the initial display, though, but only when you use the 'Restart' button in the AI control bar.
You can specify how it must shuffle by a <b>shuffle=...</b> parameter,
where the value can be a comma-separated list of piece sets, which will then be permuted over the locations where the diagram originally specified them.
E.g. specifying <b>shuffle=BN,KQ</b> with the FIDE setup would randomly permute the four minors, and might swap King with Queen.
While <b>shuffle=KQ,QBN</b> might first swap K and Q, and then randomly permute Queen and minors.
</p>
<p>
The permutation has some restrictions, and can be specified to have more:
If a piece has a castling move, it will be kept between the corner pieces.
A piece ID prefixed with <b>!</b> (exclamation point) will be assigned new locations before others,
as equally distributed over square shades as possible.
So Chess960-type shuffling can be obtained through <b>shuffle=N!BRQK</b>.
Finally, a prefix <b>:</b> (colon) will cause the piece type to be symmetrically placed.
(Only use for even numbers of pieces, when the set of squares the pieces-to-be-permuted are standing on is indeed symmetric!)
This can be used to make swaps in the wings while keeping the setup symmetric;
e.g. <b>shuffle=:NR</b> might swap N and R either on both wings or not at all.
</p>
<h2>Rotating pieces
</h2>
<p>
Changing the orientation of a piece with an asymmetric move can be done by defining a separate piece type for each orientation,
and allowing the piece to promote to any of those after its move.
To allow 'stationary promotion', i.e. without moving the piece, you must specify a parameter <b>handSwap=1</b>,
and put the alternative orientations in the holdings at the start of the game.
This allows you or the AI to swap the piece in the holdings with pieces that have the same ID on the board,
by dragging the former on top of the latter.
</p>

Since this is not a Game Rules page, please move any content here to the top section.

<p id="notes">Although the diagram knows the rules, and highlights the legal moves,
it will not enforce those.
So you can play illegal moves, if you insist.
This was done intentionally, to make it easy to setup positions to experiment with.
And to be still usable for variants with rules that are so exotic they could not be completely handled.
The diagram does not even enforce turn order.
(This comes in handy for non-standard castlings, where you can then simply move King and Rook separately.)
</p>
<p>When you drop a piece from the holdings on top of your own piece,
the diagram will treat it as a substitution,
where the replaced piece goes back into your own hand.
</p>
<p>For the diagram to work the HTML page has to link to the underlying JavaScript program.
This requires an element
</p>
<pre style="font-size:smaller">
[chr lt]script type="text/javascript" src="/membergraphics/MSinteractive-diagrams/betza.js?nocache=true"[chr gt]
[chr lt]/script[chr gt]
</pre> to be on the page (which is included in the HTML text provided by the design wizard).
<p>If you want to use such diagrams on your own website, you would have to copy that JavaScript file there too,
and adapt the link to it accordingly.
</p>
<p id="designwizard">
Multiple diagrams on a page are not recommended, but are supported in a limited way.
This was mainly done for convenience in the CVP Comments listing,
where comments on different articles can be displayed together,
and should not wreck each other.
If the text in the comment contains external elements, such as a <b>pieceList</b> or a <b>pieceTable</b>,
the script cannot know to which diagram the piece list or table belong if there are multiple diagrams.
In CVP Comments you should therefore always associate them with the diagram to which they belong,
even if your Comment contains only a single diagram, as it might be grouped with Comments of others.
This is done through a parameter <b>satellite=xxx</b> in the diagram definition, where 'xxx' is a name unique to the diagram,
and then using <b>xxxList</b> and <b>xxxTable</b> as HTML id for the external elements of that diagram.
(Default value of 'xxx' is 'piece'.)
</p>
<p>A wizard is available to help you design the diagram description, so you can directly copy-paste it into your own web page on this website.
</p>
<style>
.iclass {
  width: 150px;
}
pre {
  border: 1px;
}
</style>
<script>
function DefineSeed(last) {
  var t = '<div class="idiagram">';
  if(files != 8) t += '\nfiles=' + files;
  if(ranks != 8) t += '\nranks=' + ranks;
  if(holdingsType) t += '\nholdingsType=' + holdingsType;
  if(promoOffset)  t += '\npromoOffset='  + promoOffset;
  if(promoZone  != 1) t += '\npromoZone=' + promoZone;
  if(maxPromote != 1) t += '\nmaxPromote=' + maxPromote;
  if(promoChoice != '') t += '\npromoChoice=' + promoChoice;
  t += '\ngraphicsDir='  + graphDir;
  t += '\nwhitePrefix='  + whitePrefix;
  t += '\nblackPrefix='  + blackPrefix;
  t += '\ngraphicsType=' + graphSuffix;
  if(sqrSize != 36) t += '\nsquareSize=' + sqrSize;
  if(light != '#FFFFFF') t += '\nlightShade=' + light;
  if(dark  != '#E0E0E0') t += '\ndarkShade='  + dark;
  if(last) t += '\nsymmetry=none';
  for(var i=0; i<nPieces; i++) { // add piece definitions
    t += pieceStrings[i] + whiteLoc[i] + blackLoc[i];
    if(!last) t += ':99'; else if(hCounts[i] > 0) t += ':' + hCounts[i];
  }
  if(nPieces == 0) t += '\nDummy:-:O::' // dummy piece to have at least one
  t += '\n</div>';
  document.getElementById('create').innerHTML = t;
  DumpHTML(t);
}
var formats = ["gif", "png", "jpg", "svg"];
function Create() {
  // read out text entries
  files = parseInt(document.getElementById('files').value);
  ranks = parseInt(document.getElementById('ranks').value);
  holdingsType = document.getElementById('htyp').selectedIndex;
  if(holdingsType == 2) holdingsType = -1;
  promoZone = parseInt(document.getElementById('zone').value);
  maxPromote = parseInt(document.getElementById('maxp').value);
  promoChoice = document.getElementById('choice').value;
  promoOffset = parseInt(document.getElementById('offset').value);
  graphDir = document.getElementById('gdir').value;
  whitePrefix = document.getElementById('wpref').value;
  blackPrefix = document.getElementById('bpref').value;
  sqrSize = document.getElementById('sqrsz').value;
  graphSuffix = document.getElementById('gform').selectedIndex;
  graphSuffix = formats[graphSuffix];
  dark = document.getElementById('dcol').value;
  light = document.getElementById('lcol').value;
  DefineSeed(0); Init();
  OpenDiv('step');       // disable this phase
  OpenDiv('pieceDefine'); // enable next phase
  document.getElementById('pnam').focus();
}
var nPieces = 0;
var pieceStrings = new Array();
var whiteLoc = new Array();
var blackLoc = new Array();
var hCounts = new Array();
function AddOnePiece()
{
  var pieceName = document.getElementById('pnam').value;
  var pieceID = document.getElementById('pid').value;
  var imgFile = document.getElementById('imag').value;
  var betza = document.getElementById('betza').value;
  var prank = document.getElementById('prank').value;
  hCounts[nPieces] = parseInt(document.getElementById('hold').value);
  if(pieceName == '') {
    if(imgFile != '') pieceName = imgFile; else // derive piece name from image file
      if(betza != '')   pieceName = betza; else   // or from move
        if(pieceID == '') return; // not everything must be empty!
  }
  document.getElementById('pnam').value = "";
  document.getElementById('pid').value = "";
  document.getElementById('imag').value = "";
  document.getElementById('betza').value = "";
  document.getElementById('prank').value = "";
  whiteLoc[nPieces] = ''; blackLoc[nPieces] = '';
  pieceStrings[nPieces++] = '\n' + pieceName + ':' + pieceID + ':' + betza + ':' + imgFile + ':';
  if(prank.length) {
    prank = parseInt(prank);
    whiteLoc[nPieces-1] = 'a' + prank + '-' + String.fromCharCode("a".charCodeAt(0) + files) + prank;
  }
  document.getElementById('create').innerHTML = ""; // delete old diagram
  DefineSeed(0); // and fill with new definition including this piece
  Init(); // regenerate diagram
  document.getElementById('pnam').focus();
  positionSetup = 1;
}
function AddStock() {
  for(var i=1; i<=26; i++) {
    var box = document.getElementById('p' + i);
    if(box == null) break;
    if(box.checked) {
      var val = box.value;
      var img = val;
      var id = (val == "knight" ? 'N' : '');
      img = (img.toUpperCase())[0]; img = img + val.substring(1);
      whiteLoc[nPieces] = ''; blackLoc[nPieces] = '';
      val = '\n' + val + ':' + id + '::' + (capitalize ? img : '') + ':';
      pieceStrings[nPieces++] = val;
      box.checked = false;
    }
  }
  document.getElementById('create').innerHTML = ""; // delete old diagram
  DefineSeed(0); // and fill with new definition including this piece
  Init(); // regenerate diagram
  document.getElementById('pnam').focus();
  positionSetup = 1;
}
function DumpHTML(t) {
  var s = t.split(String.fromCharCode(60));
  t = '&l' + 't;script type="text/javascript" src="/membergraphics/MSinteractive-diagrams/betza.js?nocache=true">&l' + 't;/scr' + 'ipt>\n' +
    '&l' + 't;div style="float:left;margin:0 40px 20px 0;">\n';
  for(var i=0; i<s.length; i++) {
    if(i) t += '&l' + 't;';
    t += s[i];
  }
  document.getElementById('result').innerHTML = t + String.fromCharCode(60) + 't;/div' + String.fromCharCode(62);
}
function PrintDiagram() {
  positionSetup = 0;
  for(var i=0; i<nPieces; i++) { whiteLoc[i] = ''; blackLoc[i] = ','; }
  for(var r=0; r<ranks; r++) for(var f=0; f<files; f++) {
    var piece = board[r][f];
    if(piece) {
      var p = piece & 511; // colorless type
      var sqr = String.fromCharCode("a".charCodeAt(0) + f) + (r+1);
      p--;
      if(piece & 1024) {
        blackLoc[p] += ',' + sqr;
      } else {
        if(whiteLoc[p] != '') whiteLoc[p] += ',';
        whiteLoc[p] += sqr;
      }
    }
  }
  DefineSeed(1);
  DumpHTML(document.getElementById('create').innerHTML);
  OpenDiv('pieceDefine'); OpenDiv('done'); OpenDiv('setup');
  document.getElementById('pieceDefine').innerHTML = ""; // so diagram is generated with collapsable legend
  Init();
}
function AutoColor() {
  if(document.getElementById('wpref').value == 'White')
    document.getElementById('bpref').value = 'Black';
  document.getElementById('bpref').focus();
}
function SetSym(n) {
  if(positionSetup) document.getElementById('sym' + positionSetup).style.background = '#E8E8E8';
  document.getElementById('sym' + n).style.background = '#FFC080';
  positionSetup = n;
}
function SelectFile(s) {
  document.getElementById('imag').value = s;
  OpenDiv('filelist');
  document.getElementById('pnam').focus();
}
var imageTable = '';
function DirList() {
  if(imageTable == '') { // only fetch if not cached
    var list = get_url(graphDir + 'list.php');
    if(list.search('404') >= 0) list = get_url(graphDir);
    var lines = list.split(String.fromCharCode(60));
    var t = '<table cellpadding="0" style="border-collapse:collapse"><tr><td colspan="4"><b>Available images:</b></td></tr><tr>', cnt = 0, total = 0;
    for(var i=0; i<lines.length; i++) {
      var one = lines[i].split('"');
      if(one.length < 3) continue;
      if(one[1].search(graphSuffix) < 0) continue;
      one = one[1].split('.');
      if(one.length < 2) continue;
      if(one[0].search(whitePrefix) != 0) continue;
      one = one[0].substring(whitePrefix.length, 30);
      t += String.fromCharCode(60) + 'td onclick="SelectFile(\'' + one + String.fromCharCode(62) + ' ' + one + ' </td>'; total++;
      if(++cnt == 4) { t += '</tr><tr>'; cnt = 0; }
    }
    if(total == 0) return;
    imageTable = t;
  } else t = imageTable;
  OpenDiv('filelist');
  document.getElementById('filelist').innerHTML = t + '</tr></table>';
}
function OpenRow(id) {
  var visible = document.getElementById(id).style.display;
  document.getElementById(id).style.display = (visible == "none" ? "table-row" : "none");
  return visible != 'none';
}
function Design() {
  var adbar = document.getElementsByClassName("leftcol");
  adbar[0].style.display = "none";
  adbar = document.getElementsByClassName("rightcol");
  adbar[0].style.display = "none";
  //    adbar = document.getElementsByClassName("middle");
  adbar = document.getElementsByTagName("main");
  adbar[0].style.float = "left";
  adbar[0].style.marginLeft = "1px";
  adbar[0].style.maxWidth = "100%";
  adbar = document.getElementsByTagName("article");
  adbar[0].style.float = "left";
  adbar[0].style.maxWidth = "100%";
  document.getElementById("startdiagram").innerHTML = "";
  var p = document.getElementById('commentdiag'); if(p) p.innerHTML = '';
  active = 1;
  OpenDiv('wizard');
  ClearBoard();
}
var activeTyp = 'gtyp2', capitalize = 0;
function SetTheme(dir, typ, white, black, size, caps)
{
  capitalize = caps;
  document.getElementById("wpref").value = white;
  document.getElementById("bpref").value = black;
  document.getElementById("sqrsz").value = size;
  document.getElementById("gdir").value = dir;
  //    document.getElementById(activeTyp ).selected = false;
  activeTyp = 'gtyp' + typ;
  //    document.getElementById(activeTyp).selected = true;
  document.getElementById("gform").selectedIndex = typ - 1;
  document.getElementById("pnam").value = (capitalize ? "Pawn" : "pawn");
}
</script>
<input class="iclass" type="button" value="Start Design Wizard" onclick="Design()">
</input>
<p id="debugout">
</p>
<div id="wizard" style="display:none">
<div id="step">
<table cellpadding="20" border="1">
<tr>
<td width="650">
<h4>Step 1: specify the parameters of your variant below:
</h4>
<table>
<tr>
<th>Board dimensions
</th>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>files:
</td>
<td colspan=""2>
<input id="files" type="text" name="files" value="8" style="width:30px">
ranks:
<input id="ranks" type="text" name="ranks" value="8" style="width:30px">
</td>
<td>
</td>
</tr>
<tr>
<td>holdings type:
</td>
<td>
<select id="htyp">
<option>None</option>
<option>Back to owner</option>
<option>Defect to capturer</option>
</select>
</td>
<td>(where captured pieces go)
</td>
</tr>
<tr>
<th>Piece graphics
</th>
<td colspan="2">(to constuct image filenames)
</td>
</tr>
<tr>
<td>
Buttons for standard presets
</td>
<td>
<input type="button" value="Alfaerie" style="width:70px" onclick="SetTheme('/graphics.dir/alfaeriePNG/', 2, 'w', 'b', 50, 0)">
<input type="button" value="XBoard50" style="width:70px" onclick="SetTheme('/membergraphics/MSteammatechess/', 2, 'w', 'b', 50, 0)">
</td>
<td>
<input type="button" value="Motif" style="width:70px" onclick="SetTheme('/graphics.dir/motif/', 1, 'W', 'B', 50, 1)">
<input type="button" value="Abstract" style="width:70px" onclick="SetTheme('/graphics.dir/abstract/', 1, 'W', 'B', 51, 1)">
</td>
</tr>
<tr>
<td>
&nbsp;&nbsp;&nbsp;of the next 5 fields
</td>
<td>
<input type="button" value="Utrecht" style="width:70px" onclick="SetTheme('/graphics.dir/small/', 1, 'W', 'B', 35, 1)">
<input type="button" value="XBoard33" style="width:70px" onclick="SetTheme('/membergraphics/MSelven-chess/', 2, 'w', 'b', 35, 0)">
</td>
<td>
</td>
</tr>
<tr>
<td>directory with piece images:
</td>
<td>
<input class="iclass" id="gdir" type="text" name="gdir" value="/graphics.dir/alfaeriePNG/" onclick="()">
</td>
<td>(Must end with '/' !!!)
</td>
</tr>
<tr>
<td>graphics format:
</td>
<td>
<select id="gform">
<option id="gtyp1">gif</option>
<option id="gtyp2">png</option>
<option id="gtyp3">jpg</option>
<option id="gtyp4">svg</option>
</select>
</td>
<td>(image filename extension)
</td>
</tr>
<tr>
<td>white prefix:
</td>
<td>
<input class="iclass" id="wpref" type="text" name="wpref" value="w" onkeydown="if(event.keyCode == 13)AutoColor();">
</td>
<td>put on image filename to dis-
</td>
</tr>
<tr>
<td>black prefix:
</td>
<td>
<input class="iclass" id="bpref" type="text" name="bpref" value="b">
</td>
<td>  tinguish white and black pieces
</td>
</tr>
<tr>
<td>square size:
</td>
<td>
<input class="iclass" id="sqrsz" type="text" name="sqrsz" value="54">
</td>
<td>(at least 3 larger than images!)
</td>
</tr>
<tr>
<th>Board colors
</th>
<td>for checkering
</td>
<td>(make equal for non-checkered)
</td>
</tr>
<tr>
<td>light / dark squares:
</td>
<td>
<input id="lcol" type="text" name="lcol" value="#FFFFFF" style="width:70px;">
<input id="dcol" type="text" name="dcol" value="#E0E0E0" style="width:70px;">
</td>
<td>(white & greyish)
</td>
</tr>
<tr>
<th>Promotion
</th>
<td colspan="2">(not very important)
</td>
</tr>
<tr>
<td>promotion zone depth:
</td>
<td>
<input class="iclass" id="zone" type="text" name="zone" value="1" >
</td>
<td>(in ranks)
</td>
</tr>
<tr>
<td>nr of promoting piece types:
</td>
<td>
<input class="iclass" id="maxp" type="text" name="maxp" value="1">
</td>
<td>(usually just the first: the Pawn)
</td>
</tr>
<tr>
<td>promotion choice:
</td>
<td>
<input class="iclass" id="choice" type="text" name="choice" value="NBRQ">
</td>
<td>(prefix with * if taken from holdings)
</td>
</tr>
<tr>
<td>promotion offset (Shogi):
</td>
<td>
<input class="iclass" id="offset" type="text" name="offset" value="0">
</td>
<td>(added to piece type on promotion)
</td>
</tr>
</table>
<h4>Step 2: When satisfied with the settings above, press the button below.
</h4>
<input class="iclass" type="button" value="Create board" onclick="Create()">  This should make a diagram of an empty board appear.
</td>
<td valign="top">
<h1>Diagram design wizard
</h1>
<h3>Make your own interactive diagram!
</h3>
<p>
This page can assist you in creating the HTML code that in collaboration with the betza.js JavaScript
will create an interactive Chess diagram.
If you follow the 5 easy steps, in the end it will display a piece of text that you can copy-paste into the body of your chessvariants.com member submission.
Make sure submission edit field is set to 'Source Code' before you paste there, or it would not work.
<p>
<b>Some hints -</b> There is unfortunately no way to go back to an earlier design stage;
the only way is to refresh the page and restart from scratch.
When during design of a very large variant you discover that you made a mistake in an earlier piece
(e.g. user a wrong ID, or messed up the Betza move specifier),
it might be faster to just complete the design process,
and then edit the HTML code that comes out afterwards to correct the error.
Everything you entered will be quite easy to recognize from the HTML code,
and with a regular text editor you should have no problem to locate the line for the erroneously specified piece,
and correct the name, ID or move for it.
</p>
</td>
</tr>
</table>
</div>
<table cellpadding="20" border="0">
<tr>
<td width="500" valign="top">
<div id="create">
</div>
<div id="DoSetup" style="display:none">
<h4>Step 4: Drag the pieces from the table to the board
</h4>
<p>Set up the desired position that way.
You can also use click-click moving,
and once you selected a piece from the table on the right,
you can place it multiple times by clicking on the board.
If you mis-place pieces you can still move them around to correct that.
</p>
<p>Symmetric set-up modes can speed up piece placement:
</p>
<input class="iclass" type="button" value="None"   id="sym1" onclick="SetSym(1)" style="background:#FFC080">
<input class="iclass" type="button" value="Mirror" id="sym2" onclick="SetSym(2)">
<br>
<input class="iclass" type="button" value="Rotate" id="sym4" onclick="SetSym(4)">
<input class="iclass" type="button" value="4-fold" id="sym3" onclick="SetSym(3)">
<p>When done:
<input class="iclass" type="button" value="Create HTML code" onclick="PrintDiagram()">
</p>
</div>
</td>
<td valign="top" width="400">
<div id="pieceDefine" style="display: none">
<h4>Step 3. Define the pieces one by one:
</h4>
<table id="pieceTable" border="1">
</table>
<h4>Step 3a: Provide information on the next piece type to add.
</h4>
<p onclick="OpenDiv('helpon');OpenDiv('helpoff')">Image name must be the 'root name', to which the script
<span id="helpon">
will add the white/black prefixes and graphics-type extension as needed.
Fields that you leave empty will be derived from the name.
(Beware that filenames are case sensitive, and write the name accordingly!)
Names of orthodox pieces are recognized, and the standard move will be used if you don't supply one.
Press 'Add piece' after you supplied all info (or type
<Enter>). <u>Less</u>...
</span>
<span id="helpoff" style="display:none"><u>More</u>...</span>
</p>
<table id="standard" border="1" style="display:none;">
<tr>
<td colspan="2"><b>Select any nr of pieces, and hit Stock again</b>
</td>
</tr>
<tr>
<td>
<input class="iclass" type="checkbox" id="p1" value="pawn" style="margin:0 -50px 0 -50px;">Pawn
<br>
<input class="iclass" type="checkbox" id="p2" value="knight" style="margin:0 -50px 0 -50px;">Knight
<br>
<input class="iclass" type="checkbox" id="p3" value="bishop" style="margin:0 -50px 0 -50px;">Bishop
<br>
<input class="iclass" type="checkbox" id="p4" value="rook" style="margin:0 -50px 0 -50px;">Rook
<br>
<input class="iclass" type="checkbox" id="p5" value="queen" style="margin:0 -50px 0 -50px;">Queen
<br>
<input class="iclass" type="checkbox" id="p6" value="king" style="margin:0 -50px 0 -50px;">King
<br>
<input class="iclass" type="checkbox" id="p7" value="elephant" style="margin:0 -50px 0 -50px;">Elephant
<br>
<input class="iclass" type="checkbox" id="p8" value="horse" style="margin:0 -50px 0 -50px;">Horse (Mao)
<br>
<input class="iclass" type="checkbox" id="p9" value="cannon" style="margin:0 -50px 0 -50px;">Cannon (Pao)
<br>
<input class="iclass" type="checkbox" id="p10" value="lance" style="margin:0 -50px 0 -50px;">Lance
<br>
<input class="iclass" type="checkbox" id="p11" value="coppergeneral" style="margin:0 -50px 0 -50px;">Copper
<br>
<input class="iclass" type="checkbox" id="p12" value="silvergeneral" style="margin:0 -50px 0 -50px;">Silver
<br>
<input class="iclass" type="checkbox" id="p13" value="goldgeneral" style="margin:0 -50px 0 -50px;">Gold
<br>
</td>
<td>
<input class="iclass" type="checkbox" id="p14" value="archbishop" style="margin:0 -50px 0 -50px;">Archbishop
<br>
<input class="iclass" type="checkbox" id="p15" value="chancellor" style="margin:0 -50px 0 -50px;">Chancellor
<br>
<input class="iclass" type="checkbox" id="p16" value="wizard" style="margin:0 -50px 0 -50px;">Wizard
<br>
<input class="iclass" type="checkbox" id="p17" value="champion" style="margin:0 -50px 0 -50px;">Champion
<br>
<input class="iclass" type="checkbox" id="p18" value="lion" style="margin:0 -50px 0 -50px;">Lion
<br>
<input class="iclass" type="checkbox" id="p19" value="ferz" style="margin:0 -50px 0 -50px;">Advisor
<br>
<input class="iclass" type="checkbox" id="p20" value="camel" style="margin:0 -50px 0 -50px;">Camel
<br>
<input class="iclass" type="checkbox" id="p21" value="zebra" style="margin:0 -50px 0 -50px;">Zebra
<br>
<input class="iclass" type="checkbox" id="p22" value="nightrider" style="margin:0 -50px 0 -50px;">Nightrider
<br>
<input class="iclass" type="checkbox" id="p23" value="grasshopper" style="margin:0 -50px 0 -50px;">Grasshopper
<br>
<input class="iclass" type="checkbox" id="p24" value="man" style="margin:0 -50px 0 -50px;">Commoner
<br>
<input class="iclass" type="checkbox" id="p25" value="gryphon" style="margin:0 -50px 0 -50px;">Griffon
<br>
<input class="iclass" type="checkbox" id="p26" value="falcon" style="margin:0 -50px 0 -50px;">Falcon
<br>
</td>
</tr>
</table>
<div id="filelist" style="display:none;border:thin solid black;">
</div>
<table cellpadding="0">
<tr>
<td>Piece name:
</td>
<td>
<input class="iclass" id="pnam" type="text" name="pnam" value="pawn" onkeydown="if(event.keyCode == 13)AddOnePiece();">
<input type="button" value="Stock" onclick="if(OpenDiv('standard'))AddStock()" style="width:50px;">
</td>
</tr>
<tr>
<td>Piece ID (one letter):
</td>
<td>
<input class="iclass" id="pid" type="text" name="pid" value="" onkeydown="if(event.keyCode == 13)AddOnePiece();">
</td>
</tr>
<tr>
<td>Image filename:
</td>
<td>
<input class="iclass" id="imag" type="text" name="imag" value="" onkeydown="if(event.keyCode == 13)AddOnePiece();">
<input type="button" value="Pick" onclick="DirList()" style="width:50px;">
</td>
</tr>
<tr>
<td>Betza move description:
</td>
<td>
<input class="iclass" id="betza" type="text" name="betza" value="" onkeydown="if(event.keyCode == 13)AddOnePiece();">
</td>
</tr>
<tr>
<td>Rank to fill:
</td>
<td>
<input class="iclass" id="prank" type="text" name="prank" value="2" onkeydown="if(event.keyCode == 13)AddOnePiece();">
</td>
</tr>
<tr>
<td>Start in hand:
</td>
<td>
<input class="iclass" id="hold" type="text" name="hold" value="0" onkeydown="if(event.keyCode == 13)AddOnePiece();">
</td>
</tr>
</table>
<p>
<input class="iclass" type="button" value="Add piece" onclick="AddOnePiece()">
<input class="iclass" type="button" value="I am done" onclick="OpenDiv('DoSetup');">
</p>
</div>
<div id="done" style="display:none">
<h4>5. This is the HTML code describing the diagram:
</h4>
<table border="1">
<tr>
<td>
<pre class="result" id="result" style="font-size:smaller">
</pre>
</td>
</tr>
</table>
<p>You can copy-paste this code into any section of your HTML-enabled member submission.
The script will then transform the text between the div tag pair into the HTML code for the interactive diagram.
In fact that is what it has just done here, when you pressed 'Create HTML code':
it inserted the code both in the area above for you to see
(by using escape sequences for the '[chr lt]' sign, so HTML would no longer recognize the tags and display everything),
and to the left of here, to have the script act on it.
And you can see (and try out!) the result of that on the left!
<b style="background:red">When using the diagram in CVP Comments, <u>please</u> change "float:left" into "float:none",
because floating images badly interfere with the formatting of the Comments listing.
</b>
</p>
</div>
</td>
</tr>
</table>
<p id="debug">
</p>
</div>
<script>
document.getElementById("gform").selectedIndex = 1;
</script>

Your UserID:
Your password: