client/src/components/ComputerGame.vue

   1 <template lang="pug">
   2 BaseGame(
   3   ref="basegame"
   4   :game="game"
   5   @newmove="processMove"
   6 )
   7 </template>
   8
   9 <script>
  10 import BaseGame from "@/components/BaseGame.vue";
  11 import { store } from "@/store";
  12 import { CompgameStorage } from "@/utils/compgameStorage";
  13 import { getScoreMessage } from "@/utils/scoring";
  14 import { playMove, getFilteredMove } from "@/utils/playUndo";
  15 import Worker from "worker-loader!@/playCompMove";
  16 export default {
  17   name: "my-computer-game",
  18   components: {
  19     BaseGame
  20   },
  21   // gameInfo: fen + mode + vname
  22   // mode: "auto" (game comp vs comp) or "versus" (normal)
  23   props: ["gameInfo"],
  24   data: function() {
  25     return {
  26       st: store.state,
  27       game: {},
  28       vr: null,
  29       // Web worker to play computer moves without freezing interface:
  30       timeStart: undefined, //time when computer starts thinking
  31       compThink: false, //avoid asking a new move while one is being searched
  32       compWorker: null
  33     };
  34   },
  35   created: function() {
  36     // Computer moves web worker logic:
  37     this.compWorker = new Worker();
  38     this.compWorker.onmessage = e => {
  39       let compMove = e.data;
  40       // Small delay for the bot to appear "more human"
  41       const minDelay = this.gameInfo.mode == "versus" ? 500 : 1000;
  42       const delay = Math.max(minDelay - (Date.now() - this.timeStart), 0);
  43       let self = this;
  44       setTimeout(() => {
  45         if (this.currentUrl != document.location.href) return; //page change
  46         self.$refs["basegame"].play(compMove, "received");
  47         let animationLength = 0;
  48         const mvArray = (Array.isArray(compMove) ? compMove : [compMove]);
  49         const realLength =
  50           mvArray.filter(m => m.start.x >= 0 && !m.end.noHighlight).length;
  51         if (realLength >= 1)
  52           // 250 = length of animation, 500 = delay between sub-moves
  53           // TODO: a callback would be cleaner.
  54           animationLength = 250 + (realLength - 1) * 750;
  55         setTimeout(
  56           () => {
  57             self.compThink = false;
  58             self.processMove(compMove);
  59           },
  60           animationLength
  61         );
  62       }, delay);
  63     };
  64   },
  65   methods: {
  66     launchGame: function(game, options) {
  67       this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
  68       if (!game) {
  69         game = {
  70           vname: this.gameInfo.vname,
  71           fenStart: V.GenRandInitFen(options),
  72           moves: []
  73         };
  74         game.fen = game.fenStart;
  75         if (this.gameInfo.mode == "versus") CompgameStorage.add(game);
  76       }
  77       if (!game.mycolor) game.mycolor = (Math.random() < 0.5 ? "w" : "b");
  78       this.compWorker.postMessage(["init", game.fen]);
  79       this.vr = new V(game.fen);
  80       game.players = [{ name: "Computer" }, { name: "Computer" }];
  81       if (this.gameInfo.mode == "versus")
  82         game.players[game.mycolor == 'w' ? 0 : 1] = { name: "Myself" };
  83       game.score = "*"; //finished games are removed
  84       game.mode = this.gameInfo.mode;
  85       this.currentUrl = document.location.href; //to avoid playing outside page
  86       this.game = game;
  87       this.$refs["basegame"].re_setVariables(game);
  88       this.compWorker.postMessage(["init", game.fen]);
  89       if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn)
  90         this.playComputerMove();
  91     },
  92     // NOTE: a "goto" action could lead to an error when comp is thinking,
  93     // but it's OK because from the user viewpoint the game just stops.
  94     playComputerMove: function() {
  95       this.timeStart = Date.now();
  96       this.compThink = true;
  97       this.compWorker.postMessage(["askmove"]);
  98     },
  99     processMove: function(move, scoreObj) {
 100       playMove(move, this.vr);
 101       // Maybe the user stopped the game:
 102       if (this.game.score != "*") {
 103         this.$emit("game-stopped");
 104         return;
 105       }
 106       // This move could have ended the game
 107       if (!scoreObj) scoreObj = { score: this.vr.getCurrentScore() };
 108       if (scoreObj.score != "*") {
 109         this.gameOver(scoreObj.score);
 110         return;
 111       }
 112       // Send the move to web worker (including his own moves)
 113       this.compWorker.postMessage(["newmove", move]);
 114       if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
 115         this.playComputerMove();
 116       // Finally, update storage:
 117       if (this.gameInfo.mode == "versus") {
 118         CompgameStorage.update(this.gameInfo.vname, {
 119           move: getFilteredMove(move),
 120           fen: this.vr.getFen()
 121         });
 122       }
 123     },
 124     gameOver: function(score) {
 125       this.game.score = score;
 126       this.game.scoreMsg = getScoreMessage(score, V.ReverseColors);
 127       // If comp is thinking, let him finish:
 128       if (!this.compThink) this.$emit("game-stopped");
 129     }
 130   }
 131 };
 132 </script>