zone editor - restore init state + type display

index.html

@@ -2871,18 +2871,17 @@
     <div id="zonesEditor" class="dialog stable" style="display: none">
       <div id="customHeader" class="header">
         <div style="left:1.8em" data-tip="Zone description">Description&nbsp;</div>
-        <div style="left:13em" data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
+        <div style="left:13em" data-tip="Zone type" class="hide">Type&nbsp;</div>
-        <div style="left:19em" data-tip="Zone area" class="hide">Area&nbsp;</div>
+        <div style="left:19em" data-tip="Zone cells count" class="hide">Cells&nbsp;</div>
-        <div style="left:24em" data-tip="Zone population" class="hide">Population&nbsp;</div>
+        <div style="left:23.6em" data-tip="Zone area" class="hide">Area&nbsp;</div>
-        <div style="left:31em" data-tip="Zone type" class="hide">Type&nbsp;</div>
+        <div style="left:30.6em" data-tip="Zone population" class="hide">Population&nbsp;</div>
       </div>
 
       <div id="zonesBodySection" class="table" data-type="absolute"></div>
 
-      <div id="zonesFilters">
+      <div id="zonesFilters" data-tip="Show only zones of selected type">
-        <span>Filter by type: </span>
+        Type: 
-	<select id="zonesFilterType" data-tip="Only zones of this type appear on the map"></select>
+        <select id="zonesFilterType"></select>
-          <button id="zonesFilterButton" data-tip="Click to toggle the filtering of elements on the list" class="icon-resize-small"></button>
       </div>
 
       <div id="zonesFooter" class="totalLine">
@@ -2909,30 +2908,11 @@
           <button id="zonesRemove" data-tip="Click to toggle the removal mode on brush dragging. Shortcut: ctrl" class="icon-eraser"></button>
         </div>
 
-        <button id="zonesAdd" data-tip="Add new zone layers" class="icon-plus"></button>
+        <button id="zonesAdd" data-tip="Add new zone layer" class="icon-plus"></button>
-        <button id="zonesEditTypes" data-tip="Add and edit zone types" class="icon-edit"></button>
         <button id="zonesExport" data-tip="Download zones-related data" class="icon-download"></button>
       </div>
     </div>
 
-	<div id="zonesTypes" class="dialog stable" style="display: none">
-	  <div id="customHeader" class="header">
-        <div style="left:1.8em" data-tip="Name of this type of zone">Type Name&nbsp;</div>
-        <div style="left:14em" data-tip="Number of zones of this type" class="hide">Amount&nbsp;</div>
-      </div>
-	  
-	  <div id="zonesTypesBodySection" class="table" data-type="absolute"></div>
-	  
-	  <div id="zonesTypesFooter" class="totalLine">
-        <div data-tip="The amount of zone types" style="margin-left: 5px">Types:&nbsp;<span id="zonesTypesFooterNumber">0</span></div>
-	  </div>
-	  
-	  <div id="zonesTypesBottom">
-		<input type="text" id="zonesNewTypeInput" data-tip="Write the name of the type you want to add" maxlength="20" placeholder="Add type"></input>
-		  <input type="button" id="zonesNewTypeButton" data-tip="Click add to save the type" value="Add">
-	  </div>
-	</div>
-
     <div id="notesEditor" class="dialog stable textual" style="display: none">
       <div>
         <span>Select object: </span>

main.js

@@ -122,7 +122,6 @@ let customization = 0;
 
 let biomesData = applyDefaultBiomesSystem();
 let nameBases = Names.getNameBases(); // cultures-related data
-const zoneTypes = ["Invasion", "Rebels", "Proselytism", "Crusade", "Disease", "Disaster"];
 
 let color = d3.scaleSequential(d3.interpolateSpectral); // default color scheme
 const lineGen = d3.line().curve(d3.curveBasis); // d3 line generator with default curve interpolation
