Ocean heightmap and Scale bar styling change [v1.96] (#1045)

* Scale bar styling (#1025) * feat: style scale bar * feat: style scale bar - style presets --------- Co-authored-by: Azgaar <[email protected]> * Ocean heightmap to v1.96 (#1044) * feat: allow to render ocean heightmap * feat: allow to render ocean heightmap - test * feat: allow to render ocean heightmap - fix issue * feat: allow to render ocean heightmap - cleanup --------- Co-authored-by: Azgaar <[email protected]> * fix: scale bar size * fix: remove mask on terrs lavel * fix: regenerate heigtmap preview to use current graph size * Add the name of culture and namesbase in the name editor dialog (#1033) * Add the name of culture and namesbase in the name editor dialog Added the name of the culture and namesbase in the dialog "name editor". This tells information on the "click to generate a culture-specific name" It tells you the culture before changing name. * cultureName into cultureId + cultureName And deleted the incomplete code of showing culture name on datatip * refactor: leave culture name only --------- Co-authored-by: Azgaar <[email protected]> * Added Burgs column to province editor (#1031) * Added Burgs column to province editor Added to province editor: + Burgs column + the number of Burgs, p.burgs.length + "icon-dot-circled" to go to overviewBurgs. + overviewBurgs Filtered by state id. + Fixed some typos. * fixed code as Azgaar suggested + Corrected provincesHeader distance in em. + const stateId = pack.provinces[p].state; - Deleted cell count. * deleted HTML code for provincesFooter cells - Deleted Total land cells number HTML from provincesFooter. * deleting totalCells in the code, maybe i will add provinceCells in the future. Deleted lines for const totalCells and for (+cells / totalCells) * 100 + "%"; * refactor: cleanup * refactor: cleanup --------- Co-authored-by: Azgaar <[email protected]> * fix: burgs overview - add MFCG link back * feat: add more details to burgs export * feat: don't show auto-update dialog * feat: pump version * fix: #1041 * feat: update style presets --------- Co-authored-by: Azgaar <[email protected]> Co-authored-by: Ángel Montero Lamas <[email protected]>
Azgaar · Feb 24, 2024 · 374c21b · 374c21b
1 parent 845dc89
commit 374c21b
Show file tree

Hide file tree

Showing 38 changed files with 1,306 additions and 610 deletions.
diff --git a/index.css b/index.css
@@ -1876,12 +1876,6 @@ div.editorLine {
   margin: 0.4em 0 0 -0.9em;
 }
 
-#barBackColor {
-  width: 3.5em;
-  padding: 0px;
-  height: 1.2em;
-}
-
 #ruler {
   cursor: move;
   fill: none;
@@ -1921,18 +1915,6 @@ div.editorLine {
   stroke: #737373;
 }
 
-#scaleBar {
-  stroke: none;
-  fill: none;
-  cursor: pointer;
-}
-
-#scaleBar text {
-  fill: #353540;
-  text-anchor: middle;
-  font-family: var(--serif);
-}
-
 #militaryOptionsTable select {
   border: 1px solid #d4d4d4;
 }

diff --git a/index.html b/index.html
diff --git a/libs/polylabel.min.js b/libs/polylabel.min.js
diff --git a/libs/three.min.js b/libs/three.min.js
diff --git a/main.js b/main.js
@@ -92,16 +92,19 @@ let fogging = viewbox
 let ruler = viewbox.append("g").attr("id", "ruler").style("display", "none");
 let debug = viewbox.append("g").attr("id", "debug");
 
-// lake and coast groups
 lakes.append("g").attr("id", "freshwater");
 lakes.append("g").attr("id", "salt");
 lakes.append("g").attr("id", "sinkhole");
 lakes.append("g").attr("id", "frozen");
 lakes.append("g").attr("id", "lava");
 lakes.append("g").attr("id", "dry");
+
 coastline.append("g").attr("id", "sea_island");
 coastline.append("g").attr("id", "lake_island");
 
+terrs.append("g").attr("id", "oceanHeights");
+terrs.append("g").attr("id", "landHeights");
+
 labels.append("g").attr("id", "states");
 labels.append("g").attr("id", "addedLabels");
 
