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