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   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  84   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  85   methods: {
  86     launchGame: async function() {
  87       const vModule = await import("@/variants/" + this.gameInfo.vname + ".js");
  88       window.V = vModule.VariantRules;
  89       this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
  90       this.compWorker.postMessage(["init",this.gameInfo.fen]);
  91       this.vr = new V(this.gameInfo.fen);
  92       const mycolor = (Math.random() < 0.5 ? "w" : "b");
  93       let players = [{name:"Myself"},{name:"Computer"}];
  94       if (mycolor == "b")
  95         players = players.reverse();
  96       this.currentUrl = document.location.href; //to avoid playing outside page
  97       // NOTE: fen and fenStart are redundant in game object
  98       this.game = Object.assign({},
  99         this.gameInfo,
 100         {
 101           fenStart: this.gameInfo.fen,
 102           players: players,
 103           mycolor: mycolor,
 104           score: "*",
 105         });
 106       this.compWorker.postMessage(["init",this.gameInfo.fen]);
 107       if (mycolor != "w" || this.gameInfo.mode == "auto")
 108         this.playComputerMove();
 109     },
 110     playComputerMove: function() {
 111       this.timeStart = Date.now();
 112       this.compThink = true;
 113       this.compWorker.postMessage(["askmove"]);
 114     },
 115     processMove: function(move) {
 116       // Send the move to web worker (including his own moves)
 117       this.compWorker.postMessage(["newmove",move]);
 118       // subTurn condition for Marseille (and Avalanche) rules
 119       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 120         && (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor))
 121       {
 122         this.playComputerMove();
 123       }
 124     },
 125     gameOver: function(score, scoreMsg) {
 126       this.game.score = score;
 127       this.game.scoreMsg = scoreMsg;
 128       this.$emit("game-over", score); //bubble up to Rules.vue
 129     },
 130   },
 131 };
 132 </script>