| 1 | // Load rules on variant page |
| 2 | Vue.component('my-rules', { |
| 3 | data: function() { |
| 4 | return { content: "" }; |
| 5 | }, |
| 6 | template: ` |
| 7 | <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2"> |
| 8 | <div v-html="content" class="section-content"></div> |
| 9 | </div> |
| 10 | `, |
| 11 | mounted: function() { |
| 12 | // AJAX request to get rules content (plain text, HTML) |
| 13 | ajax("/rules/" + variant, "GET", response => { |
| 14 | let replaceByDiag = (match, p1, p2) => { |
| 15 | const args = this.parseFen(p2); |
| 16 | return getDiagram(args); |
| 17 | }; |
| 18 | this.content = response.replace(/(fen:)([^:]*):/g, replaceByDiag); |
| 19 | }); |
| 20 | }, |
| 21 | methods: { |
| 22 | parseFen(fen) { |
| 23 | const fenParts = fen.split(" "); |
| 24 | return { |
| 25 | position: fenParts[0], |
| 26 | marks: fenParts[1], |
| 27 | orientation: fenParts[2], |
| 28 | shadow: fenParts[3], |
| 29 | }; |
| 30 | }, |
| 31 | }, |
| 32 | }) |