Commit | Line | Data |
---|---|---|
24340cae | 1 | <script> |
e2732923 BA |
2 | import { getSquareId, getSquareFromId } from "@/utils/squareId"; |
3 | import { ArrayFun } from "@/utils/array"; | |
dfeb96ea | 4 | import { store } from "@/store"; |
cf2343ce | 5 | export default { |
6808d7a1 | 6 | name: "my-board", |
2c5d7b20 | 7 | // Last move cannot be guessed from here, and is required for highlights. |
cf2343ce | 8 | // vr: object to check moves, print board... |
93d1d7a7 | 9 | // userColor is left undefined for an external observer |
6808d7a1 BA |
10 | props: [ |
11 | "vr", | |
12 | "lastMove", | |
13 | "analyze", | |
20620465 | 14 | "score", |
6808d7a1 BA |
15 | "incheck", |
16 | "orientation", | |
17 | "userColor", | |
18 | "vname" | |
19 | ], | |
20 | data: function() { | |
cf2343ce | 21 | return { |
cafe0166 | 22 | mobileBrowser: ("ontouchstart" in window), |
cf2343ce BA |
23 | possibleMoves: [], //filled after each valid click/dragstart |
24 | choices: [], //promotion pieces, or checkered captures... (as moves) | |
107dc1bd | 25 | containerPos: null, |
cf2343ce | 26 | selectedPiece: null, //moving piece (or clicked piece) |
28b32b4f | 27 | start: null, //pixels coordinates + id of starting square (click or drag) |
49dad261 | 28 | startArrow: null, |
107dc1bd | 29 | movingArrow: null, |
49dad261 BA |
30 | arrows: [], //object of {start: x,y / end: x,y} |
31 | circles: {}, //object of squares' ID --> true (TODO: use a set?) | |
28b32b4f | 32 | click: "", |
3a2a7b5f | 33 | clickTime: 0, |
6808d7a1 | 34 | settings: store.state.settings |
cf2343ce BA |
35 | }; |
36 | }, | |
37 | render(h) { | |
6808d7a1 | 38 | if (!this.vr) { |
7b3cf1b7 | 39 | // Return empty div of class 'game' to avoid error when setting size |
107dc1bd BA |
40 | return h( |
41 | "div", | |
42 | { "class": { game: true } } | |
43 | ); | |
7b3cf1b7 | 44 | } |
6808d7a1 | 45 | const [sizeX, sizeY] = [V.size.x, V.size.y]; |
cf2343ce | 46 | // Precompute hints squares to facilitate rendering |
e2732923 | 47 | let hintSquares = ArrayFun.init(sizeX, sizeY, false); |
6808d7a1 BA |
48 | this.possibleMoves.forEach(m => { |
49 | hintSquares[m.end.x][m.end.y] = true; | |
50 | }); | |
cf2343ce | 51 | // Also precompute in-check squares |
e2732923 | 52 | let incheckSq = ArrayFun.init(sizeX, sizeY, false); |
6808d7a1 BA |
53 | this.incheck.forEach(sq => { |
54 | incheckSq[sq[0]][sq[1]] = true; | |
55 | }); | |
06e79b07 | 56 | |
af34341d BA |
57 | let lm = this.lastMove; |
58 | // Precompute lastMove highlighting squares | |
59 | const lmHighlights = {}; | |
60 | if (!!lm) { | |
61 | if (!Array.isArray(lm)) lm = [lm]; | |
62 | lm.forEach(m => { | |
00eef1ca | 63 | if (!m.start.noHighlight && V.OnBoard(m.start.x, m.start.y)) |
b406466b | 64 | lmHighlights[m.start.x + sizeX * m.start.y] = true; |
00eef1ca | 65 | if (!m.end.noHighlight && V.OnBoard(m.end.x, m.end.y)) |
b406466b | 66 | lmHighlights[m.end.x + sizeX * m.end.y] = true; |
6e0f2842 BA |
67 | if (!!m.start.toplay) |
68 | // For Dice variant (at least?) | |
69 | lmHighlights[m.start.toplay[0] + sizeX * m.start.toplay[1]] = true; | |
af34341d BA |
70 | }); |
71 | } | |
57eb158f BA |
72 | const showLight = ( |
73 | this.settings.highlight && | |
4f524197 | 74 | ["all", "highlight"].includes(V.ShowMoves) |
57eb158f | 75 | ); |
d54f6261 BA |
76 | const showCheck = ( |
77 | this.settings.highlight && | |
4f524197 | 78 | ["all", "highlight", "byrow"].includes(V.ShowMoves) |
d54f6261 | 79 | ); |
311cba76 BA |
80 | const orientation = !V.CanFlip ? "w" : this.orientation; |
81 | // Ensure that squares colors do not change when board is flipped | |
82 | const lightSquareMod = (sizeX + sizeY) % 2; | |
83 | const showPiece = (x, y) => { | |
84 | return ( | |
85 | this.vr.board[x][y] != V.EMPTY && | |
86 | (!this.vr.enlightened || this.analyze || this.score != "*" || | |
87 | (!!this.userColor && this.vr.enlightened[this.userColor][x][y])) | |
88 | ); | |
89 | }; | |
90 | const inHighlight = (x, y) => { | |
af34341d | 91 | return showLight && !!lmHighlights[x + sizeX * y]; |
311cba76 BA |
92 | }; |
93 | const inShadow = (x, y) => { | |
94 | return ( | |
95 | !this.analyze && | |
96 | this.score == "*" && | |
97 | this.vr.enlightened && | |
98 | (!this.userColor || !this.vr.enlightened[this.userColor][x][y]) | |
99 | ); | |
100 | }; | |
101 | // Create board element (+ reserves if needed by variant) | |
9d4a0218 | 102 | let elementArray = []; |
cf2343ce | 103 | const gameDiv = h( |
6808d7a1 | 104 | "div", |
cf2343ce | 105 | { |
107dc1bd | 106 | attrs: { id: "gamePosition" }, |
6ec2feb2 | 107 | "class": { |
6808d7a1 BA |
108 | game: true, |
109 | clearer: true | |
110 | } | |
cf2343ce BA |
111 | }, |
112 | [...Array(sizeX).keys()].map(i => { | |
311cba76 | 113 | const ci = orientation == "w" ? i : sizeX - i - 1; |
cf2343ce | 114 | return h( |
6808d7a1 | 115 | "div", |
cf2343ce | 116 | { |
6ec2feb2 | 117 | "class": { |
6808d7a1 | 118 | row: true |
cf2343ce | 119 | }, |
6808d7a1 | 120 | style: { opacity: this.choices.length > 0 ? "0.5" : "1" } |
cf2343ce BA |
121 | }, |
122 | [...Array(sizeY).keys()].map(j => { | |
311cba76 | 123 | const cj = orientation == "w" ? j : sizeY - j - 1; |
49dad261 | 124 | const squareId = "sq-" + ci + "-" + cj; |
cf2343ce | 125 | let elems = []; |
311cba76 | 126 | if (showPiece(ci, cj)) { |
ffeaef85 BA |
127 | let pieceSpecs = { |
128 | "class": { | |
129 | piece: true, | |
130 | ghost: | |
131 | !!this.selectedPiece && | |
132 | this.selectedPiece.parentNode.id == squareId | |
133 | }, | |
134 | attrs: { | |
135 | src: | |
136 | "/images/pieces/" + | |
137 | this.vr.getPpath( | |
138 | this.vr.board[ci][cj], | |
139 | // Extra args useful for some variants: | |
140 | this.userColor, | |
141 | this.score, | |
142 | this.orientation) + | |
143 | V.IMAGE_EXTENSION | |
144 | } | |
145 | }; | |
146 | if (this.arrows.length == 0) | |
147 | pieceSpecs["style"] = { position: "absolute" }; | |
148 | elems.push(h("img", pieceSpecs)); | |
cf2343ce | 149 | } |
6808d7a1 | 150 | if (this.settings.hints && hintSquares[ci][cj]) { |
cf2343ce | 151 | elems.push( |
6808d7a1 | 152 | h("img", { |
6ec2feb2 | 153 | "class": { |
6808d7a1 BA |
154 | "mark-square": true |
155 | }, | |
156 | attrs: { | |
157 | src: "/images/mark.svg" | |
cf2343ce | 158 | } |
6808d7a1 | 159 | }) |
cf2343ce BA |
160 | ); |
161 | } | |
49dad261 BA |
162 | if (!!this.circles[squareId]) { |
163 | elems.push( | |
164 | h("img", { | |
165 | "class": { | |
166 | "circle-square": true | |
167 | }, | |
168 | attrs: { | |
169 | src: "/images/circle.svg" | |
170 | } | |
171 | }) | |
172 | ); | |
173 | } | |
157a72c8 BA |
174 | const oddity = (ci + cj) % 2; |
175 | const lightSquare = ( | |
176 | (!V.DarkBottomRight && oddity == lightSquareMod) || | |
177 | (V.DarkBottomRight && oddity != lightSquareMod) | |
178 | ); | |
cf2343ce | 179 | return h( |
6808d7a1 | 180 | "div", |
cf2343ce | 181 | { |
6ec2feb2 | 182 | "class": { |
6808d7a1 BA |
183 | board: true, |
184 | ["board" + sizeY]: true, | |
ffeaef85 BA |
185 | "light-square": |
186 | !V.Notoodark && lightSquare && !V.Monochrome, | |
187 | "dark-square": | |
188 | !V.Notoodark && (!lightSquare || !!V.Monochrome), | |
189 | "middle-square": V.Notoodark, | |
dfeb96ea | 190 | [this.settings.bcolor]: true, |
311cba76 | 191 | "in-shadow": inShadow(ci, cj), |
f63ba277 | 192 | "highlight": inHighlight(ci, cj), |
2c5d7b20 BA |
193 | "incheck-light": |
194 | showCheck && lightSquare && incheckSq[ci][cj], | |
195 | "incheck-dark": | |
90df90bc BA |
196 | showCheck && !lightSquare && incheckSq[ci][cj], |
197 | "hover-highlight": this.vr.hoverHighlight(ci, cj) | |
cf2343ce BA |
198 | }, |
199 | attrs: { | |
6808d7a1 BA |
200 | id: getSquareId({ x: ci, y: cj }) |
201 | } | |
cf2343ce BA |
202 | }, |
203 | elems | |
204 | ); | |
205 | }) | |
206 | ); | |
24340cae | 207 | }) |
cf2343ce | 208 | ); |
9d4a0218 BA |
209 | if (!!this.vr.reserve) { |
210 | const playingColor = this.userColor || "w"; //default for an observer | |
6808d7a1 | 211 | const shiftIdx = playingColor == "w" ? 0 : 1; |
107dc1bd BA |
212 | // Some variants have more than sizeY reserve pieces (Clorange: 10) |
213 | const reserveSquareNb = Math.max(sizeY, V.RESERVE_PIECES.length); | |
cf2343ce | 214 | let myReservePiecesArray = []; |
1e8a8386 BA |
215 | if (!!this.vr.reserve[playingColor]) { |
216 | for (let i = 0; i < V.RESERVE_PIECES.length; i++) { | |
217 | const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]]; | |
218 | myReservePiecesArray.push( | |
219 | h( | |
220 | "div", | |
221 | { | |
222 | "class": { board: true, ["board" + reserveSquareNb]: true }, | |
223 | attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }, | |
224 | style: { opacity: qty > 0 ? 1 : 0.35 } | |
225 | }, | |
226 | [ | |
227 | h("img", { | |
228 | // NOTE: class "reserve" not used currently | |
229 | "class": { piece: true, reserve: true }, | |
230 | attrs: { | |
231 | src: | |
232 | "/images/pieces/" + | |
233 | this.vr.getReservePpath(i, playingColor, orientation) + | |
234 | ".svg" | |
235 | } | |
236 | }), | |
237 | h( | |
238 | "sup", | |
239 | { | |
240 | "class": { "reserve-count": true }, | |
241 | style: { top: "calc(100% + 5px)" } | |
242 | }, | |
243 | [ qty ] | |
244 | ) | |
245 | ] | |
246 | ) | |
247 | ); | |
248 | } | |
249 | } | |
250 | let oppReservePiecesArray = []; | |
251 | const oppCol = V.GetOppCol(playingColor); | |
252 | if (!!this.vr.reserve[oppCol]) { | |
253 | for (let i = 0; i < V.RESERVE_PIECES.length; i++) { | |
254 | const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]]; | |
255 | oppReservePiecesArray.push( | |
256 | h( | |
257 | "div", | |
258 | { | |
259 | "class": { board: true, ["board" + reserveSquareNb]: true }, | |
260 | attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }, | |
261 | style: { opacity: qty > 0 ? 1 : 0.35 } | |
262 | }, | |
263 | [ | |
264 | h("img", { | |
265 | "class": { piece: true, reserve: true }, | |
266 | attrs: { | |
267 | src: | |
268 | "/images/pieces/" + | |
269 | this.vr.getReservePpath(i, oppCol, orientation) + | |
270 | ".svg" | |
271 | } | |
272 | }), | |
273 | h( | |
274 | "sup", | |
275 | { | |
276 | "class": { "reserve-count": true }, | |
277 | style: { top: "calc(100% + 5px)" } | |
278 | }, | |
279 | [ qty ] | |
280 | ) | |
281 | ] | |
282 | ) | |
283 | ); | |
284 | } | |
285 | } | |
286 | const myReserveTop = ( | |
287 | (playingColor == 'w' && orientation == 'b') || | |
288 | (playingColor == 'b' && orientation == 'w') | |
289 | ); | |
290 | const hasReserveTop = ( | |
291 | (myReserveTop && !!this.vr.reserve[playingColor]) || | |
292 | (!myReserveTop && !!this.vr.reserve[oppCol]) | |
293 | ); | |
294 | // "var" because must be reachable from outside this block | |
295 | var hasReserveBottom = ( | |
296 | (myReserveTop && !!this.vr.reserve[oppCol]) || | |
297 | (!myReserveTop && !!this.vr.reserve[playingColor]) | |
298 | ); | |
299 | // Center reserves, assuming same number of pieces for each side: | |
300 | const nbReservePieces = myReservePiecesArray.length; | |
301 | const marginLeft = | |
302 | ((100 - nbReservePieces * (100 / reserveSquareNb)) / 2) + "%"; | |
303 | if (hasReserveTop) { | |
304 | var reserveTop = | |
6808d7a1 BA |
305 | h( |
306 | "div", | |
307 | { | |
1e8a8386 BA |
308 | "class": { |
309 | game: true, | |
310 | "reserve-div": true | |
311 | }, | |
312 | style: { | |
313 | "margin-left": marginLeft | |
314 | } | |
6808d7a1 BA |
315 | }, |
316 | [ | |
ffeaef85 | 317 | h( |
1e8a8386 | 318 | "div", |
ffeaef85 | 319 | { |
1e8a8386 BA |
320 | "class": { |
321 | row: true, | |
322 | "reserve-row": true | |
323 | } | |
ffeaef85 | 324 | }, |
1e8a8386 | 325 | myReserveTop ? myReservePiecesArray : oppReservePiecesArray |
ffeaef85 | 326 | ) |
6808d7a1 | 327 | ] |
1e8a8386 | 328 | ); |
cf2343ce | 329 | } |
1e8a8386 BA |
330 | if (hasReserveBottom) { |
331 | var reserveBottom = | |
6808d7a1 BA |
332 | h( |
333 | "div", | |
334 | { | |
1e8a8386 BA |
335 | "class": { |
336 | game: true, | |
337 | "reserve-div": true | |
338 | }, | |
339 | style: { | |
340 | "margin-left": marginLeft | |
341 | } | |
6808d7a1 BA |
342 | }, |
343 | [ | |
ffeaef85 | 344 | h( |
1e8a8386 | 345 | "div", |
ffeaef85 | 346 | { |
1e8a8386 BA |
347 | "class": { |
348 | row: true, | |
349 | "reserve-row": true | |
350 | } | |
ffeaef85 | 351 | }, |
1e8a8386 | 352 | myReserveTop ? oppReservePiecesArray : myReservePiecesArray |
ffeaef85 | 353 | ) |
6808d7a1 | 354 | ] |
1e8a8386 | 355 | ); |
cf2343ce | 356 | } |
1e8a8386 | 357 | if (hasReserveTop) elementArray.push(reserveTop); |
cf2343ce | 358 | } |
9d4a0218 | 359 | elementArray.push(gameDiv); |
1e8a8386 BA |
360 | if (!!this.vr.reserve && hasReserveBottom) |
361 | elementArray.push(reserveBottom); | |
107dc1bd BA |
362 | const boardElt = document.getElementById("gamePosition"); |
363 | // boardElt might be undefine (at first drawing) | |
6808d7a1 | 364 | if (this.choices.length > 0 && !!boardElt) { |
107dc1bd | 365 | const squareWidth = boardElt.offsetWidth / sizeY; |
aafe9f16 | 366 | const offset = [boardElt.offsetTop, boardElt.offsetLeft]; |
14edde72 BA |
367 | const maxNbeltsPerRow = Math.min(this.choices.length, sizeY); |
368 | let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2; | |
369 | let choicesHeight = squareWidth; | |
370 | if (this.choices.length >= sizeY) { | |
371 | // A second row is required (Eightpieces variant) | |
372 | topOffset -= squareWidth / 2; | |
373 | choicesHeight *= 2; | |
374 | } | |
aafe9f16 | 375 | const choices = h( |
6808d7a1 | 376 | "div", |
aafe9f16 | 377 | { |
6808d7a1 | 378 | attrs: { id: "choices" }, |
6ec2feb2 | 379 | "class": { row: true }, |
aafe9f16 | 380 | style: { |
14edde72 | 381 | top: topOffset + "px", |
6808d7a1 BA |
382 | left: |
383 | offset[1] + | |
14edde72 | 384 | (squareWidth * Math.max(sizeY - this.choices.length, 0)) / 2 + |
6808d7a1 | 385 | "px", |
14edde72 BA |
386 | width: (maxNbeltsPerRow * squareWidth) + "px", |
387 | height: choicesHeight + "px" | |
6808d7a1 | 388 | } |
aafe9f16 | 389 | }, |
14edde72 BA |
390 | [ h( |
391 | "div", | |
6ec2feb2 BA |
392 | { |
393 | "class": { "full-width": true } | |
394 | }, | |
14edde72 BA |
395 | this.choices.map(m => { |
396 | // A "choice" is a move | |
397 | const applyMove = (e) => { | |
398 | e.stopPropagation(); | |
399 | // Force a delay between move is shown and clicked | |
400 | // (otherwise a "double-click" bug might occur) | |
401 | if (Date.now() - this.clickTime < 200) return; | |
14edde72 | 402 | this.choices = []; |
78c23cd6 | 403 | this.play(m); |
14edde72 BA |
404 | }; |
405 | const onClick = | |
406 | this.mobileBrowser | |
407 | ? { touchend: applyMove } | |
408 | : { mouseup: applyMove }; | |
409 | return h( | |
410 | "div", | |
411 | { | |
6ec2feb2 | 412 | "class": { |
14edde72 BA |
413 | board: true, |
414 | ["board" + sizeY]: true | |
aafe9f16 | 415 | }, |
14edde72 BA |
416 | style: { |
417 | width: (100 / maxNbeltsPerRow) + "%", | |
418 | "padding-bottom": (100 / maxNbeltsPerRow) + "%" | |
419 | } | |
420 | }, | |
421 | [ | |
422 | h("img", { | |
423 | attrs: { | |
424 | src: | |
425 | "/images/pieces/" + | |
c7550017 BA |
426 | // orientation: extra arg useful for some variants: |
427 | this.vr.getPPpath(m, this.orientation) + | |
14edde72 BA |
428 | V.IMAGE_EXTENSION |
429 | }, | |
6ec2feb2 | 430 | "class": { "choice-piece": true }, |
14edde72 BA |
431 | on: onClick |
432 | }) | |
433 | ] | |
434 | ); | |
435 | }) | |
436 | ) ] | |
aafe9f16 BA |
437 | ); |
438 | elementArray.unshift(choices); | |
439 | } | |
4b26ecb8 BA |
440 | let onEvents = {}; |
441 | // NOTE: click = mousedown + mouseup | |
cafe0166 | 442 | if (this.mobileBrowser) { |
4b26ecb8 BA |
443 | onEvents = { |
444 | on: { | |
445 | touchstart: this.mousedown, | |
446 | touchmove: this.mousemove, | |
6808d7a1 BA |
447 | touchend: this.mouseup |
448 | } | |
4b26ecb8 | 449 | }; |
1e8a8386 BA |
450 | } |
451 | else { | |
4b26ecb8 | 452 | onEvents = { |
cf2343ce | 453 | on: { |
65495c17 BA |
454 | mousedown: this.mousedown, |
455 | mousemove: this.mousemove, | |
49dad261 BA |
456 | mouseup: this.mouseup, |
457 | contextmenu: this.blockContextMenu | |
6808d7a1 | 458 | } |
4b26ecb8 BA |
459 | }; |
460 | } | |
107dc1bd BA |
461 | return ( |
462 | h( | |
463 | "div", | |
464 | Object.assign({ attrs: { id: "rootBoardElement" } }, onEvents), | |
465 | elementArray | |
466 | ) | |
467 | ); | |
468 | }, | |
469 | updated: function() { | |
470 | this.re_setDrawings(); | |
cf2343ce BA |
471 | }, |
472 | methods: { | |
49dad261 BA |
473 | blockContextMenu: function(e) { |
474 | e.preventDefault(); | |
475 | e.stopPropagation(); | |
476 | return false; | |
477 | }, | |
478 | cancelResetArrows: function() { | |
479 | this.startArrow = null; | |
480 | this.arrows = []; | |
481 | this.circles = {}; | |
107dc1bd BA |
482 | const curCanvas = document.getElementById("arrowCanvas"); |
483 | if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas); | |
484 | }, | |
485 | coordsToXY: function(coords, top, left, squareWidth) { | |
486 | return { | |
487 | // [1] for x and [0] for y because conventions in rules are inversed. | |
488 | x: ( | |
489 | left + window.scrollX + | |
490 | ( | |
491 | squareWidth * | |
492 | (this.orientation == 'w' ? coords[1] : (V.size.y - coords[1])) | |
493 | ) | |
494 | ), | |
495 | y: ( | |
496 | top + window.scrollY + | |
497 | ( | |
498 | squareWidth * | |
499 | (this.orientation == 'w' ? coords[0] : (V.size.x - coords[0])) | |
500 | ) | |
501 | ) | |
502 | }; | |
49dad261 | 503 | }, |
107dc1bd BA |
504 | computeEndArrow: function(start, end, top, left, squareWidth) { |
505 | const endCoords = this.coordsToXY(end, top, left, squareWidth); | |
506 | const delta = [endCoords.x - start.x, endCoords.y - start.y]; | |
507 | const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]); | |
cd049aa1 BA |
508 | // Simple heuristic for now, just remove 1/3 square. |
509 | // TODO: should depend on the orientation. | |
cd049aa1 BA |
510 | const fracSqWidth = squareWidth / 3; |
511 | return { | |
107dc1bd BA |
512 | x: endCoords.x - delta[0] * fracSqWidth / dist, |
513 | y: endCoords.y - delta[1] * fracSqWidth / dist | |
cd049aa1 BA |
514 | }; |
515 | }, | |
107dc1bd BA |
516 | drawCurrentArrow: function() { |
517 | const boardElt = document.getElementById("gamePosition"); | |
518 | const squareWidth = boardElt.offsetWidth / V.size.y; | |
519 | const bPos = boardElt.getBoundingClientRect(); | |
520 | const aStart = | |
521 | this.coordsToXY( | |
522 | [this.startArrow[0] + 0.5, this.startArrow[1] + 0.5], | |
523 | bPos.top, bPos.left, squareWidth); | |
524 | const aEnd = | |
525 | this.computeEndArrow( | |
526 | aStart, [this.movingArrow[0] + 0.5, this.movingArrow[1] + 0.5], | |
527 | bPos.top, bPos.left, squareWidth); | |
528 | let currentArrow = document.getElementById("currentArrow"); | |
529 | const d = | |
530 | "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y; | |
531 | const arrowWidth = squareWidth / 4; | |
532 | if (!!currentArrow) currentArrow.setAttribute("d", d); | |
533 | else { | |
534 | let domArrow = | |
535 | document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
536 | domArrow.classList.add("svg-arrow"); | |
537 | domArrow.id = "currentArrow"; | |
538 | domArrow.setAttribute("d", d); | |
539 | domArrow.style = "stroke-width:" + arrowWidth + "px"; | |
540 | document.getElementById("arrowCanvas") | |
541 | .insertAdjacentElement("beforeend", domArrow); | |
542 | } | |
543 | }, | |
544 | addArrow: function(arrow) { | |
545 | this.arrows.push(arrow); | |
546 | // Also add to DOM: | |
547 | const boardElt = document.getElementById("gamePosition"); | |
548 | const squareWidth = boardElt.offsetWidth / V.size.y; | |
549 | const bPos = boardElt.getBoundingClientRect(); | |
550 | const newArrow = | |
551 | this.getSvgArrow(arrow, bPos.top, bPos.left, squareWidth); | |
552 | document.getElementById("arrowCanvas") | |
553 | .insertAdjacentElement("beforeend", newArrow); | |
554 | }, | |
555 | getSvgArrow: function(arrow, top, left, squareWidth) { | |
556 | const aStart = | |
557 | this.coordsToXY( | |
558 | [arrow.start[0] + 0.5, arrow.start[1] + 0.5], | |
559 | top, left, squareWidth); | |
560 | const aEnd = | |
561 | this.computeEndArrow( | |
562 | aStart, [arrow.end[0] + 0.5, arrow.end[1] + 0.5], | |
563 | top, left, squareWidth); | |
564 | const arrowWidth = squareWidth / 4; | |
565 | let path = | |
566 | document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
567 | path.classList.add("svg-arrow"); | |
568 | path.setAttribute( | |
569 | "d", | |
570 | "M" + aStart.x + "," + aStart.y + " " + "L" + aEnd.x + "," + aEnd.y | |
571 | ); | |
572 | path.style = "stroke-width:" + arrowWidth + "px"; | |
573 | return path; | |
574 | }, | |
575 | re_setDrawings: function() { | |
576 | // Remove current canvas, if any | |
577 | const curCanvas = document.getElementById("arrowCanvas"); | |
578 | if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas); | |
579 | // Add some drawing on board (for some variants + arrows and circles) | |
580 | const boardElt = document.getElementById("gamePosition"); | |
581 | const squareWidth = boardElt.offsetWidth / V.size.y; | |
582 | const bPos = boardElt.getBoundingClientRect(); | |
583 | let svgArrows = []; | |
584 | this.arrows.forEach(a => { | |
585 | svgArrows.push(this.getSvgArrow(a, bPos.top, bPos.left, squareWidth)); | |
586 | }); | |
587 | let vLines = []; | |
588 | if (!!V.Lines) { | |
589 | V.Lines.forEach(line => { | |
590 | const lStart = | |
591 | this.coordsToXY(line[0], bPos.top, bPos.left, squareWidth); | |
592 | const lEnd = | |
593 | this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth); | |
594 | let path = | |
595 | document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
8efb985e BA |
596 | if (line[0][0] == line[1][0] || line[0][1] == line[1][1]) |
597 | path.classList.add("svg-line"); | |
598 | else | |
599 | // "Diagonals" are drawn with a lighter color (TODO: generalize) | |
600 | path.classList.add("svg-diag"); | |
107dc1bd BA |
601 | path.setAttribute( |
602 | "d", | |
603 | "M" + lStart.x + "," + lStart.y + " " + | |
604 | "L" + lEnd.x + "," + lEnd.y | |
605 | ); | |
606 | vLines.push(path); | |
607 | }); | |
608 | } | |
609 | let arrowCanvas = | |
610 | document.createElementNS("http://www.w3.org/2000/svg", "svg"); | |
611 | arrowCanvas.id = "arrowCanvas"; | |
612 | arrowCanvas.setAttribute("stroke", "none"); | |
613 | let defs = | |
614 | document.createElementNS("http://www.w3.org/2000/svg", "defs"); | |
615 | const arrowWidth = squareWidth / 4; | |
616 | let marker = | |
617 | document.createElementNS("http://www.w3.org/2000/svg", "marker"); | |
618 | marker.id = "arrow"; | |
619 | marker.setAttribute("markerWidth", (2 * arrowWidth) + "px"); | |
620 | marker.setAttribute("markerHeight", (3 * arrowWidth) + "px"); | |
621 | marker.setAttribute("markerUnits", "userSpaceOnUse"); | |
622 | marker.setAttribute("refX", "0"); | |
623 | marker.setAttribute("refY", (1.5 * arrowWidth) + "px"); | |
624 | marker.setAttribute("orient", "auto"); | |
625 | let head = | |
626 | document.createElementNS("http://www.w3.org/2000/svg", "path"); | |
627 | head.classList.add("arrow-head"); | |
628 | head.setAttribute( | |
629 | "d", | |
630 | "M0,0 L0," + (3 * arrowWidth) + " L" + | |
631 | (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z" | |
632 | ); | |
633 | marker.appendChild(head); | |
634 | defs.appendChild(marker); | |
635 | arrowCanvas.appendChild(defs); | |
636 | svgArrows.concat(vLines).forEach(av => arrowCanvas.appendChild(av)); | |
637 | document.getElementById("rootBoardElement").appendChild(arrowCanvas); | |
638 | }, | |
cf2343ce | 639 | mousedown: function(e) { |
28b32b4f | 640 | e.preventDefault(); |
1ef65040 | 641 | if (!this.mobileBrowser && e.which != 3) |
49dad261 BA |
642 | // Cancel current drawing and circles, if any |
643 | this.cancelResetArrows(); | |
1ef65040 | 644 | if (this.mobileBrowser || e.which == 1) { |
49dad261 BA |
645 | // Mouse left button |
646 | if (!this.start) { | |
8764102a BA |
647 | this.containerPos = |
648 | document.getElementById("boardContainer").getBoundingClientRect(); | |
49dad261 BA |
649 | // NOTE: classList[0] is enough: 'piece' is the first assigned class |
650 | const withPiece = (e.target.classList[0] == "piece"); | |
49dad261 | 651 | // Show possible moves if current player allowed to play |
9a7a1ccc BA |
652 | const startSquare = |
653 | getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id); | |
49dad261 BA |
654 | this.possibleMoves = []; |
655 | const color = this.analyze ? this.vr.turn : this.userColor; | |
9a7a1ccc BA |
656 | if (this.vr.canIplay(color, startSquare)) { |
657 | // Emit the click event which could be used by some variants | |
658 | const targetId = | |
659 | (withPiece ? e.target.parentNode.id : e.target.id); | |
660 | this.$emit("click-square", getSquareFromId(targetId)); | |
661 | if (withPiece) { | |
662 | this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare); | |
663 | // For potential drag'n drop, remember start coordinates | |
664 | // (to center the piece on mouse cursor) | |
665 | let parent = e.target.parentNode; //surrounding square | |
666 | const rect = parent.getBoundingClientRect(); | |
667 | this.start = { | |
668 | x: rect.x + rect.width / 2, | |
669 | y: rect.y + rect.width / 2, | |
670 | id: parent.id | |
671 | }; | |
672 | // Add the moving piece to the board, just after current image | |
673 | this.selectedPiece = e.target.cloneNode(); | |
674 | Object.assign( | |
675 | this.selectedPiece.style, | |
676 | { | |
677 | position: "absolute", | |
678 | top: 0, | |
679 | display: "inline-block", | |
680 | zIndex: 3000 | |
681 | } | |
682 | ); | |
683 | parent.insertBefore(this.selectedPiece, e.target.nextSibling); | |
49dad261 | 684 | } |
9a7a1ccc | 685 | } |
49dad261 | 686 | } |
9a7a1ccc BA |
687 | else this.processMoveAttempt(e); |
688 | } | |
689 | else if (e.which == 3) { | |
1ef65040 | 690 | // Mouse right button |
8764102a BA |
691 | this.containerPos = |
692 | document.getElementById("gamePosition").getBoundingClientRect(); | |
49dad261 BA |
693 | let elem = e.target; |
694 | // Next loop because of potential marks | |
695 | while (elem.tagName == "IMG") elem = elem.parentNode; | |
107dc1bd | 696 | this.startArrow = getSquareFromId(elem.id); |
49dad261 BA |
697 | } |
698 | }, | |
699 | mousemove: function(e) { | |
700 | if (!this.selectedPiece && !this.startArrow) return; | |
107dc1bd BA |
701 | // Cancel if off boardContainer |
702 | const [offsetX, offsetY] = | |
703 | this.mobileBrowser | |
10addfff | 704 | ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] |
107dc1bd BA |
705 | : [e.clientX, e.clientY]; |
706 | if ( | |
707 | offsetX < this.containerPos.left || | |
708 | offsetX > this.containerPos.right || | |
709 | offsetY < this.containerPos.top || | |
710 | offsetY > this.containerPos.bottom | |
711 | ) { | |
8764102a BA |
712 | if (!!this.selectedPiece) { |
713 | this.selectedPiece.parentNode.removeChild(this.selectedPiece); | |
714 | delete this.selectedPiece; | |
715 | this.selectedPiece = null; | |
716 | this.start = null; | |
85b6326c BA |
717 | this.possibleMoves = []; //in case of |
718 | this.click = ""; | |
8764102a BA |
719 | let selected = document.querySelector(".ghost"); |
720 | if (!!selected) selected.classList.remove("ghost"); | |
721 | } | |
722 | else { | |
723 | this.startArrow = null; | |
724 | this.movingArrow = null; | |
725 | const currentArrow = document.getElementById("currentArrow"); | |
726 | if (!!currentArrow) | |
727 | currentArrow.parentNode.removeChild(currentArrow); | |
728 | } | |
107dc1bd BA |
729 | return; |
730 | } | |
49dad261 BA |
731 | e.preventDefault(); |
732 | if (!!this.selectedPiece) { | |
733 | // There is an active element: move it around | |
28b32b4f BA |
734 | Object.assign( |
735 | this.selectedPiece.style, | |
736 | { | |
49dad261 BA |
737 | left: offsetX - this.start.x + "px", |
738 | top: offsetY - this.start.y + "px" | |
28b32b4f BA |
739 | } |
740 | ); | |
28b32b4f | 741 | } |
49dad261 BA |
742 | else { |
743 | let elem = e.target; | |
744 | // Next loop because of potential marks | |
745 | while (elem.tagName == "IMG") elem = elem.parentNode; | |
746 | // To center the arrow in square: | |
107dc1bd BA |
747 | const movingCoords = getSquareFromId(elem.id); |
748 | if ( | |
749 | movingCoords[0] != this.startArrow[0] || | |
750 | movingCoords[1] != this.startArrow[1] | |
751 | ) { | |
752 | this.movingArrow = movingCoords; | |
753 | this.drawCurrentArrow(); | |
28b32b4f | 754 | } |
49dad261 | 755 | } |
cf2343ce BA |
756 | }, |
757 | mouseup: function(e) { | |
28b32b4f | 758 | e.preventDefault(); |
1ef65040 | 759 | if (this.mobileBrowser || e.which == 1) { |
49dad261 BA |
760 | if (!this.selectedPiece) return; |
761 | // Drag'n drop. Selected piece is no longer needed: | |
762 | this.selectedPiece.parentNode.removeChild(this.selectedPiece); | |
763 | delete this.selectedPiece; | |
764 | this.selectedPiece = null; | |
765 | this.processMoveAttempt(e); | |
1ef65040 | 766 | } else if (e.which == 3) { |
8764102a | 767 | if (!this.startArrow) return; |
1ef65040 | 768 | // Mouse right button |
107dc1bd | 769 | this.movingArrow = null; |
49dad261 BA |
770 | this.processArrowAttempt(e); |
771 | } | |
28b32b4f | 772 | }, |
e90bafa8 BA |
773 | // Called by BaseGame after partially undoing multi-moves: |
774 | resetCurrentAttempt: function() { | |
775 | this.possibleMoves = []; | |
776 | this.start = null; | |
777 | this.click = ""; | |
778 | this.selectedPiece = null; | |
779 | }, | |
28b32b4f BA |
780 | processMoveAttempt: function(e) { |
781 | // Obtain the move from start and end squares | |
cafe0166 BA |
782 | const [offsetX, offsetY] = |
783 | this.mobileBrowser | |
10addfff | 784 | ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY] |
cafe0166 | 785 | : [e.clientX, e.clientY]; |
cf2343ce | 786 | let landing = document.elementFromPoint(offsetX, offsetY); |
cf2343ce | 787 | // Next condition: classList.contains(piece) fails because of marks |
6808d7a1 | 788 | while (landing.tagName == "IMG") landing = landing.parentNode; |
28b32b4f BA |
789 | if (this.start.id == landing.id) { |
790 | if (this.click == landing.id) { | |
791 | // Second click on same square: cancel current move | |
792 | this.possibleMoves = []; | |
793 | this.start = null; | |
794 | this.click = ""; | |
795 | } else this.click = landing.id; | |
cf2343ce | 796 | return; |
28b32b4f BA |
797 | } |
798 | this.start = null; | |
bd76b456 | 799 | // OK: process move attempt, landing is a square node |
cf2343ce BA |
800 | let endSquare = getSquareFromId(landing.id); |
801 | let moves = this.findMatchingMoves(endSquare); | |
802 | this.possibleMoves = []; | |
3a2a7b5f BA |
803 | if (moves.length > 1) { |
804 | this.clickTime = Date.now(); | |
805 | this.choices = moves; | |
806 | } else if (moves.length == 1) this.play(moves[0]); | |
28b32b4f | 807 | // else: forbidden move attempt |
cf2343ce | 808 | }, |
49dad261 BA |
809 | processArrowAttempt: function(e) { |
810 | // Obtain the arrow from start and end squares | |
811 | const [offsetX, offsetY] = [e.clientX, e.clientY]; | |
812 | let landing = document.elementFromPoint(offsetX, offsetY); | |
813 | // Next condition: classList.contains(piece) fails because of marks | |
814 | while (landing.tagName == "IMG") landing = landing.parentNode; | |
107dc1bd BA |
815 | const landingCoords = getSquareFromId(landing.id); |
816 | if ( | |
817 | this.startArrow[0] == landingCoords[0] && | |
818 | this.startArrow[1] == landingCoords[1] | |
819 | ) { | |
49dad261 BA |
820 | // Draw (or erase) a circle |
821 | this.$set(this.circles, landing.id, !this.circles[landing.id]); | |
107dc1bd | 822 | } |
49dad261 BA |
823 | else { |
824 | // OK: add arrow, landing is a new square | |
107dc1bd BA |
825 | const currentArrow = document.getElementById("currentArrow"); |
826 | currentArrow.parentNode.removeChild(currentArrow); | |
827 | this.addArrow({ | |
828 | start: this.startArrow, | |
829 | end: landingCoords | |
49dad261 BA |
830 | }); |
831 | } | |
832 | this.startArrow = null; | |
833 | }, | |
cf2343ce BA |
834 | findMatchingMoves: function(endSquare) { |
835 | // Run through moves list and return the matching set (if promotions...) | |
28b32b4f BA |
836 | return ( |
837 | this.possibleMoves.filter(m => { | |
838 | return (endSquare[0] == m.end.x && endSquare[1] == m.end.y); | |
839 | }) | |
840 | ); | |
cf2343ce BA |
841 | }, |
842 | play: function(move) { | |
6808d7a1 BA |
843 | this.$emit("play-move", move); |
844 | } | |
845 | } | |
cf2343ce BA |
846 | }; |
847 | </script> | |
4473050c | 848 | |
107dc1bd BA |
849 | <style lang="sass"> |
850 | // SVG dynamically added, so not scoped | |
851 | #arrowCanvas | |
852 | pointer-events: none | |
853 | position: absolute | |
854 | top: 0 | |
855 | left: 0 | |
856 | width: 100% | |
857 | height: 100% | |
858 | ||
859 | .svg-arrow | |
860 | opacity: 0.65 | |
861 | stroke: #5f0e78 | |
862 | fill: none | |
863 | marker-end: url(#arrow) | |
864 | ||
865 | .svg-line | |
866 | stroke: black | |
867 | ||
8efb985e BA |
868 | .svg-diag |
869 | stroke: grey | |
870 | ||
107dc1bd BA |
871 | .arrow-head |
872 | fill: #5f0e78 | |
873 | </style> | |
874 | ||
41c80bb6 | 875 | <style lang="sass" scoped> |
26d8a01a BA |
876 | @import "@/styles/_board_squares_img.sass"; |
877 | ||
ffeaef85 BA |
878 | //.game.reserve-div |
879 | // TODO: would be cleaner to restrict width so that it doesn't overflow | |
880 | // Commented out because pieces would disappear over the board otherwise: | |
881 | //overflow: hidden | |
50aed5a1 | 882 | .reserve-count |
ffeaef85 BA |
883 | width: 100% |
884 | text-align: center | |
885 | display: inline-block | |
886 | position: absolute | |
9d4a0218 | 887 | .reserve-row |
50aed5a1 BA |
888 | margin-bottom: 15px |
889 | ||
6ec2feb2 BA |
890 | .full-width |
891 | width: 100% | |
41cb9b94 | 892 | |
50aed5a1 | 893 | .game |
28b32b4f | 894 | user-select: none |
cf94b843 BA |
895 | width: 100% |
896 | margin: 0 | |
50aed5a1 BA |
897 | .board |
898 | cursor: pointer | |
50aed5a1 BA |
899 | |
900 | #choices | |
28b32b4f | 901 | user-select: none |
168a5e4c BA |
902 | margin: 0 |
903 | position: absolute | |
50aed5a1 BA |
904 | z-index: 300 |
905 | overflow-y: inherit | |
906 | background-color: rgba(0,0,0,0) | |
907 | img | |
908 | cursor: pointer | |
909 | background-color: #e6ee9c | |
910 | &:hover | |
911 | background-color: skyblue | |
912 | &.choice-piece | |
913 | width: 100% | |
914 | height: auto | |
915 | display: block | |
916 | ||
50aed5a1 | 917 | img.ghost |
ffeaef85 | 918 | // NOTE: no need to set z-index here, since opacity is low |
50aed5a1 | 919 | position: absolute |
28b32b4f | 920 | opacity: 0.5 |
50aed5a1 BA |
921 | top: 0 |
922 | ||
311cba76 BA |
923 | .incheck-light |
924 | background-color: rgba(204, 51, 0, 0.7) !important | |
925 | .incheck-dark | |
926 | background-color: rgba(204, 51, 0, 0.9) !important | |
50aed5a1 | 927 | |
28b32b4f BA |
928 | // TODO: no predefined highlight colors, but layers. How? |
929 | ||
90df90bc BA |
930 | .hover-highlight:hover |
931 | // TODO: color dependant on board theme, or inner border... | |
00eef1ca | 932 | background-color: #C571E6 !important |
90df90bc | 933 | |
f63ba277 BA |
934 | .highlight |
935 | &.light-square | |
936 | &.lichess | |
937 | background-color: #cdd26a | |
938 | &.chesscom | |
939 | background-color: #f7f783 | |
940 | &.chesstempo | |
941 | background-color: #9f9fff | |
942 | &.orangecc | |
943 | background-color: #fef273 | |
944 | &.dark-square | |
945 | &.lichess | |
946 | background-color: #aaa23a | |
947 | &.chesscom | |
948 | background-color: #bacb44 | |
949 | &.chesstempo | |
950 | background-color: #557fff | |
951 | &.orangecc | |
952 | background-color: #e8c525 | |
953 | &.middle-square | |
954 | &.lichess | |
955 | background-color: #BCBA52 | |
956 | &.chesscom | |
957 | background-color: #D9E164 | |
958 | &.chesstempo | |
959 | background-color: #7A8FFF | |
960 | &.orangecc | |
961 | background-color: #F3DC4C | |
4473050c | 962 | </style> |