client/src/components/ComputerGame.vue

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