Fix: rework texture data format

index.html

@@ -866,77 +866,31 @@
                 <td>
                   <select id="styleTextureInput">
                     <option value="">No texture</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-big.jpg">
-                      Folded paper big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/folded-paper-small.jpg">
-                      Folded paper small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/gray-paper.jpg">
-                      Gray paper
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper.jpg">
-                      Soiled paper horizontal
-                    </option>
-                    <option
-                      value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/soiled-paper-e1633784189147.jpg"
-                    >
-                      Soided paper vertical
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/plaster.jpg">Plaster</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/ocean.jpg">Ocean</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-small.jpg">
-                      Antique small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/antique-big.jpg">
-                      Antique big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/pergamena-small.jpg">
-                      Pergamena small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg" selected>
-                      Marble big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-small.jpg">
-                      Marble small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-small.jpg">
-                      Marble Blue
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/marble-blue-big.jpg">
-                      Marble Blue big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-small.jpg">
-                      Stone small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/stone-big.jpg">
-                      Stone big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-small.jpg">
-                      Timber Cut small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/timbercut-big.jpg">
-                      Timber Cut big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-small.jpg">
-                      Mars small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mars-big.jpg">Mars big</option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-small.jpg">
-                      Mercury small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mercury-big.jpg">
-                      Mercury big
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/mauritania-small.jpg">
-                      Mauritania small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/iran-small.jpg">
-                      Iran small
-                    </option>
-                    <option value="https://i2.wp.com/azgaar.files.wordpress.com/2019/07/spain-small.jpg">
-                      Spain small
-                    </option>
+                    <option value="./images/textures/folded-paper-big.jpg">Folded paper big</option>
+                    <option value="./images/textures/folded-paper-small.jpg">Folded paper small</option>
+                    <option value="./images/textures/gray-paper.jpg">Gray paper</option>
+                    <option value="./images/textures/soiled-paper.jpg">Soiled paper horizontal</option>
+                    <option value="./images/textures/soiled-paper-vertical.jpg">Soided paper vertical</option>
+                    <option value="./images/textures/plaster.jpg">Plaster</option>
+                    <option value="./images/textures/ocean.jpg">Ocean</option>
+                    <option value="./images/textures/antique-small.jpg">Antique small</option>
+                    <option value="./images/textures/antique-big.jpg">Antique big</option>
+                    <option value="./images/textures/pergamena-small.jpg">Pergamena small</option>
+                    <option value="./images/textures/marble-big.jpg" selected>Marble big</option>
+                    <option value="./images/textures/marble-small.jpg">Marble small</option>
+                    <option value="./images/textures/marble-blue-small.jpg">Marble Blue</option>
+                    <option value="./images/textures/marble-blue-big.jpg">Marble Blue big</option>
+                    <option value="./images/textures/stone-small.jpg">Stone small</option>
+                    <option value="./images/textures/stone-big.jpg">Stone big</option>
+                    <option value="./images/textures/timbercut-small.jpg">Timber Cut small</option>
+                    <option value="./images/textures/timbercut-big.jpg">Timber Cut big</option>
+                    <option value="./images/textures/mars-small.jpg">Mars small</option>
+                    <option value="./images/textures/mars-big.jpg">Mars big</option>
+                    <option value="./images/textures/mercury-small.jpg">Mercury small</option>
+                    <option value="./images/textures/mercury-big.jpg">Mercury big</option>
+                    <option value="./images/textures/mauritania-small.jpg">Mauritania small</option>
+                    <option value="./images/textures/iran-small.jpg">Iran small</option>
+                    <option value="./images/textures/spain-small.jpg">Spain small</option>
                   </select>
                   <button
                     data-tip="Click and provide a URL to image to be set as a texture"
@@ -7985,16 +7939,16 @@
     <script src="libs/lineclip.min.js"></script>
     <script src="libs/alea.min.js"></script>
     <script src="modules/fonts.js?v=1.89.18"></script>
