client/src/components/BaseGame.vue

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