Attempt to fix promotions on mobile browsers
[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 to highlight squares
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 selectedPiece: null, //moving piece (or clicked piece)
26 start: null, //pixels coordinates + id of starting square (click or drag)
27 click: "",
28 settings: store.state.settings
29 };
30 },
31 render(h) {
32 if (!this.vr) {
33 // Return empty div of class 'game' to avoid error when setting size
34 return h("div", {
35 class: {
36 game: true
37 }
38 });
39 }
40 const [sizeX, sizeY] = [V.size.x, V.size.y];
41 // Precompute hints squares to facilitate rendering
42 let hintSquares = ArrayFun.init(sizeX, sizeY, false);
43 this.possibleMoves.forEach(m => {
44 hintSquares[m.end.x][m.end.y] = true;
45 });
46 // Also precompute in-check squares
47 let incheckSq = ArrayFun.init(sizeX, sizeY, false);
48 this.incheck.forEach(sq => {
49 incheckSq[sq[0]][sq[1]] = true;
50 });
51
52 const lm = this.lastMove;
53 const showLight = (
54 this.settings.highlight &&
55 ["all","highlight"].includes(V.ShowMoves)
56 );
57 const orientation = !V.CanFlip ? "w" : this.orientation;
58 // Ensure that squares colors do not change when board is flipped
59 const lightSquareMod = (sizeX + sizeY) % 2;
60 const showPiece = (x, y) => {
61 return (
62 this.vr.board[x][y] != V.EMPTY &&
63 (!this.vr.enlightened || this.analyze || this.score != "*" ||
64 (!!this.userColor && this.vr.enlightened[this.userColor][x][y]))
65 );
66 };
67 const inHighlight = (x, y) => {
68 return showLight && !!lm && (
69 (lm.end.x == x && lm.end.y == y) ||
70 (lm.start.x == x && lm.start.y == y));
71 };
72 const inShadow = (x, y) => {
73 return (
74 !this.analyze &&
75 this.score == "*" &&
76 this.vr.enlightened &&
77 (!this.userColor || !this.vr.enlightened[this.userColor][x][y])
78 );
79 };
80 // Create board element (+ reserves if needed by variant)
81 let elementArray = [];
82 const gameDiv = h(
83 "div",
84 {
85 class: {
86 game: true,
87 clearer: true
88 }
89 },
90 [...Array(sizeX).keys()].map(i => {
91 const ci = orientation == "w" ? i : sizeX - i - 1;
92 return h(
93 "div",
94 {
95 class: {
96 row: true
97 },
98 style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
99 },
100 [...Array(sizeY).keys()].map(j => {
101 const cj = orientation == "w" ? j : sizeY - j - 1;
102 let elems = [];
103 if (showPiece(ci, cj)) {
104 elems.push(
105 h("img", {
106 class: {
107 piece: true,
108 ghost:
109 !!this.selectedPiece &&
110 this.selectedPiece.parentNode.id == "sq-" + ci + "-" + cj
111 },
112 attrs: {
113 src:
114 "/images/pieces/" +
115 this.vr.getPpath(this.vr.board[ci][cj], this.userColor, this.score) +
116 ".svg"
117 }
118 })
119 );
120 }
121 if (this.settings.hints && hintSquares[ci][cj]) {
122 elems.push(
123 h("img", {
124 class: {
125 "mark-square": true
126 },
127 attrs: {
128 src: "/images/mark.svg"
129 }
130 })
131 );
132 }
133 const lightSquare = (ci + cj) % 2 == lightSquareMod;
134 return h(
135 "div",
136 {
137 class: {
138 board: true,
139 ["board" + sizeY]: true,
140 "light-square": lightSquare,
141 "dark-square": !lightSquare,
142 [this.settings.bcolor]: true,
143 "in-shadow": inShadow(ci, cj),
144 "highlight-light": inHighlight(ci, cj) && lightSquare,
145 "highlight-dark": inHighlight(ci, cj) && !lightSquare,
146 "incheck-light": showLight && lightSquare && incheckSq[ci][cj],
147 "incheck-dark": showLight && !lightSquare && incheckSq[ci][cj]
148 },
149 attrs: {
150 id: getSquareId({ x: ci, y: cj })
151 }
152 },
153 elems
154 );
155 })
156 );
157 })
158 );
159 if (!!this.vr.reserve) {
160 const playingColor = this.userColor || "w"; //default for an observer
161 const shiftIdx = playingColor == "w" ? 0 : 1;
162 let myReservePiecesArray = [];
163 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
164 const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]];
165 myReservePiecesArray.push(
166 h(
167 "div",
168 {
169 class: { board: true, ["board" + sizeY]: true },
170 attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
171 style: { opacity: qty > 0 ? 1 : 0.35 }
172 },
173 [
174 h("img", {
175 class: { piece: true, reserve: true },
176 attrs: {
177 src:
178 "/images/pieces/" +
179 this.vr.getReservePpath(i, playingColor) +
180 ".svg"
181 }
182 }),
183 h("sup", { class: { "reserve-count": true } }, [ qty ])
184 ]
185 )
186 );
187 }
188 let oppReservePiecesArray = [];
189 const oppCol = V.GetOppCol(playingColor);
190 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
191 const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]];
192 oppReservePiecesArray.push(
193 h(
194 "div",
195 {
196 class: { board: true, ["board" + sizeY]: true },
197 attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
198 style: { opacity: qty > 0 ? 1 : 0.35 }
199 },
200 [
201 h("img", {
202 class: { piece: true, reserve: true },
203 attrs: {
204 src:
205 "/images/pieces/" +
206 this.vr.getReservePpath(i, oppCol) +
207 ".svg"
208 }
209 }),
210 h("sup", { class: { "reserve-count": true } }, [ qty ])
211 ]
212 )
213 );
214 }
215 const myReserveTop = (
216 (playingColor == 'w' && orientation == 'b') ||
217 (playingColor == 'b' && orientation == 'w')
218 );
219 // Center reserves, assuming same number of pieces for each side:
220 const nbReservePieces = myReservePiecesArray.length;
221 const marginLeft = ((100 - nbReservePieces * (100 / sizeY)) / 2) + "%";
222 const reserveTop =
223 h(
224 "div",
225 {
226 class: {
227 game: true,
228 "reserve-div": true
229 },
230 style: {
231 "margin-left": marginLeft
232 }
233 },
234 [
235 h(
236 "div",
237 {
238 class: {
239 row: true,
240 "reserve-row": true
241 }
242 },
243 myReserveTop ? myReservePiecesArray : oppReservePiecesArray
244 )
245 ]
246 );
247 var reserveBottom =
248 h(
249 "div",
250 {
251 class: {
252 game: true,
253 "reserve-div": true
254 },
255 style: {
256 "margin-left": marginLeft
257 }
258 },
259 [
260 h(
261 "div",
262 {
263 class: {
264 row: true,
265 "reserve-row": true
266 }
267 },
268 myReserveTop ? oppReservePiecesArray : myReservePiecesArray
269 )
270 ]
271 );
272 elementArray.push(reserveTop);
273 }
274 elementArray.push(gameDiv);
275 if (!!this.vr.reserve) elementArray.push(reserveBottom);
276 const boardElt = document.querySelector(".game");
277 if (this.choices.length > 0 && !!boardElt) {
278 //no choices to show at first drawing
279 const squareWidth = boardElt.offsetWidth / sizeY;
280 const offset = [boardElt.offsetTop, boardElt.offsetLeft];
281 const choices = h(
282 "div",
283 {
284 attrs: { id: "choices" },
285 class: { row: true },
286 style: {
287 top: offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2 + "px",
288 left:
289 offset[1] +
290 (squareWidth * (sizeY - this.choices.length)) / 2 +
291 "px",
292 width: this.choices.length * squareWidth + "px",
293 height: squareWidth + "px"
294 }
295 },
296 this.choices.map(m => {
297 // A "choice" is a move
298 const applyMove = (e) => {
299 e.stopPropagation();
300 this.play(m);
301 this.choices = [];
302 };
303 const onClick =
304 this.mobileBrowser
305 ? { touchend: applyMove }
306 : { mouseup: applyMove };
307 return h(
308 "div",
309 {
310 class: {
311 board: true,
312 ["board" + sizeY]: true
313 },
314 style: {
315 width: 100 / this.choices.length + "%",
316 "padding-bottom": 100 / this.choices.length + "%"
317 }
318 },
319 [
320 h("img", {
321 attrs: {
322 src:
323 "/images/pieces/" +
324 this.vr.getPpath(m.appear[0].c + m.appear[0].p) +
325 ".svg"
326 },
327 class: { "choice-piece": true },
328 on: onClick
329 })
330 ]
331 );
332 })
333 );
334 elementArray.unshift(choices);
335 }
336 let onEvents = {};
337 // NOTE: click = mousedown + mouseup
338 if (this.mobileBrowser) {
339 onEvents = {
340 on: {
341 touchstart: this.mousedown,
342 touchmove: this.mousemove,
343 touchend: this.mouseup
344 }
345 };
346 } else {
347 onEvents = {
348 on: {
349 mousedown: this.mousedown,
350 mousemove: this.mousemove,
351 mouseup: this.mouseup
352 }
353 };
354 }
355 return h("div", onEvents, elementArray);
356 },
357 methods: {
358 mousedown: function(e) {
359 e.preventDefault();
360 if (!this.start) {
361 // Start square must contain a piece.
362 // NOTE: classList[0] is enough: 'piece' is the first assigned class
363 if (e.target.classList[0] != "piece") return;
364 let parent = e.target.parentNode; //surrounding square
365 // Show possible moves if current player allowed to play
366 const startSquare = getSquareFromId(parent.id);
367 this.possibleMoves = [];
368 const color = this.analyze ? this.vr.turn : this.userColor;
369 if (this.vr.canIplay(color, startSquare))
370 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
371 // For potential drag'n drop, remember start coordinates
372 // (to center the piece on mouse cursor)
373 let rect = parent.getBoundingClientRect();
374 this.start = {
375 x: rect.x + rect.width / 2,
376 y: rect.y + rect.width / 2,
377 id: parent.id
378 };
379 // Add the moving piece to the board, just after current image
380 this.selectedPiece = e.target.cloneNode();
381 Object.assign(
382 this.selectedPiece.style,
383 {
384 position: "absolute",
385 top: 0,
386 display: "inline-block",
387 zIndex: 3000
388 }
389 );
390 parent.insertBefore(this.selectedPiece, e.target.nextSibling);
391 } else {
392 this.processMoveAttempt(e);
393 }
394 },
395 mousemove: function(e) {
396 if (!this.selectedPiece) return;
397 e.preventDefault();
398 // There is an active element: move it around
399 const [offsetX, offsetY] =
400 this.mobileBrowser
401 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
402 : [e.clientX, e.clientY];
403 Object.assign(
404 this.selectedPiece.style,
405 {
406 left: offsetX - this.start.x + "px",
407 top: offsetY - this.start.y + "px"
408 }
409 );
410 },
411 mouseup: function(e) {
412 if (!this.selectedPiece) return;
413 e.preventDefault();
414 // Drag'n drop. Selected piece is no longer needed:
415 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
416 delete this.selectedPiece;
417 this.selectedPiece = null;
418 this.processMoveAttempt(e);
419 },
420 processMoveAttempt: function(e) {
421 // Obtain the move from start and end squares
422 const [offsetX, offsetY] =
423 this.mobileBrowser
424 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
425 : [e.clientX, e.clientY];
426 let landing = document.elementFromPoint(offsetX, offsetY);
427 // Next condition: classList.contains(piece) fails because of marks
428 while (landing.tagName == "IMG") landing = landing.parentNode;
429 if (this.start.id == landing.id) {
430 if (this.click == landing.id) {
431 // Second click on same square: cancel current move
432 this.possibleMoves = [];
433 this.start = null;
434 this.click = "";
435 } else this.click = landing.id;
436 return;
437 }
438 this.start = null;
439 // OK: process move attempt, landing is a square node
440 let endSquare = getSquareFromId(landing.id);
441 let moves = this.findMatchingMoves(endSquare);
442 this.possibleMoves = [];
443 if (moves.length > 1) this.choices = moves;
444 else if (moves.length == 1) this.play(moves[0]);
445 // else: forbidden move attempt
446 },
447 findMatchingMoves: function(endSquare) {
448 // Run through moves list and return the matching set (if promotions...)
449 return (
450 this.possibleMoves.filter(m => {
451 return (endSquare[0] == m.end.x && endSquare[1] == m.end.y);
452 })
453 );
454 },
455 play: function(move) {
456 this.$emit("play-move", move);
457 }
458 }
459 };
460 </script>
461
462 <style lang="sass" scoped>
463 .game.reserve-div
464 margin-bottom: 18px
465
466 .reserve-count
467 padding-left: 40%
468
469 .reserve-row
470 margin-bottom: 15px
471
472 // NOTE: no variants with reserve of size != 8
473
474 .game
475 user-select: none
476 width: 100%
477 margin: 0
478 .board
479 cursor: pointer
480
481 #choices
482 user-select: none
483 margin: 0
484 position: absolute
485 z-index: 300
486 overflow-y: inherit
487 background-color: rgba(0,0,0,0)
488 img
489 cursor: pointer
490 background-color: #e6ee9c
491 &:hover
492 background-color: skyblue
493 &.choice-piece
494 width: 100%
495 height: auto
496 display: block
497
498 img.ghost
499 position: absolute
500 opacity: 0.5
501 top: 0
502
503 .incheck-light
504 background-color: rgba(204, 51, 0, 0.7) !important
505 .incheck-dark
506 background-color: rgba(204, 51, 0, 0.9) !important
507
508 .light-square.lichess
509 background-color: #f0d9b5;
510 .dark-square.lichess
511 background-color: #b58863;
512
513 .light-square.chesscom
514 background-color: #e5e5ca;
515 .dark-square.chesscom
516 background-color: #6f8f57;
517
518 .light-square.chesstempo
519 background-color: #dfdfdf;
520 .dark-square.chesstempo
521 background-color: #7287b6;
522
523 // TODO: no predefined highlight colors, but layers. How?
524
525 .light-square.lichess.highlight-light
526 background-color: #cdd26a !important
527 .dark-square.lichess.highlight-dark
528 background-color: #aaa23a !important
529
530 .light-square.chesscom.highlight-light
531 background-color: #f7f783 !important
532 .dark-square.chesscom.highlight-dark
533 background-color: #bacb44 !important
534
535 .light-square.chesstempo.highlight-light
536 background-color: #9f9fff !important
537 .dark-square.chesstempo.highlight-dark
538 background-color: #557fff !important
539
540 </style>