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