client/src/components/ComputerGame.vue

   1 <template lang="pug">
   2 BaseGame(:game="game" :vr="vr" @newmove="processMove" @gameover="gameOver")
   3 </template>
   4
   5 <script>
   6 import BaseGame from "@/components/BaseGame.vue";
   7 import { store } from "@/store";
   8 import Worker from "worker-loader!@/playCompMove";
   9 export default {
  10   name: "my-computer-game",
  11   components: {
  12     BaseGame
  13   },
  14   // gameInfo: fen + mode + vname
  15   // mode: "auto" (game comp vs comp) or "versus" (normal)
  16   props: ["gameInfo"],
  17   data: function() {
  18     return {
  19       st: store.state,
  20       game: {},
  21       vr: null,
  22       // Web worker to play computer moves without freezing interface:
  23       timeStart: undefined, //time when computer starts thinking
  24       compThink: false, //avoid asking a new move while one is being searched
  25       compWorker: null
  26     };
  27   },
  28   watch: {
  29     "gameInfo.fen": function() {
  30       this.launchGame();
  31     },
  32     "gameInfo.score": function(newScore) {
  33       if (newScore != "*") {
  34         this.game.score = newScore; //user action
  35         if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp
  36       }
  37     }
  38   },
  39   // Modal end of game, and then sub-components
  40   created: function() {
  41     // Computer moves web worker logic:
  42     this.compWorker = new Worker();
  43     this.compWorker.onmessage = e => {
  44       let compMove = e.data;
  45       if (!compMove) {
  46         this.compThink = false;
  47         this.$emit("game-stopped"); //no more moves: mate or stalemate
  48         return; //after game ends, no more moves, nothing to do
  49       }
  50       if (!Array.isArray(compMove)) compMove = [compMove]; //to deal with MarseilleRules
  51       // Small delay for the bot to appear "more human"
  52       const delay = Math.max(500 - (Date.now() - this.timeStart), 0);
  53       setTimeout(() => {
  54         if (this.currentUrl != document.location.href) return; //page change
  55         // NOTE: Dark and 2-moves are incompatible
  56         const animate = this.gameInfo.vname != "Dark";
  57         const animDelay = animate ? 250 : 0;
  58         let moveIdx = 0;
  59         let self = this;
  60         (function executeMove() {
  61           self.$set(self.game, "moveToPlay", compMove[moveIdx++]);
  62           if (moveIdx >= compMove.length) {
  63             self.compThink = false;
  64             if (self.game.score != "*")
  65               //user action
  66               self.$emit("game-stopped");
  67           } else setTimeout(executeMove, 500 + animDelay);
  68         })();
  69       }, delay);
  70     };
  71     if (this.gameInfo.fen) this.launchGame();
  72   },
  73   methods: {
  74     launchGame: function() {
  75       this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
  76       this.compWorker.postMessage(["init", this.gameInfo.fen]);
  77       this.vr = new V(this.gameInfo.fen);
  78       const mycolor = Math.random() < 0.5 ? "w" : "b";
  79       let players = [{ name: "Myself" }, { name: "Computer" }];
  80       if (mycolor == "b") players = players.reverse();
  81       this.currentUrl = document.location.href; //to avoid playing outside page
  82       // NOTE: fen and fenStart are redundant in game object
  83       this.game = Object.assign({}, this.gameInfo, {
  84         fenStart: this.gameInfo.fen,
  85         players: players,
  86         mycolor: mycolor,
  87         score: "*"
  88       });
  89       this.compWorker.postMessage(["init", this.gameInfo.fen]);
  90       if (mycolor != "w" || this.gameInfo.mode == "auto")
  91         this.playComputerMove();
  92     },
  93     playComputerMove: function() {
  94       this.timeStart = Date.now();
  95       this.compThink = true;
  96       this.compWorker.postMessage(["askmove"]);
  97     },
  98     processMove: function(move) {
  99       if (this.game.score != "*") return;
 100       // Send the move to web worker (including his own moves)
 101       this.compWorker.postMessage(["newmove", move]);
 102       // subTurn condition for Marseille (and Avalanche) rules
 103       if (
 104         (!this.vr.subTurn || this.vr.subTurn <= 1) &&
 105         (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
 106       ) {
 107         this.playComputerMove();
 108       }
 109     },
 110     gameOver: function(score, scoreMsg) {
 111       this.game.score = score;
 112       this.game.scoreMsg = scoreMsg;
 113       this.$emit("game-over", score); //bubble up to Rules.vue
 114     }
 115   }
 116 };
 117 </script>