@@ -841,29 +844,33 @@ function openNearSeaLakes() {
   const LIMIT = 22; // max height that can be breached by water
 
   for (const i of cells.i) {
-    const lake = cells.f[i];
-    if (features[lake].type !== "lake") continue; // not a lake cell
+    const lakeFeatureId = cells.f[i];
+    if (features[lakeFeatureId].type !== "lake") continue; // not a lake
 
     check_neighbours: for (const c of cells.c[i]) {
       if (cells.t[c] !== 1 || cells.h[c] > LIMIT) continue; // water cannot break this
 
       for (const n of cells.c[c]) {
         const ocean = cells.f[n];
         if (features[ocean].type !== "ocean") continue; // not an ocean
-        removeLake(c, lake, ocean);
+        removeLake(c, lakeFeatureId, ocean);
         break check_neighbours;
       }
     }
   }
 
-  function removeLake(threshold, lake, ocean) {
-    cells.h[threshold] = 19;
-    cells.t[threshold] = -1;
-    cells.f[threshold] = ocean;
-    cells.c[threshold].forEach(function (c) {
+  function removeLake(thresholdCellId, lakeFeatureId, oceanFeatureId) {
+    cells.h[thresholdCellId] = 19;
+    cells.t[thresholdCellId] = -1;
+    cells.f[thresholdCellId] = oceanFeatureId;
+    cells.c[thresholdCellId].forEach(function (c) {
       if (cells.h[c] >= 20) cells.t[c] = 1; // mark as coastline
     });
-    features[lake].type = "ocean"; // mark former lake as ocean
+
+    cells.i.forEach(i => {
+      if (cells.f[i] === lakeFeatureId) cells.f[i] = oceanFeatureId;
+    });
+    features[lakeFeatureId].type = "ocean"; // mark former lake as ocean
   }
 
   TIME && console.timeEnd("openLakes");
@@ -1250,6 +1257,7 @@ function drawCoastline() {
     features[f].vertices = vchain;
 
     const path = round(lineGen(points));
+
     if (features[f].type === "lake") {
       landMask
         .append("path")
@@ -1347,22 +1355,14 @@ function drawCoastline() {
 // Re-mark features (ocean, lakes, islands)
 function reMarkFeatures() {
   TIME && console.time("reMarkFeatures");
-  const cells = pack.cells,
-    features = (pack.features = [0]);
+  const cells = pack.cells;
+  const features = (pack.features = [0]);
+
   cells.f = new Uint16Array(cells.i.length); // cell feature number
   cells.t = new Int8Array(cells.i.length); // cell type: 1 = land along coast; -1 = water along coast;
   cells.haven = cells.i.length < 65535 ? new Uint16Array(cells.i.length) : new Uint32Array(cells.i.length); // cell haven (opposite water cell);
   cells.harbor = new Uint8Array(cells.i.length); // cell harbor (number of adjacent water cells);
 
-  const defineHaven = i => {
-    const water = cells.c[i].filter(c => cells.h[c] < 20);
-    const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
-    const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];
-
-    cells.haven[i] = closest;
-    cells.harbor[i] = water.length;
-  };
-
   if (!cells.i.length) return; // no cells -> there is nothing to do
   for (let i = 1, queue = [0]; queue[0] !== -1; i++) {
     const start = queue[0]; // first cell
@@ -1403,6 +1403,15 @@ function reMarkFeatures() {
   // markupPackLand
   markup(pack.cells, 3, 1, 0);
 
+  function defineHaven(i) {
+    const water = cells.c[i].filter(c => cells.h[c] < 20);
+    const dist2 = water.map(c => (cells.p[i][0] - cells.p[c][0]) ** 2 + (cells.p[i][1] - cells.p[c][1]) ** 2);
+    const closest = water[dist2.indexOf(Math.min.apply(Math, dist2))];
+
+    cells.haven[i] = closest;
+    cells.harbor[i] = water.length;
+  }
+
   function defineOceanGroup(number) {
     if (number > grid.cells.i.length / 25) return "ocean";
     if (number > grid.cells.i.length / 100) return "sea";
@@ -1925,7 +1934,7 @@ function showStatistics() {
 
   mapId = Date.now(); // unique map id is it's creation date number
   mapHistory.push({seed, width: graphWidth, height: graphHeight, template: heightmap, created: mapId});
-  INFO && console.log(stats);
+  INFO && console.info(stats);
 }
 
 const regenerateMap = debounce(async function (options) {

diff --git a/modules/cultures-generator.js b/modules/cultures-generator.js
@@ -71,28 +71,31 @@ window.Cultures = (function () {
         return;
       }
 
-      const cell = (c.center = placeCenter(c.sort ? c.sort : i => cells.s[i]));
-      centers.add(cells.p[cell]);
+      const sortingFn = c.sort ? c.sort : i => cells.s[i];
+      const center = placeCenter(sortingFn);
+
+      centers.add(cells.p[center]);
+      c.center = center;
       c.i = newId;
       delete c.odd;
       delete c.sort;
       c.color = colors[i];
-      c.type = defineCultureType(cell);
+      c.type = defineCultureType(center);
       c.expansionism = defineCultureExpansionism(c.type);
       c.origins = [0];
       c.code = abbreviate(c.name, codes);
       codes.push(c.code);
-      cultureIds[cell] = newId;
+      cultureIds[center] = newId;
       if (emblemShape === "random") c.shield = getRandomShield();
     });
 
     cells.culture = cultureIds;
 
-    function placeCenter(v) {
+    function placeCenter(sortingFn) {
       let spacing = (graphWidth + graphHeight) / 2 / count;
       const MAX_ATTEMPTS = 100;
 
-      const sorted = [...populated].sort((a, b) => v(b) - v(a));
+      const sorted = [...populated].sort((a, b) => sortingFn(b) - sortingFn(a));
       const max = Math.floor(sorted.length / 2);
 
       let cellId = 0;

diff --git a/modules/dynamic/auto-update.js b/modules/dynamic/auto-update.js
@@ -736,4 +736,95 @@ export function resolveVersionConflicts(version) {
       .style("display", "none");
     vignette.append("rect").attr("x", 0).attr("y", 0).attr("width", "100%").attr("height", "100%");
   }
+
+  if (version < 1.96) {
+    // v1.96 added ocean rendering for heightmap
+    terrs.selectAll("*").remove();
+
+    const opacity = terrs.attr("opacity");
+    const filter = terrs.attr("filter");
+    const scheme = terrs.attr("scheme");
+    const terracing = terrs.attr("terracing");
+    const skip = terrs.attr("skip");
+    const relax = terrs.attr("relax");
+
+    const curveTypes = {0: "curveBasisClosed", 1: "curveLinear", 2: "curveStep"};
+    const curve = curveTypes[terrs.attr("curve")] || "curveBasisClosed";
+
+    terrs
+      .attr("mask", null)
+      .attr("scheme", null)
+      .attr("terracing", null)
+      .attr("skip", null)
+      .attr("relax", null)
+      .attr("curve", null);
+
+    terrs
+      .append("g")
+      .attr("id", "oceanHeights")
+      .attr("data-render", 0)
+      .attr("opacity", opacity)
+      .attr("filter", filter)
+      .attr("scheme", scheme)
+      .attr("terracing", 0)
+      .attr("skip", 0)
+      .attr("relax", 1)
+      .attr("curve", curve);
+    terrs
+      .append("g")
+      .attr("id", "landHeights")
+      .attr("opacity", opacity)
+      .attr("scheme", scheme)
+      .attr("filter", filter)
+      .attr("terracing", terracing)
+      .attr("skip", skip)
+      .attr("relax", relax)
+      .attr("curve", curve)
+      .attr("mask", "url(#land)");
+
+    if (layerIsOn("toggleHeight")) drawHeightmap();
+
+    // v1.96.00 moved scaleBar options from units editor to style
+    d3.select("#scaleBar").remove();
+
+    scaleBar = svg
+      .insert("g", "#viewbox + *")
+      .attr("id", "scaleBar")
+      .attr("opacity", 1)
+      .attr("fill", "#353540")
+      .attr("data-bar-size", 2)
+      .attr("font-size", 10)
+      .attr("data-x", 99)
+      .attr("data-y", 99)
+      .attr("data-label", "");
+
+    scaleBar
+      .append("rect")
+      .attr("id", "scaleBarBack")
+      .attr("opacity", 0.2)
+      .attr("fill", "#ffffff")
+      .attr("stroke", "#000000")
+      .attr("stroke-width", 1)
+      .attr("filter", "url(#blur5)")
+      .attr("data-top", 20)
+      .attr("data-right", 15)
+      .attr("data-bottom", 15)
+      .attr("data-left", 10);
+
+    drawScaleBar(scaleBar, scale);
+    fitScaleBar(scaleBar, svgWidth, svgHeight);
+
+    if (!layerIsOn("toggleScaleBar")) scaleBar.style("display", "none");
+
+    // v1.96.00 changed coloring approach for regiments
+    armies.selectAll(":scope > g").each(function () {
+      const fill = this.getAttribute("fill");
+      if (!fill) return;
+      const darkerColor = d3.color(fill).darker().hex();
+      this.setAttribute("color", darkerColor);
+      this.querySelectorAll("g > rect:nth-child(2)").forEach(rect => {
+        rect.setAttribute("fill", "currentColor");
+      });
+    });
+  }
 }
diff --git a/modules/dynamic/editors/states-editor.js b/modules/dynamic/editors/states-editor.js
@@ -434,13 +434,13 @@ function editStateName(state) {
   modules.editStateName = true;
 
   // add listeners
-  byId("stateNameEditorShortCulture").on("click", regenerateShortNameCuture);
+  byId("stateNameEditorShortCulture").on("click", regenerateShortNameCulture);
   byId("stateNameEditorShortRandom").on("click", regenerateShortNameRandom);
   byId("stateNameEditorAddForm").on("click", addCustomForm);
   byId("stateNameEditorCustomForm").on("change", addCustomForm);
   byId("stateNameEditorFullRegenerate").on("click", regenerateFullName);
 
-  function regenerateShortNameCuture() {
+  function regenerateShortNameCulture() {
     const state = +stateNameEditor.dataset.state;
     const culture = pack.states[state].culture;
     const name = Names.getState(Names.getCultureShort(culture), culture);
@@ -1394,6 +1394,7 @@ function openStateMergeDialog() {
 
   function mergeStates(statesToMerge, rulingStateId) {
     const rulingState = pack.states[rulingStateId];
+    const rulingStateArmy = byId("army" + rulingStateId);
 
     // remove states to be merged
     statesToMerge.forEach(stateId => {
@@ -1410,27 +1411,25 @@ function openStateMergeDialog() {
       emblems.select(`#stateEmblems > use[data-i='${stateId}']`).remove();
 
       // add merged state regiments to the ruling state
-      state.military.forEach(m => {
-        const oldId = `regiment${stateId}-${m.i}`;
-
-        const newRegiment = {...m, i: rulingState.military.length};
-        rulingState.military.push(newRegiment);
-
-        const newId = `regiment${rulingStateId}-${newRegiment.i}`;
+      state.military.forEach(regiment => {
+        const oldId = `regiment${stateId}-${regiment.i}`;
+        const newIndex = rulingState.military.length;
+        rulingState.military.push({...regiment, i: newIndex});
+        const newId = `regiment${rulingStateId}-${newIndex}`;
 
         const note = notes.find(n => n.id === oldId);
         if (note) note.id = newId;
 
-        const rulingStateArmy = armies.select("g#army" + rulingStateId);
-        armies
-          .select("g#army" + stateId)
-          .selectAll("g")
-          .each(function () {
-            this.setAttribute("id", newId);
-            rulingStateArmy.node().appendChild(this);
-          });
-        armies.select("g#army" + stateId).remove();
+        const element = byId(oldId);
+        if (element) {
+          element.id = newId;
+          element.dataset.state = rulingStateId;
+          element.dataset.i = newIndex;
+          rulingStateArmy.appendChild(element);
+        }
       });
+
+      armies.select("g#army" + stateId).remove();
     });
 
     // reassing burgs

diff --git a/modules/dynamic/export-json.js b/modules/dynamic/export-json.js
@@ -88,12 +88,6 @@ function getSettings() {
     heightUnit: heightUnit.value,
     heightExponent: heightExponentInput.value,
     temperatureScale: temperatureScale.value,
-    barSize: barSizeInput.value,
-    barLabel: barLabel.value,
-    barBackOpacity: barBackOpacity.value,
-    barBackColor: barBackColor.value,
-    barPosX: barPosX.value,
-    barPosY: barPosY.value,
     populationRate: populationRate,
     urbanization: urbanization,
     mapSize: mapSizeOutput.value,

diff --git a/modules/dynamic/heightmap-selection.js b/modules/dynamic/heightmap-selection.js
@@ -314,6 +314,6 @@ function confirmHeightmapEdit() {
 function getHeightmapPreview(heights) {
   const scheme = getColorScheme(byId("heightmapSelectionColorScheme").value);
   const renderOcean = byId("heightmapSelectionRenderOcean").checked;
-  const dataUrl = drawHeights({heights, width: grid.cellsX, height: grid.cellsY, scheme, renderOcean});
+  const dataUrl = drawHeights({heights, width: graph.cellsX, height: graph.cellsY, scheme, renderOcean});
   return dataUrl;
 }