Fixes
[vchess.git] / client / src / components / Board.vue
1 <script>
2 import { getSquareId, getSquareFromId } from "@/utils/squareId";
3 import { ArrayFun } from "@/utils/array";
4
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: ["vr","lastMove","analyze","orientation","userColor","vname"],
11 data: function () {
12 return {
13 hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
14 bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
15 possibleMoves: [], //filled after each valid click/dragstart
16 choices: [], //promotion pieces, or checkered captures... (as moves)
17 selectedPiece: null, //moving piece (or clicked piece)
18 incheck: [],
19 start: {}, //pixels coordinates + id of starting square (click or drag)
20 };
21 },
22 render(h) {
23 if (!this.vr)
24 {
25 // Return empty div of class 'game' to avoid error when setting size
26 return h("div",
27 {
28 "class": {
29 "game": true,
30 },
31 });
32 }
33 const [sizeX,sizeY] = [V.size.x,V.size.y];
34 // Precompute hints squares to facilitate rendering
35 let hintSquares = ArrayFun.init(sizeX, sizeY, false);
36 this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
37 // Also precompute in-check squares
38 let incheckSq = ArrayFun.init(sizeX, sizeY, false);
39 this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
40
41 let boardElt = document.querySelector(".game");
42 const squareWidth = (!!boardElt
43 ? boardElt.offsetWidth / sizeY
44 : 40); //arbitrary value (not relevant)
45 const choices = h(
46 'div',
47 {
48 attrs: { "id": "choices" },
49 'class': { 'row': true },
50 style: {
51 "display": (this.choices.length > 0 ? "block" : "none"),
52 "top": ((sizeY/2)*squareWidth+squareWidth/2) + "px",
53 "width": (this.choices.length * squareWidth) + "px",
54 "height": squareWidth + "px",
55 },
56 },
57 this.choices.map(m => { //a "choice" is a move
58 return h('div',
59 {
60 'class': {
61 'board': true,
62 ['board'+sizeY]: true,
63 },
64 style: {
65 'width': (100/this.choices.length) + "%",
66 'padding-bottom': (100/this.choices.length) + "%",
67 },
68 },
69 [h('img',
70 {
71 attrs: { "src": '/images/pieces/' +
72 V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
73 'class': { 'choice-piece': true },
74 on: {
75 "click": e => { this.play(m); this.choices=[]; },
76 // NOTE: add 'touchstart' event to fix a problem on smartphones
77 "touchstart": e => { this.play(m); this.choices=[]; },
78 },
79 })
80 ]
81 );
82 })
83 );
84 // Create board element (+ reserves if needed by variant or mode)
85 const lm = this.lastMove;
86 const showLight = this.hints && this.vname != "Dark";
87 const gameDiv = h(
88 'div',
89 {
90 'class': {
91 'game': true,
92 'clearer': true,
93 },
94 },
95 [...Array(sizeX).keys()].map(i => {
96 let ci = (this.orientation=='w' ? i : sizeX-i-1);
97 return h(
98 'div',
99 {
100 'class': {
101 'row': true,
102 },
103 style: { 'opacity': this.choices.length>0?"0.5":"1" },
104 },
105 [...Array(sizeY).keys()].map(j => {
106 let cj = (this.orientation=='w' ? j : sizeY-j-1);
107 let elems = [];
108 if (this.vr.board[ci][cj] != V.EMPTY && (this.vname!="Dark"
109 || this.analyze || (!!this.userColor
110 && this.vr.enlightened[this.userColor][ci][cj])))
111 {
112 elems.push(
113 h(
114 'img',
115 {
116 'class': {
117 'piece': true,
118 'ghost': !!this.selectedPiece
119 && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
120 },
121 attrs: {
122 src: "/images/pieces/" +
123 V.getPpath(this.vr.board[ci][cj]) + ".svg",
124 },
125 }
126 )
127 );
128 }
129 if (this.hints && hintSquares[ci][cj])
130 {
131 elems.push(
132 h(
133 'img',
134 {
135 'class': {
136 'mark-square': true,
137 },
138 attrs: {
139 src: "/images/mark.svg",
140 },
141 }
142 )
143 );
144 }
145 return h(
146 'div',
147 {
148 'class': {
149 'board': true,
150 ['board'+sizeY]: true,
151 'light-square': (i+j)%2==0,
152 'dark-square': (i+j)%2==1,
153 [this.bcolor]: true,
154 'in-shadow': this.vname=="Dark" && !this.analyze
155 && (!this.userColor
156 || !this.vr.enlightened[this.userColor][ci][cj]),
157 'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
158 'incheck': showLight && incheckSq[ci][cj],
159 },
160 attrs: {
161 id: getSquareId({x:ci,y:cj}),
162 },
163 },
164 elems
165 );
166 })
167 );
168 })
169 );
170 const playingColor = this.userColor || "w"; //default for an observer
171 let elementArray = [choices, gameDiv];
172 if (!!this.vr.reserve)
173 {
174 const shiftIdx = (playingColor=="w" ? 0 : 1);
175 let myReservePiecesArray = [];
176 for (let i=0; i<V.RESERVE_PIECES.length; i++)
177 {
178 myReservePiecesArray.push(h('div',
179 {
180 'class': {'board':true, ['board'+sizeY]:true},
181 attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) }
182 },
183 [
184 h('img',
185 {
186 'class': {"piece":true, "reserve":true},
187 attrs: {
188 "src": "/images/pieces/" +
189 this.vr.getReservePpath(playingColor,i) + ".svg",
190 }
191 }),
192 h('sup',
193 {"class": { "reserve-count": true } },
194 [ this.vr.reserve[playingColor][V.RESERVE_PIECES[i]] ]
195 )
196 ]));
197 }
198 let oppReservePiecesArray = [];
199 const oppCol = V.GetOppCol(playingColor);
200 for (let i=0; i<V.RESERVE_PIECES.length; i++)
201 {
202 oppReservePiecesArray.push(h('div',
203 {
204 'class': {'board':true, ['board'+sizeY]:true},
205 attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
206 },
207 [
208 h('img',
209 {
210 'class': {"piece":true, "reserve":true},
211 attrs: {
212 "src": "/images/pieces/" +
213 this.vr.getReservePpath(oppCol,i) + ".svg",
214 }
215 }),
216 h('sup',
217 {"class": { "reserve-count": true } },
218 [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ]
219 )
220 ]));
221 }
222 let reserves = h('div',
223 {
224 'class':{
225 'game': true,
226 "reserve-div": true,
227 },
228 },
229 [
230 h('div',
231 {
232 'class': {
233 'row': true,
234 "reserve-row-1": true,
235 },
236 },
237 myReservePiecesArray
238 ),
239 h('div',
240 { 'class': { 'row': true }},
241 oppReservePiecesArray
242 )
243 ]
244 );
245 elementArray.push(reserves);
246 }
247 return h(
248 'div',
249 {
250 // NOTE: click = mousedown + mouseup
251 on: {
252 mousedown: this.mousedown,
253 mousemove: this.mousemove,
254 mouseup: this.mouseup,
255 touchstart: this.mousedown,
256 touchmove: this.mousemove,
257 touchend: this.mouseup,
258 },
259 },
260 elementArray
261 );
262 },
263 mounted: function() {
264 // NOTE (TODO?): could also be dependent on page type (game, analyze, variant)
265 const boardSize = localStorage.getItem("boardSize");
266 if (!!boardSize)
267 document.querySelector(".game").style.width = boardSize + "px";
268 },
269 methods: {
270 mousedown: function(e) {
271 e = e || window.event;
272 let ingame = false;
273 let elem = e.target;
274 while (!ingame && elem !== null)
275 {
276 if (elem.classList.contains("game"))
277 {
278 ingame = true;
279 break;
280 }
281 elem = elem.parentElement;
282 }
283 if (!ingame) //let default behavior (click on button...)
284 return;
285 e.preventDefault(); //disable native drag & drop
286 if (!this.selectedPiece && e.target.classList.contains("piece"))
287 {
288 // Next few lines to center the piece on mouse cursor
289 let rect = e.target.parentNode.getBoundingClientRect();
290 this.start = {
291 x: rect.x + rect.width/2,
292 y: rect.y + rect.width/2,
293 id: e.target.parentNode.id
294 };
295 this.selectedPiece = e.target.cloneNode();
296 this.selectedPiece.style.position = "absolute";
297 this.selectedPiece.style.top = 0;
298 this.selectedPiece.style.display = "inline-block";
299 this.selectedPiece.style.zIndex = 3000;
300 const startSquare = getSquareFromId(e.target.parentNode.id);
301 this.possibleMoves = [];
302 const color = (this.analyze ? this.vr.turn : this.userColor);
303 if (this.vr.canIplay(color,startSquare))
304 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
305 // Next line add moving piece just after current image
306 // (required for Crazyhouse reserve)
307 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
308 }
309 },
310 mousemove: function(e) {
311 if (!this.selectedPiece)
312 return;
313 e = e || window.event;
314 // If there is an active element, move it around
315 if (!!this.selectedPiece)
316 {
317 const [offsetX,offsetY] = !!e.clientX
318 ? [e.clientX,e.clientY] //desktop browser
319 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
320 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
321 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
322 }
323 },
324 mouseup: function(e) {
325 if (!this.selectedPiece)
326 return;
327 e = e || window.event;
328 // Read drop target (or parentElement, parentNode... if type == "img")
329 this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
330 const [offsetX,offsetY] = !!e.clientX
331 ? [e.clientX,e.clientY]
332 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
333 let landing = document.elementFromPoint(offsetX, offsetY);
334 this.selectedPiece.style.zIndex = 3000;
335 // Next condition: classList.contains(piece) fails because of marks
336 while (landing.tagName == "IMG")
337 landing = landing.parentNode;
338 if (this.start.id == landing.id)
339 {
340 // A click: selectedPiece and possibleMoves are already filled
341 return;
342 }
343 // OK: process move attempt
344 let endSquare = getSquareFromId(landing.id);
345 let moves = this.findMatchingMoves(endSquare);
346 this.possibleMoves = [];
347 if (moves.length > 1)
348 this.choices = moves;
349 else if (moves.length==1)
350 this.play(moves[0]);
351 // Else: impossible move
352 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
353 delete this.selectedPiece;
354 this.selectedPiece = null;
355 },
356 findMatchingMoves: function(endSquare) {
357 // Run through moves list and return the matching set (if promotions...)
358 let moves = [];
359 this.possibleMoves.forEach(function(m) {
360 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
361 moves.push(m);
362 });
363 return moves;
364 },
365 play: function(move) {
366 this.$emit('play-move', move);
367 },
368 },
369 };
370 </script>
371
372 <style lang="sass">
373 .game.reserve-div
374 margin-bottom: 18px
375
376 .reserve-count
377 padding-left: 40%
378
379 .reserve-row-1
380 margin-bottom: 15px
381
382 // NOTE: no variants with reserve of size != 8
383
384 div.board
385 float: left
386 height: 0
387 display: inline-block
388 position: relative
389
390 div.board8
391 width: 12.5%
392 padding-bottom: 12.5%
393
394 div.board10
395 width: 10%
396 padding-bottom: 10%
397
398 div.board11
399 width: 9.09%
400 padding-bottom: 9.1%
401
402 .game
403 //width: #{'min(80vw, 500px)'}
404 margin: 0 auto
405 .board
406 cursor: pointer
407 @media screen and (max-width: 767px)
408 width: 100%
409 margin: 0
410
411 #choices
412 margin: 0 auto 0 auto
413 position: relative
414 z-index: 300
415 overflow-y: inherit
416 background-color: rgba(0,0,0,0)
417 img
418 cursor: pointer
419 background-color: #e6ee9c
420 &:hover
421 background-color: skyblue
422 &.choice-piece
423 width: 100%
424 height: auto
425 display: block
426
427 img.piece
428 width: 100%
429
430 img.piece, img.mark-square
431 max-width: 100%
432 height: auto
433 display: block
434
435 img.mark-square
436 opacity: 0.6
437 width: 76%
438 position: absolute
439 top: 12%
440 left: 12%
441 opacity: .7
442
443 img.ghost
444 position: absolute
445 opacity: 0.4
446 top: 0
447
448 .highlight
449 background-color: #00cc66 !important
450
451 .in-shadow
452 filter: brightness(50%)
453
454 .incheck
455 background-color: #cc3300 !important
456
457 .light-square.lichess
458 background-color: #f0d9b5;
459 .dark-square.lichess
460 background-color: #b58863;
461
462 .light-square.chesscom
463 background-color: #e5e5ca;
464 .dark-square.chesscom
465 background-color: #6f8f57;
466
467 .light-square.chesstempo
468 background-color: #fdfdfd;
469 .dark-square.chesstempo
470 background-color: #88a0a8;
471 </style>