JavaScript Shogi FEN parser

Life is like a hamburger on our gas station - never know what you gonna get.

blog counter

If you have any suggestions, comments or you spotted some error (bug, broken link, grammatical error), please drop me a note:

Sign my Guestbook from Bravenet.com

2008. 07.03

JS SFEN parser is a JavaScript class that is able to translate generate Shogi position data in SFEN to JavaScript objects.

Fortunately, these JS objects are understood by JS Shogi Board Viewer. So, combining these two, you could easily put a Shogi diagram for given SFEN on your Web page.

 

 Here is a description of how to use it.

Using the parser

Downloading files

The viewer consists of 2 elements:

  1. JavaScript SFEN parser class.
  2. JavaScript Shogi model classes (SFEN is translated to these objects).

You can download them separately or in in one all in one pack.


Embedding on the page

First I'll show how to use the sole parser on the page. As it is not of much use (who is interested in JSON representation of Shogi diagram, anyway), next I'll show how to use it with conjunction with JS Shogi Board Viewer.

Parser

First we include the script on the page, by placing the following in the <HEAD> section:


<script type="text/javascript" src="js/ShogiBoardModel.js"></script>
<script type="text/javascript" src="js/SFENParser.js"></script>

 

To use the parser, we would put the following section into our HTML:

<script type="text/javascript" >
    testSfen = "7r1/6B1p/6Bsk/9/7P1/9/9/9/9 B 2S";
    testJson = SfenParser.parse(testSfen);
</script>

This will produce testJson object with JSON text representation:

{
   "sideOnMove":"black",
   "blackHand":[0, 0, 0, 2, 0, 0, 0],
   "whiteHand":[0, 0, 0, 0, 0, 0, 0],
   "pieces":  "2a": "bR", "3b": "bB", "1b": "bP", "3c": "bB", "2c": "bS", "1c": "bK", "2e": "bP"} 
}

Parser and viewer

Please, refer to JavaScript Shogi Board Viewer to see how to set up the viewer.

Next, in the head section of your HTML file add JS includes as described in the previous paragraphs.

Then, feed the viewer with your SFEN data.


I think it is best to see this in the following example (html tag intentionally removed -- googlepages didn't like it):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
    <title>Tsume Shogi diagram</title>
    <script type="text/javascript" src="js/ShogiBoardView.js"></script>

    <script type="text/javascript" src="js/ShogiBoardModel.js"></script>
    <script type="text/javascript" src="js/SFENParser.js"></script>


</head>
<body>
    <p>Board 1</p>
    <div id="board"></div>

    <script type="text/javascript">
        var chessObj = new ShogiBoardView('board');

        tsumeJson = SfenParser.parse("7r1/6B1p/6Bsk/9/7P1/9/9/9/9 B 2S");
        chessObj.drawBoard(tsumeJson);
    </script>
</body>
</html>


Quite compact, I think. I marked the difference (bold) between using viewer alone and viewer and parser together. 

You can see it working here.

 (Once again. js_fixes here is for IE compatibility.)


Changing the position dynamically

Actually, this section should go to Shogi Board Viewer pages. But only now the combination of the viewer and the parser shows the benefits.

I don't think there is much sense in describing it here also. Instead, I give you an example. The code is put inside the HTML file, so you can view the source to see what's going on there.

And here is the example.



Change log

20080703 -- created the page

20080917 -- fixed bugs reported by Bernhard Maerz 

20081214 -- placeholder element's id is now a constructor parameter.

20090609 -- changes in ShogiBoard. Fields are direct attributes of 'pieces' field (not an array of objects anymore)