Start to revert to previous way of handling rules + diagrams

diff --git a/client/src/components/Diagrammer.vue b/client/src/components/Diagrammer.vue
deleted file mode 100644 (file)
index 04767df..0000000
--- a/client/src/components/Diagrammer.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<script>
-import { store } from "@/store";
-import { ArrayFun } from "@/utils/array";
-export default {
-  name: "my-diagrammer",
-  props: ["fen","vname"],
-  data: {
-    function() {
-      return {
-        st: store.state,
-        // args: object with position (mandatory), and
-        // orientation, marks, shadow (optional)
-        args: this.parseFen(this.fen),
-      };
-    }
-  },
-  render(h) {
-    if (!window.V)
-      return;
-    // Obtain the array of pieces images names:
-    const board = V.GetBoard(this.args.position);
-    const orientation = this.args.orientation || "w";
-    const markArray = this.getMarkArray(this.args.marks);
-    const shadowArray = this.getShadowArray(this.args.shadow);
-//    const [startX,startY,inc] = orientation == 'w'
-//      ? [0, 0, 1]
-//      : [V.size.x-1, V.size.y-1, -1];
-    const diagDiv = h(
-      'div',
-      {
-        'class': {
-          'diagram': true,
-        },
-      },
-      [...Array(V.size.x).keys()].map(i => {
-        let ci = (orientation=='w' ? i : sizeX-i-1);
-        return h(
-          'div',
-          {
-            'class': {
-              'row': true,
-            },
-          },
-          [...Array(V.size.y).keys()].map(j => {
-            let cj = (orientation=='w' ? j : sizeY-j-1);
-            let elems = [];
-            if (board[ci][cj] != V.EMPTY)
-            {
-              elems.push(
-                h(
-                  'img',
-                  {
-                    'class': {
-                      'piece': true,
-                    },
-                    attrs: {
-                      src: require("@/assets/images/pieces/" +
-                        V.getPpath(board[ci][cj]) + ".svg"),
-                    },
-                  }
-                )
-              );
-            }
-            if (markArray.length > 0 && markArray[ci][cj])
-            {
-              elems.push(
-                h(
-                  'img',
-                  {
-                    'class': {
-                      'mark-square': true,
-                    },
-                    attrs: {
-                      src: "/images/mark.svg",
-                    },
-                  }
-                )
-              );
-            }
-            return h(
-              'div',
-              {
-                'class': {
-                  'board': true,
-                  ['board'+V.size.y]: true,
-                  'light-square': (i+j)%2==0,
-                  'dark-square': (i+j)%2==1,
-                  [this.st.bcolor]: true,
-                  'in-shadow': shadowArray.length > 0 && shadowArray[ci][cj],
-                },
-              },
-              elems
-            );
-          })
-        );
-      })
-    );
-    return diagDiv;
-  },
-  methods: {
-    parseFen: function(fen) {
-      const fenParts = fen.split(" ");
-      return {
-        position: fenParts[0],
-        marks: fenParts[1],
-        orientation: fenParts[2],
-        shadow: fenParts[3],
-      };
-    },
-    // Turn (human) marks into coordinates
-    getMarkArray: function(marks) {
-      if (!marks || marks == "-")
-        return [];
-      let markArray = ArrayFun.init(V.size.x, V.size.y, false);
-      const squares = marks.split(",");
-      for (let i=0; i<squares.length; i++)
-      {
-        const coords = V.SquareToCoords(squares[i]);
-        markArray[coords.x][coords.y] = true;
-      }
-      return markArray;
-    },
-    // Turn (human) shadow indications into coordinates
-    getShadowArray: function(shadow) {
-      if (!shadow || shadow == "-")
-        return [];
-      let shadowArray = ArrayFun.init(V.size.x, V.size.y, false);
-      const squares = shadow.split(",");
-      for (let i=0; i<squares.length; i++)
-      {
-        const rownum = V.size.x - parseInt(squares[i]);
-        if (!isNaN(rownum))
-        {
-          // Shadow a full row
-          for (let i=0; i<V.size.y; i++)
-            shadowArray[rownum][i] = true;
-          continue;
-        }
-        if (squares[i].length == 1)
-        {
-          // Shadow a full column
-          const colnum = V.ColumnToCoord(squares[i]);
-          for (let i=0; i<V.size.x; i++)
-            shadowArray[i][colnum] = true;
-          continue;
-        }
-        if (squares[i].indexOf("-") >= 0)
-        {
-          // Shadow a range of squares, horizontally or vertically
-          const firstLastSq = squares[i].split("-");
-          const range =
-          [
-            V.SquareToCoords(firstLastSq[0]),
-            V.SquareToCoords(firstLastSq[1])
-          ];
-          const step =
-          [
-            range[1].x == range[0].x
-              ? 0
-              : (range[1].x - range[0].x) / Math.abs(range[1].x - range[0].x),
-            range[1].y == range[0].y
-              ? 0
-              : (range[1].y - range[0].y) / Math.abs(range[1].y - range[0].y)
-          ];
-          // Convention: range always from smaller to larger number
-          for (let x=range[0].x, y=range[0].y; x <= range[1].x && y <= range[1].y;
-            x += step[0], y += step[1])
-          {
-            shadowArray[x][y] = true;
-          }
-          continue;
-        }
-        // Shadow just one square:
-        const coords = V.SquareToCoords(squares[i]);
-        shadowArray[coords.x][coords.y] = true;
-      }
-      return shadowArray;
-    },
-  },
-};
-</script>

