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