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