diff --git a/client/src/rules/Alice/en.pug b/client/src/rules/Alice/en.pug
index 6bba640..5ef85f6 100644 (file)
--- a/client/src/rules/Alice/en.pug
+++ b/client/src/rules/Alice/en.pug
@@ -20,9 +20,7 @@ ul
   li King : L
 
 figure.diagram-container
-  // TODO: sub-component + use pug-loader instead of raw-loader
-  Diagram(fen="rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R" vname="Alice")
-  //.diagram
+  .diagram
     | fen:rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R:
   figcaption After the moves 1.Nf3 Pd5 2.Pc4 Sxc4
 

diff --git a/client/src/rules/Chess960/fr.pug b/client/src/rules/Chess960/fr.pug
index 3325f81..9b62de1 100644 (file)
--- a/client/src/rules/Chess960/fr.pug
+++ b/client/src/rules/Chess960/fr.pug
@@ -16,7 +16,8 @@ p.
        en arrivant sur une case occupée (avec une seule exception, détaillée plus bas).
 
 figure.diagram-container
-       Diagrammer(fen="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR" vname="Chess960")
+       .diagram
+               | fen:rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR:
        figcaption Position de départ habituelle.
 
 p.

diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js
new file mode 100644 (file)
index 0000000..0d8d9ae
--- /dev/null
+++ b/client/src/utils/printDiagram.js
@@ -0,0 +1,111 @@
+import { ArrayFun } from "@/utils/array";
+
+// Turn (human) marks into coordinates
+function getMarkArray(marks)
+{
+       if (!marks || marks == "-")
+               return [];
+       let markArray = ArrayFun.init(V.size.x, V.size.y, false);
+       const squares = marks.split(",");
+       for (let i=0; i<squares.length; i++)
+       {
+               const coords = V.SquareToCoords(squares[i]);
+               markArray[coords.x][coords.y] = true;
+       }
+       return markArray;
+}
+
+// Turn (human) shadow indications into coordinates
+function getShadowArray(shadow)
+{
+       if (!shadow || shadow == "-")
+               return [];
+       let shadowArray = ArrayFun.init(V.size.x, V.size.y, false);
+       const squares = shadow.split(",");
+       for (let i=0; i<squares.length; i++)
+       {
+               const rownum = V.size.x - parseInt(squares[i]);
+               if (!isNaN(rownum))
+               {
+                       // Shadow a full row
+                       for (let i=0; i<V.size.y; i++)
+                               shadowArray[rownum][i] = true;
+                       continue;
+               }
+               if (squares[i].length == 1)
+               {
+                       // Shadow a full column
+                       const colnum = V.ColumnToCoord(squares[i]);
+                       for (let i=0; i<V.size.x; i++)
+                               shadowArray[i][colnum] = true;
+                       continue;
+               }
+               if (squares[i].indexOf("-") >= 0)
+               {
+                       // Shadow a range of squares, horizontally or vertically
+                       const firstLastSq = squares[i].split("-");
+                       const range =
+                       [
+                               V.SquareToCoords(firstLastSq[0]),
+                               V.SquareToCoords(firstLastSq[1])
+                       ];
+                       const step =
+                       [
+                               range[1].x == range[0].x
+                                       ? 0
+                                       : (range[1].x - range[0].x) / Math.abs(range[1].x - range[0].x),
+                               range[1].y == range[0].y
+                                       ? 0
+                                       : (range[1].y - range[0].y) / Math.abs(range[1].y - range[0].y)
+                       ];
+                       // Convention: range always from smaller to larger number
+                       for (let x=range[0].x, y=range[0].y; x <= range[1].x && y <= range[1].y;
+                               x += step[0], y += step[1])
+                       {
+                               shadowArray[x][y] = true;
+                       }
+                       continue;
+               }
+               // Shadow just one square:
+               const coords = V.SquareToCoords(squares[i]);
+               shadowArray[coords.x][coords.y] = true;
+       }
+       return shadowArray;
+}
+
+// args: object with position (mandatory), and
+// orientation, marks, shadow (optional)
+export function getDiagram(args)
+{
+       // Obtain the array of pieces images names:
+       const board = V.GetBoard(args.position);
+       const orientation = args.orientation || "w";
+       const markArray = getMarkArray(args.marks);
+       const shadowArray = getShadowArray(args.shadow);
+       let boardDiv = "";
+       const [startX,startY,inc] = orientation == 'w'
+               ? [0, 0, 1]
+               : [V.size.x-1, V.size.y-1, -1];
+       for (let i=startX; i>=0 && i<V.size.x; i+=inc)
+       {
+               boardDiv += "<div class='row'>";
+               for (let j=startY; j>=0 && j<V.size.y; j+=inc)
+               {
+                       boardDiv += "<div class='board board" + V.size.y + " " +
+                               ((i+j)%2==0 ? "light-square-diag" : "dark-square-diag") +
+                               (shadowArray.length > 0 && shadowArray[i][j] ? " in-shadow" : "") +
+                               "'>";
+                       if (board[i][j] != V.EMPTY)
+                       {
+                               boardDiv += "<img " +
+          "src='/images/pieces/" + V.getPpath(board[i][j]) + ".svg' " +
+          "class='piece'/>";
+                       }
+                       if (markArray.length > 0 && markArray[i][j])
+                               boardDiv += "<img src='/images/mark.svg' class='mark-square'/>";
+                       boardDiv += "</div>";
+               }
+               boardDiv += "</div>";
+       }
+       return boardDiv;
+}