This time I spent some time learning JavaScript and programing the browser. As a result I came up with JavaScript Shogi Board Viewer and Shogi FEN parser. They have similar functionality as the former, but it's easier to use it on one's own Web pages.
JS Shogi Board Viewer is a JavaScript component that makes it possible to generate Shogi position diagram on your Web page.
The viewer consists of 3 elements:
- JavaScript program to generate the diagram
- CSS file containing style definitions for the diagram
- Images representing the board and the pieces
Well, I wanted my viewer to be "generic" (independent of the position data source) and possibly small. Therefore I decided that the position is provided with a javascript object. Feels like real pain, doesn't it? But fortunately, JSON notation comes to the rescue. Thanks to it we can build JavaScript objects that are understood both by computers and humans.
Besides, JSON is quite popular data exchange format, so there could be converters (i.e. from Shogi FEN or others) easily plugged in to the viewer.Shogi position data format
The good thing about JSON is that it's very self-descriptive format. Here is how I designed the format.
The description consists of 4 elements:
- side on move
- white pieces in hand
- black pieces in hand
- pieces on the board
and could be expressed as JSON like this:
{
"sideOnMove":"black",
"blackHand":[],
"whiteHand":[],
"pieces":[]
}
Side on move is simple: it can be either "black" or "white".
Pieces in hand data is an array of numbers. Each number represent the count of pieces for a given rank. The rank is indicated by position in the array. Pieces info is stored in a given order:
- Pawn (index 0)
- Lance (index 1)
- Knight
- Silver
- Gold
- Bishop
- Rook (index 6)
So, for a Silver and 2 Pawns in hand the data would look like this:
[2,0,0,1,0,0,0,0,0,0]
I am not particularly happy with the format. I don't like the fact that a human has to remember position of piece ranks in the array. The format could be therefore change in the matter. [[Maybe better would be to have pairs rank:count?]]
Pieces on board are given by field:rank pairs. A field is described by 2 chars: column number and row char in the standard Shogi coordinate system. Leftmost column is named '9', rightmost is '1'. Uppermost row is 'a', lowermost is 'i'.
A piece symbol is "borrowed" from Shogi Ladder notation (http://www.shogi.net/ladder/shogiboard.html). The 'w' and 'b' in front of the piece symbol's abbreviations indicate white and black respectively. When a piece is promoted, it will be given with a preceding "+", as in "+bL" or "+wP".
Summing up, here is an example Tsume Shogi position and it's JSON object representation:
 | tsumeJson = { |
JS SFEN parser is a JavaScript class that is able to translate generate Shogi position data in SFEN to JavaScript objects. The parser and it's best friend, JS Shogi Board Viewer, make it easy to put a Shogi diagram for given SFEN on your Web page.
I won't explain SFEN here. I did my best on this ShogiTools wiki page so If you are interested in the details, please check it out.
The viewer consists of 2 elements:
- JavaScript SFEN parser class.
- JavaScript Shogi model classes (SFEN is translated to these objects).
tsumeJson = SfenParser.parse("7r1/6B1p/6Bsk/9/7P1/9/9/9/9 B 2S");Then you send it to the viewer and voila!
Please, check out the example to see it in action. You can see a Shogi board here and you are able to dynamically set the SFEN to be shown.
The code is put inside the HTML file, so you can view the source to see what's going on there.
I hope that someone finds it useful...
As usual, any comment are welcomed.
pearltrees
ReplyDelete