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