public/javascripts/components/board.js

   1 Vue.component('my-board', {
   2     // Last move cannot be guessed from here, and is required to highlight squares
   3     // vr: object to check moves, print board...
   4     // mode: HH, HC or analyze
   5     // userColor: for mode HH or HC
   6     props: ["vr","lastMove","mode","orientation","userColor"],
   7     data: function () {
   8         return {
   9             hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
  10             bcolor: localStorage["bcolor"] || "lichess", //lichess, chesscom or chesstempo
  11             possibleMoves: [], //filled after each valid click/dragstart
  12             choices: [], //promotion pieces, or checkered captures... (as moves)
  13             selectedPiece: null, //moving piece (or clicked piece)
  14             incheck: [],
  15             start: {}, //pixels coordinates + id of starting square (click or drag)
  16         };
  17     },
  18     render(h) {
  19         if (!this.vr)
  20             return;
  21         const [sizeX,sizeY] = [V.size.x,V.size.y];
  22         // Precompute hints squares to facilitate rendering
  23         let hintSquares = doubleArray(sizeX, sizeY, false);
  24         this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
  25         // Also precompute in-check squares
  26         let incheckSq = doubleArray(sizeX, sizeY, false);
  27         this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
  28         const squareWidth = 40; //TODO: compute this
  29         const choices = h(
  30             'div',
  31             {
  32                 attrs: { "id": "choices" },
  33                 'class': { 'row': true },
  34                 style: {
  35                     "display": this.choices.length>0?"block":"none",
  36                     "top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
  37                     "width": (this.choices.length * squareWidth) + "px",
  38                     "height": squareWidth + "px",
  39                 },
  40             },
  41             this.choices.map(m => { //a "choice" is a move
  42                 return h('div',
  43                     {
  44                         'class': {
  45                             'board': true,
  46                             ['board'+sizeY]: true,
  47                         },
  48                         style: {
  49                             'width': (100/this.choices.length) + "%",
  50                             'padding-bottom': (100/this.choices.length) + "%",
  51                         },
  52                     },
  53                     [h('img',
  54                         {
  55                             attrs: { "src": '/images/pieces/' +
  56                                 V.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
  57                             'class': { 'choice-piece': true },
  58                             on: {
  59                                 "click": e => { this.play(m); this.choices=[]; },
  60                                 // NOTE: add 'touchstart' event to fix a problem on smartphones
  61                                 "touchstart": e => { this.play(m); this.choices=[]; },
  62                             },
  63                         })
  64                     ]
  65                 );
  66             })
  67         );
  68         // Create board element (+ reserves if needed by variant or mode)
  69         const lm = this.lastMove;
  70         const showLight = this.hints && variant.name != "Dark";
  71         const gameDiv = h(
  72             'div',
  73             {
  74                 'class': {
  75                     'game': true,
  76                     'clearer': true,
  77                 },
  78             },
  79             [_.range(sizeX).map(i => {
  80                 let ci = (this.orientation=='w' ? i : sizeX-i-1);
  81                 return h(
  82                     'div',
  83                     {
  84                         'class': {
  85                             'row': true,
  86                         },
  87                         style: { 'opacity': this.choices.length>0?"0.5":"1" },
  88                     },
  89                     _.range(sizeY).map(j => {
  90                         let cj = (this.orientation=='w' ? j : sizeY-j-1);
  91                         let elems = [];
  92                         if (this.vr.board[ci][cj] != V.EMPTY && (variant.name!="Dark"
  93                             || this.gameOver || this.mode == "analyze"
  94                             || this.vr.enlightened[this.userColor][ci][cj]))
  95                         {
  96                             elems.push(
  97                                 h(
  98                                     'img',
  99                                     {
 100                                         'class': {
 101                                             'piece': true,
 102                                             'ghost': !!this.selectedPiece
 103                                                 && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
 104                                         },
 105                                         attrs: {
 106                                             src: "/images/pieces/" +
 107                                                 V.getPpath(this.vr.board[ci][cj]) + ".svg",
 108                                         },
 109                                     }
 110                                 )
 111                             );
 112                         }
 113                         if (this.hints && hintSquares[ci][cj])
 114                         {
 115                             elems.push(
 116                                 h(
 117                                     'img',
 118                                     {
 119                                         'class': {
 120                                             'mark-square': true,
 121                                         },
 122                                         attrs: {
 123                                             src: "/images/mark.svg",
 124                                         },
 125                                     }
 126                                 )
 127                             );
 128                         }
 129                         return h(
 130                             'div',
 131                             {
 132                                 'class': {
 133                                     'board': true,
 134                                     ['board'+sizeY]: true,
 135                                     'light-square': (i+j)%2==0,
 136                                     'dark-square': (i+j)%2==1,
 137                                     [this.bcolor]: true,
 138                                     'in-shadow': variant.name=="Dark" && !this.gameOver
 139                                         && this.mode != "analyze"
 140                                         && !this.vr.enlightened[this.userColor][ci][cj],
 141                                     'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
 142                                     'incheck': showLight && incheckSq[ci][cj],
 143                                 },
 144                                 attrs: {
 145                                     id: this.getSquareId({x:ci,y:cj}),
 146                                 },
 147                             },
 148                             elems
 149                         );
 150                     })
 151                 );
 152             }), choices]
 153         );
 154         let elementArray = [choices, gameDiv];
 155         if (!!this.vr.reserve)
 156         {
 157             const shiftIdx = (this.userColor=="w" ? 0 : 1);
 158             let myReservePiecesArray = [];
 159             for (let i=0; i<V.RESERVE_PIECES.length; i++)
 160             {
 161                 myReservePiecesArray.push(h('div',
 162                 {
 163                     'class': {'board':true, ['board'+sizeY]:true},
 164                     attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
 165                 },
 166                 [
 167                     h('img',
 168                     {
 169                         'class': {"piece":true, "reserve":true},
 170                         attrs: {
 171                             "src": "/images/pieces/" +
 172                                 this.vr.getReservePpath(this.userColor,i) + ".svg",
 173                         }
 174                     }),
 175                     h('sup',
 176                         {"class": { "reserve-count": true } },
 177                         [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ]
 178                     )
 179                 ]));
 180             }
 181             let oppReservePiecesArray = [];
 182             const oppCol = V.GetOppCol(this.userColor);
 183             for (let i=0; i<V.RESERVE_PIECES.length; i++)
 184             {
 185                 oppReservePiecesArray.push(h('div',
 186                 {
 187                     'class': {'board':true, ['board'+sizeY]:true},
 188                     attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
 189                 },
 190                 [
 191                     h('img',
 192                     {
 193                         'class': {"piece":true, "reserve":true},
 194                         attrs: {
 195                             "src": "/images/pieces/" +
 196                                 this.vr.getReservePpath(oppCol,i) + ".svg",
 197                         }
 198                     }),
 199                     h('sup',
 200                         {"class": { "reserve-count": true } },
 201                         [ this.vr.reserve[oppCol][V.RESERVE_PIECES[i]] ]
 202                     )
 203                 ]));
 204             }
 205             let reserves = h('div',
 206                 {
 207                     'class':{
 208                         'game': true,
 209                         "reserve-div": true,
 210                     },
 211                 },
 212                 [
 213                     h('div',
 214                         {
 215                             'class': {
 216                                 'row': true,
 217                                 "reserve-row-1": true,
 218                             },
 219                         },
 220                         myReservePiecesArray
 221                     ),
 222                     h('div',
 223                         { 'class': { 'row': true }},
 224                         oppReservePiecesArray
 225                     )
 226                 ]
 227             );
 228             elementArray.push(reserves);
 229         }
 230         return h(
 231             'div',
 232             {
 233                 'class': {
 234                     "col-sm-12":true,
 235                     "col-md-10":true,
 236                     "col-md-offset-1":true,
 237                     "col-lg-8":true,
 238                     "col-lg-offset-2":true,
 239                 },
 240                 // NOTE: click = mousedown + mouseup
 241                 on: {
 242                     mousedown: this.mousedown,
 243                     mousemove: this.mousemove,
 244                     mouseup: this.mouseup,
 245                     touchstart: this.mousedown,
 246                     touchmove: this.mousemove,
 247                     touchend: this.mouseup,
 248                 },
 249             },
 250             elementArray
 251         );
 252     },
 253     methods: {
 254         // Get the identifier of a HTML square from its numeric coordinates o.x,o.y.
 255         getSquareId: function(o) {
 256             // NOTE: a separator is required to allow any size of board
 257             return  "sq-" + o.x + "-" + o.y;
 258         },
 259         // Inverse function
 260         getSquareFromId: function(id) {
 261             let idParts = id.split('-');
 262             return [parseInt(idParts[1]), parseInt(idParts[2])];
 263         },
 264         mousedown: function(e) {
 265             e = e || window.event;
 266             let ingame = false;
 267             let elem = e.target;
 268             while (!ingame && elem !== null)
 269             {
 270                 if (elem.classList.contains("game"))
 271                 {
 272                     ingame = true;
 273                     break;
 274                 }
 275                 elem = elem.parentElement;
 276             }
 277             if (!ingame) //let default behavior (click on button...)
 278                 return;
 279             e.preventDefault(); //disable native drag & drop
 280             if (!this.selectedPiece && e.target.classList.contains("piece"))
 281             {
 282                 // Next few lines to center the piece on mouse cursor
 283                 let rect = e.target.parentNode.getBoundingClientRect();
 284                 this.start = {
 285                     x: rect.x + rect.width/2,
 286                     y: rect.y + rect.width/2,
 287                     id: e.target.parentNode.id
 288                 };
 289                 this.selectedPiece = e.target.cloneNode();
 290                 this.selectedPiece.style.position = "absolute";
 291                 this.selectedPiece.style.top = 0;
 292                 this.selectedPiece.style.display = "inline-block";
 293                 this.selectedPiece.style.zIndex = 3000;
 294                 const startSquare = this.getSquareFromId(e.target.parentNode.id);
 295                 this.possibleMoves = [];
 296                 const color = this.mode=="analyze" || this.gameOver
 297                     ? this.vr.turn
 298                     : this.userColor;
 299                 if (this.vr.canIplay(color,startSquare))
 300                     this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
 301                 // Next line add moving piece just after current image
 302                 // (required for Crazyhouse reserve)
 303                 e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 304             }
 305         },
 306         mousemove: function(e) {
 307             if (!this.selectedPiece)
 308                 return;
 309             e = e || window.event;
 310             // If there is an active element, move it around
 311             if (!!this.selectedPiece)
 312             {
 313                 const [offsetX,offsetY] = !!e.clientX
 314                     ? [e.clientX,e.clientY] //desktop browser
 315                     : [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
 316                 this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
 317                 this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
 318             }
 319         },
 320         mouseup: function(e) {
 321             if (!this.selectedPiece)
 322                 return;
 323             e = e || window.event;
 324             // Read drop target (or parentElement, parentNode... if type == "img")
 325             this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
 326             const [offsetX,offsetY] = !!e.clientX
 327                 ? [e.clientX,e.clientY]
 328                 : [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
 329             let landing = document.elementFromPoint(offsetX, offsetY);
 330             this.selectedPiece.style.zIndex = 3000;
 331             // Next condition: classList.contains(piece) fails because of marks
 332             while (landing.tagName == "IMG")
 333                 landing = landing.parentNode;
 334             if (this.start.id == landing.id)
 335             {
 336                 // A click: selectedPiece and possibleMoves are already filled
 337                 return;
 338             }
 339             // OK: process move attempt
 340             let endSquare = this.getSquareFromId(landing.id);
 341             let moves = this.findMatchingMoves(endSquare);
 342             this.possibleMoves = [];
 343             if (moves.length > 1)
 344                 this.choices = moves;
 345             else if (moves.length==1)
 346                 this.play(moves[0]);
 347             // Else: impossible move
 348             this.selectedPiece.parentNode.removeChild(this.selectedPiece);
 349             delete this.selectedPiece;
 350             this.selectedPiece = null;
 351         },
 352         findMatchingMoves: function(endSquare) {
 353             // Run through moves list and return the matching set (if promotions...)
 354             let moves = [];
 355             this.possibleMoves.forEach(function(m) {
 356                 if (endSquare[0] == m.end.x && endSquare[1] == m.end.y)
 357                     moves.push(m);
 358             });
 359             return moves;
 360         },
 361         play: function(move) {
 362             this.$emit('play-move', move);
 363         },
 364     },
 365 })