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
  14 // TODO: simplify, just "game" and "gameInfo" prop (fen+mode+vname may change at the same time)
  15
  16
  17 export default {
  18   name: 'my-computer-game',
  19   components: {
  20     BaseGame,
  21   },
  22   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
  23   props: ["fen","mode","vname"],
  24   data: function() {
  25     return {
  26       st: store.state,
  27       // variables passed to BaseGame:
  28       gameInfo: {
  29         fenStart: "",
  30         players: ["Myself","Computer"], //playing as white
  31         mycolor: "w",
  32       },
  33       vr: null,
  34       // Web worker to play computer moves without freezing interface:
  35       timeStart: undefined, //time when computer starts thinking
  36       lockCompThink: false, //to avoid some ghost moves
  37       compWorker: null,
  38     };
  39   },
  40   computed: {
  41     analyze: function() {
  42       return this.mode == "analyze";
  43     },
  44   },
  45   watch: {
  46     fen: 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.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.vname + ".js");
  81       window.V = vModule.VariantRules;
  82       this.compWorker.postMessage(["scripts",this.vname]);
  83       this.compWorker.postMessage(["init",this.fen]);
  84       this.newGameFromFen(this.fen);
  85     },
  86     newGameFromFen: function(fen) {
  87       this.vr = new V(fen);
  88       this.gameInfo.fenStart = fen;
  89       this.gameInfo.mycolor = (Math.random() < 0.5 ? "w" : "b");
  90       this.gameInfo.players = ["Myself","Computer"];
  91       if (this.gameInfo.mycolor == "b")
  92         this.gameInfo.players = this.gameInfo.players.reverse();
  93       this.compWorker.postMessage(["init",fen]);
  94       if (this.gameInfo.mycolor != "w" || this.mode == "auto")
  95         this.playComputerMove();
  96     },
  97     playComputerMove: function() {
  98       this.timeStart = Date.now();
  99       this.compWorker.postMessage(["askmove"]);
 100     },
 101     // TODO: do not process if game is over (check score ?)
 102     processMove: function(move) {
 103       // Send the move to web worker (including his own moves)
 104       this.compWorker.postMessage(["newmove",move]);
 105       // subTurn condition for Marseille (and Avalanche) rules
 106       if ((!this.vr.subTurn || this.vr.subTurn <= 1)
 107         && (this.mode == "auto" || this.vr.turn != this.gameInfo.mycolor))
 108       {
 109         this.playComputerMove();
 110       }
 111     },
 112   },
 113 };
 114 </script>