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), "versus" (normal) or "analyze"
  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         this.game.mode = "analyze";
  39         if (!this.compThink)
  40           this.$emit("game-stopped"); //otherwise wait for comp
  41       }
  42     },
  43   },
  44   // Modal end of game, and then sub-components
  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       {
  52         this.compThink = false;
  53         this.$emit("game-stopped"); //no more moves: mate or stalemate
  54         return; //after game ends, no more moves, nothing to do
  55       }
  56       if (!Array.isArray(compMove))
  57         compMove = [compMove]; //to deal with MarseilleRules
  58       // Small delay for the bot to appear "more human"
  59       const delay = Math.max(500-(Date.now()-this.timeStart), 0);
  60       setTimeout(() => {
  61         if (this.currentUrl != document.location.href)
  62           return; //page change
  63         // NOTE: Dark and 2-moves are incompatible
  64         const animate = (this.gameInfo.vname != "Dark");
  65         const animDelay = (animate ? 250 : 0);
  66         let moveIdx = 0;
  67         let self = this;
  68         (function executeMove() {
  69           self.$refs.basegame.play(compMove[moveIdx++], animate);
  70           if (moveIdx >= compMove.length)
  71           {
  72             self.compThink = false;
  73             if (self.game.score != "*") //user action
  74               self.$emit("game-stopped");
  75           }
  76           else
  77             setTimeout(executeMove, 500 + animDelay);
  78         })();
  79       }, delay);
  80     }
  81     if (!!this.gameInfo.fen)
  82       this.launchGame();
  83   },
  84   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  85   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  86   methods: {
  87     launchGame: async function() {
  88       const vModule = await import("@/variants/" + this.gameInfo.vname + ".js");
  89       window.V = vModule.VariantRules;
  90       this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
  91       this.compWorker.postMessage(["init",this.gameInfo.fen]);
  92       this.vr = new V(this.gameInfo.fen);
  93       const mycolor = (Math.random() < 0.5 ? "w" : "b");
  94       let players = [{name:"Myself"},{name:"Computer"}];
  95       if (mycolor == "b")
  96         players = players.reverse();
  97       this.currentUrl = document.location.href; //to avoid playing outside page
  98       // NOTE: fen and fenStart are redundant in game object
  99       this.game = Object.assign({},
 100         this.gameInfo,
 101         {
 102           fenStart: this.gameInfo.fen,
 103           players: players,
 104           mycolor: mycolor,
 105           score: "*",
 106         });
 107       this.compWorker.postMessage(["init",this.gameInfo.fen]);
 108       if (mycolor != "w" || this.gameInfo.mode == "auto")
 109         this.playComputerMove();
 110     },
 111     playComputerMove: function() {
 112       this.timeStart = Date.now();
 113       this.compThink = true;
 114       this.compWorker.postMessage(["askmove"]);
 115     },
 116     processMove: function(move) {
 117       // Send the move to web worker (including his own moves)
 118       this.compWorker.postMessage(["newmove",move]);
 119       // subTurn condition for Marseille (and Avalanche) rules
 120       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 121         && (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor))
 122       {
 123         this.playComputerMove();
 124       }
 125     },
 126     gameOver: function(score, scoreMsg) {
 127       this.game.score = score;
 128       this.game.scoreMsg = scoreMsg;
 129       this.game.mode = "analyze";
 130       this.$emit("game-over", score); //bubble up to Rules.vue
 131     },
 132   },
 133 };
 134 </script>