Add Rococo variant
[vchess.git] / client / src / components / Board.vue
CommitLineData
24340cae 1<script>
e2732923
BA
2import { getSquareId, getSquareFromId } from "@/utils/squareId";
3import { ArrayFun } from "@/utils/array";
dfeb96ea 4import { store } from "@/store";
cf2343ce 5export 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)
25 selectedPiece: null, //moving piece (or clicked piece)
28b32b4f 26 start: null, //pixels coordinates + id of starting square (click or drag)
49dad261
BA
27 startArrow: null,
28 movingArrow: { x: -1, y: -1 },
29 arrows: [], //object of {start: x,y / end: x,y}
30 circles: {}, //object of squares' ID --> true (TODO: use a set?)
28b32b4f 31 click: "",
3a2a7b5f 32 clickTime: 0,
6808d7a1 33 settings: store.state.settings
cf2343ce
BA
34 };
35 },
36 render(h) {
6808d7a1 37 if (!this.vr) {
7b3cf1b7 38 // Return empty div of class 'game' to avoid error when setting size
6808d7a1
BA
39 return h("div", {
40 class: {
41 game: true
42 }
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
cf2343ce 57 const lm = this.lastMove;
57eb158f
BA
58 const showLight = (
59 this.settings.highlight &&
60 ["all","highlight"].includes(V.ShowMoves)
61 );
d54f6261
BA
62 const showCheck = (
63 this.settings.highlight &&
64 ["all","highlight","byrow"].includes(V.ShowMoves)
65 );
311cba76
BA
66 const orientation = !V.CanFlip ? "w" : this.orientation;
67 // Ensure that squares colors do not change when board is flipped
68 const lightSquareMod = (sizeX + sizeY) % 2;
69 const showPiece = (x, y) => {
70 return (
71 this.vr.board[x][y] != V.EMPTY &&
72 (!this.vr.enlightened || this.analyze || this.score != "*" ||
73 (!!this.userColor && this.vr.enlightened[this.userColor][x][y]))
74 );
75 };
76 const inHighlight = (x, y) => {
77 return showLight && !!lm && (
78 (lm.end.x == x && lm.end.y == y) ||
79 (lm.start.x == x && lm.start.y == y));
80 };
81 const inShadow = (x, y) => {
82 return (
83 !this.analyze &&
84 this.score == "*" &&
85 this.vr.enlightened &&
86 (!this.userColor || !this.vr.enlightened[this.userColor][x][y])
87 );
88 };
89 // Create board element (+ reserves if needed by variant)
9d4a0218 90 let elementArray = [];
cf2343ce 91 const gameDiv = h(
6808d7a1 92 "div",
cf2343ce 93 {
6ec2feb2 94 "class": {
6808d7a1
BA
95 game: true,
96 clearer: true
97 }
cf2343ce
BA
98 },
99 [...Array(sizeX).keys()].map(i => {
311cba76 100 const ci = orientation == "w" ? i : sizeX - i - 1;
cf2343ce 101 return h(
6808d7a1 102 "div",
cf2343ce 103 {
6ec2feb2 104 "class": {
6808d7a1 105 row: true
cf2343ce 106 },
6808d7a1 107 style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
cf2343ce
BA
108 },
109 [...Array(sizeY).keys()].map(j => {
311cba76 110 const cj = orientation == "w" ? j : sizeY - j - 1;
49dad261 111 const squareId = "sq-" + ci + "-" + cj;
cf2343ce 112 let elems = [];
311cba76 113 if (showPiece(ci, cj)) {
cf2343ce 114 elems.push(
6808d7a1 115 h("img", {
6ec2feb2 116 "class": {
6808d7a1
BA
117 piece: true,
118 ghost:
119 !!this.selectedPiece &&
49dad261 120 this.selectedPiece.parentNode.id == squareId
6808d7a1
BA
121 },
122 attrs: {
123 src:
124 "/images/pieces/" +
3a2a7b5f
BA
125 this.vr.getPpath(
126 this.vr.board[ci][cj],
127 // Extra args useful for some variants:
128 this.userColor,
129 this.score,
130 this.orientation) +
14edde72 131 V.IMAGE_EXTENSION
cf2343ce 132 }
6808d7a1 133 })
cf2343ce
BA
134 );
135 }
6808d7a1 136 if (this.settings.hints && hintSquares[ci][cj]) {
cf2343ce 137 elems.push(
6808d7a1 138 h("img", {
6ec2feb2 139 "class": {
6808d7a1
BA
140 "mark-square": true
141 },
142 attrs: {
143 src: "/images/mark.svg"
cf2343ce 144 }
6808d7a1 145 })
cf2343ce
BA
146 );
147 }
49dad261
BA
148 if (!!this.circles[squareId]) {
149 elems.push(
150 h("img", {
151 "class": {
152 "circle-square": true
153 },
154 attrs: {
155 src: "/images/circle.svg"
156 }
157 })
158 );
159 }
311cba76 160 const lightSquare = (ci + cj) % 2 == lightSquareMod;
cf2343ce 161 return h(
6808d7a1 162 "div",
cf2343ce 163 {
6ec2feb2 164 "class": {
6808d7a1
BA
165 board: true,
166 ["board" + sizeY]: true,
311cba76
BA
167 "light-square": lightSquare,
168 "dark-square": !lightSquare,
dfeb96ea 169 [this.settings.bcolor]: true,
311cba76
BA
170 "in-shadow": inShadow(ci, cj),
171 "highlight-light": inHighlight(ci, cj) && lightSquare,
172 "highlight-dark": inHighlight(ci, cj) && !lightSquare,
2c5d7b20
BA
173 "incheck-light":
174 showCheck && lightSquare && incheckSq[ci][cj],
175 "incheck-dark":
176 showCheck && !lightSquare && incheckSq[ci][cj]
cf2343ce
BA
177 },
178 attrs: {
6808d7a1
BA
179 id: getSquareId({ x: ci, y: cj })
180 }
cf2343ce
BA
181 },
182 elems
183 );
184 })
185 );
24340cae 186 })
cf2343ce 187 );
9d4a0218
BA
188 if (!!this.vr.reserve) {
189 const playingColor = this.userColor || "w"; //default for an observer
6808d7a1 190 const shiftIdx = playingColor == "w" ? 0 : 1;
cf2343ce 191 let myReservePiecesArray = [];
6808d7a1 192 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
9d4a0218 193 const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]];
6808d7a1
BA
194 myReservePiecesArray.push(
195 h(
196 "div",
197 {
6ec2feb2 198 "class": { board: true, ["board" + sizeY]: true },
9d4a0218
BA
199 attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
200 style: { opacity: qty > 0 ? 1 : 0.35 }
6808d7a1
BA
201 },
202 [
203 h("img", {
6ec2feb2 204 "class": { piece: true, reserve: true },
6808d7a1
BA
205 attrs: {
206 src:
207 "/images/pieces/" +
241bf8f2 208 this.vr.getReservePpath(i, playingColor) +
6808d7a1
BA
209 ".svg"
210 }
211 }),
6ec2feb2 212 h("sup", { "class": { "reserve-count": true } }, [ qty ])
6808d7a1 213 ]
cf2343ce 214 )
6808d7a1 215 );
cf2343ce
BA
216 }
217 let oppReservePiecesArray = [];
93d1d7a7 218 const oppCol = V.GetOppCol(playingColor);
6808d7a1 219 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
9d4a0218 220 const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]];
6808d7a1
BA
221 oppReservePiecesArray.push(
222 h(
223 "div",
224 {
6ec2feb2 225 "class": { board: true, ["board" + sizeY]: true },
9d4a0218
BA
226 attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
227 style: { opacity: qty > 0 ? 1 : 0.35 }
6808d7a1
BA
228 },
229 [
230 h("img", {
6ec2feb2 231 "class": { piece: true, reserve: true },
6808d7a1
BA
232 attrs: {
233 src:
234 "/images/pieces/" +
241bf8f2 235 this.vr.getReservePpath(i, oppCol) +
6808d7a1
BA
236 ".svg"
237 }
238 }),
6ec2feb2 239 h("sup", { "class": { "reserve-count": true } }, [ qty ])
6808d7a1 240 ]
cf2343ce 241 )
6808d7a1 242 );
cf2343ce 243 }
9d4a0218
BA
244 const myReserveTop = (
245 (playingColor == 'w' && orientation == 'b') ||
246 (playingColor == 'b' && orientation == 'w')
cf2343ce 247 );
9d4a0218
BA
248 // Center reserves, assuming same number of pieces for each side:
249 const nbReservePieces = myReservePiecesArray.length;
250 const marginLeft = ((100 - nbReservePieces * (100 / sizeY)) / 2) + "%";
251 const reserveTop =
252 h(
253 "div",
254 {
6ec2feb2 255 "class": {
9d4a0218
BA
256 game: true,
257 "reserve-div": true
258 },
259 style: {
260 "margin-left": marginLeft
261 }
262 },
263 [
264 h(
265 "div",
266 {
6ec2feb2 267 "class": {
9d4a0218
BA
268 row: true,
269 "reserve-row": true
270 }
271 },
272 myReserveTop ? myReservePiecesArray : oppReservePiecesArray
273 )
274 ]
275 );
276 var reserveBottom =
277 h(
278 "div",
279 {
6ec2feb2 280 "class": {
9d4a0218
BA
281 game: true,
282 "reserve-div": true
283 },
284 style: {
285 "margin-left": marginLeft
286 }
287 },
288 [
289 h(
290 "div",
291 {
6ec2feb2 292 "class": {
9d4a0218
BA
293 row: true,
294 "reserve-row": true
295 }
296 },
297 myReserveTop ? oppReservePiecesArray : myReservePiecesArray
298 )
299 ]
300 );
301 elementArray.push(reserveTop);
cf2343ce 302 }
9d4a0218
BA
303 elementArray.push(gameDiv);
304 if (!!this.vr.reserve) elementArray.push(reserveBottom);
aafe9f16 305 const boardElt = document.querySelector(".game");
5f918a27 306 // boardElt might be undefine (at first drawing),
cd049aa1 307 // but it won't be used in this case.
5f918a27 308 const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42);
6808d7a1 309 if (this.choices.length > 0 && !!boardElt) {
afbf3ca7 310 // No choices to show at first drawing
aafe9f16 311 const offset = [boardElt.offsetTop, boardElt.offsetLeft];
14edde72
BA
312 const maxNbeltsPerRow = Math.min(this.choices.length, sizeY);
313 let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2;
314 let choicesHeight = squareWidth;
315 if (this.choices.length >= sizeY) {
316 // A second row is required (Eightpieces variant)
317 topOffset -= squareWidth / 2;
318 choicesHeight *= 2;
319 }
aafe9f16 320 const choices = h(
6808d7a1 321 "div",
aafe9f16 322 {
6808d7a1 323 attrs: { id: "choices" },
6ec2feb2 324 "class": { row: true },
aafe9f16 325 style: {
14edde72 326 top: topOffset + "px",
6808d7a1
BA
327 left:
328 offset[1] +
14edde72 329 (squareWidth * Math.max(sizeY - this.choices.length, 0)) / 2 +
6808d7a1 330 "px",
14edde72
BA
331 width: (maxNbeltsPerRow * squareWidth) + "px",
332 height: choicesHeight + "px"
6808d7a1 333 }
aafe9f16 334 },
14edde72
BA
335 [ h(
336 "div",
6ec2feb2
BA
337 {
338 "class": { "full-width": true }
339 },
14edde72
BA
340 this.choices.map(m => {
341 // A "choice" is a move
342 const applyMove = (e) => {
343 e.stopPropagation();
344 // Force a delay between move is shown and clicked
345 // (otherwise a "double-click" bug might occur)
346 if (Date.now() - this.clickTime < 200) return;
14edde72 347 this.choices = [];
78c23cd6 348 this.play(m);
14edde72
BA
349 };
350 const onClick =
351 this.mobileBrowser
352 ? { touchend: applyMove }
353 : { mouseup: applyMove };
354 return h(
355 "div",
356 {
6ec2feb2 357 "class": {
14edde72
BA
358 board: true,
359 ["board" + sizeY]: true
aafe9f16 360 },
14edde72
BA
361 style: {
362 width: (100 / maxNbeltsPerRow) + "%",
363 "padding-bottom": (100 / maxNbeltsPerRow) + "%"
364 }
365 },
366 [
367 h("img", {
368 attrs: {
369 src:
370 "/images/pieces/" +
c7550017
BA
371 // orientation: extra arg useful for some variants:
372 this.vr.getPPpath(m, this.orientation) +
14edde72
BA
373 V.IMAGE_EXTENSION
374 },
6ec2feb2 375 "class": { "choice-piece": true },
14edde72
BA
376 on: onClick
377 })
378 ]
379 );
380 })
381 ) ]
aafe9f16
BA
382 );
383 elementArray.unshift(choices);
384 }
49dad261
BA
385 if (
386 !this.mobileBrowser &&
387 (this.arrows.length > 0 || this.movingArrow.x >= 0)
388 ) {
389 let svgArrows = [];
cd049aa1 390 const arrowWidth = squareWidth / 4;
49dad261 391 this.arrows.forEach(a => {
cd049aa1 392 const endPoint = this.adjustEndArrow(a.start, a.end, squareWidth);
49dad261
BA
393 svgArrows.push(
394 h(
395 "path",
396 {
397 "class": { "svg-arrow": true },
398 attrs: {
399 d: (
400 "M" + a.start.x + "," + a.start.y + " " +
cd049aa1
BA
401 "L" + endPoint.x + "," + endPoint.y
402 ),
403 style: "stroke-width:" + arrowWidth + "px"
49dad261
BA
404 }
405 }
406 )
407 );
408 });
409 if (this.movingArrow.x >= 0) {
cd049aa1
BA
410 const endPoint =
411 this.adjustEndArrow(this.startArrow, this.movingArrow, squareWidth);
49dad261
BA
412 svgArrows.push(
413 h(
414 "path",
415 {
416 "class": { "svg-arrow": true },
417 attrs: {
418 d: (
419 "M" + this.startArrow.x + "," + this.startArrow.y + " " +
cd049aa1
BA
420 "L" + endPoint.x + "," + endPoint.y
421 ),
422 style: "stroke-width:" + arrowWidth + "px"
49dad261
BA
423 }
424 }
425 )
426 );
427 }
428 // Add SVG element for drawing arrows
429 elementArray.push(
430 h(
431 "svg",
432 {
433 attrs: {
434 id: "arrowCanvas",
435 stroke: "none"
436 }
437 },
438 [
439 h(
440 "defs",
441 {},
442 [
443 h(
444 "marker",
445 {
446 attrs: {
447 id: "arrow",
cd049aa1 448 markerWidth: (2 * arrowWidth) + "px",
5f918a27 449 markerHeight: (3 * arrowWidth) + "px",
cd049aa1 450 markerUnits: "userSpaceOnUse",
49dad261 451 refX: "0",
5f918a27 452 refY: (1.5 * arrowWidth) + "px",
49dad261
BA
453 orient: "auto"
454 }
455 },
456 [
457 h(
458 "path",
459 {
cd049aa1 460 "class": { "arrow-head": true },
49dad261 461 attrs: {
cd049aa1 462 d: (
5f918a27
BA
463 "M0,0 L0," + (3 * arrowWidth) + " L" +
464 (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
cd049aa1 465 )
49dad261
BA
466 }
467 }
468 )
469 ]
470 )
471 ]
472 )
473 ].concat(svgArrows)
474 )
475 );
476 }
4b26ecb8
BA
477 let onEvents = {};
478 // NOTE: click = mousedown + mouseup
cafe0166 479 if (this.mobileBrowser) {
4b26ecb8
BA
480 onEvents = {
481 on: {
482 touchstart: this.mousedown,
483 touchmove: this.mousemove,
6808d7a1
BA
484 touchend: this.mouseup
485 }
4b26ecb8 486 };
6808d7a1 487 } else {
4b26ecb8 488 onEvents = {
cf2343ce 489 on: {
65495c17
BA
490 mousedown: this.mousedown,
491 mousemove: this.mousemove,
49dad261
BA
492 mouseup: this.mouseup,
493 contextmenu: this.blockContextMenu
6808d7a1 494 }
4b26ecb8
BA
495 };
496 }
6808d7a1 497 return h("div", onEvents, elementArray);
cf2343ce
BA
498 },
499 methods: {
49dad261
BA
500 blockContextMenu: function(e) {
501 e.preventDefault();
502 e.stopPropagation();
503 return false;
504 },
505 cancelResetArrows: function() {
506 this.startArrow = null;
507 this.arrows = [];
508 this.circles = {};
509 },
cd049aa1
BA
510 adjustEndArrow: function(start, end, squareWidth) {
511 // Simple heuristic for now, just remove 1/3 square.
512 // TODO: should depend on the orientation.
513 const delta = [end.x - start.x, end.y - start.y];
514 const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
515 const fracSqWidth = squareWidth / 3;
516 return {
517 x: end.x - delta[0] * fracSqWidth / dist,
518 y: end.y - delta[1] * fracSqWidth / dist
519 };
520 },
cf2343ce 521 mousedown: function(e) {
28b32b4f 522 e.preventDefault();
1ef65040 523 if (!this.mobileBrowser && e.which != 3)
49dad261
BA
524 // Cancel current drawing and circles, if any
525 this.cancelResetArrows();
1ef65040 526 if (this.mobileBrowser || e.which == 1) {
49dad261
BA
527 // Mouse left button
528 if (!this.start) {
529 // NOTE: classList[0] is enough: 'piece' is the first assigned class
530 const withPiece = (e.target.classList[0] == "piece");
531 // Emit the click event which could be used by some variants
532 this.$emit(
533 "click-square",
534 getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id)
535 );
536 // Start square must contain a piece.
537 if (!withPiece) return;
538 let parent = e.target.parentNode; //surrounding square
539 // Show possible moves if current player allowed to play
540 const startSquare = getSquareFromId(parent.id);
541 this.possibleMoves = [];
542 const color = this.analyze ? this.vr.turn : this.userColor;
543 if (this.vr.canIplay(color, startSquare))
544 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
545 // For potential drag'n drop, remember start coordinates
546 // (to center the piece on mouse cursor)
547 const rect = parent.getBoundingClientRect();
548 this.start = {
549 x: rect.x + rect.width / 2,
550 y: rect.y + rect.width / 2,
551 id: parent.id
552 };
553 // Add the moving piece to the board, just after current image
554 this.selectedPiece = e.target.cloneNode();
555 Object.assign(
556 this.selectedPiece.style,
557 {
558 position: "absolute",
559 top: 0,
560 display: "inline-block",
561 zIndex: 3000
562 }
563 );
564 parent.insertBefore(this.selectedPiece, e.target.nextSibling);
565 } else {
566 this.processMoveAttempt(e);
567 }
1ef65040
BA
568 } else if (e.which == 3) {
569 // Mouse right button
49dad261
BA
570 let elem = e.target;
571 // Next loop because of potential marks
572 while (elem.tagName == "IMG") elem = elem.parentNode;
573 // To center the arrow in square:
574 const rect = elem.getBoundingClientRect();
575 this.startArrow = {
28b32b4f
BA
576 x: rect.x + rect.width / 2,
577 y: rect.y + rect.width / 2,
49dad261 578 id: elem.id
28b32b4f 579 };
49dad261
BA
580 }
581 },
582 mousemove: function(e) {
583 if (!this.selectedPiece && !this.startArrow) return;
584 e.preventDefault();
585 if (!!this.selectedPiece) {
586 // There is an active element: move it around
587 const [offsetX, offsetY] =
588 this.mobileBrowser
589 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
590 : [e.clientX, e.clientY];
28b32b4f
BA
591 Object.assign(
592 this.selectedPiece.style,
593 {
49dad261
BA
594 left: offsetX - this.start.x + "px",
595 top: offsetY - this.start.y + "px"
28b32b4f
BA
596 }
597 );
28b32b4f 598 }
49dad261
BA
599 else {
600 let elem = e.target;
601 // Next loop because of potential marks
602 while (elem.tagName == "IMG") elem = elem.parentNode;
603 // To center the arrow in square:
604 if (elem.id != this.startArrow.id) {
605 const rect = elem.getBoundingClientRect();
606 this.movingArrow = {
607 x: rect.x + rect.width / 2,
608 y: rect.y + rect.width / 2
609 };
28b32b4f 610 }
49dad261 611 }
cf2343ce
BA
612 },
613 mouseup: function(e) {
28b32b4f 614 e.preventDefault();
1ef65040 615 if (this.mobileBrowser || e.which == 1) {
49dad261
BA
616 if (!this.selectedPiece) return;
617 // Drag'n drop. Selected piece is no longer needed:
618 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
619 delete this.selectedPiece;
620 this.selectedPiece = null;
621 this.processMoveAttempt(e);
1ef65040
BA
622 } else if (e.which == 3) {
623 // Mouse right button
49dad261
BA
624 this.movingArrow = { x: -1, y: -1 };
625 this.processArrowAttempt(e);
626 }
28b32b4f
BA
627 },
628 processMoveAttempt: function(e) {
629 // Obtain the move from start and end squares
cafe0166
BA
630 const [offsetX, offsetY] =
631 this.mobileBrowser
632 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
633 : [e.clientX, e.clientY];
cf2343ce 634 let landing = document.elementFromPoint(offsetX, offsetY);
cf2343ce 635 // Next condition: classList.contains(piece) fails because of marks
6808d7a1 636 while (landing.tagName == "IMG") landing = landing.parentNode;
28b32b4f
BA
637 if (this.start.id == landing.id) {
638 if (this.click == landing.id) {
639 // Second click on same square: cancel current move
640 this.possibleMoves = [];
641 this.start = null;
642 this.click = "";
643 } else this.click = landing.id;
cf2343ce 644 return;
28b32b4f
BA
645 }
646 this.start = null;
bd76b456 647 // OK: process move attempt, landing is a square node
cf2343ce
BA
648 let endSquare = getSquareFromId(landing.id);
649 let moves = this.findMatchingMoves(endSquare);
650 this.possibleMoves = [];
3a2a7b5f
BA
651 if (moves.length > 1) {
652 this.clickTime = Date.now();
653 this.choices = moves;
654 } else if (moves.length == 1) this.play(moves[0]);
28b32b4f 655 // else: forbidden move attempt
cf2343ce 656 },
49dad261
BA
657 processArrowAttempt: function(e) {
658 // Obtain the arrow from start and end squares
659 const [offsetX, offsetY] = [e.clientX, e.clientY];
660 let landing = document.elementFromPoint(offsetX, offsetY);
661 // Next condition: classList.contains(piece) fails because of marks
662 while (landing.tagName == "IMG") landing = landing.parentNode;
663 if (this.startArrow.id == landing.id)
664 // Draw (or erase) a circle
665 this.$set(this.circles, landing.id, !this.circles[landing.id]);
666 else {
667 // OK: add arrow, landing is a new square
668 const rect = landing.getBoundingClientRect();
669 this.arrows.push({
670 start: {
671 x: this.startArrow.x,
672 y: this.startArrow.y
673 },
674 end: {
675 x: rect.x + rect.width / 2,
676 y: rect.y + rect.width / 2
677 }
678 });
679 }
680 this.startArrow = null;
681 },
cf2343ce
BA
682 findMatchingMoves: function(endSquare) {
683 // Run through moves list and return the matching set (if promotions...)
28b32b4f
BA
684 return (
685 this.possibleMoves.filter(m => {
686 return (endSquare[0] == m.end.x && endSquare[1] == m.end.y);
687 })
688 );
cf2343ce
BA
689 },
690 play: function(move) {
6808d7a1
BA
691 this.$emit("play-move", move);
692 }
693 }
cf2343ce
BA
694};
695</script>
4473050c 696
41c80bb6 697<style lang="sass" scoped>
6ec2feb2 698// NOTE: no variants with reserve of size != 8
50aed5a1
BA
699.game.reserve-div
700 margin-bottom: 18px
50aed5a1
BA
701.reserve-count
702 padding-left: 40%
9d4a0218 703.reserve-row
50aed5a1
BA
704 margin-bottom: 15px
705
6ec2feb2
BA
706.full-width
707 width: 100%
41cb9b94 708
50aed5a1 709.game
28b32b4f 710 user-select: none
cf94b843
BA
711 width: 100%
712 margin: 0
50aed5a1
BA
713 .board
714 cursor: pointer
50aed5a1
BA
715
716#choices
28b32b4f 717 user-select: none
168a5e4c
BA
718 margin: 0
719 position: absolute
50aed5a1
BA
720 z-index: 300
721 overflow-y: inherit
722 background-color: rgba(0,0,0,0)
723 img
724 cursor: pointer
725 background-color: #e6ee9c
726 &:hover
727 background-color: skyblue
728 &.choice-piece
729 width: 100%
730 height: auto
731 display: block
732
50aed5a1
BA
733img.ghost
734 position: absolute
28b32b4f 735 opacity: 0.5
50aed5a1
BA
736 top: 0
737
49dad261
BA
738#arrowCanvas
739 pointer-events: none
740 position: absolute
741 top: 0
742 left: 0
743 width: 100%
744 height: 100%
745
746.svg-arrow
747 opacity: 0.65
748 stroke: #5f0e78
49dad261
BA
749 fill: none
750 marker-end: url(#arrow)
751
cd049aa1
BA
752.arrow-head
753 fill: #5f0e78
754
311cba76
BA
755.incheck-light
756 background-color: rgba(204, 51, 0, 0.7) !important
757.incheck-dark
758 background-color: rgba(204, 51, 0, 0.9) !important
50aed5a1
BA
759
760.light-square.lichess
761 background-color: #f0d9b5;
762.dark-square.lichess
763 background-color: #b58863;
764
765.light-square.chesscom
766 background-color: #e5e5ca;
767.dark-square.chesscom
768 background-color: #6f8f57;
769
770.light-square.chesstempo
28b32b4f 771 background-color: #dfdfdf;
50aed5a1 772.dark-square.chesstempo
28b32b4f
BA
773 background-color: #7287b6;
774
775// TODO: no predefined highlight colors, but layers. How?
776
777.light-square.lichess.highlight-light
b0a0468a 778 background-color: #cdd26a
28b32b4f 779.dark-square.lichess.highlight-dark
b0a0468a 780 background-color: #aaa23a
28b32b4f
BA
781
782.light-square.chesscom.highlight-light
b0a0468a 783 background-color: #f7f783
28b32b4f 784.dark-square.chesscom.highlight-dark
b0a0468a 785 background-color: #bacb44
28b32b4f
BA
786
787.light-square.chesstempo.highlight-light
b0a0468a 788 background-color: #9f9fff
28b32b4f 789.dark-square.chesstempo.highlight-dark
b0a0468a 790 background-color: #557fff
28b32b4f 791
4473050c 792</style>