client/src/components/ComputerGame.vue

   1 <template lang="pug">
   2 .row
   3   .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
   4     BaseGame(:game="game" :vr="vr" ref="basegame" @newmove="processMove")
   5 </template>
   6
   7 <script>
   8 import BaseGame from "@/components/BaseGame.vue";
   9 import { store } from "@/store";
  10 import Worker from 'worker-loader!@/playCompMove';
  11
  12 export default {
  13   name: 'my-computer-game',
  14   components: {
  15     BaseGame,
  16   },
  17   // gameInfo: fen + mode + vname
  18   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
  19   props: ["gameInfo"],
  20   data: function() {
  21     return {
  22       st: store.state,
  23       // variables passed to BaseGame:
  24       fenStart: "",
  25       players: ["Myself","Computer"], //playing as white
  26       mycolor: "w",
  27       vr: null,
  28       // Web worker to play computer moves without freezing interface:
  29       timeStart: undefined, //time when computer starts thinking
  30       lockCompThink: false, //to avoid some ghost moves
  31       compWorker: null,
  32     };
  33   },
  34   computed: {
  35     game: function() {
  36       return Object.assign({},
  37         this.gameInfo,
  38         {
  39           fenStart: this.fenStart,
  40           players: this.players,
  41           mycolor: this.mycolor,
  42         });
  43     },
  44   },
  45   watch: {
  46     gameInfo: function() {
  47       // (Security) No effect if a computer move is in progress:
  48       if (this.lockCompThink)
  49         return this.$emit("computer-think");
  50       this.launchGame();
  51     },
  52   },
  53   // Modal end of game, and then sub-components
  54   created: function() {
  55     // Computer moves web worker logic: (TODO: also for observers in HH games ?)
  56     this.compWorker = new Worker(); //'/javascripts/playCompMove.js'),
  57     this.compWorker.onmessage = e => {
  58       this.lockCompThink = true; //to avoid some ghost moves
  59       let compMove = e.data;
  60       if (!Array.isArray(compMove))
  61         compMove = [compMove]; //to deal with MarseilleRules
  62       // Small delay for the bot to appear "more human"
  63       const delay = Math.max(500-(Date.now()-this.timeStart), 0);
  64       setTimeout(() => {
  65         const animate = (this.gameInfo.vname != "Dark");
  66         this.$refs.basegame.play(compMove[0], animate);
  67         if (compMove.length == 2)
  68           setTimeout( () => { this.$refs.basegame.play(compMove[1], animate); }, 750);
  69         else //250 == length of animation (TODO: should be a constant somewhere)
  70           setTimeout( () => this.lockCompThink = false, 250);
  71       }, delay);
  72     }
  73     if (!!this.fen)
  74       this.launchGame();
  75   },
  76   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  77   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  78   methods: {
  79     launchGame: async function() {
  80       const vModule = await import("@/variants/" + this.gameInfo.vname + ".js");
  81       window.V = vModule.VariantRules;
  82       this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
  83       this.compWorker.postMessage(["init",this.gameInfo.fenStart]);
  84       this.newGameFromFen(this.gameInfo.fenStart);
  85     },
  86     newGameFromFen: function(fen) {
  87       this.vr = new V(fen);
  88       this.mycolor = (Math.random() < 0.5 ? "w" : "b");
  89       this.players = ["Myself","Computer"];
  90       if (this.mycolor == "b")
  91         this.players = this.players.reverse();
  92       this.compWorker.postMessage(["init",fen]);
  93       if (this.mycolor != "w" || this.gameInfo.mode == "auto")
  94         this.playComputerMove();
  95     },
  96     playComputerMove: function() {
  97       this.timeStart = Date.now();
  98       this.compWorker.postMessage(["askmove"]);
  99     },
 100     // TODO: do not process if game is over (check score ?)
 101     processMove: function(move) {
 102       // Send the move to web worker (including his own moves)
 103       this.compWorker.postMessage(["newmove",move]);
 104       // subTurn condition for Marseille (and Avalanche) rules
 105       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 106         && (this.mode == "auto" || this.vr.turn != this.mycolor))
 107       {
 108         this.playComputerMove();
 109       }
 110     },
 111   },
 112 };
 113 </script>