@@ -1505,14 +1504,12 @@ function rankCells() {
   TIME && console.timeEnd("rankCells");
 }
 
-// regenerate some zones
+// generate zones
 function addZones(number = 1) {
   TIME && console.time("addZones");
-  const data = [],
+  const {cells, states, burgs} = pack;
-    cells = pack.cells,
-    states = pack.states,
-    burgs = pack.burgs;
   const used = new Uint8Array(cells.i.length); // to store used cells
+  const zonesData = [];
 
   for (let i = 0; i < rn(Math.random() * 1.8 * number); i++) addInvasion(); // invasion of enemy lands
   for (let i = 0; i < rn(Math.random() * 1.6 * number); i++) addRebels(); // rebels along a state border
@@ -1526,6 +1523,8 @@ function addZones(number = 1) {
   for (let i = 0; i < rn(Math.random() * 1.4 * number); i++) addFlood(); // flood on river banks
   for (let i = 0; i < rn(Math.random() * 1.2 * number); i++) addTsunami(); // tsunami starting near coast
 
+  drawZones();
+
   function addInvasion() {
     const atWar = states.filter(s => s.diplomacy && s.diplomacy.some(d => d === "Enemy"));
     if (!atWar.length) return;
@@ -1566,7 +1565,7 @@ function addZones(number = 1) {
       Intervention: 1
     });
     const name = getAdjective(invader.name) + " " + invasion;
-    data.push({name, type: "Invasion", cells: cellsArray, fill: "url(#hatch1)"});
+    zonesData.push({name, type: "Invasion", cells: cellsArray, fill: "url(#hatch1)"});
   }
 
   function addRebels() {
@@ -1595,7 +1594,7 @@ function addZones(number = 1) {
 
     const rebels = rw({Rebels: 5, Insurgents: 2, Mutineers: 1, Rioters: 1, Separatists: 1, Secessionists: 1, Insurrection: 2, Rebellion: 1, Conspiracy: 2});
     const name = getAdjective(states[neib].name) + " " + rebels;
-    data.push({name, type: "Rebels", cells: cellsArray, fill: "url(#hatch3)"});
+    zonesData.push({name, type: "Rebels", cells: cellsArray, fill: "url(#hatch3)"});
   }
 
   function addProselytism() {
@@ -1625,7 +1624,7 @@ function addZones(number = 1) {
     }
 
     const name = getAdjective(organized.name.split(" ")[0]) + " Proselytism";
-    data.push({name, type: "Proselytism", cells: cellsArray, fill: "url(#hatch6)"});
+    zonesData.push({name, type: "Proselytism", cells: cellsArray, fill: "url(#hatch6)"});
   }
 
   function addCrusade() {
@@ -1637,7 +1636,7 @@ function addZones(number = 1) {
     cellsArray.forEach(i => (used[i] = 1));
 
     const name = getAdjective(heresy.name.split(" ")[0]) + " Crusade";
-    data.push({name, type: "Crusade", cells: cellsArray, fill: "url(#hatch6)"});
+    zonesData.push({name, type: "Crusade", cells: cellsArray, fill: "url(#hatch6)"});
   }
 
   function addDisease() {
@@ -1674,7 +1673,7 @@ function addZones(number = 1) {
 
     const type = rw({Fever: 5, Pestilence: 2, Flu: 2, Pox: 2, Smallpox: 2, Plague: 4, Cholera: 2, Dropsy: 1, Leprosy: 2});
     const name = rw({[color()]: 4, [animal()]: 2, [adjective()]: 1}) + " " + type;
-    data.push({name, type: "Disease", cells: cellsArray, fill: "url(#hatch12)"});
+    zonesData.push({name, type: "Disease", cells: cellsArray, fill: "url(#hatch12)"});
   }
 
   function addDisaster() {
@@ -1706,7 +1705,7 @@ function addZones(number = 1) {
 
     const type = rw({Famine: 5, Dearth: 1, Drought: 3, Earthquake: 3, Tornadoes: 1, Wildfires: 1});
     const name = getAdjective(burg.name) + " " + type;
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
   }
 
   function addEruption() {
@@ -1737,7 +1736,7 @@ function addZones(number = 1) {
       });
     }
 
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch7)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch7)"});
   }
 
   function addAvalanche() {
@@ -1762,7 +1761,7 @@ function addZones(number = 1) {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Avalanche";
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch5)"});
   }
 
   function addFault() {
@@ -1787,7 +1786,7 @@ function addZones(number = 1) {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Fault";
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch2)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch2)"});
   }
 
   function addFlood() {
@@ -1817,7 +1816,7 @@ function addZones(number = 1) {
     }
 
     const name = getAdjective(burgs[cells.burg[cell]].name) + " Flood";
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
   }
 
   function addTsunami() {
@@ -1845,13 +1844,13 @@ function addZones(number = 1) {
 
     const proper = getAdjective(Names.getCultureShort(cells.culture[cell]));
     const name = proper + " Tsunami";
-    data.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
+    zonesData.push({name, type: "Disaster", cells: cellsArray, fill: "url(#hatch13)"});
   }
 
-  void (function drawZones() {
+  function drawZones() {
     zones
       .selectAll("g")
-      .data(data)
+      .data(zonesData)
       .enter()
       .append("g")
       .attr("id", (d, i) => "zone" + i)
@@ -1867,19 +1866,11 @@ function addZones(number = 1) {
       .attr("id", function (d) {
         return this.parentNode.id + "_" + d;
       });
-  })();
+  }
 
   TIME && console.timeEnd("addZones");
 }
 
-// Update zone types
-function updateZoneType(zoneId, newType) {
-  const zone = document.getElementById(zoneId);
-  if (zone) {
-    zone.dataset.type = newType;
-  }
-}
-
 // show map stats on generation complete
 function showStatistics() {
   const template = templateInput.options[templateInput.selectedIndex].text;

modules/load.js

@@ -941,6 +941,10 @@ function parseLoadedData(data) {
         // v1.73 moved the hatching patterns out of the user's SVG
         document.getElementById("hatching")?.remove();
       }
+
+      if (version < 1.731) {
+        // v1.731 added type to zones
+      }
     })();
 
     void (function checkDataIntegrity() {

modules/ui/zones-editor.js

@@ -18,9 +18,8 @@ function editZones() {
   });
 
   // add listeners
-  document.getElementById("zonesFilterType").addEventListener("change", refreshZonesEditor);
+  document.getElementById("zonesFilterType").addEventListener("change", filterZonesByType);
-  document.getElementById("zonesFilterButton").addEventListener("click", toggleFilterTable);
+  document.getElementById("zonesEditorRefresh").addEventListener("click", zonesEditorAddLines);
-  document.getElementById("zonesEditorRefresh").addEventListener("click", refreshZonesEditor);
   document.getElementById("zonesEditStyle").addEventListener("click", () => editStyle("zones"));
   document.getElementById("zonesLegend").addEventListener("click", toggleLegend);
   document.getElementById("zonesPercentage").addEventListener("click", togglePercentageMode);
@@ -28,8 +27,6 @@ function editZones() {
   document.getElementById("zonesManuallyApply").addEventListener("click", applyZonesManualAssignent);
   document.getElementById("zonesManuallyCancel").addEventListener("click", cancelZonesManualAssignent);
   document.getElementById("zonesAdd").addEventListener("click", addZonesLayer);
-  document.getElementById("zonesEditTypes").addEventListener("click", addZonesDialog);
-  document.getElementById("zonesNewTypeButton").addEventListener("click", addZonesType);
   document.getElementById("zonesExport").addEventListener("click", downloadZonesData);
   document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode);
 
@@ -52,67 +49,20 @@ function editZones() {
     if (el.classList.contains("religionName")) zones.select("#" + zone).attr("data-description", el.value);
   });
 
