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(:variant="variant.name" :analyze="analyze" : players="players")
   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   // mode: "auto" (game comp vs comp), "versus" (normal) or "analyze"
  18   props: ["fen","mode","variant"],
  19   data: function() {
  20     return {
  21       st: store.state,
  22       // Web worker to play computer moves without freezing interface:
  23       timeStart: undefined, //time when computer starts thinking
  24       lockCompThink: false, //to avoid some ghost moves
  25       fenStart: "",
  26       compWorker: null,
  27
  28 //TODO: players ? Computed?
  29
  30     };
  31   },
  32   computed: {
  33     analyze: function() {
  34       return this.mode == "analyze";
  35     },
  36   },
  37   watch: {
  38     fen: function() {
  39       // (Security) No effect if a computer move is in progress:
  40       if (this.lockCompThink)
  41         return this.$emit("computer-think");
  42       this.launchGame();
  43     },
  44   },
  45   // Modal end of game, and then sub-components
  46   created: function() {
  47     if (!!this.fen)
  48       this.launchGame();
  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.variant.name != "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   },
  68   // dans variant.js (plutôt room.js) conn gère aussi les challenges
  69   // et les chats dans chat.js. Puis en webRTC, repenser tout ça.
  70   methods: {
  71     launchGame: async function() {
  72       const vModule = await import("@/variants/" + this.variant.name + ".js");
  73       window.V = vModule.VariantRules;
  74       this.compWorker.postMessage(["scripts",this.variant.name]);
  75       this.newGameFromFen(this.fen);
  76     },
  77     newGameFromFen: function(fen) {
  78       this.vr = new V(fen);
  79       this.moves = [];
  80       this.cursor = -1;
  81       this.fenStart = fen;
  82       this.score = "*";
  83       if (this.mode == "analyze")
  84       {
  85         this.mycolor = V.ParseFen(fen).turn;
  86         this.orientation = this.mycolor;
  87       }
  88       else if (this.mode == "computer") //only other alternative (HH with gameId)
  89       {
  90         this.mycolor = (Math.random() < 0.5 ? "w" : "b");
  91         this.orientation = this.mycolor;
  92         this.compWorker.postMessage(["init",fen]);
  93         if (this.mycolor != "w" || this.subMode == "auto")
  94           this.playComputerMove();
  95       }
  96     },
  97     playComputerMove: function() {
  98       this.timeStart = Date.now();
  99       this.compWorker.postMessage(["askmove"]);
 100     },
 101   },
 102 };
 103 </script>