From 16312aa8643726d17c4640f148dda55a54a79598 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81ngel=20Montero=20Lamas?= <angel.montero1@gmail.com>
Date: Thu, 20 Jan 2022 21:17:53 +0100
Subject: [PATCH] Amount of types and fixes

Fixed some spacing in zoneTypes dialog, and made a count for the amount of zones per type.
---
 index.html                 |  3 +--
 modules/ui/zones-editor.js | 47 ++++++++++++++++++++------------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/index.html b/index.html
index bf797b03..9a9236eb 100644
--- a/index.html
+++ b/index.html
@@ -2951,7 +2951,7 @@
 	<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:12em" data-tip="Number of zones of this type" class="hide">Amount&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>
@@ -2962,7 +2962,6 @@
 	  
 	  <div id="zonesTypesBottom">
         <button id="zonesNewBlank" data-tip="Add a new blank zone layer" class="icon-flag-empty"></button>
-        <button id="zonesNewRandom" data-tip="Add a new pre-filled random zone layer" class="icon-flag"></button>
 		<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>
diff --git a/modules/ui/zones-editor.js b/modules/ui/zones-editor.js
index a7729d50..9526ff45 100644
--- a/modules/ui/zones-editor.js
+++ b/modules/ui/zones-editor.js
@@ -28,9 +28,7 @@ function editZones() {
   document.getElementById("zonesManuallyApply").addEventListener("click", applyZonesManualAssignent);
   document.getElementById("zonesManuallyCancel").addEventListener("click", cancelZonesManualAssignent);
   document.getElementById("zonesAdd").addEventListener("click", addZonesDialog);
-  //document.getElementById("typeTrash").addEventListener("click", removeZoneType);
   document.getElementById("zonesNewBlank").addEventListener("click", addZonesLayer);
-  document.getElementById("zonesNewRandom").addEventListener("click", addZonesLayer);
   document.getElementById("zonesNewTypeButton").addEventListener("click", addZonesType);
   document.getElementById("zonesExport").addEventListener("click", downloadZonesData);
   document.getElementById("zonesRemove").addEventListener("click", toggleEraseMode);
@@ -102,6 +100,12 @@ function editZones() {
     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"));
@@ -111,8 +115,7 @@ function editZones() {
 
     zones.selectAll("g").each(function () {
       const zoneType = this.dataset.type;
-      //if (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType) return;
-	  if (selectedType !== "All" && (zonesFilterButton.classList.contains("pressed") && zoneType !== selectedType)) return;
+      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;
@@ -144,8 +147,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>`; }
 
     // update footer
     const totalArea = (zonesFooterArea.dataset.area = graphWidth * graphHeight * distanceScaleInput.value ** 2);
@@ -522,7 +523,9 @@ function editZones() {
     const zoneTypeListBody = document.getElementById("zonesTypesBodySection");
     let lines = "";
     zoneTypes.forEach(function(z, i) {
-    lines += `<div class="states"><span class="religionname">${z}</span>`;
+    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="religionType">${count}</span>`;
     if (i > 5) {
       let id="removeZoneType" + i;
       lines += `<span data-tip="Remove zone type" class="icon-trash-empty" id="${id}"></span>`;
@@ -531,7 +534,7 @@ function editZones() {
     });
     zoneTypeListBody.innerHTML = lines;
     zonesTypesFooterNumber.innerHTML = zoneTypes.length;
-}
+  }
 
   function addZonesDialog() {
     $("#zonesTypes").dialog({
@@ -539,9 +542,9 @@ function editZones() {
       width: fitContent(),
       close: closeZoneTypesEditor,
       position: {my: "center", at: "center", of: "svg"},
-  });
+    });
     zonesTypesAddLines();
-}
+  }
 
   function closeZoneTypesEditor() {
     zonesEditorAddLines();
@@ -560,21 +563,21 @@ function editZones() {
     }
   }
   
-function removeZoneType(zoneType) {
-  zones.selectAll("g").each(function () {
-    if (this.dataset.type === zoneType) {
-      this.dataset.type = "Unassigned";
-    }
-  });  
+  function removeZoneType(zoneType) {
+    zones.selectAll("g").each(function () {
+      if (this.dataset.type === zoneType) {
+        this.dataset.type = "Unassigned";
+      }
+    });  
 
-  for (let i=0; i<zoneTypes.length; i++) {
-    if (zoneTypes[i] === zoneType) {
-      zoneTypes.splice(i, 1);
-      zonesTypesAddLines();
-      break;
+    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();