| 1 | <template lang="pug"> |
| 2 | div |
| 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 | ) |
| 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="clickRulesBtn()" |
| 23 | :class="btnRulesClass" |
| 24 | ) |
| 25 | | {{ st.tr["Rules"] }} |
| 26 | button( |
| 27 | :class="btnTooltipClass()" |
| 28 | onClick="window.doClick('modalAdjust')" |
| 29 | :aria-label="st.tr['Resize board']" |
| 30 | ) |
| 31 | img.inline(src="/images/icons/resize.svg") |
| 32 | button#analyzeBtn( |
| 33 | v-if="canAnalyze" |
| 34 | :class="btnTooltipClass()" |
| 35 | @click="$emit('analyze')" |
| 36 | :aria-label="st.tr['Analyse']" |
| 37 | ) |
| 38 | img.inline(src="/images/icons/analyse.svg") |
| 39 | #downloadDiv(v-if="canDownload") |
| 40 | a#download(href="#") |
| 41 | button( |
| 42 | :class="btnTooltipClass()" |
| 43 | @click="$emit('download')" |
| 44 | :aria-label="st.tr['Download'] + ' PGN'" |
| 45 | ) |
| 46 | img.inline(src="/images/icons/download.svg") |
| 47 | #scoreInfo(v-if="score!='*'") |
| 48 | span.score {{ score }} |
| 49 | span.score-msg {{ st.tr[message] }} |
| 50 | .moves-list |
| 51 | .tr(v-for="moveIdx in evenNumbers") |
| 52 | .td {{ firstNum + moveIdx / 2 }} |
| 53 | .td( |
| 54 | :class="{'highlight-lm': cursor == moveIdx}" |
| 55 | @click="() => gotoMove(moveIdx)" |
| 56 | v-html="notation(moveIdx)") |
| 57 | .td( |
| 58 | v-if="moveIdx < moves.length-1" |
| 59 | :class="{'highlight-lm': cursor == moveIdx+1}" |
| 60 | @click="() => gotoMove(moveIdx+1)" |
| 61 | v-html="notation(moveIdx + 1)") |
| 62 | </template> |
| 63 | |
| 64 | <script> |
| 65 | import { store } from "@/store"; |
| 66 | import { getFullNotation } from "@/utils/notation"; |
| 67 | import { processModalClick } from "@/utils/modalClick"; |
| 68 | export default { |
| 69 | name: "my-move-list", |
| 70 | props: [ |
| 71 | "moves", "show", "canAnalyze", "canDownload", |
| 72 | "vname", "cursor", "score", "message", "firstNum"], |
| 73 | data: function() { |
| 74 | return { |
| 75 | st: store.state |
| 76 | }; |
| 77 | }, |
| 78 | mounted: function() { |
| 79 | document.getElementById("adjuster") |
| 80 | .addEventListener("click", processModalClick); |
| 81 | // Take full width on small screens: |
| 82 | let boardSize = |
| 83 | window.innerWidth >= 768 |
| 84 | ? 0.75 * Math.min(window.innerWidth, window.innerHeight) |
| 85 | : window.innerWidth; |
| 86 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; |
| 87 | document.getElementById("boardContainer").style.width = boardSize + "px"; |
| 88 | let gameContainer = document.getElementById("gameContainer"); |
| 89 | gameContainer.style.width = boardSize + movesWidth + "px"; |
| 90 | document.getElementById("boardSize").value = |
| 91 | (boardSize * 100) / (window.innerWidth - movesWidth); |
| 92 | window.addEventListener("resize", this.adjustBoard); |
| 93 | // TODO: find sometjhing better than next height adjustment... |
| 94 | // maybe each variant could give its ratio (?!) |
| 95 | setTimeout( () => { this.adjustBoard("vertical"); }, 1000); |
| 96 | }, |
| 97 | beforeDestroy: function() { |
| 98 | window.removeEventListener("resize", this.adjustBoard); |
| 99 | }, |
| 100 | watch: { |
| 101 | cursor: function(newCursor) { |
| 102 | if (window.innerWidth <= 767) return; //scrolling would hide chessboard |
| 103 | // $nextTick to wait for table > tr to be rendered |
| 104 | this.$nextTick(() => { |
| 105 | let curMove = document.querySelector(".td.highlight-lm"); |
| 106 | if (!curMove && this.moves.length > 0) { |
| 107 | // Cursor is before game beginning, and some moves were made: |
| 108 | curMove = |
| 109 | document.querySelector(".moves-list > .tr:first-child > .td"); |
| 110 | } |
| 111 | if (!!curMove) { |
| 112 | curMove.scrollIntoView({ |
| 113 | behavior: "auto", |
| 114 | block: "nearest" |
| 115 | }); |
| 116 | } |
| 117 | }); |
| 118 | } |
| 119 | }, |
| 120 | computed: { |
| 121 | evenNumbers: function() { |
| 122 | return [...Array(this.moves.length).keys()].filter(i => i%2==0); |
| 123 | }, |
| 124 | btnRulesClass: function() { |
| 125 | // "rr" for "rules read" |
| 126 | return { |
| 127 | highlightRules: |
| 128 | !!this.vname && !localStorage.getItem("rr_" + this.vname) |
| 129 | }; |
| 130 | } |
| 131 | }, |
| 132 | methods: { |
| 133 | notation: function(moveIdx) { |
| 134 | const move = this.moves[moveIdx]; |
| 135 | if (this.score != "*") return getFullNotation(move); |
| 136 | if ( |
| 137 | ['none','highlight'].includes(this.show) || |
| 138 | ( |
| 139 | this.show == "byrow" && |
| 140 | moveIdx == this.moves.length-1 && |
| 141 | moveIdx % 2 == 0 |
| 142 | ) |
| 143 | ) { |
| 144 | return "?"; |
| 145 | } |
| 146 | return getFullNotation(move); |
| 147 | }, |
| 148 | btnTooltipClass: function() { |
| 149 | return { tooltip: !("ontouchstart" in window) }; |
| 150 | }, |
| 151 | clickRulesBtn: function() { |
| 152 | const key = "rr_" + this.vname; |
| 153 | if (!localStorage.getItem(key)) { |
| 154 | localStorage.setItem(key, '1'); |
| 155 | document.getElementById("rulesBtn").classList.remove("highlightRules"); |
| 156 | } |
| 157 | this.$emit("showrules"); |
| 158 | }, |
| 159 | gotoMove: function(index) { |
| 160 | // Goto move except if click on current move: |
| 161 | if (this.cursor != index) this.$emit("goto-move", index); |
| 162 | }, |
| 163 | adjustBoard: function(vertical) { |
| 164 | const boardContainer = document.getElementById("boardContainer"); |
| 165 | if (!boardContainer) return; //no board on page |
| 166 | const movesWidth = window.innerWidth >= 768 ? 280 : 0; |
| 167 | let gameContainer = document.getElementById("gameContainer"); |
| 168 | if (vertical) { |
| 169 | const bRect = |
| 170 | document.getElementById("rootBoardElement").getBoundingClientRect(); |
| 171 | if (bRect.bottom > window.innerHeight) { |
| 172 | const maxHeight = window.innerHeight - 20; |
| 173 | gameContainer.style.height = maxHeight + "px"; |
| 174 | const boardSize = maxHeight * bRect.width / bRect.height; |
| 175 | boardContainer.style.width = boardSize + "px"; |
| 176 | gameContainer.style.width = boardSize + movesWidth + "px"; |
| 177 | this.$emit("redraw-board"); |
| 178 | setTimeout( () => window.scroll(0, bRect.top), 1000); |
| 179 | } |
| 180 | } |
| 181 | else { |
| 182 | const k = document.getElementById("boardSize").value; |
| 183 | const minBoardWidth = 160; //TODO: these 160 and 280 are arbitrary... |
| 184 | // Value of 0 is board min size; 100 is window.width [- movesWidth] |
| 185 | const boardSize = |
| 186 | minBoardWidth + |
| 187 | (k * (window.innerWidth - (movesWidth + minBoardWidth))) / 100; |
| 188 | boardContainer.style.width = boardSize + "px"; |
| 189 | gameContainer.style.width = boardSize + movesWidth + "px"; |
| 190 | this.$emit("redraw-board"); |
| 191 | } |
| 192 | } |
| 193 | } |
| 194 | }; |
| 195 | </script> |
| 196 | |
| 197 | <style lang="sass" scoped> |
| 198 | .moves-list |
| 199 | user-select: none |
| 200 | cursor: pointer |
| 201 | min-height: 1px |
| 202 | max-height: 500px |
| 203 | overflow: auto |
| 204 | background-color: white |
| 205 | width: 280px |
| 206 | & > .tr |
| 207 | clear: both |
| 208 | border-bottom: 1px solid lightgrey |
| 209 | & > .td |
| 210 | float: left |
| 211 | padding: 2% 0 2% 2% |
| 212 | &:first-child |
| 213 | color: grey |
| 214 | width: 13% |
| 215 | &:not(first-child) |
| 216 | width: 40.5% |
| 217 | |
| 218 | @media screen and (max-width: 767px) |
| 219 | .moves-list |
| 220 | width: 100% |
| 221 | |
| 222 | .td.highlight-lm |
| 223 | background-color: plum |
| 224 | |
| 225 | .highlightRules |
| 226 | padding: 3px 5px |
| 227 | background-color: yellow |
| 228 | |
| 229 | #boardSizeBtnContainer |
| 230 | width: 100% |
| 231 | text-align: center |
| 232 | |
| 233 | [type="checkbox"]#modalAdjust+div .card |
| 234 | padding: 5px |
| 235 | |
| 236 | img.inline |
| 237 | height: 22px |
| 238 | @media screen and (max-width: 767px) |
| 239 | height: 18px |
| 240 | |
| 241 | #scoreInfo |
| 242 | margin: 10px 0 |
| 243 | @media screen and (max-width: 767px) |
| 244 | margin: 5px 0 |
| 245 | |
| 246 | span.score |
| 247 | display: inline-block |
| 248 | margin-left: 10px |
| 249 | font-weight: bold |
| 250 | |
| 251 | span.score-msg |
| 252 | display: inline-block |
| 253 | margin-left: 10px |
| 254 | font-style: italic |
| 255 | |
| 256 | #downloadDiv |
| 257 | display: inline-block |
| 258 | margin: 0 |
| 259 | |
| 260 | span#rulesBtn |
| 261 | cursor: pointer |
| 262 | display: inline-block |
| 263 | margin: 0 10px |
| 264 | font-weight: bold |
| 265 | |
| 266 | button |
| 267 | margin: 0 |
| 268 | &.active |
| 269 | background-color: #48C9B0 |
| 270 | |
| 271 | #aboveMoves button |
| 272 | padding-bottom: 5px |
| 273 | </style> |