1 //TODO: component for moves list on the right
2 // TODO: generic "getPGN" in the same way (following move.color)
3 Vue
.component('my-move-list', {
4 props: ["moves"], //TODO: other props for e.g. players names + connected indicator
5 // --> we could also add turn indicator here
8 // if oppid == "computer" then mode = "computer" (otherwise human)
12 // TODO: extend rendering for more than 2 colors: would be a parameter
14 if (this.moves
.length
== 0)
17 if (this.moves
[0].color
== "black")
18 this.moves
.unshift({color: "white", notation: "..."});
19 let tableContent
= [];
21 let tableRow
= undefined;
22 let moveCells
= undefined;
23 let curCellContent
= "";
24 for (let i
=0; i
<this.moves
.length
; i
++)
26 if (this.moves
[i
].color
== "white")
28 if (i
== 0 || i
>0 && this.moves
[i
-1].color
=="black")
31 tableContent
.push(tableRow
);
35 { attrs: { innerHTML: (++moveCounter
) + "." } }
45 curCellContent
+= this.moves
[i
].notation
+ ",";
49 { attrs: ..............
52 // Complete last row, which might not be full:
53 if (tableRow
.length
-1 < nbColors
)
55 const delta
= nbColors
- (moveCells
.length
-1);
56 for (let i
=0; i
<delta
; i
++)
60 { attrs: { innerHTML: "" } }
63 tableContent
.push(tableRow
);