Commit | Line | Data |
---|---|---|
92342261 | 1 | // Load rules on variant page |
1d184b4c BA |
2 | Vue.component('my-rules', { |
3 | data: function() { | |
4 | return { content: "" }; | |
5 | }, | |
6 | template: `<div v-html="content" class="section-content"></div>`, | |
7 | mounted: function() { | |
8 | // AJAX request to get rules content (plain text, HTML) | |
9 | let xhr = new XMLHttpRequest(); | |
10 | let self = this; | |
11 | xhr.onreadystatechange = function() { | |
12 | if (this.readyState == 4 && this.status == 200) | |
13 | { | |
14 | let replaceByDiag = (match, p1, p2) => { return self.drawDiag(p2); }; | |
15 | self.content = xhr.responseText.replace(/(fen:)([^:]*):/g, replaceByDiag); | |
16 | } | |
17 | }; | |
18 | xhr.open("GET", "/rules/" + variant, true); | |
19 | xhr.setRequestHeader('X-Requested-With', "XMLHttpRequest"); | |
92342261 | 20 | xhr.send(); |
1d184b4c BA |
21 | }, |
22 | methods: { | |
23 | drawDiag: function(fen) { | |
0b7d99ec | 24 | let [sizeX,sizeY] = [V.size.x,V.size.y]; |
1d184b4c BA |
25 | let fenParts = fen.split(" "); |
26 | // Obtain array of pieces images names | |
27 | let board = VariantRules.GetBoard(fenParts[0]); | |
28 | let orientation = "w"; | |
29 | if (fenParts.length >= 2) | |
30 | orientation = fenParts[1]; | |
31 | let markArray = []; | |
32 | if (fenParts.length >= 3) | |
33 | { | |
34 | let marks_str = fenParts[2]; | |
35 | // Turn (human) marks into coordinates | |
36 | markArray = doubleArray(sizeX, sizeY, false); | |
37 | let marks = marks_str.split(","); | |
38 | for (let i=0; i<marks.length; i++) | |
39 | { | |
40 | var res = /^([a-z]+)([0-9]+)$/i.exec(marks[i]); | |
41 | let x = sizeX - parseInt(res[2]); //white at bottom, so counting is reversed | |
42 | let y = res[1].charCodeAt(0)-97; //always one char: max 26, big enough | |
43 | markArray[x][y] = true; | |
44 | } | |
45 | } | |
46 | let boardDiv = ""; | |
47 | let [startX,startY,inc] = orientation == 'w' | |
48 | ? [0, 0, 1] | |
49 | : [sizeX-1, sizeY-1, -1]; | |
50 | for (let i=startX; i>=0 && i<sizeX; i+=inc) | |
51 | { | |
52 | boardDiv += "<div class='row'>"; | |
53 | for (let j=startY; j>=0 && j<sizeY; j+=inc) | |
54 | { | |
cf130369 | 55 | boardDiv += "<div class='board board" + sizeY + " " + |
1d184b4c | 56 | ((i+j)%2==0 ? "light-square-diag" : "dark-square-diag") + "'>"; |
1d184b4c BA |
57 | if (board[i][j] != VariantRules.EMPTY) |
58 | { | |
59 | boardDiv += "<img src='/images/pieces/" + | |
60 | VariantRules.getPpath(board[i][j]) + ".svg' class='piece'/>"; | |
61 | } | |
15c1295a BA |
62 | if (markArray.length>0 && markArray[i][j]) |
63 | boardDiv += "<img src='/images/mark.svg' class='mark-square'/>"; | |
1d184b4c BA |
64 | boardDiv += "</div>"; |
65 | } | |
66 | boardDiv += "</div>"; | |
67 | } | |
68 | return boardDiv; | |
69 | }, | |
70 | }, | |
71 | }) |