-    <script src="modules/ui/layers.js?v=1.93.07"></script>
+    <script src="modules/ui/layers.js?v=1.94.00"></script>
     <script src="modules/ui/measurers.js?v=1.87.02"></script>
-    <script src="modules/ui/stylePresets.js?v=1.93.07"></script>
+    <script src="modules/ui/stylePresets.js?v=1.94.00"></script>
 
-    <script src="modules/ui/general.js?v=1.93.04"></script>
-    <script src="modules/ui/options.js?v=1.93.12"></script>
-    <script src="main.js?v=1.93.02"></script>
+    <script src="modules/ui/general.js?v=1.94.00"></script>
+    <script src="modules/ui/options.js?v=1.94.00"></script>
+    <script src="main.js?v=1.94.00"></script>
 
     <script defer src="modules/relief-icons.js"></script>
-    <script defer src="modules/ui/style.js?v=1.93.12"></script>
+    <script defer src="modules/ui/style.js?v=1.94.00"></script>
     <script defer src="modules/ui/editors.js?v=1.93.10"></script>
     <script defer src="modules/ui/tools.js?v=1.92.00"></script>
     <script defer src="modules/ui/world-configurator.js?v=1.91.05"></script>
@@ -8029,13 +7983,13 @@
     <script defer src="modules/ui/3d.js?v=1.93.11"></script>
     <script defer src="modules/ui/submap.js?v=1.92.00"></script>
     <script defer src="modules/ui/hotkeys.js?v=1.93.00"></script>
-    <script defer src="modules/coa-renderer.js?v=1.91.00"></script>
+    <script defer src="modules/coa-renderer.js?v=1.94.00"></script>
     <script defer src="libs/rgbquant.min.js"></script>
     <script defer src="libs/jquery.ui.touch-punch.min.js"></script>
     <script defer src="modules/io/save.js?v=1.93.02"></script>
-    <script defer src="modules/io/load.js?v=1.93.02"></script>
+    <script defer src="modules/io/load.js?v=1.94.00"></script>
     <script defer src="modules/io/cloud.js"></script>
-    <script defer src="modules/io/export.js?v=1.93.12"></script>
+    <script defer src="modules/io/export.js?v=1.94.00"></script>
     <script defer src="modules/io/formats.js"></script>
 
     <!-- Web Components -->

libs/umami.js

