client/src/components/BaseGame.vue

   1 <template lang="pug">
   2 div#baseGame(tabindex=-1 @click="() => focusBg()"
   3     @keydown="handleKeys" @wheel="handleScroll")
   4   input#modalEog.modal(type="checkbox")
   5   div#eogDiv(role="dialog" data-checkbox="modalEog" aria-labelledby="eogMessage")
   6     .card.smallpad.small-modal.text-center
   7       label.modal-close(for="modalEog")
   8       h3#eogMessage.section {{ endgameMessage }}
   9   input#modalAdjust.modal(type="checkbox")
  10   div#adjuster(role="dialog" data-checkbox="modalAdjust" aria-labelledby="labelAdjust")
  11     .card.smallpad.small-modal.text-center
  12       label.modal-close(for="modalAdjust")
  13       label#labelAdjust(for="boardSize") {{ st.tr["Board size"] }}
  14       input#boardSize.slider(type="range" min="0" max="100" value="50"
  15         @input="adjustBoard")
  16   #gameContainer
  17     #boardContainer
  18       Board(:vr="vr" :last-move="lastMove" :analyze="analyze"
  19         :user-color="game.mycolor" :orientation="orientation"
  20         :vname="game.vname" :incheck="incheck" @play-move="play")
  21       #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'")
  22         | {{ turn }}
  23       #controls
  24         button(@click="gotoBegin") <<
  25         button(@click="() => undo()") <
  26         button(@click="flip") &#8645;
  27         button(@click="() => play()") >
  28         button(@click="gotoEnd") >>
  29       #pgnDiv
  30         #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
  31           a#download(href="#")
  32           button(@click="download") {{ st.tr["Download PGN"] }}
  33         button(onClick="doClick('modalAdjust')") &#10530;
  34         button(v-if="game.vname!='Dark' && game.mode!='analyze'"
  35             @click="analyzePosition")
  36           | {{ st.tr["Analyze"] }}
  37         // NOTE: rather ugly hack to avoid showing twice "rules" link...
  38         button(v-if="!$route.path.match('/variants/')" @click="showRules")
  39           | {{ st.tr["Rules"] }}
  40     #movesList
  41       MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg"
  42         :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor"
  43         @goto-move="gotoMove")
  44     .clearer
  45 </template>
  46
  47 <script>
  48 import Board from "@/components/Board.vue";
  49 import MoveList from "@/components/MoveList.vue";
  50 import { store } from "@/store";
  51 import { getSquareId } from "@/utils/squareId";
  52 import { getDate } from "@/utils/datetime";
  53 import { processModalClick } from "@/utils/modalClick";
  54 import { getScoreMessage } from "@/utils/scoring";
  55
  56 export default {
  57   name: 'my-base-game',
  58   components: {
  59     Board,
  60     MoveList,
  61   },
  62   // "vr": VariantRules object, describing the game state + rules
  63   props: ["vr","game"],
  64   data: function() {
  65     return {
  66       st: store.state,
  67       // NOTE: all following variables must be reset at the beginning of a game
  68       endgameMessage: "",
  69       orientation: "w",
  70       score: "*", //'*' means 'unfinished'
  71       moves: [],
  72       cursor: -1, //index of the move just played
  73       lastMove: null,
  74       firstMoveNumber: 0, //for printing
  75       incheck: [], //for Board
  76     };
  77   },
  78   watch: {
  79     // game initial FEN changes when a new game starts
  80     "game.fenStart": function() {
  81       this.re_setVariables();
  82     },
  83     // Received a new move to play:
  84     "game.moveToPlay": function(newMove) {
  85       if (!!newMove) //if stop + launch new game, get undefined move
  86         this.play(newMove, "receive");
  87     },
  88   },
  89   computed: {
  90     showMoves: function() {
  91       return this.game.vname != "Dark" || this.game.score != "*";
  92     },
  93     turn: function() {
  94       let color = "";
  95       const L = this.moves.length;
  96       if (L == 0 || this.moves[L-1].color == "b")
  97         color = "White";
  98       else //if (this.moves[L-1].color == "w")
  99         color = "Black";
 100       return this.st.tr[color + " to move"];
 101     },
 102     analyze: function() {
 103       return this.game.mode=="analyze" ||
 104         // From Board viewpoint, a finished Dark game == analyze (TODO: unclear)
 105         (this.game.vname == "Dark" && this.game.score != "*");
 106     },
 107   },
 108   created: function() {
 109     if (!!this.game.fenStart)
 110       this.re_setVariables();
 111   },
 112   mounted: function() {
 113     [document.getElementById("eogDiv"),document.getElementById("adjuster")]
 114       .forEach(elt => elt.addEventListener("click", processModalClick));
 115     // Take full width on small screens:
 116     let boardSize = parseInt(localStorage.getItem("boardSize"));
 117     if (!boardSize)
 118     {
 119       boardSize = (window.innerWidth >= 768
 120         ? Math.min(600, 0.5*window.innerWidth) //heuristic...
 121         : window.innerWidth);
 122     }
 123     const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
 124     document.getElementById("boardContainer").style.width = boardSize + "px";
 125     let gameContainer = document.getElementById("gameContainer");
 126     gameContainer.style.width = (boardSize + movesWidth) + "px";
 127     // TODO: find the right formula here:
 128     //document.getElementById("boardSize").value = Math.floor(boardSize / 10);
 129     // timeout to avoid calling too many time the adjust method
 130     let timeoutLaunched = false;
 131     window.addEventListener("resize", (e) => {
 132       if (!timeoutLaunched)
 133       {
 134         timeoutLaunched = true;
 135         setTimeout( () => {
 136           this.adjustBoard();
 137           timeoutLaunched = false;
 138         }, 500);
 139       }
 140     });
 141   },
 142   methods: {
 143     focusBg: function() {
 144       // NOTE: small blue border appears...
 145       document.getElementById("baseGame").focus();
 146     },
 147     adjustBoard: function() {
 148       const boardContainer = document.getElementById("boardContainer");
 149       if (!boardContainer)
 150         return; //no board on page
 151       const k = document.getElementById("boardSize").value;
 152       const movesWidth = (window.innerWidth >= 768 ? 280 : 0);
 153       const minBoardWidth = 240; //TODO: these 240 and 280 are arbitrary...
 154       // Value of 0 is board min size; 100 is window.width [- movesWidth]
 155       const boardSize = minBoardWidth +
 156         k * (window.innerWidth - (movesWidth+minBoardWidth)) / 100;
 157       localStorage.setItem("boardSize", boardSize);
 158       boardContainer.style.width = boardSize + "px";
 159       document.getElementById("gameContainer").style.width =
 160         (boardSize + movesWidth) + "px";
 161     },
 162     handleKeys: function(e) {
 163       if ([32,37,38,39,40].includes(e.keyCode))
 164         e.preventDefault();
 165       switch (e.keyCode)
 166       {
 167         case 37:
 168           this.undo();
 169           break;
 170         case 39:
 171           this.play();
 172           break;
 173         case 38:
 174           this.gotoBegin();
 175           break;
 176         case 40:
 177           this.gotoEnd();
 178           break;
 179         case 32:
 180           this.flip();
 181           break;
 182       }
 183     },
 184     handleScroll: function(e) {
 185       // NOTE: since game.mode=="analyze" => no score, next condition is enough
 186       if (this.game.score != "*")
 187       {
 188         e.preventDefault();
 189         if (e.deltaY < 0)
 190           this.undo();
 191         else if (e.deltaY > 0)
 192           this.play();
 193       }
 194     },
 195     showRules: function() {
 196       //this.$router.push("/variants/" + this.game.vname);
 197       window.open("#/variants/" + this.game.vname, "_blank"); //better
 198     },
 199     re_setVariables: function() {
 200       this.endgameMessage = "";
 201       this.orientation = this.game.mycolor || "w"; //default orientation for observed games
 202       this.moves = JSON.parse(JSON.stringify(this.game.moves || []));
 203       // Post-processing: decorate each move with color + current FEN:
 204       // (to be able to jump to any position quickly)
 205       let vr_tmp = new V(this.game.fenStart); //vr is already at end of game
 206       this.firstMoveNumber =
 207         Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2);
 208       this.moves.forEach(move => {
 209         // NOTE: this is doing manually what play() function below achieve,
 210         // but in a lighter "fast-forward" way
 211         move.color = vr_tmp.turn;
 212         move.notation = vr_tmp.getNotation(move);
 213         vr_tmp.play(move);
 214         move.fen = vr_tmp.getFen();
 215       });
 216       if (this.game.fenStart.indexOf(" b ") >= 0 ||
 217         (this.moves.length > 0 && this.moves[0].color == "b"))
 218       {
 219         // 'end' is required for Board component to check lastMove for e.p.
 220         this.moves.unshift({color: "w", notation: "...", end: {x:-1,y:-1}});
 221       }
 222       const L = this.moves.length;
 223       this.cursor = L-1;
 224       this.lastMove = (L > 0 ? this.moves[L-1]  : null);
 225     },
 226     analyzePosition: function() {
 227       const newUrl = "/analyze/" + this.game.vname +
 228         "/?fen=" + this.vr.getFen().replace(/ /g, "_");
 229       if (this.game.type == "live")
 230         this.$router.push(newUrl); //open in same tab: against cheating...
 231       else
 232         window.open("#" + newUrl); //open in a new tab: more comfortable
 233     },
 234     download: function() {
 235       const content = this.getPgn();
 236       // Prepare and trigger download link
 237       let downloadAnchor = document.getElementById("download");
 238       downloadAnchor.setAttribute("download", "game.pgn");
 239       downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
 240       downloadAnchor.click();
 241     },
 242     getPgn: function() {
 243       let pgn = "";
 244       pgn += '[Site "vchess.club"]\n';
 245       pgn += '[Variant "' + this.game.vname + '"]\n';
 246       pgn += '[Date "' + getDate(new Date()) + '"]\n';
 247       pgn += '[White "' + this.game.players[0].name + '"]\n';
 248       pgn += '[Black "' + this.game.players[1].name + '"]\n';
 249       pgn += '[Fen "' + this.game.fenStart + '"]\n';
 250       pgn += '[Result "' + this.game.score + '"]\n\n';
 251       let counter = 1;
 252       let i = 0;
 253       while (i < this.moves.length)
 254       {
 255         pgn += (counter++) + ".";
 256         for (let color of ["w","b"])
 257         {
 258           let move = "";
 259           while (i < this.moves.length && this.moves[i].color == color)
 260             move += this.moves[i++].notation + ",";
 261           move = move.slice(0,-1); //remove last comma
 262           pgn += move + (i < this.moves.length ? " " : "");
 263         }
 264       }
 265       return pgn + "\n";
 266     },
 267     showEndgameMsg: function(message) {
 268       this.endgameMessage = message;
 269       let modalBox = document.getElementById("modalEog");
 270       modalBox.checked = true;
 271       setTimeout(() => { modalBox.checked = false; }, 2000);
 272     },
 273     animateMove: function(move, callback) {
 274       let startSquare = document.getElementById(getSquareId(move.start));
 275       let endSquare = document.getElementById(getSquareId(move.end));
 276       let rectStart = startSquare.getBoundingClientRect();
 277       let rectEnd = endSquare.getBoundingClientRect();
 278       let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
 279       let movingPiece =
 280         document.querySelector("#" + getSquareId(move.start) + " > img.piece");
 281       // HACK for animation (with positive translate, image slides "under background")
 282       // Possible improvement: just alter squares on the piece's way...
 283       const squares = document.getElementsByClassName("board");
 284       for (let i=0; i<squares.length; i++)
 285       {
 286         let square = squares.item(i);
 287         if (square.id != getSquareId(move.start))
 288           square.style.zIndex = "-1";
 289       }
 290       movingPiece.style.transform = "translate(" + translation.x + "px," +
 291         translation.y + "px)";
 292       movingPiece.style.transitionDuration = "0.2s";
 293       movingPiece.style.zIndex = "3000";
 294       setTimeout( () => {
 295         for (let i=0; i<squares.length; i++)
 296           squares.item(i).style.zIndex = "auto";
 297         movingPiece.style = {}; //required e.g. for 0-0 with KR swap
 298         callback();
 299       }, 250);
 300     },
 301     play: function(move, receive) {
 302       // NOTE: navigate and receive are mutually exclusive
 303       const navigate = !move;
 304       // Forbid playing outside analyze mode, except if move is received.
 305       // Sufficient condition because Board already knows which turn it is.
 306       if (!navigate && this.game.mode!="analyze" && !receive
 307         && (this.game.score != "*" || this.cursor < this.moves.length-1))
 308       {
 309         return;
 310       }
 311       const doPlayMove = () => {
 312         if (!!receive && this.cursor < this.moves.length-1)
 313           this.gotoEnd(); //required to play the move
 314         if (navigate)
 315         {
 316           if (this.cursor == this.moves.length-1)
 317             return; //no more moves
 318           move = this.moves[this.cursor+1];
 319         }
 320         else
 321         {
 322           move.color = this.vr.turn;
 323           move.notation = this.vr.getNotation(move);
 324         }
 325         this.vr.play(move);
 326         this.cursor++;
 327         this.lastMove = move;
 328         if (this.st.settings.sound == 2)
 329           new Audio("/sounds/move.mp3").play().catch(err => {});
 330         if (!navigate)
 331         {
 332           move.fen = this.vr.getFen();
 333           // Stack move on movesList at current cursor
 334           if (this.cursor == this.moves.length)
 335             this.moves.push(move);
 336           else
 337             this.moves = this.moves.slice(0,this.cursor).concat([move]);
 338         }
 339         // Is opponent in check?
 340         this.incheck = this.vr.getCheckSquares(this.vr.turn);
 341         const score = this.vr.getCurrentScore();
 342         if (score != "*")
 343         {
 344           const message = getScoreMessage(score);
 345           if (this.game.mode != "analyze")
 346             this.$emit("gameover", score, message);
 347           else //just show score on screen (allow undo)
 348             this.showEndgameMsg(score + " . " + message);
 349         }
 350         if (!navigate && this.game.mode!="analyze")
 351           this.$emit("newmove", move); //post-processing (e.g. computer play)
 352       };
 353       if (!!receive && this.game.vname != "Dark")
 354         this.animateMove(move, doPlayMove);
 355       else
 356         doPlayMove();
 357     },
 358     undo: function(move) {
 359       const navigate = !move;
 360       if (navigate)
 361       {
 362         if (this.cursor < 0)
 363           return; //no more moves
 364         move = this.moves[this.cursor];
 365       }
 366       this.vr.undo(move);
 367       this.cursor--;
 368       this.lastMove = (this.cursor >= 0 ? this.moves[this.cursor] : undefined);
 369       if (this.st.settings.sound == 2)
 370         new Audio("/sounds/undo.mp3").play().catch(err => {});
 371       this.incheck = this.vr.getCheckSquares(this.vr.turn);
 372       if (!navigate)
 373         this.moves.pop();
 374     },
 375     gotoMove: function(index) {
 376       this.vr.re_init(this.moves[index].fen);
 377       this.cursor = index;
 378       this.lastMove = this.moves[index];
 379     },
 380     gotoBegin: function() {
 381       if (this.cursor == -1)
 382         return;
 383       this.vr.re_init(this.game.fenStart);
 384       if (this.moves.length > 0 && this.moves[0].notation == "...")
 385       {
 386         this.cursor = 0;
 387         this.lastMove = this.moves[0];
 388       }
 389       else
 390       {
 391         this.cursor = -1;
 392         this.lastMove = null;
 393       }
 394     },
 395     gotoEnd: function() {
 396       if (this.cursor == this.moves.length - 1)
 397         return;
 398       this.gotoMove(this.moves.length-1);
 399     },
 400     flip: function() {
 401       this.orientation = V.GetOppCol(this.orientation);
 402     },
 403   },
 404 };
 405 </script>
 406
 407 <style lang="sass" scoped>
 408 #baseGame
 409   width: 100%
 410   &:focus
 411     outline: none
 412
 413 #gameContainer
 414   margin-left: auto
 415   margin-right: auto
 416
 417 #downloadDiv
 418   display: inline-block
 419
 420 #modal-eog+div .card
 421   overflow: hidden
 422 #controls
 423   margin-top: 10px
 424   margin-left: auto
 425   margin-right: auto
 426   button
 427     display: inline-block
 428     width: 20%
 429     margin: 0
 430 @media screen and (min-width: 768px)
 431   #controls
 432     max-width: 400px
 433 #turnIndicator
 434   text-align: center
 435 #pgnDiv
 436   text-align: center
 437   margin-left: auto
 438   margin-right: auto
 439 #boardContainer
 440   float: left
 441 // TODO: later, maybe, allow movesList of variable width
 442 // or e.g. between 250 and 350px (but more complicated)
 443 #movesList
 444   width: 280px
 445   float: left
 446 @media screen and (max-width: 767px)
 447   #movesList
 448     width: 100%
 449     float: none
 450     clear: both
 451 </style>