-  function refreshZonesEditor() {
+  // add line for each zone
-    updateSVG();
-    zonesEditorAddLines();
-  }
-  
-  function updateSVG() {
-    const value = document.getElementById("zonesFilterType").value; 
-
-    zones.selectAll("g").each(function () {
-      if (value == "All" || this.dataset.type == value) {
-        this.style.display = "block";
-      } else {
-        this.style.display = "none";
-      }
-    });
-  }
-
-  function getZoneTypesList(zoneId, currentType) {
-    let res = `<select id="zoneTypeZoneId${zoneId}" class="zoneTypeList">`;
-
-    zoneTypes.forEach(function(z, i) {
-      res += `<option ${z === currentType ? "selected" : ""} value="${z}">${z}</option>`;
-    });
-
-    res += '</select>';
-
-    return res;
-  }
-
-// add line for each zone
   function zonesEditorAddLines() {
     const unit = areaUnit.value === "square" ? " " + distanceUnitInput.value + "²" : " " + areaUnit.value;
     let lines = "";
 
-    // make sure all zone types are loaded from the SVG
     zones.selectAll("g").each(function () {
-      const zoneType = this.dataset.type;
-      if (!zoneTypes.includes(zoneType)) { zoneTypes.push(zoneType); }
-    });
-
-    const selectedType = zonesFilterType.value || "All";
-    zonesFilterType.options.length=0;
-    zonesFilterType.options.add(new Option("All", "All", false, selectedType=="All"));
-    zoneTypes.forEach(function(z, i) {
-      zonesFilterType.options.add(new Option(z, z, false, selectedType==z));
-    });
-
-    let zoneCount=0;
-    zones.selectAll("g").each(function () {
-      zoneCount++;
-      const zoneType = this.dataset.type;
-      if (selectedType !== "All" && (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType)) return;
-
       const c = this.dataset.cells ? this.dataset.cells.split(",").map(c => +c) : [];
       const description = this.dataset.description;
+      const type = this.dataset.type;
       const fill = this.getAttribute("fill");
       const area = d3.sum(c.map(i => pack.cells.area[i])) * distanceScaleInput.value ** 2;
       const rural = d3.sum(c.map(i => pack.cells.pop[i])) * populationRate;
       const urban = d3.sum(c.map(i => pack.cells.burg[i]).map(b => pack.burgs[b].population)) * populationRate * urbanization;
       const population = rural + urban;
-      const zoneTypeList = getZoneTypesList(this.id, this.dataset.type);
       const populationTip = `Total population: ${si(population)}; Rural population: ${si(rural)}; Urban population: ${si(urban)}. Click to change`;
       const inactive = this.style.display === "none";
       const focused = defs.select("#fog #focus" + this.id).size();
@@ -121,13 +71,13 @@ function editZones() {
         data-cells=${c.length} data-area=${area} data-population=${population}>
         <fill-box fill="${fill}"></fill-box>
         <input data-tip="Zone description. Click and type to change" class="religionName" value="${description}" autocorrect="off" spellcheck="false">
+        <input data-tip="Zone type. Click and type to change" value="${type}">
         <span data-tip="Cells count" class="icon-check-empty hide"></span>
         <div data-tip="Cells count" class="stateCells hide">${c.length}</div>
         <span data-tip="Zone area" style="padding-right:4px" class="icon-map-o hide"></span>
         <div data-tip="Zone area" class="biomeArea hide">${si(area) + unit}</div>
         <span data-tip="${populationTip}" class="icon-male hide"></span>
         <div data-tip="${populationTip}" class="culturePopulation hide">${si(population)}</div>
-        ${zoneTypeList}
         <span data-tip="Drag to raise or lower the zone" class="icon-resize-vertical hide"></span>
         <span data-tip="Toggle zone focus" class="icon-pin ${focused ? "" : " inactive"} hide ${c.length ? "" : " placeholder"}"></span>
         <span data-tip="Toggle zone visibility" class="icon-eye ${inactive ? " inactive" : ""} hide ${c.length ? "" : " placeholder"}"></span>
@@ -136,15 +86,6 @@ function editZones() {
     });
 
     body.innerHTML = lines;
-    if (body.innerHTML === "") { body.innerHTML = `<div class="states"><span>Zero entries for this type. To see entries again, select "All" or disable the filter button</span>
-    </div>`; }
-
-    for (let i=0; i<zoneCount; i++) {
-      let d = document.getElementById("zoneTypeZoneIdzone" + i);
-      if (d) {
-        d.addEventListener("change", function() { updateZoneType("zone" + i, this.options[this.selectedIndex].value); });
-      }
-    }
 
     // update footer
     const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
@@ -166,6 +107,8 @@ function editZones() {
     $("#zonesEditor").dialog({width: fitContent()});
   }
 
+  function filterZonesByType() {}
+
   function zoneHighlightOn(event) {
     const zone = event.target.dataset.id;
     zones.select("#" + zone).style("outline", "1px solid red");
@@ -390,11 +333,6 @@ function editZones() {
     }
   }
 
-  function toggleFilterTable() {
-    this.classList.toggle("pressed");
-    zonesEditorAddLines();
-  }
-
   function addZonesLayer() {
     const id = getNextId("zone");
     const description = "Unknown zone";
@@ -517,66 +455,6 @@ function editZones() {
     }
   }
 
-  function zonesTypesAddLines() {
-    const zoneTypeListBody = document.getElementById("zonesTypesBodySection");
-  
-    let lines = "";
-    zoneTypes.forEach(function(z, i) {
-      let count=0; // Amount of zones per type
-      zones.selectAll("g").each(function() { if (this.dataset.type === z) count++; });
-  
-      lines += `<div class="states"><span class="religionDeity">${z}</span><span class="statePopulation">${count}</span>`;
-      if (i > 5) {
-        let id="removeZoneType" + i;
-        lines += `<span data-tip="Remove zone type" class="icon-trash-empty" id="${id}"></span>`;
-      }
-      lines += '</div>';
-    });
-    zoneTypeListBody.innerHTML = lines;
-    zonesTypesFooterNumber.innerHTML = zoneTypes.length;
-  
-    for (let i=0; i<zoneTypes.length; i++) {
-      let d = document.getElementById("removeZoneType" + i);
-      if (d) {
-        d.addEventListener("click", function() { removeZoneType(zoneTypes[i]); });
-      }
-    }
-  }
-
-  function addZonesDialog() {
-    $("#zonesTypes").dialog({
-      title: "Add zones and types",
-      width: fitContent(),
-      position: {my: "center", at: "center", of: "svg"},
-    });
-    zonesTypesAddLines();
-  }
-  
-  function addZonesType() {
-    let zoneType = zonesNewTypeInput.value;
-    if (!zoneTypes.includes(zoneType)) { zoneTypes.push(zoneType); }
-    zonesNewTypeInput.value = "";
-    zonesTypesAddLines();
-    zonesTypesFooterNumber.innerHTML = zoneTypes.length;
-	zonesEditorAddLines();
-  }
-  
-  function removeZoneType(zoneType) {
-    zones.selectAll("g").each(function () {
-      if (this.dataset.type === zoneType) {
-        this.dataset.type = zoneTypes[0];
-      }
-    });  
-
-    for (let i=0; i<zoneTypes.length; i++) {
-      if (zoneTypes[i] === zoneType) {
-        zoneTypes.splice(i, 1);
-        zonesTypesAddLines();
-        break;
-      }
-    }
-  }
-	
   function zoneRemove(zone) {
     zones.select("#" + zone).remove();
     unfog("focusZone" + zone);