config generate markers dialog fixes

index.html

@@ -1344,6 +1344,7 @@
           <button id="overviewBurgsButton" data-tip="Click to open Burgs Overview. Shortcut: Shift + T">Burgs</button>
           <button id="overviewRiversButton" data-tip="Click to open Rivers Overview. Shortcut: Shift + V">Rivers</button>
           <button id="overviewMilitaryButton" data-tip="Click to open Military Forces Overview. Shortcut: Shift + M">Military</button>
+          <button id="overviewMarkersButton" data-tip="Click to open Markers Overview. Shortcut: Shift + K">Markers</button>
           <button id="overviewCellsButton" data-tip="Click to open Cell details view. Shortcut: Shift + E">Cells</button>
         </div>
 
@@ -3360,6 +3361,25 @@
       </div>
     </div>
 
+    <div id="markersOverview" class="dialog stable" style="display: none">
+      <div id="markersHeader" class="header">
+        <div style="left:1em" data-tip="Click to sort by marker type" class="sortable alphabetically" data-sortby="type">Type&nbsp;</div>
+      </div>
+
+      <div id="markersBody" class="table"></div>
+
+      <div id="markersFooter" class="totalLine">
+        <div data-tip="Markers number" style="margin-left: 4px">Total:&nbsp;<span id="markersFooterNumber">0</span>&nbsp;markers</div>
+      </div>
+
+      <div id="markersBottom">
+        <button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
+        <button id="markersAddFromOverview" data-tip="Add a new marker. Hold Shift to add multiple" class="icon-plus"></button>
+        <button id="markersGenerationConfig" data-tip="Config markers generation options" class="icon-cog"></button>
+        <button id="markersRemoveAll" data-tip="Remove all unlocked markers" class="icon-trash"></button>
+      </div>
+    </div>
+
     <div id="styleSaver" class="dialog stable textual" style="display: none">
       <div id="styleSaverHeader" style="padding:2px 0">
         <span>Preset name:</span>
@@ -4343,6 +4363,7 @@
   <script async defer src="modules/ui/rivers-overview.js"></script>
   <script async defer src="modules/ui/military-overview.js"></script>
   <script async defer src="modules/ui/regiments-overview.js"></script>
+  <script async defer src="modules/ui/markers-overview.js"></script>
   <script async defer src="modules/ui/regiment-editor.js"></script>
   <script async defer src="modules/ui/battle-screen.js"></script>
   <script async defer src="modules/coa-renderer.js"></script>

modules/markers-generator.js

