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(() => { | |
3c186115 BA |
111 | let curMove = document.querySelector(".td.highlight-lm"); |
112 | if (!curMove && this.moves.length > 0) | |
c51c301f | 113 | // Cursor is before game beginning, and some moves were made: |
3c186115 BA |
114 | curMove = document.querySelector(".moves-list > .tr:first-child > .td"); |
115 | if (!!curMove) { | |
116 | curMove.scrollIntoView({ | |
c6b8d37f BA |
117 | behavior: "auto", |
118 | block: "nearest" | |
119 | }); | |
120 | } | |
121 | }); | |
122 | } | |
123 | }, | |
e71161fb BA |
124 | computed: { |
125 | evenNumbers: function() { | |
126 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); | |
127 | } | |
128 | }, | |
430a2038 | 129 | methods: { |
e71161fb BA |
130 | notation: function(move) { |
131 | return getFullNotation(move); | |
132 | }, | |
dac39588 BA |
133 | gotoMove: function(index) { |
134 | this.$emit("goto-move", index); | |
5b3dc10e BA |
135 | }, |
136 | adjustBoard: function() { | |
137 | const boardContainer = document.getElementById("boardContainer"); | |
138 | if (!boardContainer) return; //no board on page | |
139 | const k = document.getElementById("boardSize").value; | |
140 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; | |
141 | const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary... | |
142 | // Value of 0 is board min size; 100 is window.width [- movesWidth] | |
143 | const boardSize = | |
144 | minBoardWidth + | |
145 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; | |
146 | localStorage.setItem("boardSize", boardSize); | |
147 | boardContainer.style.width = boardSize + "px"; | |
148 | document.getElementById("gameContainer").style.width = | |
149 | boardSize + movesWidth + "px"; | |
6808d7a1 BA |
150 | } |
151 | } | |
430a2038 BA |
152 | }; |
153 | </script> | |
154 | ||
155 | <style lang="sass" scoped> | |
156 | .moves-list | |
8477e53d BA |
157 | cursor: pointer |
158 | min-height: 1px | |
159 | max-height: 500px | |
160 | overflow: auto | |
161 | background-color: white | |
162 | width: 280px | |
163 | & > .tr | |
164 | clear: both | |
165 | border-bottom: 1px solid lightgrey | |
166 | & > .td | |
167 | float: left | |
f9c36b2d | 168 | padding: 2% 0 2% 2% |
8477e53d BA |
169 | &:first-child |
170 | color: grey | |
f9c36b2d | 171 | width: 13% |
8477e53d | 172 | &:not(first-child) |
f9c36b2d | 173 | width: 40.5% |
8477e53d BA |
174 | |
175 | @media screen and (max-width: 767px) | |
176 | .moves-list | |
177 | width: 100% | |
910d631b | 178 | |
8477e53d | 179 | .td.highlight-lm |
430a2038 | 180 | background-color: plum |
5b3dc10e BA |
181 | |
182 | #boardSizeBtnContainer | |
183 | width: 100% | |
184 | text-align: center | |
185 | ||
5b3dc10e BA |
186 | [type="checkbox"]#modalAdjust+div .card |
187 | padding: 5px | |
feaf1bf7 BA |
188 | |
189 | img.inline | |
190 | height: 24px | |
191 | @media screen and (max-width: 767px) | |
192 | height: 18px | |
193 | ||
0cc44e58 BA |
194 | #scoreInfo |
195 | margin: 10px 0 | |
196 | @media screen and (max-width: 767px) | |
197 | margin: 5px 0 | |
198 | ||
feaf1bf7 BA |
199 | span.score |
200 | display: inline-block | |
201 | margin-left: 10px | |
202 | font-weight: bold | |
203 | ||
204 | span.score-msg | |
205 | display: inline-block | |
206 | margin-left: 10px | |
207 | font-style: italic | |
208 | ||
209 | #downloadDiv | |
210 | display: inline-block | |
211 | margin: 0 | |
212 | ||
213 | span#rulesBtn | |
214 | cursor: pointer | |
215 | display: inline-block | |
216 | margin: 0 10px | |
217 | font-weight: bold | |
218 | ||
219 | button | |
220 | margin: 0 | |
430a2038 | 221 | </style> |