public/javascripts/components/rules.js

   1 Vue.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
  55                     boardDiv += "<div class='board board" + sizeY + " " +
  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 })