+<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>