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', { | |
4 | props: ["moves"], //TODO: other props for e.g. players names + connected indicator | |
5 | // --> we could also add turn indicator here | |
6 | data: function() { | |
7 | return { | |
8 | // if oppid == "computer" then mode = "computer" (otherwise human) | |
9 | myid: "", //TODO | |
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; | |
17 | if (this.moves[0].color == "black") | |
18 | this.moves.unshift({color: "white", 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 == "white") | |
27 | { | |
28 | if (i == 0 || i>0 && this.moves[i-1].color=="black") | |
29 | { | |
30 | if (!!tableRow) | |
31 | tableContent.push(tableRow); | |
32 | moveCells = [ | |
33 | h( | |
34 | "td", | |
35 | { attrs: { innerHTML: (++moveCounter) + "." } } | |
36 | ) | |
37 | ]; | |
38 | tableRow = h( | |
39 | "tr", | |
40 | { }, | |
41 | moveCells | |
42 | ); | |
43 | curCellContent = ""; | |
44 | } | |
45 | curCellContent += this.moves[i].notation + ","; | |
46 | moveCells.push( | |
47 | h( | |
48 | "td", | |
49 | { attrs: .............. | |
50 | } | |
51 | } | |
52 | // Complete last row, which might not be full: | |
53 | if (tableRow.length-1 < nbColors) | |
54 | { | |
55 | const delta = nbColors - (moveCells.length-1); | |
56 | for (let i=0; i<delta; i++) | |
57 | { | |
58 | moveCells.push( | |
59 | "td" | |
60 | { attrs: { innerHTML: "" } } | |
61 | ); | |
62 | } | |
63 | tableContent.push(tableRow); | |
64 | } | |
65 | const movesTable = h( | |
66 | "table", | |
67 | { }, | |
68 | tableContent | |
69 | ); | |
70 | return movesTable; | |
71 | }, | |
72 | // methods: { | |
73 | // }, | |
74 | } |