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