48a8e05c4ba1edd521e1b38b1b947d9ef9ecfd7d
[vchess.git] / public / javascripts / components / moveList.js
1 // Component for moves list on the right
2 Vue.component('my-move-list', {
3 props: ["moves","cursor"], //TODO: other props for e.g. players names + connected indicator
4 // --> we could also add turn indicator here
5 data: function() {
6 return {
7 something: "", //TODO?
8 };
9 },
10 // TODO: extend rendering for more than 2 colors: would be a parameter
11 // in that case some moves for some colors could be just skipped (if a player lost)
12 render(h) {
13 if (this.moves.length == 0)
14 return;
15 const nbColors = 2;
16 // TODO: name colors "white", "black", "red", "yellow" ?
17 if (this.moves[0].color == "b")
18 this.moves.unshift({color: "w", notation: "..."});
19 let tableContent = [];
20 let moveCounter = 0;
21 let tableRow = undefined;
22 let moveCells = undefined;
23 let curCellContent = "";
24 for (let i=0; i<this.moves.length; i++)
25 {
26 if (this.moves[i].color == "w")
27 {
28 if (i == 0 || i>0 && this.moves[i-1].color=="b")
29 {
30 if (!!tableRow)
31 {
32 tableRow.children = moveCells;
33 tableContent.push(tableRow);
34 }
35 moveCells = [
36 h(
37 "td",
38 { domProps: { innerHTML: (++moveCounter) + "." } }
39 )
40 ];
41 tableRow = h(
42 "tr",
43 { }
44 );
45 curCellContent = "";
46 }
47 }
48 curCellContent += this.moves[i].notation;
49 if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color)
50 curCellContent += ",";
51 else //color change
52 {
53 moveCells.push(
54 h(
55 "td",
56 {
57 domProps: { innerHTML: curCellContent },
58 on: { click: () => this.gotoMove(i) },
59 "class": { "highlight-lm": this.cursor == i },
60 }
61 )
62 );
63 curCellContent = "";
64 }
65 }
66 // Complete last row, which might not be full:
67 if (moveCells.length-1 < nbColors)
68 {
69 const delta = nbColors - (moveCells.length-1);
70 for (let i=0; i<delta; i++)
71 {
72 moveCells.push(
73 h(
74 "td",
75 { domProps: { innerHTML: "" } }
76 )
77 );
78 }
79 }
80 tableRow.children = moveCells;
81 tableContent.push(tableRow);
82 const movesTable = h(
83 "table",
84 { },
85 tableContent
86 );
87 return movesTable;
88 },
89 methods: {
90 gotoMove: function(index) {
91 this.$emit("goto-move", index);
92 },
93 },
94 })