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