| 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 | div(v-show="display=='rules'" v-html="content" class="section-content") |
| 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 | export default { |
| 22 | name: 'my-rules', |
| 23 | components: { |
| 24 | Game, |
| 25 | }, |
| 26 | data: function() { |
| 27 | return { |
| 28 | st: store.state, |
| 29 | variant: null, |
| 30 | content: "", |
| 31 | display: "rules", |
| 32 | mode: "computer", |
| 33 | subMode: "", //'auto' for game CPU vs CPU |
| 34 | gameInProgress: false, |
| 35 | mycolor: "w", |
| 36 | fen: "", |
| 37 | }; |
| 38 | }, |
| 39 | // TODO: variant is initialized before store initializes, so remain null (I think) |
| 40 | created: function() { |
| 41 | const vname = this.$route.params["vname"]; |
| 42 | const idxOfVar = this.st.variants.indexOf(e => e.name == vname); |
| 43 | this.variant = this.st.variants[idxOfVar]; |
| 44 | }, |
| 45 | mounted: function() { |
| 46 | // Method to replace diagrams in loaded HTML |
| 47 | const replaceByDiag = (match, p1, p2) => { |
| 48 | const args = this.parseFen(p2); |
| 49 | return getDiagram(args); |
| 50 | }; |
| 51 | // (AJAX) Request to get rules content (plain text, HTML) |
| 52 | this.content = |
| 53 | // TODO: why doesn't this work? require("raw-loader!pug-plain-loader!@/rules/"...) |
| 54 | require("raw-loader!@/rules/" + |
| 55 | this.$route.params["vname"] + "/" + this.st.lang + ".pug") |
| 56 | .replace(/(fen:)([^:]*):/g, replaceByDiag); |
| 57 | }, |
| 58 | methods: { |
| 59 | parseFen(fen) { |
| 60 | const fenParts = fen.split(" "); |
| 61 | return { |
| 62 | position: fenParts[0], |
| 63 | marks: fenParts[1], |
| 64 | orientation: fenParts[2], |
| 65 | shadow: fenParts[3], |
| 66 | }; |
| 67 | }, |
| 68 | startGame: function() { |
| 69 | if (this.gameInProgress) |
| 70 | return; |
| 71 | this.gameInProgress = true; |
| 72 | this.mode = "computer"; |
| 73 | this.display = "computer"; |
| 74 | this.fen = V.GenRandInitFen(); |
| 75 | }, |
| 76 | stopGame: function() { |
| 77 | this.gameInProgress = false; |
| 78 | this.mode = "analyze"; |
| 79 | }, |
| 80 | playAgainstComputer: function() { |
| 81 | this.subMode = ""; |
| 82 | this.startGame(); |
| 83 | }, |
| 84 | watchComputerGame: function() { |
| 85 | this.subMode = "auto"; |
| 86 | this.startGame(); |
| 87 | }, |
| 88 | }, |
| 89 | }; |
| 90 | </script> |