desck 0.4.2

package/public/script.js

@@ -0,0 +1,490 @@
+let socket = null;
+let connected = false;
+
+// TODO Files - separate template from files
+
+function getInitial() {
+  const hash = window.location.hash;
+  if (hash.length > 1) {
+    return hash.substring(1);
+  } else {
+    return "template";
+  }
+}
+
+function extractHelp(readme) {
+  const someUsage = readme.split("## Help");
+  const helpDev = someUsage[1].split("\n## ");
+  return helpDev[0].trim();
+}
+
+// function hsl(c) {
+//     return `hsl(${c.h * 360}, ${c.s * 100}%, ${c.l * 100}%)`
+// }
+
+function paletteAsCSS(palette) {
+  const colors = Object.keys(palette);
+  const vars = colors
+    .map((name) => `  --${name}: ${palette[name]};`)
+    .join("\n");
+  const classes = colors
+    .map((name) => `.${name} {fill: var(--${name}) !important;}`)
+    .join("\n");
+
+  return `:root {\n${vars}\n}\n${classes}`;
+}
+
+function styleBlock(css) {
+  const style = document.createElement("style");
+  style.textContent = css;
+  return style;
+}
+
+function loadPalette(palette) {
+  if (window.paletteStyle) {
+    document.head.removeChild(window.paletteStyle);
+  }
+  window.paletteObject = palette;
+  window.paletteStyle = styleBlock(paletteAsCSS(palette));
+  document.head.appendChild(window.paletteStyle);
+}
+
+function loadFont(type, font) {
+  window.font[type] = font;
+  if (window.fontStyle[type]) {
+    document.head.removeChild(window.fontStyle[type]);
+  }
+
+  window.fontStyle[type] = styleBlock(`
+            @import url('https://fonts.googleapis.com/css2?family=${font.replaceAll(" ", "+")}&display=swap');
+            :root {
+                --desck-${type}-font : "${font}";
+            }
+        `);
+  document.head.appendChild(window.fontStyle[type]);
+}
+
+async function loadFlags() {
+  const project =
+    window.location.hash.length > 1
+      ? atob(window.location.hash.substring(1))
+      : null;
+
+  const parsed = JSON.parse(project);
+
+  console.log(project);
+  return {
+    offline: window.location.hostname == "localhost" && true,
+    seed: new Date().getTime(),
+    window: getRect(),
+    initial: project ? parsed.name : "template",
+    help: extractHelp(await (await fetch("./README.md")).text()),
+    saveFile: project,
+  };
+}
+
+function loadSymbolsInto(url, parent) {
+  fetch(url)
+    .then((response) => response.text())
+    .then((svgText) => {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svgText, "image/svg+xml");
+      const svg = doc.querySelector("defs");
+      const symbols = svg.getElementsByTagName("symbol");
+      if (svg) {
+        for (let symbol of symbols) {
+          parent.appendChild(symbol.cloneNode(true));
+        }
+      }
+    })
+    .catch((error) => console.error("Error loading SVG:", error));
+}
+
+async function loadJsonProject(url) {
+  const response = await fetch(url);
+  const json = await response.json();
+  return json;
+}
+
+async function loadProjectFromSVG(url) {
+  const response = await fetch(url);
+  if (response.ok) {
+    const text = await response.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(text, "image/svg+xml");
+    const svg = doc.querySelector("#view");
+    const data = svg.getAttribute("data-project");
+    const project = JSON.parse(data);
+    return project;
+  } else {
+    return response;
+  }
+}
+
+async function downloadBlob(blob, filename) {
+  const downloadLink = document.createElement("a");
+  downloadLink.href = blob;
+  downloadLink.download = filename;
+  downloadLink.click();
+}
+
+function exportSymbols(settings) {
+  const svg = document.querySelector("#view");
+  const project = JSON.parse(svg.getAttribute("data-project"));
+
+  const backface = svg.querySelector("#backface");
+
+  if (settings.stripBackface) {
+    backface.id = null;
+  }
+
+  let data = new XMLSerializer().serializeToString(svg.querySelector("#defs"));
+
+  if (settings.stripBackface) {
+    backface.id = "backface";
+  }
+
+  const mapColors = settings ? settings.mapColors : project.settings.mapColors;
+
+  if (mapColors) {
+    Object.keys(window.paletteObject).forEach((name) => {
+      const color = window.paletteObject[name];
+      data = data.replaceAll(`var(--${name})`, color);
+    });
+  }
+
+  data = `<svg xmls="http://www.w3.org/2000/svg" display="none">${data}</svg>`;
+
+  const blob = new Blob([data], { type: "image/svg+xml" });
+
+  console.log(blob);
+
+  const url = URL.createObjectURL(blob);
+  return {
+    url: url,
+    blob: blob,
+    project: project,
+    data: data,
+  };
+}
+
+function getProject() {
+  const svg = document.querySelector("#view");
+  return JSON.parse(svg.getAttribute("data-project"));
+}
+
+function exportImage(settingsMaybe) {
+  const svg = document.querySelector("#view");
+  const project = JSON.parse(svg.getAttribute("data-project"));
+  const clone = svg.cloneNode(true);
+  const defs = clone.querySelector("defs");
+
+  const settings = settingsMaybe ? settingsMaybe : project.settings;
+
+  let models = [];
+  clone.querySelectorAll(".card").forEach((c) => {
+    models = models.concat(JSON.parse(c.getAttribute("data-using")));
+    c.removeAttribute("data-using");
+  });
+  clone.querySelectorAll(".card-front-rect").forEach((cfr) => {
+    cfr.removeAttribute("cursor");
+  });
+
+  if (settings.stripData) {
+    clone.removeAttribute("data-project");
+  }
+
+  clone.removeAttribute("style");
+
+  if (settings.embedSymbols) {
+    defs.querySelectorAll("symbol").forEach((symbol) => {
+      if (!models.includes(symbol.id) && symbol.id != "backface") {
+        defs.removeChild(symbol);
+      }
+    });
+  } else {
+    clone.removeChild(defs);
+  }
+
+  clone.querySelectorAll(".remove-on-export").forEach((node) => {
+    node.remove();
+  });
+
+  // clone.querySelectorAll(".selection").forEach((selection) => {
+  //     clone.removeChild(selection)
+  // })
+
+  // if (project.project.background == "transparent") {
+  //     clone.querySelectorAll("#background").forEach((selection) => {
+  //         clone.removeChild(selection)
+  //     })
+  // }
+
+  let data = new XMLSerializer().serializeToString(clone);
+  if (settings.mapColors) {
+    Object.keys(window.paletteObject).forEach((name) => {
+      const color = window.paletteObject[name];
+
+      data = data.replaceAll(`var(--${name})`, color);
+    });
+  }
+
+  if (settings.mapFont) {
+    ["primary", "secondary"].map((type) => {
+      if (window.fontStyle[type]) {
+        clone.appendChild(window.fontStyle[type].cloneNode(true));
+        data.replace(`var(--desck-${type}-font)`, `"${window.font[type]}"`);
+      }
+    });
+  }
+  // TODO Export - convert text object to path with opentype.js
+
+  const blob = new Blob([data], { type: "image/svg+xml" });
+
+  const url = URL.createObjectURL(blob);
+  return {
+    url: url,
+    blob: blob,
+    project: project,
+    data: data,
+  };
+}
+
+async function exportPNG(settings) {
+  const heightPixels = settings ? settings.heightPixels : 100;
+
+  const { url, project } = exportImage();
+
+  const canvas = document.createElement("canvas");
+
+  const cardSize = {
+    x: 250,
+    y: 350,
+  };
+
+  const widthPixels = (cardSize.x / cardSize.y) * heightPixels;
+  canvas.width = Math.floor(
+    (project.project.viewport.size.x / cardSize.x) * widthPixels,
+  );
+  canvas.height = Math.floor(
+    (project.project.viewport.size.y / cardSize.y) * heightPixels,
+  );
+  const ctx = canvas.getContext("2d");
+
+  const img = new Image();
+
+  return new Promise((resolve) => {
+    img.onload = () => {
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+      const pngUrl = canvas.toDataURL("image/png");
+      resolve(pngUrl);
+    };
+    img.src = url;
+  });
+}
+
+function exportSVG() {
+  const { url } = exportImage();
+  return url;
+}
+
+let app = null;
+
+async function handleOutputs(kind, data) {
+  switch (kind) {
+    case "export-svg": {
+      const svg = exportSVG();
+      downloadBlob(svg, `${data}.svg`);
+      return true;
+    }
+    case "export-symbols": {
+      const { url } = exportSymbols();
+      downloadBlob(url, `symbols.svg`);
+      return true;
+    }
+    case "export-png": {
+      const pixels = getProject().settings.heightPixels;
+      const png = await exportPNG(pixels);
+      downloadBlob(png, `${data}.png`);
+      return true;
+    }
+    case "export-json": {
+      const project = JSON.parse(data);
+      const blob = new Blob([data], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      downloadBlob(url, `${project.name}.json`);
+      return true;
+    }
+    case "load-palette": {
+      const palette = JSON.parse(data);
+      loadPalette(palette);
+      return true;
+    }
+    case "load-primary-font": {
+      loadFont("primary", data);
+      return true;
+    }
+    case "load-secondary-font": {
+      loadFont("secondary", data);
+      return true;
+    }
+    case "get-size": {
+      app.ports.resizeMessage.send(getRect());
+    }
+    default:
+      return false;
+  }
+}
+
+function getRect() {
+  const view = document.querySelector("#view");
+  return view
+    ? {
+        x: view.getBoundingClientRect().width,
+        y: view.getBoundingClientRect().height,
+      }
+    : { x: window.innerWidth, y: window.innerHeight };
+}
+
+async function init() {
+  let template = await (await fetch("./projects/template.json")).json();
+
+  let flags = await loadFlags();
+
+  if (flags.offline) {
+    app = Elm.Main.init({
+      node: document.querySelector("#main"),
+      flags: flags,
+    });
+    const sendMessage = (kind, data) => {
+      app.ports.input.send({
+        kind: kind,
+        data: data,
+      });
+    };
+    socket = window.io();
+    socket.on("connect", () => {
+      if (connected) {
+        window.location.reload();
+      } else {
+        connected = true;
+      }
+    });
+    socket.on("live-reload", () => {
+      window.location.reload();
+    });
+    socket.onAny((...args) => {
+      console.log(args[0], args[1]);
+      sendMessage(args[0], args[1] ? JSON.stringify(args[1]) : "");
+    });
+
+    app.ports.output.subscribe(async (message) => {
+      let { kind, data } = message;
+      console.log(kind, data);
+      let exported = await handleOutputs(kind, data);
+      if (!exported) {
+        socket.emit(kind, data);
+      }
+    });
+  } else {
+    const last = window.localStorage.getItem("__last");
+    const first =
+      last && window.localStorage.getItem(last)
+        ? window.localStorage.getItem(last)
+        : JSON.stringify(template);
+    flags.initial = last && first ? last : "template";
+    app = Elm.Main.init({
+      node: document.querySelector("#main"),
+      flags: flags,
+    });
+    const sendMessage = (kind, data) => {
+      app.ports.input.send({
+        kind: kind,
+        data: data,
+      });
+    };
+
+    const sendFiles = () => {
+      sendMessage(
+        "files",
+        JSON.stringify(
+          Object.keys(window.localStorage).filter(
+            (n) => n.substring(0, 2) != "__",
+          ),
+        ),
+      );
+    };
+    window.localStorage.setItem("template", JSON.stringify(template));
+
+    sendFiles();
+    sendMessage("open", first);
+
+    app.ports.output.subscribe(async (message) => {
+      let { kind, data } = message;
+      console.log(kind, data);
+      let exported = await handleOutputs(kind, data);
+      if (!exported) {
+        switch (kind) {
+          case "save": {
+            window.localStorage.setItem(data.name, JSON.stringify(data));
+            window.localStorage.setItem("__last", data.name);
+            sendMessage("saved", data.name);
+            sendFiles();
+          }
+
+          case "import": {
+            const saved = window.localStorage.getItem(data);
+            window.localStorage.setItem("__last", data);
+            if (saved) {
+              sendMessage("open", saved);
+            }
+          }
+        }
+      }
+    });
+  }
+
+  let symbol_container = "#defs";
+  loadSymbolsInto("./svg/digits.svg", document.querySelector(symbol_container));
+  loadSymbolsInto("./svg/suits.svg", document.querySelector(symbol_container));
+  loadSymbolsInto("./svg/courts.svg", document.querySelector(symbol_container));
+  // loadSymbolsInto(
+  //   "./svg/backface.svg",
+  //   document.querySelector(symbol_container),
+  // );
+
+  let mods = {
+    ctrl: false,
+    shift: false,
+    alt: false,
+  };
+
+  const forwardMods = (event) => {
+    mods.ctrl = event.ctrlKey;
+    mods.shift = event.shiftKey;
+    mods.alt = event.altKey;
+    app.ports.input.send({ kind: "mods", data: JSON.stringify(mods) });
+  };
+
+  window.addEventListener("keydown", (event) => {
+    forwardMods(event);
+  });
+
+  window.addEventListener("keyup", (event) => {
+    forwardMods(event);
+  });
+
+  window.font = {};
+  window.fontStyle = {};
+  // window.addEventListener("hashchange", () => window.location.reload())
+
+  window.addEventListener("context", (e) => {
+    e.preventDefault();
+  });
+  window.addEventListener("resize", () => {
+    app.ports.resizeMessage.send(getRect());
+  });
+}
+
+init();