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" :vr="vr"
   5       :game-info="gameInfo" ref="basegame" @newmove="processMove")
   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       gameInfo: {
  25         fenStart: "",
  26         players: ["Myself","Computer"], //playing as white
  27         mycolor: "w",
  28       },
  29       vr: null,
  30       // Web worker to play computer moves without freezing interface:
  31       timeStart: undefined, //time when computer starts thinking
  32       lockCompThink: false, //to avoid some ghost moves
  33       compWorker: null,
  34     };
  35   },
  36   computed: {
  37     analyze: function() {
  38       return this.mode == "analyze";
  39     },
  40   },
  41   watch: {
  42     fen: function() {
  43       // (Security) No effect if a computer move is in progress:
  44       if (this.lockCompThink)
  45         return this.$emit("computer-think");
  46       this.launchGame();
  47     },
  48   },
  49   // Modal end of game, and then sub-components
  50   created: function() {
  51     // Computer moves web worker logic: (TODO: also for observers in HH games ?)
  52     this.compWorker = new Worker(); //'/javascripts/playCompMove.js'),
  53     this.compWorker.onmessage = e => {
  54       this.lockCompThink = true; //to avoid some ghost moves
  55       let compMove = e.data;
  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         const animate = (this.vname != "Dark");
  62         this.$refs.basegame.play(compMove[0], animate);
  63         if (compMove.length == 2)
  64           setTimeout( () => { this.$refs.basegame.play(compMove[1], animate); }, 750);
  65         else //250 == length of animation (TODO: should be a constant somewhere)
  66           setTimeout( () => this.lockCompThink = false, 250);
  67       }, delay);
  68     }
  69     if (!!this.fen)
  70       this.launchGame();
  71   },
  72   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  73   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  74   methods: {
  75     launchGame: async function() {
  76       const vModule = await import("@/variants/" + this.vname + ".js");
  77       window.V = vModule.VariantRules;
  78       this.compWorker.postMessage(["scripts",this.vname]);
  79       this.compWorker.postMessage(["init",this.fen]);
  80       this.newGameFromFen(this.fen);
  81     },
  82     newGameFromFen: function(fen) {
  83       this.vr = new V(fen);
  84       this.gameInfo.fenStart = fen;
  85       this.gameInfo.mycolor = (Math.random() < 0.5 ? "w" : "b");
  86       this.gameInfo.players = ["Myself","Computer"];
  87       if (this.gameInfo.mycolor == "b")
  88         this.gameInfo.players = this.gameInfo.players.reverse();
  89       this.compWorker.postMessage(["init",fen]);
  90       if (this.gameInfo.mycolor != "w" || this.mode == "auto")
  91         this.playComputerMove();
  92     },
  93     playComputerMove: function() {
  94       this.timeStart = Date.now();
  95       this.compWorker.postMessage(["askmove"]);
  96     },
  97     // TODO: do not process if game is over (check score ?)
  98     processMove: function(move) {
  99       // Send the move to web worker (including his own moves)
 100       this.compWorker.postMessage(["newmove",move]);
 101       // subTurn condition for Marseille (and Avalanche) rules
 102       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 103         && (this.mode == "auto" || this.vr.turn != this.mycolor))
 104       {
 105         this.playComputerMove();
 106       }
 107     },
 108   },
 109 };
 110 </script>