Attempt to clarify installation instructions a little
[vchess.git] / client / src / components / ComputerGame.vue
CommitLineData
a6088c90 1<template lang="pug">
910d631b 2BaseGame(
8477e53d 3 ref="basegame"
910d631b 4 :game="game"
910d631b 5 @newmove="processMove"
910d631b 6)
a6088c90
BA
7</template>
8
9<script>
10import BaseGame from "@/components/BaseGame.vue";
11import { store } from "@/store";
98b94cc3 12import { CompgameStorage } from "@/utils/compgameStorage";
5aa14a21 13import { getScoreMessage } from "@/utils/scoring";
e71161fb 14import { playMove, getFilteredMove } from "@/utils/playUndo";
41cb9b94 15import Worker from "worker-loader!@/playCompMove";
a6088c90 16export default {
41cb9b94 17 name: "my-computer-game",
a6088c90 18 components: {
6808d7a1 19 BaseGame
a6088c90 20 },
6dd02928 21 // gameInfo: fen + mode + vname
63ca2b89 22 // mode: "auto" (game comp vs comp) or "versus" (normal)
6dd02928 23 props: ["gameInfo"],
a6088c90
BA
24 data: function() {
25 return {
26 st: store.state,
41cb9b94 27 game: {},
b7c32f1a 28 vr: null,
a6088c90
BA
29 // Web worker to play computer moves without freezing interface:
30 timeStart: undefined, //time when computer starts thinking
41cb9b94 31 compThink: false, //avoid asking a new move while one is being searched
6808d7a1 32 compWorker: null
a6088c90
BA
33 };
34 },
a6088c90 35 created: function() {
41cb9b94
BA
36 // Computer moves web worker logic:
37 this.compWorker = new Worker();
a6088c90 38 this.compWorker.onmessage = e => {
a6088c90 39 let compMove = e.data;
a6088c90 40 // Small delay for the bot to appear "more human"
4404e58c
BA
41 const minDelay = this.gameInfo.mode == "versus" ? 500 : 1000;
42 const delay = Math.max(minDelay - (Date.now() - this.timeStart), 0);
e71161fb 43 let self = this;
a6088c90 44 setTimeout(() => {
6808d7a1 45 if (this.currentUrl != document.location.href) return; //page change
e71161fb 46 self.$refs["basegame"].play(compMove, "received");
15c406ab
BA
47 let animationLength = 0;
48 const mvArray = (Array.isArray(compMove) ? compMove : [compMove]);
49 const realLength =
50 mvArray.filter(m => m.start.x >= 0 && !m.end.noHighlight).length;
51 if (realLength >= 1)
bc0b9205
BA
52 // 250 = length of animation, 500 = delay between sub-moves
53 // TODO: a callback would be cleaner.
15c406ab 54 animationLength = 250 + (realLength - 1) * 750;
d2edca6d
BA
55 setTimeout(
56 () => {
57 self.compThink = false;
58 self.processMove(compMove);
59 },
60 animationLength
61 );
a6088c90 62 }, delay);
6808d7a1 63 };
a6088c90 64 },
a6088c90 65 methods: {
eb2d61de 66 launchGame: function(game, options) {
6808d7a1 67 this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
996bdaa4 68 if (!game) {
98b94cc3
BA
69 game = {
70 vname: this.gameInfo.vname,
eb2d61de 71 fenStart: V.GenRandInitFen(options),
98b94cc3
BA
72 moves: []
73 };
74 game.fen = game.fenStart;
d2edca6d 75 if (this.gameInfo.mode == "versus") CompgameStorage.add(game);
98b94cc3 76 }
57d9b2c4 77 if (!game.mycolor) game.mycolor = (Math.random() < 0.5 ? "w" : "b");
98b94cc3
BA
78 this.compWorker.postMessage(["init", game.fen]);
79 this.vr = new V(game.fen);
d2edca6d
BA
80 game.players = [{ name: "Computer" }, { name: "Computer" }];
81 if (this.gameInfo.mode == "versus")
82 game.players[game.mycolor == 'w' ? 0 : 1] = { name: "Myself" };
98b94cc3 83 game.score = "*"; //finished games are removed
07052665 84 game.mode = this.gameInfo.mode;
6cd07b4d 85 this.currentUrl = document.location.href; //to avoid playing outside page
98b94cc3 86 this.game = game;
b1e46b33 87 this.$refs["basegame"].re_setVariables(game);
98b94cc3
BA
88 this.compWorker.postMessage(["init", game.fen]);
89 if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn)
37cdcbf3 90 this.playComputerMove();
a6088c90 91 },
8477e53d
BA
92 // NOTE: a "goto" action could lead to an error when comp is thinking,
93 // but it's OK because from the user viewpoint the game just stops.
a6088c90
BA
94 playComputerMove: function() {
95 this.timeStart = Date.now();
41cb9b94 96 this.compThink = true;
a6088c90
BA
97 this.compWorker.postMessage(["askmove"]);
98 },
5aa14a21 99 processMove: function(move, scoreObj) {
e71161fb 100 playMove(move, this.vr);
d2edca6d
BA
101 // Maybe the user stopped the game:
102 if (this.game.score != "*") {
103 this.$emit("game-stopped");
104 return;
105 }
106 // This move could have ended the game
5b18515f 107 if (!scoreObj) scoreObj = { score: this.vr.getCurrentScore() };
5aa14a21
BA
108 if (scoreObj.score != "*") {
109 this.gameOver(scoreObj.score);
110 return;
111 }
1acda11c 112 // Send the move to web worker (including his own moves)
6808d7a1 113 this.compWorker.postMessage(["newmove", move]);
e71161fb 114 if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
1acda11c 115 this.playComputerMove();
98b94cc3
BA
116 // Finally, update storage:
117 if (this.gameInfo.mode == "versus") {
98b94cc3 118 CompgameStorage.update(this.gameInfo.vname, {
e71161fb
BA
119 move: getFilteredMove(move),
120 fen: this.vr.getFen()
98b94cc3
BA
121 });
122 }
1acda11c 123 },
5aa14a21 124 gameOver: function(score) {
41cb9b94 125 this.game.score = score;
c11afcdf 126 this.game.scoreMsg = getScoreMessage(score, V.ReverseColors);
5aa14a21
BA
127 // If comp is thinking, let him finish:
128 if (!this.compThink) this.$emit("game-stopped");
6808d7a1
BA
129 }
130 }
a6088c90
BA
131};
132</script>