| 1 | <template lang="pug"> |
| 2 | main |
| 3 | .row |
| 4 | .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 |
| 5 | .button-group |
| 6 | button(@click="clickReadRules()") {{ st.tr["Rules"] }} |
| 7 | button( |
| 8 | v-show="!gameInProgress" |
| 9 | @click="startGame('auto')" |
| 10 | ) |
| 11 | | {{ st.tr["Example game"] }} |
| 12 | button( |
| 13 | v-show="!gameInProgress" |
| 14 | @click="startGame('versus')" |
| 15 | ) |
| 16 | | {{ st.tr["Practice"] }} |
| 17 | button( |
| 18 | v-show="gameInProgress" |
| 19 | @click="stopGame()" |
| 20 | ) |
| 21 | | {{ st.tr["Stop game"] }} |
| 22 | button( |
| 23 | v-if="showAnalyzeBtn" |
| 24 | @click="gotoAnalyze()" |
| 25 | ) |
| 26 | | {{ st.tr["Analysis mode"] }} |
| 27 | .row |
| 28 | .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3 |
| 29 | h4#variantName(v-show="display=='rules'") {{ gameInfo.vname }} |
| 30 | div( |
| 31 | v-show="display=='rules'" |
| 32 | v-html="content" |
| 33 | ) |
| 34 | ComputerGame( |
| 35 | ref="compgame" |
| 36 | v-show="display=='computer'" |
| 37 | :game-info="gameInfo" |
| 38 | @game-stopped="gameStopped" |
| 39 | ) |
| 40 | </template> |
| 41 | |
| 42 | <script> |
| 43 | import ComputerGame from "@/components/ComputerGame.vue"; |
| 44 | import { store } from "@/store"; |
| 45 | import { replaceByDiag } from "@/utils/printDiagram"; |
| 46 | import { CompgameStorage } from "@/utils/compgameStorage"; |
| 47 | import afterRawLoad from "@/utils/afterRawLoad"; |
| 48 | export default { |
| 49 | name: "my-rules", |
| 50 | components: { |
| 51 | ComputerGame |
| 52 | }, |
| 53 | data: function() { |
| 54 | return { |
| 55 | st: store.state, |
| 56 | display: "rules", |
| 57 | gameInProgress: false, |
| 58 | // variables passed to ComputerGame: |
| 59 | gameInfo: { |
| 60 | vname: "", |
| 61 | mode: "versus", |
| 62 | }, |
| 63 | V: null, |
| 64 | }; |
| 65 | }, |
| 66 | watch: { |
| 67 | $route: function(newRoute) { |
| 68 | this.re_setVariant(newRoute.params["vname"]); |
| 69 | } |
| 70 | }, |
| 71 | created: function() { |
| 72 | // NOTE: variant cannot be set before store is initialized |
| 73 | this.re_setVariant(this.$route.params["vname"]); |
| 74 | }, |
| 75 | computed: { |
| 76 | showAnalyzeBtn: function() { |
| 77 | return !!this.V && this.V.CanAnalyze; |
| 78 | }, |
| 79 | content: function() { |
| 80 | if (!this.gameInfo.vname) return ""; //variant not set yet |
| 81 | return ( |
| 82 | afterRawLoad( |
| 83 | require( |
| 84 | "raw-loader!@/translations/rules/" + |
| 85 | this.gameInfo.vname + "/" + this.st.lang + ".pug" |
| 86 | ).default |
| 87 | ).replace(/(fen:)([^:]*):/g, replaceByDiag) |
| 88 | ); |
| 89 | } |
| 90 | }, |
| 91 | methods: { |
| 92 | clickReadRules: function() { |
| 93 | if (this.display != "rules") this.display = "rules"; |
| 94 | else if (this.gameInProgress) this.display = "computer"; |
| 95 | }, |
| 96 | re_setVariant: async function(vname) { |
| 97 | const key = "rr_" + vname; |
| 98 | if (!localStorage.getItem(key)) |
| 99 | // Mark rules as "read" |
| 100 | localStorage.setItem(key, '1'); |
| 101 | await import("@/variants/" + vname + ".js") |
| 102 | .then((vModule) => { |
| 103 | this.V = window.V = vModule[vname + "Rules"]; |
| 104 | this.gameInfo.vname = vname; |
| 105 | }) |
| 106 | .catch((err) => { |
| 107 | // Soon after component creation, st.tr might be uninitialized. |
| 108 | // Set a timeout to let a chance for the message to show translated. |
| 109 | const text = "Mispelled variant name"; |
| 110 | setTimeout(() => { |
| 111 | alert(this.st.tr[text] || text); |
| 112 | this.$router.replace("/variants"); |
| 113 | }, 500); |
| 114 | }); |
| 115 | }, |
| 116 | startGame: function(mode) { |
| 117 | if (this.gameInProgress) return; |
| 118 | this.gameInProgress = true; |
| 119 | this.display = "computer"; |
| 120 | this.gameInfo.mode = mode; |
| 121 | if (this.gameInfo.mode == "versus") { |
| 122 | CompgameStorage.get(this.gameInfo.vname, (game) => { |
| 123 | // NOTE: game might be null (if none stored yet) |
| 124 | if (!!game && !V.IsGoodFen(game.fen)) { |
| 125 | // Some issues with stored game: delete |
| 126 | CompgameStorage.remove(game.vname); |
| 127 | game = null; |
| 128 | } |
| 129 | this.$refs["compgame"].launchGame(game); |
| 130 | }); |
| 131 | } |
| 132 | else this.$refs["compgame"].launchGame(); |
| 133 | }, |
| 134 | // The user wants to stop the game: |
| 135 | stopGame: function() { |
| 136 | this.$refs["compgame"].gameOver("?", "Undetermined result"); |
| 137 | }, |
| 138 | // The game is effectively stopped: |
| 139 | gameStopped: function() { |
| 140 | this.gameInProgress = false; |
| 141 | if (this.gameInfo.mode == "versus") |
| 142 | CompgameStorage.remove(this.gameInfo.vname); |
| 143 | }, |
| 144 | gotoAnalyze: function() { |
| 145 | this.$router.push( |
| 146 | "/analyse/" + this.gameInfo.vname + |
| 147 | "/?fen=" + V.GenRandInitFen(this.st.settings.randomness) |
| 148 | ); |
| 149 | } |
| 150 | } |
| 151 | }; |
| 152 | </script> |
| 153 | |
| 154 | <!-- NOTE: not scoped here, because HTML is injected --> |
| 155 | <style lang="sass"> |
| 156 | @import "@/styles/_board_squares_img.sass" |
| 157 | @import "@/styles/_rules.sass" |
| 158 | </style> |
| 159 | |
| 160 | <style lang="sass" scoped> |
| 161 | h4#variantName |
| 162 | text-align: center |
| 163 | font-weight: bold |
| 164 | </style> |