Boards with movements replay
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 movements are described in a string, each movement is separated by comma. The second example uses raw data as string array. although it is more cumbersome than string, you can add comment with comma inside it. Third object uses kakinoki style kifu data directly embedded inside JavaScript Object.
<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
{
caption: "using raw data for simple moves",
sOnBoard: `21r,24p`,
gOnBoard: `12k,13p,22s`,
sOnHand: `g`,
moves: "sd11g,g-0022,s+2321,x"
},
{
caption: "raw data but as string array",
moves:[
"s-7677",
"*Opening Bishop's path is most popular starting move.",
"g-3433",
"s-6667",
"x"]
},
{
caption: "Use kifu format record",
initialComment: `Initial comment`,
kifu: `# ---- Kifu for Windows V7 V7.44 棋譜ファイル ----
開始日時：2023/03/17 10:09:10
終了日時：2023/03/17 10:09:23
手合割：平手
先手：Sente
後手：Sente
手数----指手---------消費時間--
*comment line 1
*comment line 2
*comment line 3
1 ７六歩(77) ( 0:04/00:00:04)+
*branch comment 1
*branch comment 2
2 ３四歩(33) ( 0:04/00:00:04)
3 ４八銀(39) ( 0:01/00:00:05)
4 中断 ( 0:03/00:00:07)
まで3手で中断
変化：1手
1 ２六歩(27) ( 0:03/00:00:03)
2 ８四歩(83) ( 0:03/00:00:03)
3 ２五歩(26) ( 0:01/00:00:04)
4 中断 ( 0:03/00:00:06)
まで3手で中断
`
}
]
<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 7 months, 4 weeks ago