ded7d86d9dbf10b6148e38e2b60b2abd9f527154
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","cursor"], //TODO: other props for e.g. players names + connected indicator
5 // --> we could also add turn indicator here
6 // + missing "cursor" prop
12 // TODO: extend rendering for more than 2 colors: would be a parameter
14 if (this.moves
.length
== 0)
17 // TODO: name colors "white", "black", "red", "yellow" ?
18 if (this.moves
[0].color
== "b")
19 this.moves
.unshift({color: "w", notation: "..."});
20 let tableContent
= [];
22 let tableRow
= undefined;
23 let moveCells
= undefined;
24 let curCellContent
= "";
25 for (let i
=0; i
<this.moves
.length
; i
++)
27 if (this.moves
[i
].color
== "w")
29 if (i
== 0 || i
>0 && this.moves
[i
-1].color
=="b")
33 tableRow
.children
= moveCells
;
34 tableContent
.push(tableRow
);
39 { domProps: { innerHTML: (++moveCounter
) + "." } }
49 curCellContent
+= this.moves
[i
].notation
;
50 if (i
< this.moves
.length
-1 && this.moves
[i
+1].color
== this.moves
[i
].color
)
51 curCellContent
+= ",";
58 domProps: { innerHTML: curCellContent
},
59 on: { click: () => this.gotoMove(i
) },
60 "class": { "highlight-lm": this.cursor
== i
},
67 // Complete last row, which might not be full:
68 if (moveCells
.length
-1 < nbColors
)
70 const delta
= nbColors
- (moveCells
.length
-1);
71 for (let i
=0; i
<delta
; i
++)
76 { domProps: { innerHTML: "" } }
81 tableRow
.children
= moveCells
;
82 tableContent
.push(tableRow
);
91 gotoMove: function(index
) {
92 this.$emit("goto-move", index
);