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