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