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