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