Commit | Line | Data |
---|---|---|
42eb4eaf BA |
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> |