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(:vname="vname" :analyze="analyze"
   5       :vr="vr" :fen-start="fenStart" :players="players" :mycolor="mycolor")
   6 </template>
   7
   8 <script>
   9 import BaseGame from "@/components/BaseGame.vue";
  10 import { store } from "@/store";
  11 import Worker from 'worker-loader!@/playCompMove';
  12
  13 export default {
  14   name: 'my-computer-game',
  15   components: {
  16     BaseGame,
  17   },
  18   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
  19   props: ["fen","mode","vname"],
  20   data: function() {
  21     return {
  22       st: store.state,
  23       // variables passed to BaseGame:
  24       fenStart: "",
  25       vr: null,
  26       players: ["Myself","Computer"], //always playing white for now
  27       mycolor: "w",
  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     analyze: function() {
  36       return this.mode == "analyze";
  37     },
  38   },
  39   watch: {
  40     fen: function() {
  41       // (Security) No effect if a computer move is in progress:
  42       if (this.lockCompThink)
  43         return this.$emit("computer-think");
  44       this.launchGame();
  45     },
  46   },
  47   // Modal end of game, and then sub-components
  48   created: function() {
  49     // Computer moves web worker logic: (TODO: also for observers in HH games ?)
  50     this.compWorker = new Worker(); //'/javascripts/playCompMove.js'),
  51     this.compWorker.onmessage = e => {
  52       this.lockCompThink = true; //to avoid some ghost moves
  53       let compMove = e.data;
  54       if (!Array.isArray(compMove))
  55         compMove = [compMove]; //to deal with MarseilleRules
  56       // Small delay for the bot to appear "more human"
  57       const delay = Math.max(500-(Date.now()-this.timeStart), 0);
  58       setTimeout(() => {
  59         const animate = this.vname != "Dark";
  60         this.play(compMove[0], animate);
  61         if (compMove.length == 2)
  62           setTimeout( () => { this.play(compMove[1], animate); }, 750);
  63         else //250 == length of animation (TODO: should be a constant somewhere)
  64           setTimeout( () => this.lockCompThink = false, 250);
  65       }, delay);
  66     }
  67     if (!!this.fen)
  68       this.launchGame();
  69   },
  70   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  71   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  72   methods: {
  73     launchGame: async function() {
  74       const vModule = await import("@/variants/" + this.vname + ".js");
  75       window.V = vModule.VariantRules;
  76       this.compWorker.postMessage(["scripts",this.vname]);
  77       this.newGameFromFen(this.fen);
  78     },
  79     newGameFromFen: function(fen) {
  80       this.vr = new V(fen);
  81       this.moves = [];
  82       this.cursor = -1;
  83       this.fenStart = fen;
  84       this.score = "*";
  85       if (this.mode == "analyze")
  86       {
  87         this.mycolor = V.ParseFen(fen).turn;
  88         this.orientation = this.mycolor;
  89       }
  90       else if (this.mode == "computer") //only other alternative (HH with gameId)
  91       {
  92         this.mycolor = (Math.random() < 0.5 ? "w" : "b");
  93         this.orientation = this.mycolor;
  94         this.compWorker.postMessage(["init",fen]);
  95         if (this.mycolor != "w" || this.subMode == "auto")
  96           this.playComputerMove();
  97       }
  98     },
  99     playComputerMove: function() {
 100       this.timeStart = Date.now();
 101       this.compWorker.postMessage(["askmove"]);
 102     },
 103   },
 104 };
 105 </script>