Commit | Line | Data |
---|---|---|
a6088c90 | 1 | <template lang="pug"> |
910d631b | 2 | BaseGame( |
8477e53d | 3 | ref="basegame" |
910d631b BA |
4 | :game="game" |
5 | :vr="vr" | |
6 | @newmove="processMove" | |
7 | @gameover="gameOver" | |
8 | ) | |
a6088c90 BA |
9 | </template> |
10 | ||
11 | <script> | |
12 | import BaseGame from "@/components/BaseGame.vue"; | |
13 | import { store } from "@/store"; | |
98b94cc3 | 14 | import { CompgameStorage } from "@/utils/compgameStorage"; |
41cb9b94 | 15 | import Worker from "worker-loader!@/playCompMove"; |
a6088c90 | 16 | export 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; |
6808d7a1 | 40 | if (!compMove) { |
7b3cf1b7 BA |
41 | this.compThink = false; |
42 | this.$emit("game-stopped"); //no more moves: mate or stalemate | |
41cb9b94 | 43 | return; //after game ends, no more moves, nothing to do |
7b3cf1b7 | 44 | } |
910d631b | 45 | if (!Array.isArray(compMove)) compMove = [compMove]; //potential multi-move |
a6088c90 | 46 | // Small delay for the bot to appear "more human" |
6808d7a1 | 47 | const delay = Math.max(500 - (Date.now() - this.timeStart), 0); |
a6088c90 | 48 | setTimeout(() => { |
6808d7a1 | 49 | if (this.currentUrl != document.location.href) return; //page change |
20620465 BA |
50 | // NOTE: do not animate move if special display (ShowMoves != "all") |
51 | const animate = V.ShowMoves == "all"; | |
6808d7a1 | 52 | const animDelay = animate ? 250 : 0; |
af32cf62 BA |
53 | let moveIdx = 0; |
54 | let self = this; | |
55 | (function executeMove() { | |
98b94cc3 | 56 | // NOTE: BaseGame::play() will trigger processMove() here |
866842c3 | 57 | self.$refs["basegame"].play(compMove[moveIdx++], "received"); |
6808d7a1 | 58 | if (moveIdx >= compMove.length) { |
af32cf62 | 59 | self.compThink = false; |
6808d7a1 | 60 | if (self.game.score != "*") |
98b94cc3 | 61 | // User action |
af32cf62 | 62 | self.$emit("game-stopped"); |
6808d7a1 | 63 | } else setTimeout(executeMove, 500 + animDelay); |
af32cf62 | 64 | })(); |
a6088c90 | 65 | }, delay); |
6808d7a1 | 66 | }; |
a6088c90 | 67 | }, |
a6088c90 | 68 | methods: { |
98b94cc3 | 69 | launchGame: function(game) { |
6808d7a1 | 70 | this.compWorker.postMessage(["scripts", this.gameInfo.vname]); |
98b94cc3 BA |
71 | if (!game) { |
72 | game = { | |
73 | vname: this.gameInfo.vname, | |
74 | fenStart: V.GenRandInitFen(), | |
98b94cc3 BA |
75 | moves: [] |
76 | }; | |
77 | game.fen = game.fenStart; | |
78 | if (this.gameInfo.mode == "versus") | |
79 | CompgameStorage.add(game); | |
80 | } | |
f446ee64 BA |
81 | if (this.gameInfo.mode == "versus" && !game.mycolor) |
82 | game.mycolor = Math.random() < 0.5 ? "w" : "b"; | |
98b94cc3 BA |
83 | this.compWorker.postMessage(["init", game.fen]); |
84 | this.vr = new V(game.fen); | |
85 | game.players = [{ name: "Myself" }, { name: "Computer" }]; | |
86 | if (game.myColor == "b") game.players = game.players.reverse(); | |
87 | game.score = "*"; //finished games are removed | |
6cd07b4d | 88 | this.currentUrl = document.location.href; //to avoid playing outside page |
98b94cc3 BA |
89 | this.game = game; |
90 | this.compWorker.postMessage(["init", game.fen]); | |
91 | if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn) | |
37cdcbf3 | 92 | this.playComputerMove(); |
a6088c90 | 93 | }, |
8477e53d BA |
94 | // NOTE: a "goto" action could lead to an error when comp is thinking, |
95 | // but it's OK because from the user viewpoint the game just stops. | |
a6088c90 BA |
96 | playComputerMove: function() { |
97 | this.timeStart = Date.now(); | |
41cb9b94 | 98 | this.compThink = true; |
a6088c90 BA |
99 | this.compWorker.postMessage(["askmove"]); |
100 | }, | |
1acda11c | 101 | processMove: function(move) { |
6808d7a1 | 102 | if (this.game.score != "*") return; |
1acda11c | 103 | // Send the move to web worker (including his own moves) |
6808d7a1 | 104 | this.compWorker.postMessage(["newmove", move]); |
1acda11c | 105 | // subTurn condition for Marseille (and Avalanche) rules |
6808d7a1 BA |
106 | if ( |
107 | (!this.vr.subTurn || this.vr.subTurn <= 1) && | |
108 | (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor) | |
109 | ) { | |
1acda11c BA |
110 | this.playComputerMove(); |
111 | } | |
98b94cc3 BA |
112 | // Finally, update storage: |
113 | if (this.gameInfo.mode == "versus") { | |
114 | const allowed_fields = ["appear", "vanish", "start", "end"]; | |
115 | const filtered_move = Object.keys(move) | |
116 | .filter(key => allowed_fields.includes(key)) | |
117 | .reduce((obj, key) => { | |
118 | obj[key] = move[key]; | |
119 | return obj; | |
120 | }, {}); | |
121 | CompgameStorage.update(this.gameInfo.vname, { | |
122 | move: filtered_move, | |
123 | fen: move.fen | |
124 | }); | |
125 | } | |
1acda11c | 126 | }, |
430a2038 | 127 | gameOver: function(score, scoreMsg) { |
41cb9b94 | 128 | this.game.score = score; |
430a2038 | 129 | this.game.scoreMsg = scoreMsg; |
866842c3 | 130 | if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp |
6808d7a1 BA |
131 | } |
132 | } | |
a6088c90 BA |
133 | }; |
134 | </script> |