Add Diamond Chess
[vchess.git] / client / src / components / ComputerGame.vue
1 <template lang="pug">
2 BaseGame(
3 ref="basegame"
4 :game="game"
5 @newmove="processMove"
6 )
7 </template>
8
9 <script>
10 import BaseGame from "@/components/BaseGame.vue";
11 import { store } from "@/store";
12 import { CompgameStorage } from "@/utils/compgameStorage";
13 import { getScoreMessage } from "@/utils/scoring";
14 import { playMove, getFilteredMove } from "@/utils/playUndo";
15 import Worker from "worker-loader!@/playCompMove";
16 export default {
17 name: "my-computer-game",
18 components: {
19 BaseGame
20 },
21 // gameInfo: fen + mode + vname
22 // mode: "auto" (game comp vs comp) or "versus" (normal)
23 props: ["gameInfo"],
24 data: function() {
25 return {
26 st: store.state,
27 game: {},
28 vr: null,
29 // Web worker to play computer moves without freezing interface:
30 timeStart: undefined, //time when computer starts thinking
31 compThink: false, //avoid asking a new move while one is being searched
32 compWorker: null
33 };
34 },
35 created: function() {
36 // Computer moves web worker logic:
37 this.compWorker = new Worker();
38 this.compWorker.onmessage = e => {
39 let compMove = e.data;
40 // Small delay for the bot to appear "more human"
41 const minDelay = this.gameInfo.mode == "versus" ? 500 : 1000;
42 const delay = Math.max(minDelay - (Date.now() - this.timeStart), 0);
43 let self = this;
44 setTimeout(() => {
45 if (this.currentUrl != document.location.href) return; //page change
46 self.$refs["basegame"].play(compMove, "received");
47 self.processMove(compMove);
48 self.compThink = false;
49 if (self.game.score != "*")
50 // User action
51 self.$emit("game-stopped");
52 }, delay);
53 };
54 },
55 methods: {
56 launchGame: function(game) {
57 this.compWorker.postMessage(["scripts", this.gameInfo.vname]);
58 if (!game) {
59 game = {
60 vname: this.gameInfo.vname,
61 fenStart: V.GenRandInitFen(this.st.settings.randomness),
62 moves: []
63 };
64 game.fen = game.fenStart;
65 if (this.gameInfo.mode == "versus")
66 CompgameStorage.add(game);
67 }
68 if (!game.mycolor) game.mycolor = (Math.random() < 0.5 ? "w" : "b");
69 this.compWorker.postMessage(["init", game.fen]);
70 this.vr = new V(game.fen);
71 game.players = [{ name: "Myself" }, { name: "Computer" }];
72 if (game.mycolor == "b") game.players = game.players.reverse();
73 game.score = "*"; //finished games are removed
74 game.mode = this.gameInfo.mode;
75 this.currentUrl = document.location.href; //to avoid playing outside page
76 this.game = game;
77 this.$refs["basegame"].re_setVariables(game);
78 this.compWorker.postMessage(["init", game.fen]);
79 if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn)
80 this.playComputerMove();
81 },
82 // NOTE: a "goto" action could lead to an error when comp is thinking,
83 // but it's OK because from the user viewpoint the game just stops.
84 playComputerMove: function() {
85 this.timeStart = Date.now();
86 this.compThink = true;
87 this.compWorker.postMessage(["askmove"]);
88 },
89 processMove: function(move, scoreObj) {
90 playMove(move, this.vr);
91 // This move could have ended the game:
92 if (!scoreObj) scoreObj = { score: this.vr.getCurrentScore() };
93 if (scoreObj.score != "*") {
94 this.gameOver(scoreObj.score);
95 return;
96 }
97 if (this.game.score != "*")
98 // The game already ended, probably because of a user action
99 return;
100 // Send the move to web worker (including his own moves)
101 this.compWorker.postMessage(["newmove", move]);
102 if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor)
103 this.playComputerMove();
104 // Finally, update storage:
105 if (this.gameInfo.mode == "versus") {
106 CompgameStorage.update(this.gameInfo.vname, {
107 move: getFilteredMove(move),
108 fen: this.vr.getFen()
109 });
110 }
111 },
112 gameOver: function(score) {
113 this.game.score = score;
114 this.game.scoreMsg = getScoreMessage(score);
115 // If comp is thinking, let him finish:
116 if (!this.compThink) this.$emit("game-stopped");
117 }
118 }
119 };
120 </script>