MyGames page is now dynamic (experimental, not much tested)
[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)
cf2343ce 26 start: {}, //pixels coordinates + id of starting square (click or drag)
6808d7a1 27 settings: store.state.settings
cf2343ce
BA
28 };
29 },
30 render(h) {
6808d7a1 31 if (!this.vr) {
7b3cf1b7 32 // Return empty div of class 'game' to avoid error when setting size
6808d7a1
BA
33 return h("div", {
34 class: {
35 game: true
36 }
37 });
7b3cf1b7 38 }
6808d7a1 39 const [sizeX, sizeY] = [V.size.x, V.size.y];
cf2343ce 40 // Precompute hints squares to facilitate rendering
e2732923 41 let hintSquares = ArrayFun.init(sizeX, sizeY, false);
6808d7a1
BA
42 this.possibleMoves.forEach(m => {
43 hintSquares[m.end.x][m.end.y] = true;
44 });
cf2343ce 45 // Also precompute in-check squares
e2732923 46 let incheckSq = ArrayFun.init(sizeX, sizeY, false);
6808d7a1
BA
47 this.incheck.forEach(sq => {
48 incheckSq[sq[0]][sq[1]] = true;
49 });
06e79b07 50
cf2343ce 51 const lm = this.lastMove;
57eb158f
BA
52 const showLight = (
53 this.settings.highlight &&
54 ["all","highlight"].includes(V.ShowMoves)
55 );
311cba76
BA
56 const orientation = !V.CanFlip ? "w" : this.orientation;
57 // Ensure that squares colors do not change when board is flipped
58 const lightSquareMod = (sizeX + sizeY) % 2;
59 const showPiece = (x, y) => {
60 return (
61 this.vr.board[x][y] != V.EMPTY &&
62 (!this.vr.enlightened || this.analyze || this.score != "*" ||
63 (!!this.userColor && this.vr.enlightened[this.userColor][x][y]))
64 );
65 };
66 const inHighlight = (x, y) => {
67 return showLight && !!lm && (
68 (lm.end.x == x && lm.end.y == y) ||
69 (lm.start.x == x && lm.start.y == y));
70 };
71 const inShadow = (x, y) => {
72 return (
73 !this.analyze &&
74 this.score == "*" &&
75 this.vr.enlightened &&
76 (!this.userColor || !this.vr.enlightened[this.userColor][x][y])
77 );
78 };
79 // Create board element (+ reserves if needed by variant)
cf2343ce 80 const gameDiv = h(
6808d7a1 81 "div",
cf2343ce 82 {
6808d7a1
BA
83 class: {
84 game: true,
85 clearer: true
86 }
cf2343ce
BA
87 },
88 [...Array(sizeX).keys()].map(i => {
311cba76 89 const ci = orientation == "w" ? i : sizeX - i - 1;
cf2343ce 90 return h(
6808d7a1 91 "div",
cf2343ce 92 {
6808d7a1
BA
93 class: {
94 row: true
cf2343ce 95 },
6808d7a1 96 style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
cf2343ce
BA
97 },
98 [...Array(sizeY).keys()].map(j => {
311cba76 99 const cj = orientation == "w" ? j : sizeY - j - 1;
cf2343ce 100 let elems = [];
311cba76 101 if (showPiece(ci, cj)) {
cf2343ce 102 elems.push(
6808d7a1
BA
103 h("img", {
104 class: {
105 piece: true,
106 ghost:
107 !!this.selectedPiece &&
108 this.selectedPiece.parentNode.id == "sq-" + ci + "-" + cj
109 },
110 attrs: {
111 src:
112 "/images/pieces/" +
241bf8f2 113 this.vr.getPpath(this.vr.board[ci][cj], this.userColor, this.score) +
6808d7a1 114 ".svg"
cf2343ce 115 }
6808d7a1 116 })
cf2343ce
BA
117 );
118 }
6808d7a1 119 if (this.settings.hints && hintSquares[ci][cj]) {
cf2343ce 120 elems.push(
6808d7a1
BA
121 h("img", {
122 class: {
123 "mark-square": true
124 },
125 attrs: {
126 src: "/images/mark.svg"
cf2343ce 127 }
6808d7a1 128 })
cf2343ce
BA
129 );
130 }
311cba76 131 const lightSquare = (ci + cj) % 2 == lightSquareMod;
cf2343ce 132 return h(
6808d7a1 133 "div",
cf2343ce 134 {
6808d7a1
BA
135 class: {
136 board: true,
137 ["board" + sizeY]: true,
311cba76
BA
138 "light-square": lightSquare,
139 "dark-square": !lightSquare,
dfeb96ea 140 [this.settings.bcolor]: true,
311cba76
BA
141 "in-shadow": inShadow(ci, cj),
142 "highlight-light": inHighlight(ci, cj) && lightSquare,
143 "highlight-dark": inHighlight(ci, cj) && !lightSquare,
144 "incheck-light": showLight && lightSquare && incheckSq[ci][cj],
145 "incheck-dark": showLight && !lightSquare && incheckSq[ci][cj]
cf2343ce
BA
146 },
147 attrs: {
6808d7a1
BA
148 id: getSquareId({ x: ci, y: cj })
149 }
cf2343ce
BA
150 },
151 elems
152 );
153 })
154 );
24340cae 155 })
cf2343ce 156 );
945a6165 157 let elementArray = [gameDiv];
aafe9f16 158 const playingColor = this.userColor || "w"; //default for an observer
6808d7a1
BA
159 if (this.vr.reserve) {
160 const shiftIdx = playingColor == "w" ? 0 : 1;
cf2343ce 161 let myReservePiecesArray = [];
6808d7a1
BA
162 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
163 myReservePiecesArray.push(
164 h(
165 "div",
166 {
167 class: { board: true, ["board" + sizeY]: true },
168 attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) }
169 },
170 [
171 h("img", {
172 class: { piece: true, reserve: true },
173 attrs: {
174 src:
175 "/images/pieces/" +
241bf8f2 176 this.vr.getReservePpath(i, playingColor) +
6808d7a1
BA
177 ".svg"
178 }
179 }),
180 h("sup", { class: { "reserve-count": true } }, [
181 this.vr.reserve[playingColor][V.RESERVE_PIECES[i]]
182 ])
183 ]
cf2343ce 184 )
6808d7a1 185 );
cf2343ce
BA
186 }
187 let oppReservePiecesArray = [];
93d1d7a7 188 const oppCol = V.GetOppCol(playingColor);
6808d7a1
BA
189 for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
190 oppReservePiecesArray.push(
191 h(
192 "div",
193 {
194 class: { board: true, ["board" + sizeY]: true },
195 attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) }
196 },
197 [
198 h("img", {
199 class: { piece: true, reserve: true },
200 attrs: {
201 src:
202 "/images/pieces/" +
241bf8f2 203 this.vr.getReservePpath(i, oppCol) +
6808d7a1
BA
204 ".svg"
205 }
206 }),
207 h("sup", { class: { "reserve-count": true } }, [
208 this.vr.reserve[oppCol][V.RESERVE_PIECES[i]]
209 ])
210 ]
cf2343ce 211 )
6808d7a1 212 );
cf2343ce 213 }
6808d7a1
BA
214 let reserves = h(
215 "div",
cf2343ce 216 {
6808d7a1
BA
217 class: {
218 game: true,
219 "reserve-div": true
220 }
cf2343ce
BA
221 },
222 [
6808d7a1
BA
223 h(
224 "div",
cf2343ce 225 {
6808d7a1
BA
226 class: {
227 row: true,
228 "reserve-row-1": true
229 }
cf2343ce
BA
230 },
231 myReservePiecesArray
232 ),
6808d7a1 233 h("div", { class: { row: true } }, oppReservePiecesArray)
cf2343ce
BA
234 ]
235 );
236 elementArray.push(reserves);
237 }
aafe9f16 238 const boardElt = document.querySelector(".game");
6808d7a1
BA
239 if (this.choices.length > 0 && !!boardElt) {
240 //no choices to show at first drawing
aafe9f16
BA
241 const squareWidth = boardElt.offsetWidth / sizeY;
242 const offset = [boardElt.offsetTop, boardElt.offsetLeft];
243 const choices = h(
6808d7a1 244 "div",
aafe9f16 245 {
6808d7a1
BA
246 attrs: { id: "choices" },
247 class: { row: true },
aafe9f16 248 style: {
6808d7a1
BA
249 top: offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2 + "px",
250 left:
251 offset[1] +
252 (squareWidth * (sizeY - this.choices.length)) / 2 +
253 "px",
254 width: this.choices.length * squareWidth + "px",
255 height: squareWidth + "px"
256 }
aafe9f16 257 },
6808d7a1
BA
258 this.choices.map(m => {
259 //a "choice" is a move
260 return h(
261 "div",
aafe9f16 262 {
6808d7a1
BA
263 class: {
264 board: true,
265 ["board" + sizeY]: true
aafe9f16
BA
266 },
267 style: {
6808d7a1
BA
268 width: 100 / this.choices.length + "%",
269 "padding-bottom": 100 / this.choices.length + "%"
270 }
aafe9f16 271 },
6808d7a1
BA
272 [
273 h("img", {
274 attrs: {
275 src:
276 "/images/pieces/" +
241bf8f2 277 this.vr.getPpath(m.appear[0].c + m.appear[0].p) +
6808d7a1 278 ".svg"
aafe9f16 279 },
6808d7a1
BA
280 class: { "choice-piece": true },
281 on: {
282 click: () => {
283 this.play(m);
284 this.choices = [];
285 }
286 }
aafe9f16
BA
287 })
288 ]
289 );
290 })
291 );
292 elementArray.unshift(choices);
293 }
4b26ecb8
BA
294 let onEvents = {};
295 // NOTE: click = mousedown + mouseup
cafe0166 296 if (this.mobileBrowser) {
4b26ecb8
BA
297 onEvents = {
298 on: {
299 touchstart: this.mousedown,
300 touchmove: this.mousemove,
6808d7a1
BA
301 touchend: this.mouseup
302 }
4b26ecb8 303 };
6808d7a1 304 } else {
4b26ecb8 305 onEvents = {
cf2343ce 306 on: {
65495c17
BA
307 mousedown: this.mousedown,
308 mousemove: this.mousemove,
6808d7a1
BA
309 mouseup: this.mouseup
310 }
4b26ecb8
BA
311 };
312 }
6808d7a1 313 return h("div", onEvents, elementArray);
cf2343ce
BA
314 },
315 methods: {
316 mousedown: function(e) {
aafe9f16
BA
317 // Abort if a piece is already being processed, or target is not a piece.
318 // NOTE: just looking at classList[0] because piece is the first assigned class
6808d7a1 319 if (!!this.selectedPiece || e.target.classList[0] != "piece") return;
cf2343ce 320 e.preventDefault(); //disable native drag & drop
aafe9f16
BA
321 let parent = e.target.parentNode; //the surrounding square
322 // Next few lines to center the piece on mouse cursor
323 let rect = parent.getBoundingClientRect();
324 this.start = {
6808d7a1
BA
325 x: rect.x + rect.width / 2,
326 y: rect.y + rect.width / 2,
327 id: parent.id
aafe9f16
BA
328 };
329 this.selectedPiece = e.target.cloneNode();
6808d7a1 330 let spStyle = this.selectedPiece.style;
aafe9f16
BA
331 spStyle.position = "absolute";
332 spStyle.top = 0;
333 spStyle.display = "inline-block";
334 spStyle.zIndex = 3000;
335 const startSquare = getSquareFromId(parent.id);
336 this.possibleMoves = [];
6808d7a1
BA
337 const color = this.analyze ? this.vr.turn : this.userColor;
338 if (this.vr.canIplay(color, startSquare))
aafe9f16
BA
339 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
340 // Next line add moving piece just after current image
341 // (required for Crazyhouse reserve)
342 parent.insertBefore(this.selectedPiece, e.target.nextSibling);
cf2343ce
BA
343 },
344 mousemove: function(e) {
6808d7a1 345 if (!this.selectedPiece) return;
aafe9f16 346 // There is an active element: move it around
cafe0166
BA
347 const [offsetX, offsetY] =
348 this.mobileBrowser
349 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
350 : [e.clientX, e.clientY];
6808d7a1
BA
351 this.selectedPiece.style.left = offsetX - this.start.x + "px";
352 this.selectedPiece.style.top = offsetY - this.start.y + "px";
cf2343ce
BA
353 },
354 mouseup: function(e) {
6808d7a1 355 if (!this.selectedPiece) return;
aafe9f16 356 // There is an active element: obtain the move from start and end squares
cf2343ce 357 this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
cafe0166
BA
358 const [offsetX, offsetY] =
359 this.mobileBrowser
360 ? [e.changedTouches[0].pageX, e.changedTouches[0].pageY]
361 : [e.clientX, e.clientY];
cf2343ce
BA
362 let landing = document.elementFromPoint(offsetX, offsetY);
363 this.selectedPiece.style.zIndex = 3000;
364 // Next condition: classList.contains(piece) fails because of marks
6808d7a1
BA
365 while (landing.tagName == "IMG") landing = landing.parentNode;
366 if (this.start.id == landing.id)
7d8bf63e 367 // One or multi clicks on same piece
cf2343ce 368 return;
bd76b456 369 // OK: process move attempt, landing is a square node
cf2343ce
BA
370 let endSquare = getSquareFromId(landing.id);
371 let moves = this.findMatchingMoves(endSquare);
372 this.possibleMoves = [];
6808d7a1
BA
373 if (moves.length > 1) this.choices = moves;
374 else if (moves.length == 1) this.play(moves[0]);
cf2343ce
BA
375 // Else: impossible move
376 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
377 delete this.selectedPiece;
378 this.selectedPiece = null;
379 },
380 findMatchingMoves: function(endSquare) {
381 // Run through moves list and return the matching set (if promotions...)
382 let moves = [];
383 this.possibleMoves.forEach(function(m) {
6808d7a1 384 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y) moves.push(m);
cf2343ce
BA
385 });
386 return moves;
387 },
388 play: function(move) {
6808d7a1
BA
389 this.$emit("play-move", move);
390 }
391 }
cf2343ce
BA
392};
393</script>
4473050c 394
41c80bb6 395<style lang="sass" scoped>
50aed5a1
BA
396.game.reserve-div
397 margin-bottom: 18px
398
399.reserve-count
400 padding-left: 40%
401
402.reserve-row-1
403 margin-bottom: 15px
404
41cb9b94
BA
405// NOTE: no variants with reserve of size != 8
406
50aed5a1 407.game
cf94b843
BA
408 width: 100%
409 margin: 0
50aed5a1
BA
410 .board
411 cursor: pointer
50aed5a1
BA
412
413#choices
168a5e4c
BA
414 margin: 0
415 position: absolute
50aed5a1
BA
416 z-index: 300
417 overflow-y: inherit
418 background-color: rgba(0,0,0,0)
419 img
420 cursor: pointer
421 background-color: #e6ee9c
422 &:hover
423 background-color: skyblue
424 &.choice-piece
425 width: 100%
426 height: auto
427 display: block
428
50aed5a1
BA
429img.ghost
430 position: absolute
431 opacity: 0.4
432 top: 0
433
311cba76
BA
434.highlight-light
435 background-color: rgba(0, 204, 102, 0.7) !important
436.highlight-dark
437 background-color: rgba(0, 204, 102, 0.9) !important
50aed5a1 438
311cba76
BA
439.incheck-light
440 background-color: rgba(204, 51, 0, 0.7) !important
441.incheck-dark
442 background-color: rgba(204, 51, 0, 0.9) !important
50aed5a1
BA
443
444.light-square.lichess
445 background-color: #f0d9b5;
446.dark-square.lichess
447 background-color: #b58863;
448
449.light-square.chesscom
450 background-color: #e5e5ca;
451.dark-square.chesscom
452 background-color: #6f8f57;
453
454.light-square.chesstempo
455 background-color: #fdfdfd;
456.dark-square.chesstempo
457 background-color: #88a0a8;
4473050c 458</style>