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         // NOTE: Dark and 2-moves are incompatible
  62         const animate = (this.gameInfo.vname != "Dark");
  63         const animDelay = (animate ? 250 : 0);
  64         let moveIdx = 0;
  65         let self = this;
  66         (function executeMove() {
  67           self.$refs.basegame.play(compMove[moveIdx++], animate);
  68           if (moveIdx >= compMove.length)
  69           {
  70             self.compThink = false;
  71             if (self.game.score != "*") //user action
  72               self.$emit("game-stopped");
  73           }
  74           else
  75             setTimeout(executeMove, 500 + animDelay);
  76         })();
  77       }, delay);
  78     }
  79     if (!!this.gameInfo.fen)
  80       this.launchGame();
  81   },
  82   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  83   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  84   methods: {
  85     launchGame: async function() {
  86       const vModule = await import("@/variants/" + this.gameInfo.vname + ".js");
  87       window.V = vModule.VariantRules;
  88       this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
  89       this.compWorker.postMessage(["init",this.gameInfo.fen]);
  90       this.vr = new V(this.gameInfo.fen);
  91       const mycolor = (Math.random() < 0.5 ? "w" : "b");
  92       let players = [{name:"Myself"},{name:"Computer"}];
  93       if (mycolor == "b")
  94         players = players.reverse();
  95       // NOTE: fen and fenStart are redundant in game object
  96       this.game = Object.assign({},
  97         this.gameInfo,
  98         {
  99           fenStart: this.gameInfo.fen,
 100           players: players,
 101           mycolor: mycolor,
 102           score: "*",
 103         });
 104       this.compWorker.postMessage(["init",this.gameInfo.fen]);
 105       if (mycolor != "w" || this.gameInfo.mode == "auto")
 106         this.playComputerMove();
 107     },
 108     playComputerMove: function() {
 109       this.timeStart = Date.now();
 110       this.compThink = true;
 111       this.compWorker.postMessage(["askmove"]);
 112     },
 113     processMove: function(move) {
 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) {
 124       this.game.score = score;
 125       this.game.mode = "analyze";
 126       this.$emit("game-over", score); //bubble up to Rules.vue
 127     },
 128   },
 129 };
 130 </script>