2 // Component for moves list on the right
5 props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
6 // --> we could also add turn indicator here
12 // TODO: extend rendering for more than 2 colors: would be a parameter
13 // in that case some moves for some colors could be just skipped (if a player lost)
15 if (this.moves.length == 0)
18 // TODO: name colors "white", "black", "red", "yellow" ?
19 if (this.moves[0].color == "b")
20 this.moves.unshift({color: "w", notation: "..."});
21 let tableContent = [];
23 let tableRow = undefined;
24 let moveCells = undefined;
25 let curCellContent = "";
26 for (let i=0; i<this.moves.length; i++)
28 if (this.moves[i].color == "w")
30 if (i == 0 || i>0 && this.moves[i-1].color=="b")
34 tableRow.children = moveCells;
35 tableContent.push(tableRow);
40 { domProps: { innerHTML: (++moveCounter) + "." } }
50 curCellContent += this.moves[i].notation;
51 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
52 curCellContent += ",";
59 domProps: { innerHTML: curCellContent },
60 on: { click: () => this.gotoMove(i) },
61 "class": { "highlight-lm": this.cursor == i },
68 // Complete last row, which might not be full:
69 if (moveCells.length-1 < nbColors)
71 const delta = nbColors - (moveCells.length-1);
72 for (let i=0; i<delta; i++)
77 { domProps: { innerHTML: "" } }
82 tableRow.children = moveCells;
83 tableContent.push(tableRow);
92 gotoMove: function(index) {
93 this.$emit("goto-move", index);