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   },
  39   created: function() {
  40     // Computer moves web worker logic:
  41     this.compWorker = new Worker();
  42     this.compWorker.onmessage = e => {
  43       let compMove = e.data;
  44       if (!compMove) {
  45         this.compThink = false;
  46         this.$emit("game-stopped"); //no more moves: mate or stalemate
  47         return; //after game ends, no more moves, nothing to do
  48       }
  49       if (!Array.isArray(compMove)) compMove = [compMove]; //potential multi-move
  50       // Small delay for the bot to appear "more human"
  51       const delay = Math.max(500 - (Date.now() - this.timeStart), 0);
  52       setTimeout(() => {
  53         if (this.currentUrl != document.location.href) return; //page change
  54         // NOTE: do not animate move if special display (ShowMoves != "all")
  55         const animate = V.ShowMoves == "all";
  56         const animDelay = animate ? 250 : 0;
  57         let moveIdx = 0;
  58         let self = this;
  59         (function executeMove() {
  60           self.$refs["basegame"].play(compMove[moveIdx++], "received");
  61           if (moveIdx >= compMove.length) {
  62             self.compThink = false;
  63             if (self.game.score != "*")
  64               //user action
  65               self.$emit("game-stopped");
  66           } else setTimeout(executeMove, 500 + animDelay);
  67         })();
  68       }, delay);
  69     };
  70     if (this.gameInfo.fen) this.launchGame();
  71   },
  72   methods: {
  73     launchGame: function() {
  74       this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
  75       this.compWorker.postMessage(["init", this.gameInfo.fen]);
  76       this.vr = new V(this.gameInfo.fen);
  77       const mycolor = Math.random() < 0.5 ? "w" : "b";
  78       let players = [{ name: "Myself" }, { name: "Computer" }];
  79       if (mycolor == "b") players = players.reverse();
  80       this.currentUrl = document.location.href; //to avoid playing outside page
  81       // NOTE: fen and fenStart are redundant in game object
  82       this.game = Object.assign({}, this.gameInfo, {
  83         fenStart: this.gameInfo.fen,
  84         players: players,
  85         mycolor: mycolor,
  86         score: "*"
  87       });
  88       this.compWorker.postMessage(["init", this.gameInfo.fen]);
  89       if (mycolor != "w" || this.gameInfo.mode == "auto")
  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) {
 100       if (this.game.score != "*") return;
 101       // Send the move to web worker (including his own moves)
 102       this.compWorker.postMessage(["newmove", move]);
 103       // subTurn condition for Marseille (and Avalanche) rules
 104       if (
 105         (!this.vr.subTurn || this.vr.subTurn <= 1) &&
 106         (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
 107       ) {
 108         this.playComputerMove();
 109       }
 110     },
 111     gameOver: function(score, scoreMsg) {
 112       this.game.score = score;
 113       this.game.scoreMsg = scoreMsg;
 114       if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp
 115     }
 116   }
 117 };
 118 </script>