1 // This can work for squared boards (2 or 4 players), with some adaptations (TODO)
2 // TODO: for 3 players, write a "board3.js"
5 // Last move cannot be guessed from here, and is required to highlight squares
6 // vr: object to check moves, print board...
7 // mode: HH, HC or analyze
8 // userColor: for mode HH or HC
9 props: ["vr","lastMove","mode","orientation","userColor"],
12 hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
13 bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
14 possibleMoves: [], //filled after each valid click/dragstart
15 choices: [], //promotion pieces, or checkered captures... (as moves)
16 selectedPiece: null, //moving piece (or clicked piece)
18 start: {}, //pixels coordinates + id of starting square (click or drag)
24 const [sizeX,sizeY] = [V.size.x,V.size.y];
25 // Precompute hints squares to facilitate rendering
26 let hintSquares = doubleArray(sizeX, sizeY, false);
27 this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
28 // Also precompute in-check squares
29 let incheckSq = doubleArray(sizeX, sizeY, false);
30 this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
31 const squareWidth = 40; //TODO: compute this
35 attrs: { "id": "choices" },
36 'class': { 'row': true },
38 "display": this.choices.length>0?"block":"none",
39 "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
40 "width": (this.choices.length * squareWidth) + "px",
41 "height": squareWidth + "px",
44 this.choices.map(m => { //a "choice" is a move
49 ['board'+sizeY]: true,
52 'width': (100/this.choices.length) + "%",
53 'padding-bottom': (100/this.choices.length) + "%",
58 attrs: { "src": '/images/pieces/' +
59 V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
60 'class': { 'choice-piece': true },
62 "click": e => { this.play(m); this.choices=[]; },
63 // NOTE: add 'touchstart' event to fix a problem on smartphones
64 "touchstart": e => { this.play(m); this.choices=[]; },
71 // Create board element (+ reserves if needed by variant or mode)
72 const lm = this.lastMove;
73 const showLight = this.hints && variant.name != "Dark";
82 [...Array(sizeX).keys()].map(i => {
83 let ci = (this.orientation=='w' ? i : sizeX-i-1);
90 style: { 'opacity': this.choices.length>0?"0.5":"1" },
92 [...Array(sizeY).keys()].map(j => {
93 let cj = (this.orientation=='w' ? j : sizeY-j-1);
95 if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark"
96 || this.gameOver || this.mode == "analyze"
97 || this.vr.enlightened[this.userColor][ci][cj]))
105 'ghost': !!this.selectedPiece
106 && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
109 src: "/images/pieces/" +
110 V.getPpath(this.vr.board[ci][cj]) + ".svg",
116 if (this.hints && hintSquares[ci][cj])
126 src: "/images/mark.svg",
137 ['board'+sizeY]: true,
138 'light-square': (i+j)%2==0,
139 'dark-square': (i+j)%2==1,
141 'in-shadow': variant.name=="Dark" && !this.gameOver
142 && this.mode != "analyze"
143 && !this.vr.enlightened[this.userColor][ci][cj],
144 'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
145 'incheck': showLight && incheckSq[ci][cj],
148 id: getSquareId({x:ci,y:cj}),
157 let elementArray = [choices, gameDiv];
158 if (!!this.vr.reserve)
160 const shiftIdx = (this.userColor=="w" ? 0 : 1);
161 let myReservePiecesArray = [];
162 for (let i=0; i<V.RESERVE_PIECES.length; i++)
164 myReservePiecesArray.push(h('div',
166 'class': {'board':true, ['board'+sizeY]:true},
167 attrs: { id: getSquareId({x:sizeX+shiftIdx,y:i}) }
172 'class': {"piece":true, "reserve":true},
174 "src": "/images/pieces/" +
175 this.vr.getReservePpath(this.userColor,i) + ".svg",
179 {"class": { "reserve-count": true } },
180 [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ]
184 let oppReservePiecesArray = [];
185 const oppCol = V.GetOppCol(this.userColor);
186 for (let i=0; i<V.RESERVE_PIECES.length; i++)
188 oppReservePiecesArray.push(h('div',
190 'class': {'board':true, ['board'+sizeY]:true},
191 attrs: { id: getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
196 'class': {"piece":true, "reserve":true},
198 "src": "/images/pieces/" +
199 this.vr.getReservePpath(oppCol,i) + ".svg",
203 {"class": { "reserve-count": true } },
204 [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ]
208 let reserves = h('div',
220 "reserve-row-1": true,
226 { 'class': { 'row': true }},
227 oppReservePiecesArray
231 elementArray.push(reserves);
239 "col-md-offset-1":true,
241 "col-lg-offset-2":true,
243 // NOTE: click = mousedown + mouseup
245 mousedown: this.mousedown,
246 mousemove: this.mousemove,
247 mouseup: this.mouseup,
248 touchstart: this.mousedown,
249 touchmove: this.mousemove,
250 touchend: this.mouseup,
257 mousedown: function(e) {
258 e = e || window.event;
261 while (!ingame && elem !== null)
263 if (elem.classList.contains("game"))
268 elem = elem.parentElement;
270 if (!ingame) //let default behavior (click on button...)
272 e.preventDefault(); //disable native drag & drop
273 if (!this.selectedPiece && e.target.classList.contains("piece"))
275 // Next few lines to center the piece on mouse cursor
276 let rect = e.target.parentNode.getBoundingClientRect();
278 x: rect.x + rect.width/2,
279 y: rect.y + rect.width/2,
280 id: e.target.parentNode.id
282 this.selectedPiece = e.target.cloneNode();
283 this.selectedPiece.style.position = "absolute";
284 this.selectedPiece.style.top = 0;
285 this.selectedPiece.style.display = "inline-block";
286 this.selectedPiece.style.zIndex = 3000;
287 const startSquare = getSquareFromId(e.target.parentNode.id);
288 this.possibleMoves = [];
289 const color = this.mode=="analyze" || this.gameOver
292 if (this.vr.canIplay(color,startSquare))
293 this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
294 // Next line add moving piece just after current image
295 // (required for Crazyhouse reserve)
296 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
299 mousemove: function(e) {
300 if (!this.selectedPiece)
302 e = e || window.event;
303 // If there is an active element, move it around
304 if (!!this.selectedPiece)
306 const [offsetX,offsetY] = !!e.clientX
307 ? [e.clientX,e.clientY] //desktop browser
308 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
309 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
310 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
313 mouseup: function(e) {
314 if (!this.selectedPiece)
316 e = e || window.event;
317 // Read drop target (or parentElement, parentNode... if type == "img")
318 this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
319 const [offsetX,offsetY] = !!e.clientX
320 ? [e.clientX,e.clientY]
321 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
322 let landing = document.elementFromPoint(offsetX, offsetY);
323 this.selectedPiece.style.zIndex = 3000;
324 // Next condition: classList.contains(piece) fails because of marks
325 while (landing.tagName == "IMG")
326 landing = landing.parentNode;
327 if (this.start.id == landing.id)
329 // A click: selectedPiece and possibleMoves are already filled
332 // OK: process move attempt
333 let endSquare = getSquareFromId(landing.id);
334 let moves = this.findMatchingMoves(endSquare);
335 this.possibleMoves = [];
336 if (moves.length > 1)
337 this.choices = moves;
338 else if (moves.length==1)
340 // Else: impossible move
341 this.selectedPiece.parentNode.removeChild(this.selectedPiece);
342 delete this.selectedPiece;
343 this.selectedPiece = null;
345 findMatchingMoves: function(endSquare) {
346 // Run through moves list and return the matching set (if promotions...)
348 this.possibleMoves.forEach(function(m) {
349 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
354 play: function(move) {
355 this.$emit('play-move', move);