client/src/components/Diagrammer.vue

   1 <script>
   2 import { store } from "@/store";
   3 import { ArrayFun } from "@/utils/array";
   4 export default {
   5   name: "my-diagrammer",
   6   props: ["fen","vname"],
   7   data: {
   8     function() {
   9       return {
  10         st: store.state,
  11         // args: object with position (mandatory), and
  12         // orientation, marks, shadow (optional)
  13         args: this.parseFen(this.fen),
  14       };
  15     }
  16   },
  17   render(h) {
  18     if (!window.V)
  19       return;
  20     // Obtain the array of pieces images names:
  21     const board = V.GetBoard(this.args.position);
  22     const orientation = this.args.orientation || "w";
  23     const markArray = this.getMarkArray(this.args.marks);
  24     const shadowArray = this.getShadowArray(this.args.shadow);
  25 //    const [startX,startY,inc] = orientation == 'w'
  26 //      ? [0, 0, 1]
  27 //      : [V.size.x-1, V.size.y-1, -1];
  28     const diagDiv = h(
  29       'div',
  30       {
  31         'class': {
  32           'diagram': true,
  33         },
  34       },
  35       [...Array(V.size.x).keys()].map(i => {
  36         let ci = (orientation=='w' ? i : sizeX-i-1);
  37         return h(
  38           'div',
  39           {
  40             'class': {
  41               'row': true,
  42             },
  43           },
  44           [...Array(V.size.y).keys()].map(j => {
  45             let cj = (orientation=='w' ? j : sizeY-j-1);
  46             let elems = [];
  47             if (board[ci][cj] != V.EMPTY)
  48             {
  49               elems.push(
  50                 h(
  51                   'img',
  52                   {
  53                     'class': {
  54                       'piece': true,
  55                     },
  56                     attrs: {
  57                       src: require("@/assets/images/pieces/" +
  58                         V.getPpath(board[ci][cj]) + ".svg"),
  59                     },
  60                   }
  61                 )
  62               );
  63             }
  64             if (markArray.length > 0 && markArray[ci][cj])
  65             {
  66               elems.push(
  67                 h(
  68                   'img',
  69                   {
  70                     'class': {
  71                       'mark-square': true,
  72                     },
  73                     attrs: {
  74                       src: "/images/mark.svg",
  75                     },
  76                   }
  77                 )
  78               );
  79             }
  80             return h(
  81               'div',
  82               {
  83                 'class': {
  84                   'board': true,
  85                   ['board'+V.size.y]: true,
  86                   'light-square': (i+j)%2==0,
  87                   'dark-square': (i+j)%2==1,
  88                   [this.st.bcolor]: true,
  89                   'in-shadow': shadowArray.length > 0 && shadowArray[ci][cj],
  90                 },
  91               },
  92               elems
  93             );
  94           })
  95         );
  96       })
  97     );
  98     return diagDiv;
  99   },
 100   methods: {
 101     parseFen: function(fen) {
 102       const fenParts = fen.split(" ");
 103       return {
 104         position: fenParts[0],
 105         marks: fenParts[1],
 106         orientation: fenParts[2],
 107         shadow: fenParts[3],
 108       };
 109     },
 110     // Turn (human) marks into coordinates
 111     getMarkArray: function(marks) {
 112       if (!marks || marks == "-")
 113         return [];
 114       let markArray = ArrayFun.init(V.size.x, V.size.y, false);
 115       const squares = marks.split(",");
 116       for (let i=0; i<squares.length; i++)
 117       {
 118         const coords = V.SquareToCoords(squares[i]);
 119         markArray[coords.x][coords.y] = true;
 120       }
 121       return markArray;
 122     },
 123     // Turn (human) shadow indications into coordinates
 124     getShadowArray: function(shadow) {
 125       if (!shadow || shadow == "-")
 126         return [];
 127       let shadowArray = ArrayFun.init(V.size.x, V.size.y, false);
 128       const squares = shadow.split(",");
 129       for (let i=0; i<squares.length; i++)
 130       {
 131         const rownum = V.size.x - parseInt(squares[i]);
 132         if (!isNaN(rownum))
 133         {
 134           // Shadow a full row
 135           for (let i=0; i<V.size.y; i++)
 136             shadowArray[rownum][i] = true;
 137           continue;
 138         }
 139         if (squares[i].length == 1)
 140         {
 141           // Shadow a full column
 142           const colnum = V.ColumnToCoord(squares[i]);
 143           for (let i=0; i<V.size.x; i++)
 144             shadowArray[i][colnum] = true;
 145           continue;
 146         }
 147         if (squares[i].indexOf("-") >= 0)
 148         {
 149           // Shadow a range of squares, horizontally or vertically
 150           const firstLastSq = squares[i].split("-");
 151           const range =
 152           [
 153             V.SquareToCoords(firstLastSq[0]),
 154             V.SquareToCoords(firstLastSq[1])
 155           ];
 156           const step =
 157           [
 158             range[1].x == range[0].x
 159               ? 0
 160               : (range[1].x - range[0].x) / Math.abs(range[1].x - range[0].x),
 161             range[1].y == range[0].y
 162               ? 0
 163               : (range[1].y - range[0].y) / Math.abs(range[1].y - range[0].y)
 164           ];
 165           // Convention: range always from smaller to larger number
 166           for (let x=range[0].x, y=range[0].y; x <= range[1].x && y <= range[1].y;
 167             x += step[0], y += step[1])
 168           {
 169             shadowArray[x][y] = true;
 170           }
 171           continue;
 172         }
 173         // Shadow just one square:
 174         const coords = V.SquareToCoords(squares[i]);
 175         shadowArray[coords.x][coords.y] = true;
 176       }
 177       return shadowArray;
 178     },
 179   },
 180 };
 181 </script>