markers - generate tool + lock tooltip

index.html

@@ -2044,7 +2044,7 @@
         <button id="burgEditEmblem" data-tip="Edit emblem" class="icon-shield-alt"></button>
         <button id="burgRelocate" data-tip="Relocate burg" class="icon-target"></button>
         <button id="burglLegend" data-tip="Edit free text notes (legend) for this burg" class="icon-edit"></button>
-        <button id="burgLock" class="icon-lock-open"></button>
+        <button id="burgLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
         <button id="burgRemove" data-tip="Remove non-capital burg. Shortcut: Delete" class="icon-trash fastDelete"></button>
       </div>
     </div>
@@ -2102,7 +2102,7 @@
 
       <div id="markerBottom">
         <button id="markerNotes" data-tip="Edit place legend (notes)" class="icon-edit"></button>
-        <button id="markerLock" class="icon-lock-open"></button>
+        <button id="markerLock" class="icon-lock-open" onmouseover="showElementLockTip(event)"></button>
         <button id="markerAdd" data-tip="Add additional marker of that type" class="icon-plus"></button>
         <button id="markerRemove" data-tip="Remove the marker. Shortcut: Delete" class="icon-trash fastDelete"></button>
       </div>

modules/markers-generator.js

@@ -4,53 +4,20 @@ window.Markers = (function () {
   let config = [];
   let occupied = [];
 
-  function getDefaultConfig() {
-    const culturesSet = document.getElementById("culturesSet").value;
-    const isFantasy = culturesSet.includes("Fantasy");
-
-    return [
-      {type: "volcanoes", icon: "🌋", multiplier: 1, fn: addVolcanoes},
-      {type: "hot-springs", icon: "♨️", multiplier: 1, fn: addHotSprings},
-      {type: "mines", icon: "⛏️", multiplier: 1, fn: addMines},
-      {type: "bridges", icon: "🌉", multiplier: 1, fn: addBridges},
-      {type: "inns", icon: "🍻", multiplier: 1, fn: addInns},
-      {type: "lighthouses", icon: "🚨", multiplier: 1, fn: addLighthouses},
-      {type: "waterfalls", icon: "⟱", multiplier: 1, fn: addWaterfalls},
-      {type: "battlefields", icon: "⚔️", multiplier: 1, fn: addBattlefields},
-      {type: "dungeons", icon: "🗝️", multiplier: 1, fn: addDungeons},
-      {type: "lake-monsters", icon: "🐉", multiplier: 1, fn: addLakeMonsters},
-      {type: "sea-monsters", icon: "🦑", multiplier: 1, fn: addSeaMonsters},
-      {type: "hill-monsters", icon: "👹", multiplier: 1, fn: addHillMonsters},
-      {type: "sacred-mountains", icon: "🗻", multiplier: 1, fn: addSacredMountains},
-      {type: "sacred-forests", icon: "🌳", multiplier: 1, fn: addSacredForests},
-      {type: "sacred-pineries", icon: "🌲", multiplier: 1, fn: addSacredPineries},
-      {type: "sacred-palm-groves", icon: "🌴", multiplier: 1, fn: addSacredPalmGroves},
-      {type: "brigands", icon: "💰", multiplier: 1, fn: addBrigands},
-      {type: "pirates", icon: "🏴‍☠️", multiplier: 1, fn: addPirates},
-      {type: "statues", icon: "🗿", multiplier: 1, fn: addStatues},
-      {type: "ruines", icon: "🏺", multiplier: 1, fn: addRuines},
-      {type: "portals", icon: "🌀", multiplier: +isFantasy, fn: addPortals}
-    ];
-  }
-
-  const getConfig = () => config;
-
-  const setConfig = newConfig => {
-    config = newConfig;
-  };
-
-<<<<<<< HEAD
-  const generate = requestedQtyMultiplier => {
-    pack.markers = [];
-    if (requestedQtyMultiplier === 0) return;
-    if (requestedQtyMultiplier) multiplier = requestedQtyMultiplier;
-=======
   const generate = function () {
-    setConfig(getDefaultConfig());
     pack.markers = [];
     generateTypes();
   };
 
+  const regenerate = requestedMultiplier => {
+    if (requestedMultiplier === 0) return;
+    if (requestedMultiplier) multiplier = requestedMultiplier;
+    generateTypes();
+  };
+
+  const generateTypes = () => {
+    TIME && console.time("addMarkers");
+
   const regenerate = () => {
     pack.markers = pack.markers.filter(({i, lock}) => {
       if (lock) return true;
@@ -80,8 +47,9 @@ window.Markers = (function () {
 
 <<<<<<< HEAD
   const getQuantity = (array, min, each) => {
-    if (array.length < min) return 0;
+    if (!array.length || array.length < min / multiplier) return 0;
-    return Math.ceil((array.length / each) * multiplier);
+    const requestQty = Math.ceil((array.length / each) * multiplier);
+    return array.length < requestQty ? array.length : requestQty;
   };
 =======
   function getQuantity(array, min, each, multiplier) {
@@ -831,8 +799,5 @@ window.Markers = (function () {
     return "marker" + i;
   }
 
-  return {generate};
+  return {generate, regenerate};
-=======
-  return {generate, regenerate, getConfig, setConfig};
->>>>>>> 60057c5... markers - generate from config file
 })();

modules/ui/burg-editor.js

@@ -49,7 +49,6 @@ function editBurg(id) {
   document.getElementById("burgRelocate").addEventListener("click", toggleRelocateBurg);
   document.getElementById("burglLegend").addEventListener("click", editBurgLegend);
   document.getElementById("burgLock").addEventListener("click", toggleBurgLockButton);
-  document.getElementById("burgLock").addEventListener("mouseover", showBurgELockTip);
   document.getElementById("burgRemove").addEventListener("click", removeSelectedBurg);
 
   function updateBurgValues() {
@@ -373,11 +372,6 @@ function editBurg(id) {
     }
   }
 
-  function showBurgELockTip() {
-    const id = +elSelected.attr("data-id");
-    showBurgLockTip(id);
-  }
-
   function showStyleSection() {
     document.querySelectorAll("#burgBottom > button").forEach(el => (el.style.display = "none"));
     document.getElementById("burgStyleSection").style.display = "inline-block";

modules/ui/burgs-overview.js

@@ -79,20 +79,26 @@ function overviewBurgs() {
       const province = prov ? pack.provinces[prov].name : "";
       const culture = pack.cultures[b.culture].name;
 
-      lines += `<div class="states" data-id=${b.i} data-name="${b.name}" data-state="${state}" data-province="${province}" data-culture="${culture}" data-population=${population} data-type="${type}">
+      lines += `<div class="states" data-id=${b.i} data-name="${
+        b.name
+      }" data-state="${state}" data-province="${province}" data-culture="${culture}" data-population=${population} data-type="${type}">
         <span data-tip="Click to zoom into view" class="icon-dot-circled pointer"></span>
         <input data-tip="Burg name. Click and type to change" class="burgName" value="${b.name}" autocorrect="off" spellcheck="false">
         <input data-tip="Burg province" class="burgState" value="${province}" disabled>
         <input data-tip="Burg state" class="burgState" value="${state}" disabled>
-        <select data-tip="Dominant culture. Click to change burg culture (to change cell cultrure use Cultures Editor)" class="stateCulture">${getCultureOptions(b.culture)}</select>
+        <select data-tip="Dominant culture. Click to change burg culture (to change cell cultrure use Cultures Editor)" class="stateCulture">${getCultureOptions(
+          b.culture
+        )}</select>
         <span data-tip="Burg population" class="icon-male"></span>
         <input data-tip="Burg population. Type to change" class="burgPopulation" value=${si(population)}>
         <div class="burgType">
-          <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${b.capital ? "" : " inactive pointer"}"></span>
+          <span data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}" class="icon-star-empty${
+        b.capital ? "" : " inactive pointer"
+      }"></span>
           <span data-tip="Click to toggle port status" class="icon-anchor pointer${b.port ? "" : " inactive"}" style="font-size:.9em"></span>
         </div>
         <span data-tip="Edit burg" class="icon-pencil"></span>
-        <span class="locks pointer  ${b.lock ? "icon-lock" : "icon-lock-open inactive"}"></span>
+        <span class="locks pointer ${b.lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
         <span data-tip="Remove burg" class="icon-trash-empty"></span>
       </div>`;
     }
@@ -112,7 +118,6 @@ function overviewBurgs() {
     body.querySelectorAll("div > span.icon-star-empty").forEach(el => el.addEventListener("click", toggleCapitalStatus));
     body.querySelectorAll("div > span.icon-anchor").forEach(el => el.addEventListener("click", togglePortStatus));
     body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("click", toggleBurgLockStatus));
-    body.querySelectorAll("div > span.locks").forEach(el => el.addEventListener("mouseover", showBurgOLockTip));
     body.querySelectorAll("div > span.icon-pencil").forEach(el => el.addEventListener("click", openBurgEditor));
     body.querySelectorAll("div > span.icon-trash-empty").forEach(el => el.addEventListener("click", triggerBurgRemove));
 
@@ -202,11 +207,6 @@ function overviewBurgs() {
     }
   }
 
-  function showBurgOLockTip() {
-    const burg = +this.parentNode.dataset.id;
-    showBurgLockTip(burg);
-  }
-
   function openBurgEditor() {
     const burg = +this.parentNode.dataset.id;
     editBurg(burg);
@@ -413,7 +413,14 @@ function overviewBurgs() {
         if (this.value === "provinces") return d.province;
       };
 
-      const base = this.value === "states" ? getStatesData() : this.value === "cultures" ? getCulturesData() : this.value === "parent" ? getParentData() : getProvincesData();
+      const base =
+        this.value === "states"
+          ? getStatesData()
+          : this.value === "cultures"
+          ? getCulturesData()
+          : this.value === "parent"
+          ? getParentData()
+          : getProvincesData();
       burgs.forEach(b => (b.id = b.i + base.length - 1));
 
       const data = base.concat(burgs);
@@ -447,7 +454,10 @@ function overviewBurgs() {
   }
 
   function downloadBurgsData() {
-    let data = "Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Population,Longitude,Latitude,Elevation (" + heightUnit.value + "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
+    let data =
+      "Id,Burg,Province,Province Full Name,State,State Full Name,Culture,Religion,Population,Longitude,Latitude,Elevation (" +
+      heightUnit.value +
+      "),Capital,Port,Citadel,Walls,Plaza,Temple,Shanty Town\n"; // headers
     const valid = pack.burgs.filter(b => b.i && !b.removed); // all valid burgs
 
     valid.forEach(b => {

modules/ui/editors.js

@@ -265,15 +265,6 @@ function toggleBurgLock(burg) {
   b.lock = b.lock ? 0 : 1;
 }
 
-function showBurgLockTip(burg) {
-  const b = pack.burgs[burg];
-  if (b.lock) {
-    tip("Click to Unlock burg and allow it to be change by regeneration tools");
-  } else {
-    tip("Click to Lock burg and prevent changes by regeneration tools");
-  }
-}
-
 // draw legend box
 function drawLegend(name, data) {
   legend.selectAll("*").remove(); // fully redraw every time

modules/ui/general.js

@@ -56,6 +56,15 @@ function showDataTip(e) {
   tip(dataTip);
 }
 
+function showElementLockTip(event) {
+  const locked = event?.target?.classList?.contains("icon-lock");
+  if (locked) {
+    tip("Click to unlock the element and allow it to be changed by regeneration tools");
+  } else {
+    tip("Click to lock the element and prevent changes to it by regeneration tools");
+  }
+}
+
 const moved = debounce(mouseMove, 100);
 function mouseMove() {
   const point = d3.mouse(this);
@@ -101,7 +110,8 @@ function showMapTooltip(point, e, i, g) {
 
   if (group === "emblems" && e.target.tagName === "use") {
     const parent = e.target.parentNode;
-    const [g, type] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
+    const [g, type] =
+      parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
     const i = +e.target.dataset.i;
     if (event.shiftKey) highlightEmblemElement(type, g[i]);
 
@@ -328,7 +338,20 @@ function highlightEmblemElement(type, el) {
 
   if (type === "burg") {
     const {x, y} = el;
-    debug.append("circle").attr("cx", x).attr("cy", y).attr("r", 0).attr("fill", "none").attr("stroke", "#d0240f").attr("stroke-width", 1).attr("opacity", 1).transition(animation).attr("r", 20).attr("opacity", 0.1).attr("stroke-width", 0).remove();
+    debug
+      .append("circle")
+      .attr("cx", x)
+      .attr("cy", y)
+      .attr("r", 0)
+      .attr("fill", "none")
+      .attr("stroke", "#d0240f")
+      .attr("stroke-width", 1)
+      .attr("opacity", 1)
+      .transition(animation)
+      .attr("r", 20)
+      .attr("opacity", 0.1)
+      .attr("stroke-width", 0)
+      .remove();
     return;
   }
 

modules/ui/markers-editor.js

@@ -21,6 +21,7 @@ function editMarker(markerI) {
   const markerStroke = document.getElementById("markerStroke");
 
   const markerNotes = document.getElementById("markerNotes");
+  const markerLock = document.getElementById("markerLock");
   const addMarker = document.getElementById("addMarker");
   const markerAdd = document.getElementById("markerAdd");
   const markerRemove = document.getElementById("markerRemove");
@@ -46,6 +47,7 @@ function editMarker(markerI) {
     listen(markerFill, "input", changePinFill),
     listen(markerStroke, "input", changePinStroke),
     listen(markerNotes, "click", editMarkerLegend),
+    listen(markerLock, "click", toggleMarkerLock),
     listen(markerAdd, "click", toggleAddMarker),
     listen(markerRemove, "click", confirmMarkerDeletion)
   ];
@@ -93,7 +95,7 @@ function editMarker(markerI) {
   }
 
   function updateInputs() {
-    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble"} = marker;
+    const {icon, type = "", size = 30, dx = 50, dy = 50, px = 12, stroke = "#000000", fill = "#ffffff", pin = "bubble", lock} = marker;
 
     markerType.value = type;
     markerIcon.value = icon;
@@ -104,6 +106,8 @@ function editMarker(markerI) {
     markerPin.value = pin;
     markerFill.value = fill;
     markerStroke.value = stroke;
+
+    markerLock.className = lock ? "icon-lock" : "icon-lock-open";
   }
 
   function changeMarkerType() {
@@ -214,6 +218,12 @@ function editMarker(markerI) {
     editNotes(id, id);
   }
 
+  function toggleMarkerLock() {
+    marker.lock = !marker.lock;
+    markerLock.classList.toggle("icon-lock-open");
+    markerLock.classList.toggle("icon-lock");
+  }
+
   function toggleAddMarker() {
     markerAdd.classList.toggle("pressed");
     addMarker.click();

modules/ui/tools.js

@@ -420,11 +420,23 @@ function regenerateIce() {
   drawIce();
 }
 
-function regenerateMarkers() {
+function regenerateMarkers(event) {
-  Markers.regenerate();
+  if (isCtrlClick(event)) prompt("Please provide markers number multiplier", {default: 1, step: 0.01, min: 0, max: 100}, v => addNumberOfMarkers(v));
+  else addNumberOfMarkers();
+
+  function addNumberOfMarkers(multiplier) {
+    pack.markers = pack.markers.filter(marker => {
+      if (marker.lock) return true;
+      document.getElementById(`marker${marker.i}`)?.remove();
+      const index = notes.findIndex(note => note.id === marker.id);
+      if (index != -1) notes.splice(index, 1);
+      return false;
+    });
+
+    Markers.regenerate(multiplier);
     turnButtonOn("toggleMarkers");
     drawMarkers();
-  if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
+  }
 }
 
 function regenerateZones(event) {