client/src/components/ComputerGame.vue

   1 <template lang="pug">
   2 BaseGame(
   3   ref="basegame"
   4   :game="game"
   5   @newmove="processMove"
   6   @gameover="gameOver"
   7 )
   8 </template>
   9
  10 <script>
  11 import BaseGame from "@/components/BaseGame.vue";
  12 import { store } from "@/store";
  13 import { CompgameStorage } from "@/utils/compgameStorage";
  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 delay = Math.max(500 - (Date.now() - this.timeStart), 0);
  42       let self = this;
  43       setTimeout(() => {
  44         if (this.currentUrl != document.location.href) return; //page change
  45         // NOTE: BaseGame::play() will trigger processMove() here
  46         self.$refs["basegame"].play(compMove, "received");
  47         self.compThink = false;
  48         if (self.game.score != "*")
  49           // User action
  50           self.$emit("game-stopped");
  51       }, delay);
  52     };
  53   },
  54   methods: {
  55     launchGame: function(game) {
  56       this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
  57       if (!game) {
  58         game = {
  59           vname: this.gameInfo.vname,
  60           fenStart: V.GenRandInitFen(),
  61           moves: []
  62         };
  63         game.fen = game.fenStart;
  64         if (this.gameInfo.mode == "versus")
  65           CompgameStorage.add(game);
  66       }
  67       if (this.gameInfo.mode == "versus" && !game.mycolor)
  68         game.mycolor = Math.random() < 0.5 ? "w" : "b";
  69       this.compWorker.postMessage(["init", game.fen]);
  70       this.vr = new V(game.fen);
  71       game.players = [{ name: "Myself" }, { name: "Computer" }];
  72       if (game.myColor == "b") game.players = game.players.reverse();
  73       game.score = "*"; //finished games are removed
  74       this.currentUrl = document.location.href; //to avoid playing outside page
  75       this.game = game;
  76       this.compWorker.postMessage(["init", game.fen]);
  77       if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn)
  78         this.playComputerMove();
  79     },
  80     // NOTE: a "goto" action could lead to an error when comp is thinking,
  81     // but it's OK because from the user viewpoint the game just stops.
  82     playComputerMove: function() {
  83       this.timeStart = Date.now();
  84       this.compThink = true;
  85       this.compWorker.postMessage(["askmove"]);
  86     },
  87     processMove: function(move) {
  88       playMove(move, this.vr);
  89       // This move could have ended the game: if this is the case,
  90       // the game is already removed from storage (if mode == 'versus')
  91       if (this.game.score != "*") return;
  92       // Send the move to web worker (including his own moves)
  93       this.compWorker.postMessage(["newmove", move]);
  94       if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
  95         this.playComputerMove();
  96       // Finally, update storage:
  97       if (this.gameInfo.mode == "versus") {
  98         CompgameStorage.update(this.gameInfo.vname, {
  99           move: getFilteredMove(move),
 100           fen: this.vr.getFen()
 101         });
 102       }
 103     },
 104     gameOver: function(score, scoreMsg) {
 105       this.game.score = score;
 106       this.game.scoreMsg = scoreMsg;
 107       if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp
 108     }
 109   }
 110 };
 111 </script>