Some more cleaning + fixes
[vchess.git] / client / src / components / ComputerGame.vue
CommitLineData
a6088c90 1<template lang="pug">
910d631b
BA
2BaseGame(
3 :game="game"
4 :vr="vr"
5 @newmove="processMove"
6 @gameover="gameOver"
7)
a6088c90
BA
8</template>
9
10<script>
11import BaseGame from "@/components/BaseGame.vue";
12import { store } from "@/store";
41cb9b94 13import Worker from "worker-loader!@/playCompMove";
a6088c90 14export default {
41cb9b94 15 name: "my-computer-game",
a6088c90 16 components: {
6808d7a1 17 BaseGame
a6088c90 18 },
6dd02928 19 // gameInfo: fen + mode + vname
63ca2b89 20 // mode: "auto" (game comp vs comp) or "versus" (normal)
6dd02928 21 props: ["gameInfo"],
a6088c90
BA
22 data: function() {
23 return {
24 st: store.state,
41cb9b94 25 game: {},
b7c32f1a 26 vr: null,
a6088c90
BA
27 // Web worker to play computer moves without freezing interface:
28 timeStart: undefined, //time when computer starts thinking
41cb9b94 29 compThink: false, //avoid asking a new move while one is being searched
6808d7a1 30 compWorker: null
a6088c90
BA
31 };
32 },
a6088c90 33 watch: {
834c202a 34 "gameInfo.fen": function() {
a6088c90
BA
35 this.launchGame();
36 },
41cb9b94 37 "gameInfo.score": function(newScore) {
6808d7a1 38 if (newScore != "*") {
41cb9b94 39 this.game.score = newScore; //user action
6808d7a1 40 if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp
834c202a 41 }
6808d7a1 42 }
a6088c90
BA
43 },
44 // Modal end of game, and then sub-components
45 created: function() {
41cb9b94
BA
46 // Computer moves web worker logic:
47 this.compWorker = new Worker();
a6088c90 48 this.compWorker.onmessage = e => {
a6088c90 49 let compMove = e.data;
6808d7a1 50 if (!compMove) {
7b3cf1b7
BA
51 this.compThink = false;
52 this.$emit("game-stopped"); //no more moves: mate or stalemate
41cb9b94 53 return; //after game ends, no more moves, nothing to do
7b3cf1b7 54 }
910d631b 55 if (!Array.isArray(compMove)) compMove = [compMove]; //potential multi-move
a6088c90 56 // Small delay for the bot to appear "more human"
6808d7a1 57 const delay = Math.max(500 - (Date.now() - this.timeStart), 0);
a6088c90 58 setTimeout(() => {
6808d7a1 59 if (this.currentUrl != document.location.href) return; //page change
41cb9b94 60 // NOTE: Dark and 2-moves are incompatible
6808d7a1
BA
61 const animate = this.gameInfo.vname != "Dark";
62 const animDelay = animate ? 250 : 0;
af32cf62
BA
63 let moveIdx = 0;
64 let self = this;
65 (function executeMove() {
63ca2b89 66 self.$set(self.game, "moveToPlay", compMove[moveIdx++]);
6808d7a1 67 if (moveIdx >= compMove.length) {
af32cf62 68 self.compThink = false;
6808d7a1
BA
69 if (self.game.score != "*")
70 //user action
af32cf62 71 self.$emit("game-stopped");
6808d7a1 72 } else setTimeout(executeMove, 500 + animDelay);
af32cf62 73 })();
a6088c90 74 }, delay);
6808d7a1
BA
75 };
76 if (this.gameInfo.fen) this.launchGame();
a6088c90 77 },
a6088c90 78 methods: {
e6a5a8ea 79 launchGame: function() {
6808d7a1
BA
80 this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
81 this.compWorker.postMessage(["init", this.gameInfo.fen]);
834c202a 82 this.vr = new V(this.gameInfo.fen);
6808d7a1
BA
83 const mycolor = Math.random() < 0.5 ? "w" : "b";
84 let players = [{ name: "Myself" }, { name: "Computer" }];
85 if (mycolor == "b") players = players.reverse();
6cd07b4d 86 this.currentUrl = document.location.href; //to avoid playing outside page
41cb9b94 87 // NOTE: fen and fenStart are redundant in game object
6808d7a1
BA
88 this.game = Object.assign({}, this.gameInfo, {
89 fenStart: this.gameInfo.fen,
90 players: players,
91 mycolor: mycolor,
92 score: "*"
93 });
94 this.compWorker.postMessage(["init", this.gameInfo.fen]);
834c202a 95 if (mycolor != "w" || this.gameInfo.mode == "auto")
37cdcbf3 96 this.playComputerMove();
a6088c90
BA
97 },
98 playComputerMove: function() {
99 this.timeStart = Date.now();
41cb9b94 100 this.compThink = true;
a6088c90
BA
101 this.compWorker.postMessage(["askmove"]);
102 },
1acda11c 103 processMove: function(move) {
6808d7a1 104 if (this.game.score != "*") return;
1acda11c 105 // Send the move to web worker (including his own moves)
6808d7a1 106 this.compWorker.postMessage(["newmove", move]);
1acda11c 107 // subTurn condition for Marseille (and Avalanche) rules
6808d7a1
BA
108 if (
109 (!this.vr.subTurn || this.vr.subTurn <= 1) &&
110 (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
111 ) {
1acda11c
BA
112 this.playComputerMove();
113 }
114 },
430a2038 115 gameOver: function(score, scoreMsg) {
41cb9b94 116 this.game.score = score;
430a2038 117 this.game.scoreMsg = scoreMsg;
41cb9b94 118 this.$emit("game-over", score); //bubble up to Rules.vue
6808d7a1
BA
119 }
120 }
a6088c90
BA
121};
122</script>