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