Extension:ChessBrowser/Proposal front end

This proposal is related to this schema proposal.

Working prototype of front-end script: User:קיפודנחש/chess-animator.js

Overview
Front end looks for a div element with specific class (current code uses ).

inside of it, it looks for a div element with class  , and populates it with pieces.

each piece is a div element with several classes:


 * a class identifying it as a chess piece: current implementation uses
 * a class for the specific piece. current implementation uses, where XX stands for the piece itself, so black queen will be   , and white pawn is
 * two classes for the file and row:  and  . the X is a digit between 0 and 7, so a piece on square b3, will have classes
 * (when the piece is not on the board, i.e. captured or promoted pawn):   the

The CSS takes care of the rest, i.e., actually show the correct pieces in their correct location.

The back-end pre-populates the board with the pieces in the desired position of the game - by default the last one, but can be any.

Switching to any specific position in the game is implemented by turning the "hidden" class on or off, and changing the "row" and "file" classes of each piece to their correct value for this position. CSS takes care of the rest, such as correct location, correct image, and smooth animation.

inputs
Front end looks for a "data" attribute in the main div (the one with  class), and looks for a "chess" data attribute in it (i.e., and attribute that looks like so:  . The JSON object should contain the following:


 * fen String, contains the FEN of the opening board.
 * plys: array of plys. the syntax of a single ply is described below

The back-end can create, in addition to the board, a an element containing the notations. When a notation has a data attribute of the form , such that X is a number, this notation will become a "control", such that clicking on it will display (or, "go to") the corresponding position.

Plys
each ply in the array represents one "ply" of the game, which affects one or two pieces. For this representation, the squares of the board are numbered: a1 is 0, a8 is 7, b1 is 8, and h8 is 63. There are 4 different types of "plys" in the array, representing 5 different moves. we will use S1, S2 etc. to denote different squares, so they represent numbers between 0 and 63:


 * simple move/simple capture:  . The piece on S1 moves to S2. if S2 was previously occupied, this is a capture
 * en passant:  : The pawn on S1 moves to S2, capturing the pawn on S3
 * promotion:  . pawn on S2 "disappears", and instead, a new piece, as indicated by P, is born on S2. P uses the same encoding as FEN: r, n, b, and q denote black rook, knight, bishop, and queen (can't promote to pawn or king...), and R, N, B, Q denote their white counterparts.
 * castling:  : piece on S1 moves to S2, piece on S3 moves to S4.

Front-end does not checks for correctness: for instance, it does not check to see if the source square is occupied, or with what color, it does not check for verify that the pieces are actually king and rook, or that promotion happens from row 7 to 8 (white) or from 2 to 1 (black).