Commit | Line | Data |
---|---|---|
cf2343ce | 1 | <template lang="pug"> |
7aa548e7 BA |
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 | |
9ddaf8da | 6 | button(@click="clickReadRules()") {{ st.tr["Rules"] }} |
910d631b BA |
7 | button( |
8 | v-show="!gameInProgress" | |
9 | @click="startGame('auto')" | |
10 | ) | |
f44fd3bf | 11 | | {{ st.tr["Example game"] }} |
910d631b BA |
12 | button( |
13 | v-show="!gameInProgress" | |
14 | @click="startGame('versus')" | |
15 | ) | |
602d6bef | 16 | | {{ st.tr["Practice"] }} |
910d631b BA |
17 | button( |
18 | v-show="gameInProgress" | |
19 | @click="stopGame()" | |
20 | ) | |
602d6bef | 21 | | {{ st.tr["Stop game"] }} |
910d631b | 22 | button( |
20620465 | 23 | v-if="showAnalyzeBtn" |
910d631b BA |
24 | @click="gotoAnalyze()" |
25 | ) | |
8055eabd | 26 | | {{ st.tr["Analysis mode"] }} |
9bd6786b BA |
27 | .row |
28 | .col-sm-12.col-md-8.col-md-offset-2.col-lg-6.col-lg-offset-3 | |
c7550017 | 29 | h4#variantName {{ gameInfo.vname }} |
910d631b BA |
30 | div( |
31 | v-show="display=='rules'" | |
32 | v-html="content" | |
33 | ) | |
34 | ComputerGame( | |
866842c3 | 35 | ref="compgame" |
910d631b BA |
36 | v-show="display=='computer'" |
37 | :game-info="gameInfo" | |
910d631b BA |
38 | @game-stopped="gameStopped" |
39 | ) | |
cf2343ce BA |
40 | </template> |
41 | ||
42 | <script> | |
a6088c90 | 43 | import ComputerGame from "@/components/ComputerGame.vue"; |
cf2343ce | 44 | import { store } from "@/store"; |
50aed5a1 | 45 | import { getDiagram } from "@/utils/printDiagram"; |
98b94cc3 | 46 | import { CompgameStorage } from "@/utils/compgameStorage"; |
cf2343ce | 47 | export default { |
6808d7a1 | 48 | name: "my-rules", |
24340cae | 49 | components: { |
6808d7a1 | 50 | ComputerGame |
24340cae | 51 | }, |
cf2343ce BA |
52 | data: function() { |
53 | return { | |
54 | st: store.state, | |
cf2343ce | 55 | display: "rules", |
cf2343ce | 56 | gameInProgress: false, |
6dd02928 | 57 | // variables passed to ComputerGame: |
834c202a | 58 | gameInfo: { |
fcbc92c2 | 59 | vname: "", |
834c202a | 60 | mode: "versus", |
b9139251 BA |
61 | }, |
62 | V: null, | |
cf2343ce BA |
63 | }; |
64 | }, | |
42eb4eaf | 65 | watch: { |
6808d7a1 | 66 | $route: function(newRoute) { |
fcbc92c2 | 67 | this.re_setVariant(newRoute.params["vname"]); |
6808d7a1 | 68 | } |
42eb4eaf | 69 | }, |
6f093ada | 70 | created: function() { |
e2732923 | 71 | // NOTE: variant cannot be set before store is initialized |
fcbc92c2 BA |
72 | this.re_setVariant(this.$route.params["vname"]); |
73 | }, | |
74 | computed: { | |
20620465 | 75 | showAnalyzeBtn: function() { |
84fc0f02 | 76 | return !!this.V && this.V.CanAnalyze; |
20620465 | 77 | }, |
fcbc92c2 | 78 | content: function() { |
6808d7a1 | 79 | if (!this.gameInfo.vname) return ""; //variant not set yet |
fcbc92c2 | 80 | // (AJAX) Request to get rules content (plain text, HTML) |
6808d7a1 | 81 | return ( |
e57c4de4 BA |
82 | require( |
83 | "raw-loader!@/translations/rules/" + | |
84 | this.gameInfo.vname + "/" + | |
85 | this.st.lang + ".pug" | |
86 | ) | |
87 | // Next two lines fix a weird issue after last update (2019-11) | |
88 | .replace(/\\n/g, " ") | |
89 | .replace(/\\"/g, '"') | |
90 | .replace('module.exports = "', "") | |
91 | .replace(/"$/, "") | |
92 | .replace(/(fen:)([^:]*):/g, this.replaceByDiag) | |
6808d7a1 BA |
93 | ); |
94 | } | |
cf2343ce BA |
95 | }, |
96 | methods: { | |
41cb9b94 | 97 | clickReadRules: function() { |
6808d7a1 BA |
98 | if (this.display != "rules") this.display = "rules"; |
99 | else if (this.gameInProgress) this.display = "computer"; | |
41cb9b94 | 100 | }, |
50aed5a1 BA |
101 | parseFen(fen) { |
102 | const fenParts = fen.split(" "); | |
103 | return { | |
104 | position: fenParts[0], | |
105 | marks: fenParts[1], | |
106 | orientation: fenParts[2], | |
6808d7a1 | 107 | shadow: fenParts[3] |
50aed5a1 BA |
108 | }; |
109 | }, | |
fcbc92c2 BA |
110 | // Method to replace diagrams in loaded HTML |
111 | replaceByDiag: function(match, p1, p2) { | |
112 | const args = this.parseFen(p2); | |
113 | return getDiagram(args); | |
114 | }, | |
115 | re_setVariant: async function(vname) { | |
a97bdbda BA |
116 | await import("@/variants/" + vname + ".js") |
117 | .then((vModule) => { | |
32f6285e | 118 | this.V = window.V = vModule[vname + "Rules"]; |
a97bdbda BA |
119 | this.gameInfo.vname = vname; |
120 | }) | |
121 | .catch((err) => { | |
122 | // Soon after component creation, st.tr might be uninitialized. | |
123 | // Set a timeout to let a chance for the message to show translated. | |
124 | const text = "Mispelled variant name"; | |
125 | setTimeout(() => { | |
126 | alert(this.st.tr[text] || text); | |
127 | this.$router.replace("/variants"); | |
128 | }, 500); | |
129 | }); | |
cf2343ce | 130 | }, |
834c202a | 131 | startGame: function(mode) { |
6808d7a1 | 132 | if (this.gameInProgress) return; |
cf2343ce | 133 | this.gameInProgress = true; |
cf2343ce | 134 | this.display = "computer"; |
834c202a | 135 | this.gameInfo.mode = mode; |
98b94cc3 BA |
136 | if (this.gameInfo.mode == "versus") { |
137 | CompgameStorage.get(this.gameInfo.vname, (game) => { | |
138 | // NOTE: game might be null | |
139 | this.$refs["compgame"].launchGame(game); | |
140 | }); | |
141 | } else { | |
142 | this.$refs["compgame"].launchGame(); | |
143 | } | |
cf2343ce | 144 | }, |
98b94cc3 | 145 | // user wants to stop the game: |
866842c3 BA |
146 | stopGame: function() { |
147 | this.$refs["compgame"].gameOver("?", "Undetermined result"); | |
cf2343ce | 148 | }, |
41cb9b94 BA |
149 | // The game is effectively stopped: |
150 | gameStopped: function() { | |
151 | this.gameInProgress = false; | |
98b94cc3 BA |
152 | if (this.gameInfo.mode == "versus") |
153 | CompgameStorage.remove(this.gameInfo.vname); | |
41cb9b94 | 154 | }, |
5157ce0b | 155 | gotoAnalyze: function() { |
6808d7a1 | 156 | this.$router.push( |
6b7b2cf7 BA |
157 | "/analyse/" + this.gameInfo.vname + |
158 | "/?fen=" + V.GenRandInitFen(this.st.settings.randomness) | |
6808d7a1 BA |
159 | ); |
160 | } | |
161 | } | |
cf2343ce BA |
162 | }; |
163 | </script> | |
50aed5a1 | 164 | |
5bcc9b31 BA |
165 | <!-- NOTE: not scoped here, because HTML is injected (TODO) --> |
166 | <style lang="sass"> | |
50aed5a1 BA |
167 | .warn |
168 | padding: 3px | |
169 | color: red | |
170 | background-color: lightgrey | |
171 | font-weight: bold | |
172 | ||
c7550017 BA |
173 | h4#variantName |
174 | text-align: center | |
175 | font-weight: bold | |
176 | ||
50aed5a1 BA |
177 | figure.diagram-container |
178 | margin: 15px 0 15px 0 | |
179 | text-align: center | |
180 | width: 100% | |
181 | display: block | |
182 | .diagram | |
183 | display: block | |
32f6285e | 184 | width: 50% |
50aed5a1 BA |
185 | min-width: 240px |
186 | margin-left: auto | |
187 | margin-right: auto | |
188 | .diag12 | |
189 | float: left | |
32f6285e | 190 | width: 40% |
50aed5a1 BA |
191 | margin-left: calc(10% - 20px) |
192 | margin-right: 40px | |
193 | @media screen and (max-width: 630px) | |
194 | float: none | |
195 | margin: 0 auto 10px auto | |
196 | .diag22 | |
197 | float: left | |
32f6285e | 198 | width: 40% |
50aed5a1 BA |
199 | margin-right: calc(10% - 20px) |
200 | @media screen and (max-width: 630px) | |
201 | float: none | |
202 | margin: 0 auto | |
203 | figcaption | |
204 | display: block | |
205 | clear: both | |
206 | padding-top: 5px | |
207 | font-size: 0.8em | |
208 | ||
92a523d1 BA |
209 | p.boxed |
210 | background-color: #FFCC66 | |
211 | padding: 5px | |
50aed5a1 | 212 | |
9a3049f3 BA |
213 | .bigfont |
214 | font-size: 1.2em | |
215 | ||
216 | .bold | |
217 | font-weight: bold | |
218 | ||
92a523d1 BA |
219 | .stageDelimiter |
220 | color: purple | |
50aed5a1 | 221 | |
92a523d1 BA |
222 | // To show (new) pieces, and/or there values... |
223 | figure.showPieces > img | |
224 | width: 50px | |
50aed5a1 | 225 | |
92a523d1 BA |
226 | figure.showPieces > figcaption |
227 | color: #6C6C6C | |
50aed5a1 | 228 | |
92a523d1 BA |
229 | .section-title |
230 | padding: 0 | |
50aed5a1 | 231 | |
92a523d1 BA |
232 | .section-title > h4 |
233 | padding: 5px | |
50aed5a1 | 234 | |
92a523d1 BA |
235 | ol, ul:not(.browser-default) |
236 | padding-left: 20px | |
50aed5a1 | 237 | |
92a523d1 BA |
238 | ul:not(.browser-default) |
239 | margin-top: 5px | |
50aed5a1 | 240 | |
92a523d1 BA |
241 | ul:not(.browser-default) > li |
242 | list-style-type: disc | |
c7550017 BA |
243 | |
244 | table | |
245 | margin: 15px auto | |
246 | ||
247 | .italic | |
248 | font-style: italic | |
249 | ||
250 | img.img-center | |
251 | display: block | |
252 | margin: 0 auto 15px auto | |
50aed5a1 | 253 | </style> |