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"
   5       @newmove="processMove" @gameover="gameOver")
   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   // gameInfo: fen + mode + vname
  19   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
  20   props: ["gameInfo"],
  21   data: function() {
  22     return {
  23       st: store.state,
  24       game: { },
  25       vr: null,
  26       // Web worker to play computer moves without freezing interface:
  27       timeStart: undefined, //time when computer starts thinking
  28       lockCompThink: false, //to avoid some ghost moves
  29       compWorker: null,
  30     };
  31   },
  32   watch: {
  33     "gameInfo.fen": function() {
  34       // (Security) No effect if a computer move is in progress:
  35       if (this.lockCompThink)
  36         return this.$emit("computer-think");
  37       this.launchGame();
  38     },
  39     "gameInfo.userStop": function() {
  40       if (this.gameInfo.userStop)
  41       {
  42         // User stopped the game: unknown result
  43         this.game.mode = "analyze";
  44       }
  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.gameInfo.vname != "Dark");
  60         this.$refs.basegame.play(compMove[0], animate);
  61         if (compMove.length == 2)
  62           setTimeout( () => { this.$refs.basegame.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.gameInfo.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.gameInfo.vname + ".js");
  75       window.V = vModule.VariantRules;
  76       this.compWorker.postMessage(["scripts",this.gameInfo.vname]);
  77       this.compWorker.postMessage(["init",this.gameInfo.fen]);
  78       this.vr = new V(this.gameInfo.fen);
  79       const mycolor = (Math.random() < 0.5 ? "w" : "b");
  80       let players = ["Myself","Computer"];
  81       if (mycolor == "b")
  82         players = players.reverse();
  83       // NOTE: (TODO?) fen and fenStart are redundant in game object
  84       this.game = Object.assign({},
  85         this.gameInfo,
  86         {
  87           fenStart: this.gameInfo.fen,
  88           players: players,
  89           mycolor: mycolor,
  90         });
  91       this.compWorker.postMessage(["init",this.gameInfo.fen]);
  92       if (mycolor != "w" || this.gameInfo.mode == "auto")
  93         this.playComputerMove();
  94     },
  95     playComputerMove: function() {
  96       this.timeStart = Date.now();
  97       this.compWorker.postMessage(["askmove"]);
  98     },
  99     // TODO: do not process if game is over (check score ?)
 100     processMove: function(move) {
 101       // Send the move to web worker (including his own moves)
 102       this.compWorker.postMessage(["newmove",move]);
 103       // subTurn condition for Marseille (and Avalanche) rules
 104       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 105         && (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor))
 106       {
 107         this.playComputerMove();
 108       }
 109     },
 110     gameOver: function(score) {
 111       // Just switch to analyze mode: no user action can set score
 112       this.game.mode = "analyze";
 113     },
 114   },
 115 };
 116 </script>