client/src/components/ComputerGame.vue

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