Commit | Line | Data |
---|---|---|
a6088c90 | 1 | <template lang="pug"> |
910d631b | 2 | BaseGame( |
8477e53d | 3 | ref="basegame" |
910d631b | 4 | :game="game" |
910d631b BA |
5 | @newmove="processMove" |
6 | @gameover="gameOver" | |
7 | ) | |
a6088c90 BA |
8 | </template> |
9 | ||
10 | <script> | |
11 | import BaseGame from "@/components/BaseGame.vue"; | |
12 | import { store } from "@/store"; | |
98b94cc3 | 13 | import { CompgameStorage } from "@/utils/compgameStorage"; |
e71161fb | 14 | import { playMove, getFilteredMove } from "@/utils/playUndo"; |
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; |
a6088c90 | 40 | // Small delay for the bot to appear "more human" |
6808d7a1 | 41 | const delay = Math.max(500 - (Date.now() - this.timeStart), 0); |
e71161fb | 42 | let self = this; |
a6088c90 | 43 | setTimeout(() => { |
6808d7a1 | 44 | if (this.currentUrl != document.location.href) return; //page change |
e71161fb BA |
45 | // NOTE: BaseGame::play() will trigger processMove() here |
46 | self.$refs["basegame"].play(compMove, "received"); | |
47 | self.compThink = false; | |
48 | if (self.game.score != "*") | |
49 | // User action | |
50 | self.$emit("game-stopped"); | |
a6088c90 | 51 | }, delay); |
6808d7a1 | 52 | }; |
a6088c90 | 53 | }, |
a6088c90 | 54 | methods: { |
98b94cc3 | 55 | launchGame: function(game) { |
6808d7a1 | 56 | this.compWorker.postMessage(["scripts", this.gameInfo.vname]); |
98b94cc3 BA |
57 | if (!game) { |
58 | game = { | |
59 | vname: this.gameInfo.vname, | |
60 | fenStart: V.GenRandInitFen(), | |
98b94cc3 BA |
61 | moves: [] |
62 | }; | |
63 | game.fen = game.fenStart; | |
64 | if (this.gameInfo.mode == "versus") | |
65 | CompgameStorage.add(game); | |
66 | } | |
f446ee64 BA |
67 | if (this.gameInfo.mode == "versus" && !game.mycolor) |
68 | game.mycolor = Math.random() < 0.5 ? "w" : "b"; | |
98b94cc3 BA |
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 | |
6cd07b4d | 74 | this.currentUrl = document.location.href; //to avoid playing outside page |
98b94cc3 BA |
75 | this.game = game; |
76 | this.compWorker.postMessage(["init", game.fen]); | |
77 | if (this.gameInfo.mode == "auto" || game.mycolor != this.vr.turn) | |
37cdcbf3 | 78 | this.playComputerMove(); |
a6088c90 | 79 | }, |
8477e53d BA |
80 | // NOTE: a "goto" action could lead to an error when comp is thinking, |
81 | // but it's OK because from the user viewpoint the game just stops. | |
a6088c90 BA |
82 | playComputerMove: function() { |
83 | this.timeStart = Date.now(); | |
41cb9b94 | 84 | this.compThink = true; |
a6088c90 BA |
85 | this.compWorker.postMessage(["askmove"]); |
86 | }, | |
1acda11c | 87 | processMove: function(move) { |
e71161fb BA |
88 | playMove(move, this.vr); |
89 | // This move could have ended the game: if this is the case, | |
90 | // the game is already removed from storage (if mode == 'versus') | |
6808d7a1 | 91 | if (this.game.score != "*") return; |
1acda11c | 92 | // Send the move to web worker (including his own moves) |
6808d7a1 | 93 | this.compWorker.postMessage(["newmove", move]); |
e71161fb | 94 | if (this.gameInfo.mode == "auto" || this.vr.turn != this.game.mycolor) |
1acda11c | 95 | this.playComputerMove(); |
98b94cc3 BA |
96 | // Finally, update storage: |
97 | if (this.gameInfo.mode == "versus") { | |
98b94cc3 | 98 | CompgameStorage.update(this.gameInfo.vname, { |
e71161fb BA |
99 | move: getFilteredMove(move), |
100 | fen: this.vr.getFen() | |
98b94cc3 BA |
101 | }); |
102 | } | |
1acda11c | 103 | }, |
430a2038 | 104 | gameOver: function(score, scoreMsg) { |
41cb9b94 | 105 | this.game.score = score; |
430a2038 | 106 | this.game.scoreMsg = scoreMsg; |
866842c3 | 107 | if (!this.compThink) this.$emit("game-stopped"); //otherwise wait for comp |
6808d7a1 BA |
108 | } |
109 | } | |
a6088c90 BA |
110 | }; |
111 | </script> |