Displaying piece position
In this example, we place Three(3) app-board class divs inside another div to give them flex-wrap behavior so it will rearrange themself to various window width. Then prepaer the setup array at the bottom of the body to show piece information.
The first example uses raw data. The second example uses SFEN string data and the third example uses Kifu board information.
<div style="display:flex;flex-wrap:wrap;">
<div class="board-app"></class>
<div class="board-app"></class>
<div class="board-app"></class>
</div>
<script>
window.initialSetup__ts81=[ //Create an array with three shogi data set element
{
senteOnBoard: "53s,16b",
goteOnBoard: "41s,51k,61s",
senteOnHand: 's1',
goteOnHand: 'r2,p3,l1,g1',
caption:'Displaying piece position with raw data'
},
{
sfen:"8l/1l+R2P3/p2pBG1pp/kps1p4/Nn1P2G2/P1P1P2PP/1PS6/1KSG3+r1/LN2+p3L w Sbgn3p 124",
caption:"Displaying piece position using sfen string"
},
{ kifu:`
９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
| ・ ・ ・ ・ ・ ・ ・ ・ ・|一
| ・ ・ ・ ・ ・ ・ ・ ・ ・|二
| ・ ・ ・ ・ ・ ・ ・ ・ ・|三
| ・ ・ ・ ・ ・ ・ ・ ・ ・|四
| ・ ・ ・ ・ ・ ・ ・ ・ ・|五
| ・ ・ 金 ・ ・ ・ ・ ・ ・|六
| ・ ・v歩 金v歩 ・ ・ ・ ・|七
| ・ ・ 金 銀 銀 銀 ・ ・ ・|八
| ・ ・ ・ ・ ・ ・ ・ ・ ・|九
+---------------------------+`,
caption:"Displaying piece positions using Kifu Bord information"
`}
]
<script>
If everything goes well, you should see three Shogiboards like below in your page
This page was originally created 6 months, 3 weeks ago and last updated 8 months ago