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