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