@@ -782,8 +782,8 @@ window.Markers = (function () {
 
   function addPortals(type, icon, multiplier) {
     const {burgs} = pack;
-    let portals = burgs.slice(1, rand(12, 30) + 1).map(burg => [burg.name, burg.cell]);
+    let portals = burgs.slice(1, Math.ceil(burgs.length / 10) + 1).map(burg => [burg.name, burg.cell]);
-    let quantity = getQuantity(portals, 10, 3, multiplier);
+    let quantity = getQuantity(portals, 16, 8, multiplier);
     if (!quantity) return;
 
     while (quantity) {

modules/ui/hotkeys.js

@@ -53,6 +53,7 @@ function handleKeyup(event) {
   else if (shift && key === "T") overviewBurgs();
   else if (shift && key === "V") overviewRivers();
   else if (shift && key === "M") overviewMilitary();
+  else if (shift && key === "K") overviewMarkers();
   else if (shift && key === "E") viewCellDetails();
   else if (shift && key === "1") toggleAddBurg();
   else if (shift && key === "2") toggleAddLabel();

modules/ui/markers-overview.js

@@ -0,0 +1,130 @@
+"use strict";
+function overviewMarkers() {
+  if (customization) return;
+  closeDialogs("#markersOverview, .stable");
+  if (!layerIsOn("toggleMarkers")) toggleMarkers();
+
+  const body = document.getElementById("markersBody");
+  const markersFooterNumber = document.getElementById("markersFooterNumber");
+  const markersOverviewRefresh = document.getElementById("markersOverviewRefresh");
+  const markersAddFromOverview = document.getElementById("markersAddFromOverview");
+  const markersGenerationConfig = document.getElementById("markersGenerationConfig");
+  const markersRemoveAll = document.getElementById("markersRemoveAll");
+
+  addLines();
+
+  $("#markersOverview").dialog({
+    title: "Markers Overview",
+    resizable: false,
+    width: fitContent(),
+    close: close,
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
+  });
+
+  const listeners = [
+    listen(markersOverviewRefresh, "click", addLines),
+    listen(markersAddFromOverview, "click", () => {}),
+    listen(markersGenerationConfig, "click", configMarkersGeneration),
+    listen(markersRemoveAll, "click", triggerRemoveAll)
+  ];
+
+  function addLines() {
+    const lines = pack.markers
+      .map(({i, type, icon, lock}) => {
+        return `<div class="states" data-id=${i} data-type="${type}">
+        <div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
+        <span data-tip="Edit marker" class="icon-pencil"></span>
+        <span class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
+        <span data-tip="Remove marker" class="icon-trash-empty"></span>
+      </div>`;
+      })
+      .join("");
+
+    body.innerHTML = lines;
+    markersFooterNumber.innerText = pack.markers.length;
+
+    applySorting(markersHeader);
+  }
+
+  function highlightMarkerOn(event) {
+    if (!layerIsOn("toggleLabels")) toggleLabels();
+    // burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
+  }
+
+  function highlightMarkerOff() {
+    // burgLabels.selectAll("text.drag").classed("drag", false);
+  }
+
+  function zoomInto() {
+    const burg = +this.parentNode.dataset.id;
+    const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
+    const x = +label.getAttribute("x"),
+      y = +label.getAttribute("y");
+    zoomTo(x, y, 8, 2000);
+  }
+
+  function toggleLockStatus() {
+    const burg = +this.parentNode.dataset.id;
+    toggleBurgLock(burg);
+    if (this.classList.contains("icon-lock")) {
+      this.classList.remove("icon-lock");
+      this.classList.add("icon-lock-open");
+      this.classList.add("inactive");
+    } else {
+      this.classList.remove("icon-lock-open");
+      this.classList.add("icon-lock");
+      this.classList.remove("inactive");
+    }
+  }
+
+  function openEditor() {
+    const burg = +this.parentNode.dataset.id;
+    editBurg(burg);
+  }
+
+  function triggerRemove(i) {
+    confirmationDialog({
+      title: "Remove marker",
+      message: "Are you sure you want to remove this marker? The action cannot be reverted",
+      confirm: "Remove",
+      onConfirm: () => removeMarker(i)
+    });
+  }
+
+  function removeMarker(i) {
+    notes = notes.filter(note => note.id !== `marker${i}`);
+    pack.markers = pack.markers.filter(marker => marker.i !== i);
+    document.getElementById(`marker${i}`)?.remove();
+  }
+
+  function triggerRemoveAll() {
+    confirmationDialog({
+      title: "Remove all markers",
+      message: "Are you sure you want to remove all non-locked markers? The action cannot be reverted",
+      confirm: "Remove all",
+      onConfirm: removeAllMarkers
+    });
+  }
+
+  function removeAllMarkers() {
+    pack.markers = pack.markers.filter(({i, lock}) => {
+      if (lock) return true;
+
+      const id = `marker${i}`;
+      document.getElementById(id)?.remove();
+      notes = notes.filter(note => note.id !== id);
+      return false;
+    });
+
+    addLines();
+  }
+
+  function close() {
+    listeners.forEach(removeListener => removeListener());
+
+    addMarker.classList.remove("pressed");
+    markerAdd.classList.remove("pressed");
+    restoreDefaultEvents();
+    clearMainTip();
+  }
+}

modules/ui/tools.js

@@ -25,6 +25,7 @@ toolsContent.addEventListener("click", function (event) {
   else if (button === "overviewBurgsButton") overviewBurgs();
   else if (button === "overviewRiversButton") overviewRivers();
   else if (button === "overviewMilitaryButton") overviewMilitary();
+  else if (button === "overviewMarkersButton") overviewMarkers();
   else if (button === "overviewCellsButton") viewCellDetails();
 
   // click on Regenerate buttons
@@ -63,82 +64,7 @@ toolsContent.addEventListener("click", function (event) {
   }
 
   // click on Configure regenerate buttons
-  if (button === "configRegenerateMarkers") {
+  if (button === "configRegenerateMarkers") configMarkersGeneration();
-    const {markers} = pack;
-    const config = Markers.getConfig();
-
-    const headers = `<thead style='font-weight:bold'><tr>
-      <td data-tip="Marker type name">Type</td>
-      <td data-tip="Marker icon">Icon</td>
-      <td data-tip="Marker number multiplier">Multiplier</td>
-      <td data-tip="Number of markers of that type on the current map">Number</td>
-    </tr></thead>`;
-    const lines = config.map(({type, icon, multiplier}, index) => {
-      const inputId = `markerIconInput${index}`;
-      return `<tr>
-        <td><input value="${type}" /></td>
-        <td>
-          <input id="${inputId}" style="width: 5em" value="${icon}" />
-          <i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
-        </td>
-        <td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
-        <td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
-      </tr>`;
-    });
-    const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
-    alertMessage.innerHTML = table;
-
-    alertMessage.querySelectorAll("i").forEach(selectIconButton => {
-      selectIconButton.addEventListener("click", function () {
-        const input = this.previousElementSibling;
-        selectIcon(input.value, icon => (input.value = icon));
-      });
-    });
-
-    const applyChanges = () => {
-      const rows = alertMessage.querySelectorAll("tbody > tr");
-      const rowsData = Array.from(rows).map(row => {
-        const inputs = row.querySelectorAll("input");
-        return {
-          type: inputs[0].value,
-          icon: inputs[1].value,
-          multiplier: parseFloat(inputs[2].value)
-        };
-      });
-
-      const newConfig = config.map((markerType, index) => {
-        const {type, icon, multiplier} = rowsData[index];
-        return {...markerType, type, icon, multiplier};
-      });
-      Markers.setConfig(newConfig);
-
-      Markers.regenerate();
-      turnButtonOn("toggleMarkers");
-      drawMarkers();
-
-      $("#alert").dialog("close");
-    };
-
-    $("#alert").dialog({
-      resizable: false,
-      title: "Markers generation settings",
-      position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
-      buttons: {
-        Apply: applyChanges,
-        Cancel: function () {
-          $(this).dialog("close");
-        }
-      },
-      open: function () {
-        const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
-        buttons[0].addEventListener("mousemove", () => tip("Apply changes and regenerate markers"));
-        buttons[1].addEventListener("mousemove", () => tip("Cancel changes"));
-      },
-      close: function () {
-        $(this).dialog("destroy");
-      }
-    });
-  }
 
   // click on Add buttons
   if (button === "addLabel") toggleAddLabel();
@@ -498,6 +424,7 @@ function regenerateMarkers() {
   Markers.regenerate();
   turnButtonOn("toggleMarkers");
   drawMarkers();
+  if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
 }
 
 function regenerateZones(event) {
@@ -790,6 +717,86 @@ function addMarkerOnClick() {
   }
 }
 
+function configMarkersGeneration() {
+  drawConfigTable();
+
+  function drawConfigTable() {
+    const {markers} = pack;
+    const config = Markers.getConfig();
+    const headers = `<thead style='font-weight:bold'><tr>
+      <td data-tip="Marker type name">Type</td>
+      <td data-tip="Marker icon">Icon</td>
+      <td data-tip="Marker number multiplier">Multiplier</td>
+      <td data-tip="Number of markers of that type on the current map">Number</td>
+    </tr></thead>`;
+    const lines = config.map(({type, icon, multiplier}, index) => {
+      const inputId = `markerIconInput${index}`;
+      return `<tr>
+        <td><input value="${type}" /></td>
+        <td>
+          <input id="${inputId}" style="width: 5em" value="${icon}" />
+          <i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
+        </td>
+        <td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
+        <td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
+      </tr>`;
+    });
+    const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
+    alertMessage.innerHTML = table;
+
+    alertMessage.querySelectorAll("i").forEach(selectIconButton => {
+      selectIconButton.addEventListener("click", function () {
+        const input = this.previousElementSibling;
+        selectIcon(input.value, icon => (input.value = icon));
+      });
+    });
+  }
+
+  const applyChanges = () => {
+    const rows = alertMessage.querySelectorAll("tbody > tr");
+    const rowsData = Array.from(rows).map(row => {
+      const inputs = row.querySelectorAll("input");
+      return {
+        type: inputs[0].value,
+        icon: inputs[1].value,
+        multiplier: parseFloat(inputs[2].value)
+      };
+    });
+
+    const config = Markers.getConfig();
+    const newConfig = config.map((markerType, index) => {
+      const {type, icon, multiplier} = rowsData[index];
+      return {...markerType, type, icon, multiplier};
+    });
+
+    Markers.setConfig(newConfig);
+  };
+
+  $("#alert").dialog({
+    resizable: false,
+    title: "Markers generation settings",
+    position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
+    buttons: {
+      Regenerate: () => {
+        applyChanges();
+        regenerateMarkers();
+        drawConfigTable();
+      },
+      Close: function () {
+        $(this).dialog("close");
+      }
+    },
+    open: function () {
+      const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
+      buttons[0].addEventListener("mousemove", () => tip("Apply changes and regenerate markers"));
+      buttons[1].addEventListener("mousemove", () => tip("Close the window"));
+    },
+    close: function () {
+      $(this).dialog("destroy");
+    }
+  });
+}
+
 function viewCellDetails() {
   $("#cellInfo").dialog({
     resizable: false,