@@ -1,5 +1,5 @@
 (window => {
-  const noTrack = !location.hostname || window.localStorage.getItem("noTrack");
+  const noTrack = window.localStorage.getItem("noTrack");
 
   const {
     screen: {width, height},

main.js

@@ -134,13 +134,6 @@ fogging
   .attr("fill", "#e8f0f6")
   .attr("filter", "url(#splotch)");
 
-texture
-  .append("image")
-  .attr("id", "textureImage")
-  .attr("preserveAspectRatio", "xMidYMid slice")
-  .attr("width", "100%")
-  .attr("height", "100%");
-
 // assign events separately as not a viewbox child
 scaleBar.on("mousemove", () => tip("Click to open Units Editor")).on("click", () => editUnits());
 legend
@@ -1955,7 +1948,9 @@ const regenerateMap = debounce(async function (options) {
 
 // clear the map
 function undraw() {
-  viewbox.selectAll("path, circle, polygon, line, text, use, #zones > g, #armies > g, #ruler > g").remove();
+  viewbox
+    .selectAll("path, circle, polygon, line, text, use, #texture > image, #zones > g, #armies > g, #ruler > g")
+    .remove();
   document
     .getElementById("deftemp")
     .querySelectorAll("path, clipPath, svg")

modules/coa-renderer.js

@@ -1953,9 +1953,9 @@ window.COArenderer = (function () {
     return fetchedCharges.join("");
   }
 
-  const url = location.hostname ? "./charges/" : "http://armoria.herokuapp.com/charges/"; // on local machine fetch files from server
+  const PATH = "./charges/";
   async function fetchCharge(charge, id) {
-    const fetched = fetch(url + charge + ".svg")
+    const fetched = fetch(PATH + charge + ".svg")
       .then(res => {
         if (res.ok) return res.text();
         else throw new Error("Cannot fetch charge");

modules/dynamic/auto-update.js

@@ -638,19 +638,6 @@ export function resolveVersionConflicts(version) {
   }
 
   if (version < 1.91) {
-    // from v1.90.02 texture image is always there
-    if (!texture.select("#textureImage").size()) {
-      // cleanup old texture if it has no id and add new one
-      texture.selectAll("*").remove();
-      texture
-        .append("image")
-        .attr("id", "textureImage")
-        .attr("width", "100%")
-        .attr("height", "100%")
-        .attr("preserveAspectRatio", "xMidYMid slice")
-        .attr("src", "https://i2.wp.com/azgaar.files.wordpress.com/2021/10/marble-big.jpg");
-    }
-
     // from 1.91.00 custom coa is moved to coa object
     pack.states.forEach(state => {
       if (state.coa === "custom") state.coa = {custom: true};
@@ -704,19 +691,23 @@ export function resolveVersionConflicts(version) {
     labels.selectAll("tspan").each(function () {
       this.setAttribute("x", 0);
     });
+  }
 
-    // leftover from v1.90.02
+  if (version < 1.94) {
+    // from v1.94.00 texture image is removed when layer is off
     texture.style("display", null);
-    const textureImage = texture.select("#textureImage");
-    if (textureImage.size()) {
-      const xlink = textureImage.attr("xlink:href");
-      const href = textureImage.attr("href");
-      const src = xlink || href;
 
-      if (src) {
-        textureImage.attr("src", src);
-        textureImage.attr("xlink:href", null);
-      }
+    const textureImage = texture.select("image");
+    if (textureImage.size()) {
+      // restore parameters
+      const x = Number(textureImage.attr("x") || 0);
+      const y = Number(textureImage.attr("y") || 0);
+      const href = textureImage.attr("xlink:href") || textureImage.attr("href") || textureImage.attr("src");
+      // save parameters to parent element
+      texture.attr("data-href", href).attr("data-x", x).attr("data-y", y);
+      // recreate image in expected format
+      textureImage.remove();
+      drawTexture();
     }
   }
 }

modules/io/export.js

@@ -236,28 +236,28 @@ async function getMapURL(type, options = {}) {
     cloneDefs.querySelector("#defs-emblems")?.remove();
   }
 
-  // replace ocean pattern href to base64
-  if (location.hostname) {
-    const el = cloneEl.getElementById("oceanicPattern");
-    const url = el?.getAttribute("href");
-    if (url) {
+  {
+    // replace ocean pattern href to base64
+    const image = cloneEl.getElementById("oceanicPattern");
+    const href = image?.getAttribute("href");
+    if (href) {
       await new Promise(resolve => {
-        getBase64(url, base64 => {
-          el.setAttribute("href", base64);
+        getBase64(href, base64 => {
+          image.setAttribute("href", base64);
           resolve();
         });
       });
     }
   }
 
-  // replace texture href to base64
-  if (location.hostname) {
-    const el = cloneEl.getElementById("textureImage");
-    const url = el?.getAttribute("href");
-    if (url) {
+  {
+    // replace texture href to base64
+    const image = cloneEl.querySelector("#texture > image");
+    const href = image?.getAttribute("href");
+    if (href) {
       await new Promise(resolve => {
-        getBase64(url, base64 => {
-          el.setAttribute("href", base64);
+        getBase64(href, base64 => {
+          image.setAttribute("href", base64);
           resolve();
         });
       });

modules/io/load.js

@@ -415,7 +415,7 @@ async function parseLoadedData(data) {
         .forEach(el => el.classList.add("buttonoff"));
 
       // turn on active layers
-      if (notHidden(texture) && hasChild(texture, "image")) turnOn("toggleTexture");
+      if (hasChild(texture, "image")) turnOn("toggleTexture");
       if (hasChildren(terrs)) turnOn("toggleHeight");
       if (hasChildren(biomes)) turnOn("toggleBiomes");
       if (hasChildren(cells)) turnOn("toggleCells");
@@ -456,7 +456,7 @@ async function parseLoadedData(data) {
     {
       // dynamically import and run auto-update script
       const versionNumber = parseFloat(params[0]);
-      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.93.00");
+      const {resolveVersionConflicts} = await import("../dynamic/auto-update.js?v=1.94.00");
       resolveVersionConflicts(versionNumber);
     }
 
@@ -468,6 +468,12 @@ async function parseLoadedData(data) {
       }
     }
 
+    {
+      // add custom texture if any
+      const textureHref = texture.attr("data-href");
+      updateTextureSelectValue(textureHref);
+    }
+
     void (function checkDataIntegrity() {
       const cells = pack.cells;
 

modules/ui/general.js

@@ -9,7 +9,7 @@ window.addEventListener("resize", function (e) {
   changeMapSize();
 });
 
-if (location.hostname && location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
+if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1") {
   window.onbeforeunload = () => "Are you sure you want to navigate away?";
 }
 

modules/ui/layers.js

@@ -157,6 +157,7 @@ function getCurrentPreset() {
 
 // run on map regeneration
 function restoreLayers() {
+  if (layerIsOn("toggleTexture")) drawTexture();
   if (layerIsOn("toggleHeight")) drawHeightmap();
   if (layerIsOn("toggleCells")) drawCells();
   if (layerIsOn("toggleGrid")) drawGrid();
@@ -1509,18 +1510,30 @@ function toggleRelief(event) {
 function toggleTexture(event) {
   if (!layerIsOn("toggleTexture")) {
     turnButtonOn("toggleTexture");
-    // href is not set directly to avoid image loading when layer is off
-    const textureImage = byId("textureImage");
-    if (textureImage) textureImage.setAttribute("href", textureImage.getAttribute("src"));
-
+    drawTexture();
     if (event && isCtrlClick(event)) editStyle("texture");
   } else {
     if (event && isCtrlClick(event)) return editStyle("texture");
     turnButtonOff("toggleTexture");
-    texture.select("image").attr("href", null);
+    texture.select("image").remove();
   }
 }
 
+function drawTexture() {
+  const x = Number(texture.attr("data-x") || 0);
+  const y = Number(texture.attr("data-y") || 0);
+  const href = texture.attr("data-href");
+
+  texture
+    .append("image")
+    .attr("preserveAspectRatio", "xMidYMid slice")
+    .attr("x", x)
+    .attr("y", y)
+    .attr("width", graphWidth - x)
+    .attr("height", graphHeight - y)
+    .attr("href", href);
+}
+
 function toggleRivers(event) {
   if (!layerIsOn("toggleRivers")) {
     turnButtonOn("toggleRivers");

modules/ui/options.js

@@ -178,24 +178,26 @@ function mapSizeInputChange() {
   }
 }
 
-// change svg size on manual size change or window resize, do not change graph size
+// change svg size on manual size change or window resize (do not change graph size!)
 function changeMapSize() {
   svgWidth = Math.min(+mapWidthInput.value, window.innerWidth);
   svgHeight = Math.min(+mapHeightInput.value, window.innerHeight);
   svg.attr("width", svgWidth).attr("height", svgHeight);
 
   const maxWidth = Math.max(+mapWidthInput.value, graphWidth);
   const maxHeight = Math.max(+mapHeightInput.value, graphHeight);
+
   zoom.translateExtent([
     [0, 0],
     [maxWidth, maxHeight]
   ]);
+
   landmass.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanPattern.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   oceanLayers.select("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   fogging.selectAll("rect").attr("x", 0).attr("y", 0).attr("width", maxWidth).attr("height", maxHeight);
   defs.select("mask#fog > rect").attr("width", maxWidth).attr("height", maxHeight);
-  texture.select("image").attr("width", maxWidth).attr("height", maxHeight);
+  defs.select("mask#water > rect").attr("width", maxWidth).attr("height", maxHeight);
 
   fitScaleBar();
   if (window.fitLegendBox) fitLegendBox();