Commit | Line | Data |
---|---|---|
cf2343ce | 1 | <script> |
fcd299a3 | 2 | import { store } from "@/store"; |
a3ab5fdb | 3 | // Component for moves list on the right |
cf2343ce BA |
4 | export default { |
5 | name: 'my-move-list', | |
dac39588 | 6 | props: ["moves","cursor","score","message","firstNum"], |
430a2038 | 7 | watch: { |
5fde3a01 | 8 | cursor: function(newCursor) { |
d36ca198 BA |
9 | if (window.innerWidth <= 767) |
10 | return; //moves list is below: scrolling would hide chessboard | |
5fde3a01 BA |
11 | // Count grouped moves until the cursor (if multi-moves): |
12 | let groupsCount = -1; | |
13 | let curCol = undefined; | |
14 | for (let i=0; i<newCursor; i++) | |
15 | { | |
16 | const m = this.moves[i]; | |
17 | if (m.color != curCol) | |
18 | { | |
19 | groupsCount++; | |
20 | curCol = m.color; | |
21 | } | |
22 | } | |
430a2038 BA |
23 | // $nextTick to wait for table > tr to be rendered |
24 | this.$nextTick( () => { | |
25 | let rows = document.querySelectorAll('#movesList tr'); | |
26 | if (rows.length > 0) | |
27 | { | |
5fde3a01 | 28 | rows[Math.floor(Math.max(groupsCount,0)/2)].scrollIntoView({ |
63ca2b89 BA |
29 | behavior: "auto", |
30 | block: "nearest", | |
430a2038 BA |
31 | }); |
32 | } | |
33 | }); | |
34 | }, | |
35 | }, | |
dac39588 BA |
36 | render(h) { |
37 | if (this.moves.length == 0) | |
38 | return; | |
39 | let tableContent = []; | |
40 | let moveCounter = 0; | |
41 | let tableRow = undefined; | |
42 | let moveCells = undefined; | |
43 | let curCellContent = ""; | |
44 | let firstIndex = 0; | |
5fde3a01 | 45 | for (let i=0; i<this.moves.length; i++) |
dac39588 BA |
46 | { |
47 | if (this.moves[i].color == "w") | |
48 | { | |
49 | if (i == 0 || i>0 && this.moves[i-1].color=="b") | |
50 | { | |
51 | if (!!tableRow) | |
52 | { | |
53 | tableRow.children = moveCells; | |
54 | tableContent.push(tableRow); | |
55 | } | |
56 | moveCells = [ | |
57 | h( | |
58 | "td", | |
59 | { domProps: { innerHTML: (++moveCounter) + "." } } | |
60 | ) | |
61 | ]; | |
62 | tableRow = h( | |
63 | "tr", | |
64 | { } | |
65 | ); | |
66 | curCellContent = ""; | |
5fde3a01 | 67 | firstIndex = i; |
dac39588 BA |
68 | } |
69 | } | |
5fde3a01 BA |
70 | // Next condition is fine because even if the first move is black, |
71 | // there will be the "..." which count as white move. | |
72 | else if (this.moves[i].color == "b" && this.moves[i-1].color == "w") | |
73 | firstIndex = i; | |
dac39588 BA |
74 | curCellContent += this.moves[i].notation; |
75 | if (i < this.moves.length-1 && this.moves[i+1].color == this.moves[i].color) | |
76 | curCellContent += ","; | |
77 | else //color change | |
78 | { | |
79 | moveCells.push( | |
80 | h( | |
81 | "td", | |
82 | { | |
83 | domProps: { innerHTML: curCellContent }, | |
84 | on: { click: () => this.gotoMove(i) }, | |
5fde3a01 BA |
85 | "class": { "highlight-lm": |
86 | this.cursor >= firstIndex && this.cursor <= i }, | |
dac39588 BA |
87 | } |
88 | ) | |
89 | ); | |
90 | curCellContent = ""; | |
91 | } | |
92 | } | |
93 | // Complete last row, which might not be full: | |
94 | if (moveCells.length-1 == 1) | |
95 | { | |
5fde3a01 BA |
96 | moveCells.push( |
97 | h( | |
98 | "td", | |
99 | { domProps: { innerHTML: "" } } | |
100 | ) | |
101 | ); | |
dac39588 BA |
102 | } |
103 | tableRow.children = moveCells; | |
104 | tableContent.push(tableRow); | |
5fde3a01 BA |
105 | let rootElements = []; |
106 | if (this.score != "*") | |
107 | { | |
108 | const scoreDiv = h("div", | |
144c9003 | 109 | { |
5fde3a01 BA |
110 | id: "scoreInfo", |
111 | style: { | |
112 | display: this.score!="*" ? "block" : "none", | |
113 | }, | |
114 | }, | |
115 | [ | |
116 | h("p", this.score), | |
fcd299a3 | 117 | h("p", store.state.tr[this.message]), |
5fde3a01 BA |
118 | ] |
119 | ); | |
120 | rootElements.push(scoreDiv); | |
121 | } | |
122 | rootElements.push( | |
123 | h( | |
124 | "table", | |
144c9003 | 125 | { |
5fde3a01 BA |
126 | "class": { |
127 | "moves-list": true, | |
128 | }, | |
129 | }, | |
130 | tableContent | |
dac39588 | 131 | ) |
5fde3a01 | 132 | ); |
dac39588 | 133 | return h( |
5fde3a01 BA |
134 | "div", |
135 | { }, | |
136 | rootElements); | |
dac39588 | 137 | }, |
430a2038 | 138 | methods: { |
dac39588 BA |
139 | gotoMove: function(index) { |
140 | this.$emit("goto-move", index); | |
141 | }, | |
142 | }, | |
430a2038 BA |
143 | }; |
144 | </script> | |
145 | ||
146 | <style lang="sass" scoped> | |
147 | .moves-list | |
148 | min-width: 250px | |
41c80bb6 BA |
149 | @media screen and (max-width: 767px) |
150 | .moves-list | |
151 | tr | |
152 | display: flex | |
153 | margin: 0 | |
154 | padding: 0 | |
155 | td | |
156 | text-align: left | |
430a2038 BA |
157 | td.highlight-lm |
158 | background-color: plum | |
159 | </style> |