cherry-pick 2bbff50b60

src/dialogs/dialogs/heightmap-editor.js

@@ -1190,7 +1190,7 @@ export function open(options) {
         .on("click", mapClicked);
 
       const colors = pallete.map(p => `rgb(${p[0]}, ${p[1]}, ${p[2]})`);
-      d3.select("#colorsUnassigned")
+      d3.select("#colorsUnassignedContainer")
         .selectAll("div")
         .data(colors)
         .enter()
@@ -1253,25 +1253,23 @@ export function open(options) {
           this.setAttribute("data-height", height);
         });
 
-      if (selectedColor.parentNode.id === "colorsUnassigned") {
-        colorsAssigned.appendChild(selectedColor);
+      if (selectedColor.parentNode.id === "colorsUnassignedContainer") {
+        colorsAssignedContainer.appendChild(selectedColor);
         colorsAssigned.style.display = "block";
 
-        byId("colorsUnassignedNumber").innerHTML = colorsUnassigned.childElementCount - 2;
-        byId("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2;
+        byId("colorsUnassignedNumber").innerHTML = colorsUnassignedContainer.childElementCount - 2;
+        byId("colorsAssignedNumber").innerHTML = colorsAssignedContainer.childElementCount - 2;
       }
     }
 
     // auto assign color based on luminosity or hue
     function autoAssing(type) {
-      let unassigned = colorsUnassigned.querySelectorAll("div");
+      let unassigned = colorsUnassignedContainer.querySelectorAll("div");
       if (!unassigned.length) {
         heightsFromImage(+convertColors.value);
-        unassigned = colorsUnassigned.querySelectorAll("div");
-        if (!unassigned.length) {
-          tip("No unassigned colors. Please load an image and click the button again", false, "error");
-          return;
-        }
+        unassigned = colorsUnassignedContainer.querySelectorAll("div");
+        if (!unassigned.length)
+          return tip("No unassigned colors. Please load an image and click the button again", false, "error");
       }
 
       const getHeightByHue = function (color) {
@@ -1315,18 +1313,18 @@ export function open(options) {
         } // if color is already added, remove it
         el.style.backgroundColor = el.dataset.color = colorTo;
         el.dataset.height = height;
-        colorsAssigned.appendChild(el);
+        colorsAssignedContainer.appendChild(el);
         assinged[height] = true;
       });
 
       // sort assigned colors by height
-      Array.from(colorsAssigned.children)
+      Array.from(colorsAssignedContainer.children)
         .sort((a, b) => +a.dataset.height - +b.dataset.height)
-        .forEach(line => colorsAssigned.appendChild(line));
+        .forEach(line => colorsAssignedContainer.appendChild(line));
 
       colorsAssigned.style.display = "block";
       colorsUnassigned.style.display = "none";
-      byId("colorsAssignedNumber").innerHTML = colorsAssigned.childElementCount - 2;
+      byId("colorsAssignedNumber").innerHTML = colorsAssignedContainer.childElementCount - 2;
     }
 
     function setConvertColorsNumber() {
@@ -1346,7 +1344,8 @@ export function open(options) {
     }
 
     function applyConversion() {
-      if (colorsAssigned.childElementCount < 3) return tip("Please do the assignment first", false, "error");
+      if (colorsAssignedContainer.childElementCount < 3)
+        return tip("Please assign colors to heights first", false, "error");
 
       viewbox
         .select("#heights")

src/index.css

@@ -1141,12 +1141,17 @@ div#regimentSelectorBody > div > div {
   filter: sepia(1) hue-rotate(200deg);
 }
 
+.colorsContainer {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-column-gap: 0.3em;
+  grid-row-gap: 0.2em;
+}
+
 .color-div {
   width: 3em;
-  height: 1em;
-  display: inline-block;
-  margin: 0 0.16em;
-  border: 1px #c5c5c5 groove;
+  height: 1.5em;
+  border: 1px #999 solid;
   cursor: pointer;
 }
 

src/modules/ui/namesbase-editor.js

@@ -75,10 +75,8 @@ export function editNamesbase() {
 
   function updateInputs() {
     const base = +document.getElementById("namesbaseSelect").value;
-    if (!nameBases[base]) {
-      tip(`Namesbase ${base} is not defined`, false, "error");
-      return;
-    }
+    if (!nameBases[base]) return tip(`Namesbase ${base} is not defined`, false, "error");
+
     document.getElementById("namesbaseTextarea").value = nameBases[base].b;
     document.getElementById("namesbaseName").value = nameBases[base].name;
     document.getElementById("namesbaseMin").value = nameBases[base].min;
@@ -104,20 +102,23 @@ export function editNamesbase() {
 
   function updateNamesData() {
     const base = +document.getElementById("namesbaseSelect").value;
-    const b = document.getElementById("namesbaseTextarea").value;
-    if (b.split(",").length < 3) {
-      tip("The names data provided is too short of incorrect", false, "error");
-      return;
-    }
-    nameBases[base].b = b;
+    const rawInput = document.getElementById("namesbaseTextarea").value;
+    if (rawInput.split(",").length < 3) return tip("The names data provided is too short of incorrect", false, "error");
+
+    const namesData = rawInput.replace(/[/|]/g, "");
+    nameBases[base].b = namesData;
     Names.updateChain(base);
   }
 
   function updateBaseName() {
     const base = +document.getElementById("namesbaseSelect").value;
     const select = document.getElementById("namesbaseSelect");
-    select.options[namesbaseSelect.selectedIndex].innerHTML = this.value;
-    nameBases[base].name = this.value;
+
+    const rawName = this.value;
+    const name = rawName.replace(/[/|]/g, "");
+
+    select.options[namesbaseSelect.selectedIndex].innerHTML = name;
+    nameBases[base].name = name;
   }
 
   function updateBaseMin() {