Commit | Line | Data |
---|---|---|
e71161fb BA |
1 | <template lang="pug"> |
2 | div | |
5b3dc10e BA |
3 | input#modalAdjust.modal(type="checkbox") |
4 | div#adjuster( | |
5 | role="dialog" | |
6 | data-checkbox="modalAdjust" | |
7 | ) | |
8 | .card.text-center | |
9 | label.modal-close(for="modalAdjust") | |
10 | label(for="boardSize") {{ st.tr["Board size"] }} | |
11 | input#boardSize.slider( | |
12 | type="range" | |
13 | min="0" | |
14 | max="100" | |
15 | value="50" | |
16 | @input="adjustBoard()" | |
17 | ) | |
feaf1bf7 BA |
18 | #aboveMoves |
19 | // NOTE: variants pages already have a "Rules" link on top | |
20 | span#rulesBtn( | |
21 | v-if="!$route.path.match('/variants/')" | |
22 | @click="$emit('showrules')" | |
23 | ) | |
24 | | {{ st.tr["Rules"] }} | |
25 | button.tooltip( | |
26 | onClick="window.doClick('modalAdjust')" | |
27 | :aria-label="st.tr['Resize board']" | |
28 | ) | |
29 | img.inline(src="/images/icons/resize.svg") | |
30 | #downloadDiv(v-if="canDownload") | |
31 | a#download(href="#") | |
32 | button.tooltip( | |
33 | @click="$emit('download')" | |
34 | :aria-label="st.tr['Download'] + ' PGN'" | |
35 | ) | |
36 | img.inline(src="/images/icons/download.svg") | |
37 | button.tooltip( | |
38 | v-if="canAnalyze" | |
39 | @click="$emit('analyze')" | |
40 | :aria-label="st.tr['Analyse']" | |
41 | ) | |
42 | img.inline(src="/images/icons/analyse.svg") | |
e71161fb | 43 | #scoreInfo(v-if="score!='*'") |
feaf1bf7 BA |
44 | span.score {{ score }} |
45 | span.score-msg {{ st.tr[message] }} | |
57eb158f | 46 | .moves-list(v-if="!['none','highlight'].includes(show)") |
e71161fb BA |
47 | .tr(v-for="moveIdx in evenNumbers") |
48 | .td {{ firstNum + moveIdx / 2 + 1 }} | |
49 | .td(v-if="moveIdx < moves.length-1 || show == 'all'" | |
50 | :class="{'highlight-lm': cursor == moveIdx}" | |
51 | @click="() => gotoMove(moveIdx)" | |
52 | ) | |
53 | | {{ notation(moves[moveIdx]) }} | |
54 | .td( | |
55 | v-if="moveIdx < moves.length-1" | |
56 | :class="{'highlight-lm': cursor == moveIdx+1}" | |
57 | @click="() => gotoMove(moveIdx+1)" | |
58 | ) | |
59 | | {{ notation(moves[moveIdx+1]) }} | |
e71161fb BA |
60 | </template> |
61 | ||
cf2343ce | 62 | <script> |
fcd299a3 | 63 | import { store } from "@/store"; |
e71161fb | 64 | import { getFullNotation } from "@/utils/notation"; |
5b3dc10e | 65 | import { processModalClick } from "@/utils/modalClick"; |
cf2343ce | 66 | export default { |
6808d7a1 | 67 | name: "my-move-list", |
feaf1bf7 BA |
68 | props: [ |
69 | "moves", "show", "canAnalyze", "canDownload", | |
70 | "cursor", "score", "message", "firstNum"], | |
311cba76 BA |
71 | data: function() { |
72 | return { | |
73 | st: store.state | |
74 | }; | |
75 | }, | |
5b3dc10e BA |
76 | mounted: function() { |
77 | document.getElementById("adjuster").addEventListener( | |
78 | "click", | |
79 | processModalClick); | |
80 | // Take full width on small screens: | |
81 | let boardSize = parseInt(localStorage.getItem("boardSize")); | |
82 | if (!boardSize) { | |
83 | boardSize = | |
84 | window.innerWidth >= 768 | |
85 | ? 0.75 * Math.min(window.innerWidth, window.innerHeight) | |
86 | : window.innerWidth; | |
87 | } | |
88 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
89 | document.getElementById("boardContainer").style.width = boardSize + "px"; | |
90 | let gameContainer = document.getElementById("gameContainer"); | |
91 | gameContainer.style.width = boardSize + movesWidth + "px"; | |
92 | document.getElementById("boardSize").value = | |
93 | (boardSize * 100) / (window.innerWidth - movesWidth); | |
94 | // timeout to avoid calling too many time the adjust method | |
95 | let timeoutLaunched = false; | |
96 | window.addEventListener("resize", () => { | |
97 | if (!timeoutLaunched) { | |
98 | timeoutLaunched = true; | |
99 | setTimeout(() => { | |
100 | this.adjustBoard(); | |
101 | timeoutLaunched = false; | |
102 | }, 500); | |
103 | } | |
104 | }); | |
105 | }, | |
c6b8d37f BA |
106 | watch: { |
107 | cursor: function(newCursor) { | |
108 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard | |
c6b8d37f BA |
109 | // $nextTick to wait for table > tr to be rendered |
110 | this.$nextTick(() => { | |
c51c301f BA |
111 | let curLine = document.querySelector(".td.highlight-lm"); |
112 | if (!!curLine) curLine = curLine.parentNode; | |
113 | if (!curLine && this.moves.length > 0) | |
114 | // Cursor is before game beginning, and some moves were made: | |
115 | curLine = document.querySelector(".moves-list .tr:first-child") | |
116 | if (!!curLine) { | |
117 | curLine.scrollIntoView({ | |
c6b8d37f BA |
118 | behavior: "auto", |
119 | block: "nearest" | |
120 | }); | |
121 | } | |
122 | }); | |
123 | } | |
124 | }, | |
e71161fb BA |
125 | computed: { |
126 | evenNumbers: function() { | |
127 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
128 | } | |
129 | }, | |
430a2038 | 130 | methods: { |
e71161fb BA |
131 | notation: function(move) { |
132 | return getFullNotation(move); | |
133 | }, | |
dac39588 BA |
134 | gotoMove: function(index) { |
135 | this.$emit("goto-move", index); | |
5b3dc10e BA |
136 | }, |
137 | adjustBoard: function() { | |
138 | const boardContainer = document.getElementById("boardContainer"); | |
139 | if (!boardContainer) return; //no board on page | |
140 | const k = document.getElementById("boardSize").value; | |
141 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
142 | const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... | |
143 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
144 | const boardSize = | |
145 | minBoardWidth + | |
146 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
147 | localStorage.setItem("boardSize", boardSize); | |
148 | boardContainer.style.width = boardSize + "px"; | |
149 | document.getElementById("gameContainer").style.width = | |
150 | boardSize + movesWidth + "px"; | |
6808d7a1 BA |
151 | } |
152 | } | |
430a2038 BA |
153 | }; |
154 | </script> | |
155 | ||
156 | <style lang="sass" scoped> | |
157 | .moves-list | |
8477e53d BA |
158 | cursor: pointer |
159 | min-height: 1px | |
160 | max-height: 500px | |
161 | overflow: auto | |
162 | background-color: white | |
163 | width: 280px | |
164 | & > .tr | |
165 | clear: both | |
166 | border-bottom: 1px solid lightgrey | |
167 | & > .td | |
168 | float: left | |
f9c36b2d | 169 | padding: 2% 0 2% 2% |
8477e53d BA |
170 | &:first-child |
171 | color: grey | |
f9c36b2d | 172 | width: 13% |
8477e53d | 173 | &:not(first-child) |
f9c36b2d | 174 | width: 40.5% |
8477e53d BA |
175 | |
176 | @media screen and (max-width: 767px) | |
177 | .moves-list | |
178 | width: 100% | |
910d631b | 179 | |
8477e53d | 180 | .td.highlight-lm |
430a2038 | 181 | background-color: plum |
5b3dc10e BA |
182 | |
183 | #boardSizeBtnContainer | |
184 | width: 100% | |
185 | text-align: center | |
186 | ||
5b3dc10e BA |
187 | [type="checkbox"]#modalAdjust+div .card |
188 | padding: 5px | |
feaf1bf7 BA |
189 | |
190 | img.inline | |
191 | height: 24px | |
192 | @media screen and (max-width: 767px) | |
193 | height: 18px | |
194 | ||
0cc44e58 BA |
195 | #scoreInfo |
196 | margin: 10px 0 | |
197 | @media screen and (max-width: 767px) | |
198 | margin: 5px 0 | |
199 | ||
feaf1bf7 BA |
200 | span.score |
201 | display: inline-block | |
202 | margin-left: 10px | |
203 | font-weight: bold | |
204 | ||
205 | span.score-msg | |
206 | display: inline-block | |
207 | margin-left: 10px | |
208 | font-style: italic | |
209 | ||
210 | #downloadDiv | |
211 | display: inline-block | |
212 | margin: 0 | |
213 | ||
214 | span#rulesBtn | |
215 | cursor: pointer | |
216 | display: inline-block | |
217 | margin: 0 10px | |
218 | font-weight: bold | |
219 | ||
220 | button | |
221 | margin: 0 | |
430a2038 | 222 | </style> |