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