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