Fix Dobutsu, extend Align4
[xogo.git] / utils / drawDiagrams.js
1 function fenToDiag(vname) {
2 import(`/variants/${vname}/class.js`).then(module => {
3 window.V = module.default;
4 for (const [k, v] of Object.entries(V.Aliases))
5 window[k] = v;
6 re_drawDiagrams();
7 });
8 }
9
10 // TODO: heuristic to improve for ratio != 1 (how?)
11 function getDiagSize(elt) {
12 const baseWidth = Math.min(window.innerWidth, 800);
13 let multFact = 1;
14 if (elt.classList.contains("left") || elt.classList.contains("right")) {
15 if (baseWidth >= 551)
16 multFact = 0.45;
17 else
18 multFact = 0.7;
19 }
20 else if (baseWidth > 630)
21 multFact = 0.5;
22 else
23 multFact = 0.7;
24 return multFact * baseWidth;
25 }
26
27 let vr = null;
28 function re_drawDiagrams() {
29 const diagrams = document.getElementsByClassName("diag");
30 if (diagrams.length == 0)
31 return;
32 const redrawing = !!vr;
33 if (!redrawing)
34 vr = new Array(diagrams.length);
35 for (let i=0; i<diagrams.length; i++) {
36 if (!redrawing) {
37 let chessboard = document.createElement("div");
38 chessboard.classList.add("chessboard");
39 diagrams[i].appendChild(chessboard);
40 diagrams[i].id = "diag_" + i;
41 }
42 const diagSize = getDiagSize(diagrams[i]);
43 diagrams[i].style.width = diagSize + "px";
44 diagrams[i].style.height = diagSize + "px";
45 if (!redrawing) {
46 vr[i] = new V({
47 element: "diag_" + i,
48 fen: diagrams[i].dataset.fen,
49 marks: diagrams[i].dataset.mks
50 ? diagrams[i].dataset.mks.split(',')
51 : undefined,
52 color: diagrams[i].dataset.col || 'w',
53 options: {},
54 diagram: true
55 });
56 }
57 }
58 }
59
60 window.onresize = re_drawDiagrams;