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