1 <!-- TODO: merge Game.vue and MoveList.vue (one logic entity, no ?) -->
3 // Component for moves list on the right
6 props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
7 // --> we could also add turn indicator here
10 something: "", //TODO?
13 // TODO: extend rendering for more than 2 colors: would be a parameter
14 // in that case some moves for some colors could be just skipped (if a player lost)
16 if (this.moves.length == 0)
19 // TODO: name colors "white", "black", "red", "yellow" ?
20 if (this.moves[0].color == "b")
21 this.moves.unshift({color: "w", notation: "..."});
22 let tableContent = [];
24 let tableRow = undefined;
25 let moveCells = undefined;
26 let curCellContent = "";
27 for (let i=0; i<this.moves.length; i++)
29 if (this.moves[i].color == "w")
31 if (i == 0 || i>0 && this.moves[i-1].color=="b")
35 tableRow.children = moveCells;
36 tableContent.push(tableRow);
41 { domProps: { innerHTML: (++moveCounter) + "." } }
51 curCellContent += this.moves[i].notation;
52 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
53 curCellContent += ",";
60 domProps: { innerHTML: curCellContent },
61 on: { click: () => this.gotoMove(i) },
62 "class": { "highlight-lm": this.cursor == i },
69 // Complete last row, which might not be full:
70 if (moveCells.length-1 < nbColors)
72 const delta = nbColors - (moveCells.length-1);
73 for (let i=0; i<delta; i++)
78 { domProps: { innerHTML: "" } }
83 tableRow.children = moveCells;
84 tableContent.push(tableRow);
93 gotoMove: function(index) {
94 this.$emit("goto-move", index);