| 1 | <template lang="pug"> |
| 2 | .row |
| 3 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
| 4 | .button-group |
| 5 | button(@click="display='rules'") Read the rules |
| 6 | button(v-show="!gameInProgress" @click="watchComputerGame") |
| 7 | | Observe a sample game |
| 8 | button(v-show="!gameInProgress" @click="playAgainstComputer") |
| 9 | | Beat the computer! |
| 10 | button(v-show="gameInProgress" @click="stopGame") |
| 11 | | Stop game |
| 12 | VariantRules(v-show="display=='rules'" :vname="variant.name") |
| 13 | Game(v-show="display=='computer'" :gid-or-fen="fen" |
| 14 | :mode="mode" :sub-mode="subMode" :variant="variant" |
| 15 | @computer-think="gameInProgress=false" @game-over="stopGame") |
| 16 | </template> |
| 17 | |
| 18 | <script> |
| 19 | import Game from "@/components/Game.vue"; |
| 20 | import { store } from "@/store"; |
| 21 | import VariantRules from "@/components/VariantRules"; |
| 22 | export default { |
| 23 | name: 'my-rules', |
| 24 | components: { |
| 25 | Game, |
| 26 | VariantRules, |
| 27 | }, |
| 28 | data: function() { |
| 29 | return { |
| 30 | st: store.state, |
| 31 | variant: {id: 0, name: "_unknown"}, //...yet |
| 32 | display: "rules", |
| 33 | mode: "computer", |
| 34 | subMode: "", //'auto' for game CPU vs CPU |
| 35 | gameInProgress: false, |
| 36 | mycolor: "w", |
| 37 | fen: "", |
| 38 | }; |
| 39 | }, |
| 40 | watch: { |
| 41 | $route: function(newRoute) { |
| 42 | this.tryChangeVariant(newRoute.params["vname"]); |
| 43 | }, |
| 44 | }, |
| 45 | created: async function() { |
| 46 | // NOTE: variant cannot be set before store is initialized |
| 47 | this.tryChangeVariant(this.$route.params["vname"]); |
| 48 | }, |
| 49 | methods: { |
| 50 | tryChangeVariant: async function(vname) { |
| 51 | if (vname == "_unknown") |
| 52 | return; |
| 53 | if (this.st.variants.length > 0) |
| 54 | { |
| 55 | const idxOfVar = this.st.variants.findIndex(e => e.name == vname); |
| 56 | this.variant = this.st.variants[idxOfVar]; |
| 57 | } |
| 58 | else |
| 59 | this.variant.name = vname; |
| 60 | const vModule = await import("@/variants/" + vname + ".js"); |
| 61 | window.V = vModule.VariantRules; |
| 62 | }, |
| 63 | startGame: function() { |
| 64 | if (this.gameInProgress) |
| 65 | return; |
| 66 | this.gameInProgress = true; |
| 67 | this.mode = "computer"; |
| 68 | this.display = "computer"; |
| 69 | this.fen = V.GenRandInitFen(); |
| 70 | }, |
| 71 | stopGame: function() { |
| 72 | this.gameInProgress = false; |
| 73 | this.mode = "analyze"; |
| 74 | }, |
| 75 | playAgainstComputer: function() { |
| 76 | this.subMode = ""; |
| 77 | this.startGame(); |
| 78 | }, |
| 79 | watchComputerGame: function() { |
| 80 | this.subMode = "auto"; |
| 81 | this.startGame(); |
| 82 | }, |
| 83 | }, |
| 84 | }; |
| 85 | </script> |