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     multFact = 0.45;
  16   else if (baseWidth > 630)
  17     multFact = 0.5;
  18   else
  19     multFact = 0.7;
  20   return multFact * baseWidth;
  21 }
  22
  23 let vr = null;
  24 function re_drawDiagrams() {
  25   const diagrams = document.getElementsByClassName("diag");
  26   if (diagrams.length == 0)
  27     return;
  28   const redrawing = !!vr;
  29   if (!redrawing)
  30     vr = new Array(diagrams.length);
  31   for (let i=0; i<diagrams.length; i++) {
  32     if (!redrawing) {
  33       let chessboard = document.createElement("div");
  34       chessboard.classList.add("chessboard");
  35       diagrams[i].appendChild(chessboard);
  36       diagrams[i].id = "diag_" + i;
  37     }
  38     const diagSize = getDiagSize(diagrams[i]);
  39     diagrams[i].style.width = diagSize + "px";
  40     diagrams[i].style.height = diagSize + "px";
  41     if (!redrawing) {
  42       vr[i] = new V({
  43         element: "diag_" + i,
  44         fen: diagrams[i].dataset.fen,
  45         marks: diagrams[i].dataset.mks
  46                  ? JSON.parse('[' + diagrams[i].dataset.mks + ']')
  47                  : undefined,
  48         color: diagrams[i].dataset.col || 'w',
  49         options: {},
  50         diagram: true
  51       });
  52     }
  53   }
  54 }
  55
  56 window.onresize = re_drawDiagrams;