Commit | Line | Data |
---|---|---|
cf2343ce | 1 | <script> |
a3ab5fdb | 2 | // Component for moves list on the right |
cf2343ce BA |
3 | export default { |
4 | name: 'my-move-list', | |
f21cd6d9 | 5 | props: ["moves","cursor"], |
7ee085c2 BA |
6 | render(h) { |
7 | if (this.moves.length == 0) | |
8 | return; | |
7ee085c2 BA |
9 | let tableContent = []; |
10 | let moveCounter = 0; | |
11 | let tableRow = undefined; | |
12 | let moveCells = undefined; | |
13 | let curCellContent = ""; | |
14 | for (let i=0; i<this.moves.length; i++) | |
15 | { | |
7d9e99bc | 16 | if (this.moves[i].color == "w") |
7ee085c2 | 17 | { |
7d9e99bc | 18 | if (i == 0 || i>0 && this.moves[i-1].color=="b") |
7ee085c2 BA |
19 | { |
20 | if (!!tableRow) | |
7d9e99bc BA |
21 | { |
22 | tableRow.children = moveCells; | |
7ee085c2 | 23 | tableContent.push(tableRow); |
7d9e99bc | 24 | } |
7ee085c2 BA |
25 | moveCells = [ |
26 | h( | |
27 | "td", | |
7d9e99bc | 28 | { domProps: { innerHTML: (++moveCounter) + "." } } |
7ee085c2 BA |
29 | ) |
30 | ]; | |
31 | tableRow = h( | |
32 | "tr", | |
7d9e99bc | 33 | { } |
7ee085c2 BA |
34 | ); |
35 | curCellContent = ""; | |
36 | } | |
7d9e99bc BA |
37 | } |
38 | curCellContent += this.moves[i].notation; | |
39 | if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color) | |
40 | curCellContent += ","; | |
41 | else //color change | |
42 | { | |
7ee085c2 BA |
43 | moveCells.push( |
44 | h( | |
45 | "td", | |
7d9e99bc BA |
46 | { |
47 | domProps: { innerHTML: curCellContent }, | |
48 | on: { click: () => this.gotoMove(i) }, | |
d337a94c | 49 | "class": { "highlight-lm": this.cursor == i }, |
7d9e99bc BA |
50 | } |
51 | ) | |
52 | ); | |
53 | curCellContent = ""; | |
7ee085c2 BA |
54 | } |
55 | } | |
56 | // Complete last row, which might not be full: | |
f21cd6d9 | 57 | if (moveCells.length-1 == 1) |
7ee085c2 | 58 | { |
f21cd6d9 BA |
59 | moveCells.push( |
60 | h( | |
61 | "td", | |
62 | { domProps: { innerHTML: "" } } | |
63 | ) | |
64 | ); | |
7ee085c2 | 65 | } |
7d9e99bc BA |
66 | tableRow.children = moveCells; |
67 | tableContent.push(tableRow); | |
7ee085c2 | 68 | const movesTable = h( |
7e355d68 BA |
69 | "div", |
70 | { }, | |
71 | [h( | |
72 | "table", | |
6cd07b4d BA |
73 | { |
74 | "class": { | |
75 | "moves-list": true, | |
76 | }, | |
77 | }, | |
7e355d68 BA |
78 | tableContent |
79 | )] | |
80 | ); | |
7ee085c2 BA |
81 | return movesTable; |
82 | }, | |
7d9e99bc BA |
83 | methods: { |
84 | gotoMove: function(index) { | |
85 | this.$emit("goto-move", index); | |
86 | }, | |
87 | }, | |
cf2343ce BA |
88 | }; |
89 | </script> | |
6cd07b4d BA |
90 | |
91 | <style lang="sass" scoped> | |
92 | .moves-list | |
93 | min-width: 250px | |
72ccbd67 BA |
94 | td.highlight-lm |
95 | background-color: plum | |
6cd07b4d | 96 | </style> |