Added randomly generated marker placement (#966)

* Add option to generate and place marker of type

* remove unecessary console.log

* versioning

* Update versioning.js

* Update index.html

* removed redundant functions and changed addMarker functionality

* changed marker type selection behavior

* fixed button toggling

* changed type selection to button + dropdown menu

* versioning

index.css

@@ -2357,6 +2357,38 @@ svg.button {
   opacity: 0.8;
 }
 
+#markerTypeSelector {
+  font-size: 0.85em;
+}
+
+#markerTypeSelectorWrapper {
+  position: relative;
+}
+
+#markerTypeSelectMenu {
+  display: none;
+}
+#markerTypeSelectMenu.visible {
+  display: block;
+  position: absolute;
+  height: 250px;
+  width: 170px;
+  overflow-y: scroll;
+  background: inherit;
+  bottom: 100%;
+  left: 0;
+  background: white;
+}
+#markerTypeSelectMenu > button {
+  display: block;
+  width: 100%;
+  border: 1px solid #ddd;
+  margin-bottom: 1px;
+}
+#markerTypeSelectMenu > button:hover {
+  background: #ccc;
+}
+
 @media print {
   div,
   canvas {

index.html

@@ -138,7 +138,7 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.89.21" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.89.38" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
   </head>
@@ -5509,6 +5509,14 @@
 
         <div id="markersBottom">
           <button id="markersOverviewRefresh" data-tip="Refresh the Overview screen" class="icon-cw"></button>
+          <input type="hidden" id="addedMarkerType" name="addedMarkerType" value="" />
+          <span id="markerTypeSelectorWrapper">
+              <button 
+              id="markerTypeSelector"
+              data-tip="Select marker type for newly added markers."
+            >❓</button>
+            <div id="markerTypeSelectMenu"></div>
+          </span>
           <button
             id="markersAddFromOverview"
             data-tip="Add a new marker. Hold Shift to add multiple"
@@ -7897,7 +7905,7 @@
     <script defer src="modules/relief-icons.js"></script>
     <script defer src="modules/ui/style.js"></script>
     <script defer src="modules/ui/editors.js?v=1.89.35"></script>
-    <script defer src="modules/ui/tools.js?v=1.89.27"></script>
+    <script defer src="modules/ui/tools.js?v=1.89.38"></script>
     <script defer src="modules/ui/world-configurator.js"></script>
     <script defer src="modules/ui/heightmap-editor.js?v=1.89.06"></script>
     <script defer src="modules/ui/provinces-editor.js?v=1.89.00"></script>
@@ -7922,7 +7930,7 @@
     <script defer src="modules/ui/rivers-overview.js"></script>
     <script defer src="modules/ui/military-overview.js"></script>
     <script defer src="modules/ui/regiments-overview.js?v=1.89.20"></script>
-    <script defer src="modules/ui/markers-overview.js?v=1.89.20"></script>
+    <script defer src="modules/ui/markers-overview.js?v=1.89.38"></script>
     <script defer src="modules/ui/regiment-editor.js"></script>
     <script defer src="modules/ui/battle-screen.js"></script>
     <script defer src="modules/ui/emblems-editor.js?v=1.89.21"></script>

modules/ui/markers-overview.js

@@ -14,6 +14,8 @@ function overviewMarkers() {
   const markersGenerationConfig = document.getElementById("markersGenerationConfig");
   const markersRemoveAll = document.getElementById("markersRemoveAll");
   const markersExport = document.getElementById("markersExport");
+  const markerTypeInput = document.getElementById("addedMarkerType");
+  const markerTypeSelector = document.getElementById("markerTypeSelector");
 
   addLines();
 
@@ -33,9 +35,24 @@ function overviewMarkers() {
     listen(markersAddFromOverview, "click", toggleAddMarker),
     listen(markersGenerationConfig, "click", configMarkersGeneration),
     listen(markersRemoveAll, "click", triggerRemoveAll),
-    listen(markersExport, "click", exportMarkers)
+    listen(markersExport, "click", exportMarkers),
+    listen(markerTypeSelector, "click", toggleMarkerTypeMenu),
+    //listen(markerTypeInput, "change", changeMarkerType),
   ];
 
+  [{type: "empty", icon: "❓"}, ...Markers.getConfig()].forEach(markerConfig => {
+    const option = document.createElement("button");
+    option.textContent = `${markerConfig.icon} ${markerConfig.type}`;
+    markerTypeSelectMenu.appendChild(option);
+    console.log(option.textContent);
+    listeners.push(listen(option, "click", () => {
+      markerTypeSelector.textContent = markerConfig.icon;
+      markerTypeInput.value = markerConfig.type;
+      changeMarkerType();
+      toggleMarkerTypeMenu();
+    }));
+  });
+
   function handleLineClick(ev) {
     const el = ev.target;
     const i = +el.parentNode.dataset.i;
@@ -139,11 +156,22 @@ function overviewMarkers() {
     });
   }
 
+
+  function toggleMarkerTypeMenu() {
+    document.getElementById("markerTypeSelectMenu").classList.toggle("visible");
+  }
+
   function toggleAddMarker() {
     markersAddFromOverview.classList.toggle("pressed");
     addMarker.click();
   }
 
+  function changeMarkerType() {
+    if (!markersAddFromOverview.classList.contains("pressed")) {
+      toggleAddMarker();
+    }
+  }
+
   function removeMarker(i) {
     notes = notes.filter(note => note.id !== `marker${i}`);
     pack.markers = pack.markers.filter(marker => marker.i !== i);

modules/ui/tools.js

@@ -828,9 +828,17 @@ function addMarkerOnClick() {
   // Find the currently selected marker to use as a base
   const isMarkerSelected = markers.length && elSelected?.node()?.parentElement?.id === "markers";
   const selectedMarker = isMarkerSelected ? markers.find(marker => marker.i === +elSelected.attr("id").slice(6)) : null;
-  const baseMarker = selectedMarker || {icon: "❓"};
+
+  const selectedType = document.getElementById("addedMarkerType").value;
+  const selectedConfig = Markers.getConfig().find(({type}) => type === selectedType);
+
+  const baseMarker = selectedMarker || selectedConfig || {icon: "❓"};
   const marker = Markers.add({...baseMarker, x, y, cell});
 
+  if (selectedConfig && selectedConfig.add) {
+    selectedConfig.add("marker"+marker.i, cell);
+  }
+
   const markersElement = document.getElementById("markers");
   const rescale = +markersElement.getAttribute("rescale");
   markersElement.insertAdjacentHTML("beforeend", drawMarker(marker, rescale));

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.37"; // generator version, update each time
+const version = "1.89.38"; // generator version, update each time
 
 {
   document.title += " v" + version;
@@ -36,6 +36,7 @@ const version = "1.89.37"; // generator version, update each time
         <li>Data Charts screen</li>
         <li>Сultures and religions can have multiple parents in hierarchy tree</li>
         <li>Heightmap selection screen</li>
+        <li>Randomly generated marker type selection and placement</li>
       </ul>
 
       <p>Join our <a href="${discord}" target="_blank">Discord server</a> and <a href="${reddit}" target="_blank">Reddit community</a> to ask questions, share maps, discuss the Generator and Worlbuilding, report bugs and propose new features.</p>