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