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;