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