| 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") Rules |
| 7 | button(v-show="!gameInProgress" @click="() => startGame('auto')") |
| 8 | | Sample game |
| 9 | button(v-show="!gameInProgress" @click="() => startGame('versus')") |
| 10 | | Practice |
| 11 | button(v-show="gameInProgress" @click="() => stopGame()") |
| 12 | | Stop game |
| 13 | button(v-if="display=='rules' && gameInfo.vname!='Dark'" |
| 14 | @click="gotoAnalyze") |
| 15 | | {{ st.tr["Analyze"] }} |
| 16 | .section-content(v-show="display=='rules'" v-html="content") |
| 17 | ComputerGame(v-show="display=='computer'" :game-info="gameInfo" |
| 18 | @game-over="stopGame" @game-stopped="gameStopped") |
| 19 | </template> |
| 20 | |
| 21 | <script> |
| 22 | import ComputerGame from "@/components/ComputerGame.vue"; |
| 23 | import { store } from "@/store"; |
| 24 | import { getDiagram } from "@/utils/printDiagram"; |
| 25 | |
| 26 | export default { |
| 27 | name: 'my-rules', |
| 28 | components: { |
| 29 | ComputerGame, |
| 30 | }, |
| 31 | data: function() { |
| 32 | return { |
| 33 | st: store.state, |
| 34 | content: "", |
| 35 | display: "rules", |
| 36 | gameInProgress: false, |
| 37 | // variables passed to ComputerGame: |
| 38 | gameInfo: { |
| 39 | vname: "_unknown", |
| 40 | mode: "versus", |
| 41 | fen: "", |
| 42 | score: "*", |
| 43 | } |
| 44 | }; |
| 45 | }, |
| 46 | watch: { |
| 47 | "$route": function(newRoute) { |
| 48 | this.tryChangeVariant(newRoute.params["vname"]); |
| 49 | }, |
| 50 | }, |
| 51 | created: async function() { |
| 52 | // NOTE: variant cannot be set before store is initialized |
| 53 | this.tryChangeVariant(this.$route.params["vname"]); |
| 54 | }, |
| 55 | methods: { |
| 56 | clickReadRules: function() { |
| 57 | if (this.display != "rules") |
| 58 | this.display = "rules"; |
| 59 | else if (this.gameInProgress) |
| 60 | this.display = "computer"; |
| 61 | }, |
| 62 | parseFen(fen) { |
| 63 | const fenParts = fen.split(" "); |
| 64 | return { |
| 65 | position: fenParts[0], |
| 66 | marks: fenParts[1], |
| 67 | orientation: fenParts[2], |
| 68 | shadow: fenParts[3], |
| 69 | }; |
| 70 | }, |
| 71 | tryChangeVariant: async function(vname) { |
| 72 | if (!vname || vname == "_unknown") |
| 73 | return; |
| 74 | this.gameInfo.vname = vname; |
| 75 | const vModule = await import("@/variants/" + vname + ".js"); |
| 76 | window.V = vModule.VariantRules; |
| 77 | // Method to replace diagrams in loaded HTML |
| 78 | const replaceByDiag = (match, p1, p2) => { |
| 79 | const args = this.parseFen(p2); |
| 80 | return getDiagram(args); |
| 81 | }; |
| 82 | // (AJAX) Request to get rules content (plain text, HTML) |
| 83 | this.content = |
| 84 | require("raw-loader!@/translations/rules/" + vname + "/" + this.st.lang + ".pug") |
| 85 | // Next two lines fix a weird issue after last update (2019-11) |
| 86 | .replace(/\\[n"]/g, " ") |
| 87 | .replace('module.exports = "', '').replace(/"$/, "") |
| 88 | .replace(/(fen:)([^:]*):/g, replaceByDiag); |
| 89 | }, |
| 90 | startGame: function(mode) { |
| 91 | if (this.gameInProgress) |
| 92 | return; |
| 93 | this.gameInProgress = true; |
| 94 | this.display = "computer"; |
| 95 | this.gameInfo.mode = mode; |
| 96 | this.gameInfo.score = "*"; |
| 97 | this.gameInfo.fen = V.GenRandInitFen(); |
| 98 | }, |
| 99 | // user is willing to stop the game: |
| 100 | stopGame: function(score) { |
| 101 | this.gameInfo.score = score || "?"; |
| 102 | }, |
| 103 | // The game is effectively stopped: |
| 104 | gameStopped: function() { |
| 105 | this.gameInProgress = false; |
| 106 | }, |
| 107 | gotoAnalyze: function() { |
| 108 | this.$router.push("/analyze/" + this.gameInfo.vname |
| 109 | + "/?fen=" + V.GenRandInitFen()); |
| 110 | }, |
| 111 | }, |
| 112 | }; |
| 113 | </script> |
| 114 | |
| 115 | <!-- NOTE: not scoped here, because HTML is injected (TODO) --> |
| 116 | <style lang="sass"> |
| 117 | //.section-content |
| 118 | // * |
| 119 | // margin-left: auto |
| 120 | // margin-right: auto |
| 121 | // max-width: 767px |
| 122 | // figure.diagram-container |
| 123 | // max-width: 1000px |
| 124 | // @media screen and (max-width: 767px) |
| 125 | // max-width: 100% |
| 126 | // padding: 0 5px |
| 127 | |
| 128 | .warn |
| 129 | padding: 3px |
| 130 | color: red |
| 131 | background-color: lightgrey |
| 132 | font-weight: bold |
| 133 | |
| 134 | figure.diagram-container |
| 135 | margin: 15px 0 15px 0 |
| 136 | text-align: center |
| 137 | width: 100% |
| 138 | display: block |
| 139 | .diagram |
| 140 | display: block |
| 141 | width: 40% |
| 142 | min-width: 240px |
| 143 | margin-left: auto |
| 144 | margin-right: auto |
| 145 | .diag12 |
| 146 | float: left |
| 147 | margin-left: calc(10% - 20px) |
| 148 | margin-right: 40px |
| 149 | @media screen and (max-width: 630px) |
| 150 | float: none |
| 151 | margin: 0 auto 10px auto |
| 152 | .diag22 |
| 153 | float: left |
| 154 | margin-right: calc(10% - 20px) |
| 155 | @media screen and (max-width: 630px) |
| 156 | float: none |
| 157 | margin: 0 auto |
| 158 | figcaption |
| 159 | display: block |
| 160 | clear: both |
| 161 | padding-top: 5px |
| 162 | font-size: 0.8em |
| 163 | |
| 164 | p.boxed |
| 165 | background-color: #FFCC66 |
| 166 | padding: 5px |
| 167 | |
| 168 | .stageDelimiter |
| 169 | color: purple |
| 170 | |
| 171 | // To show (new) pieces, and/or there values... |
| 172 | figure.showPieces > img |
| 173 | width: 50px |
| 174 | |
| 175 | figure.showPieces > figcaption |
| 176 | color: #6C6C6C |
| 177 | |
| 178 | .section-title |
| 179 | padding: 0 |
| 180 | |
| 181 | .section-title > h4 |
| 182 | padding: 5px |
| 183 | |
| 184 | ol, ul:not(.browser-default) |
| 185 | padding-left: 20px |
| 186 | |
| 187 | ul:not(.browser-default) |
| 188 | margin-top: 5px |
| 189 | |
| 190 | ul:not(.browser-default) > li |
| 191 | list-style-type: disc |
| 192 | |
| 193 | .light-square-diag |
| 194 | background-color: #e5e5ca |
| 195 | |
| 196 | .dark-square-diag |
| 197 | background-color: #6f8f57 |
| 198 | |
| 199 | // TODO: following is duplicated (Board.vue) |
| 200 | div.board |
| 201 | float: left |
| 202 | height: 0 |
| 203 | display: inline-block |
| 204 | position: relative |
| 205 | |
| 206 | div.board8 |
| 207 | width: 12.5% |
| 208 | padding-bottom: 12.5% |
| 209 | |
| 210 | div.board10 |
| 211 | width: 10% |
| 212 | padding-bottom: 10% |
| 213 | |
| 214 | div.board11 |
| 215 | width: 9.09% |
| 216 | padding-bottom: 9.1% |
| 217 | |
| 218 | img.piece |
| 219 | width: 100% |
| 220 | |
| 221 | img.piece, img.mark-square |
| 222 | max-width: 100% |
| 223 | height: auto |
| 224 | display: block |
| 225 | |
| 226 | img.mark-square |
| 227 | opacity: 0.6 |
| 228 | width: 76% |
| 229 | position: absolute |
| 230 | top: 12% |
| 231 | left: 12% |
| 232 | opacity: .7 |
| 233 | |
| 234 | .in-shadow |
| 235 | filter: brightness(50%) |
| 236 | </style> |