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