cherry-pick 2bbff50b60

index.html

@@ -2206,7 +2206,7 @@
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 350">
                 <rect width="100%" height="100%" fill="#005bbb"></rect>
                 <rect y="50%" width="100%" height="50%" fill="#ffd500"></rect>
-                <text x="50%" text-anchor="middle" font-size="9em" y="35%" fill="#f5f5f5">Support Ukraine</text>
+                <text x="50%" text-anchor="middle" font-size="8em" y="32%" fill="#f5f5f5">Support Ukraine</text>
                 <text x="50%" text-anchor="middle" font-size="4em" y="78%" fill="#005bdd">
                   war.ukraine.ua/support-ukraine
                 </text>
@@ -3987,11 +3987,6 @@
           ></button>
           <button id="convertColorsButton" data-tip="Set maximum number of colors" class="icon-signal"></button>
           <input id="convertColors" value="100" style="display: none" />
-          <button
-            id="convertComplete"
-            data-tip="Complete the conversion. All unassigned colors will be considered as ocean"
-            class="icon-check"
-          ></button>
           <button
             id="convertCancel"
             data-tip="Cancel the conversion. Previous heightmap will be restored"
@@ -4013,12 +4008,23 @@
         </div>
 
         <div data-tip="Select a color to re-assign the height value" id="colorsAssigned" style="display: none">
-          <i>Assigned colors (<span id="colorsAssignedNumber"></span>):</i><br />
+          <i>Assigned colors (<span id="colorsAssignedNumber"></span>):</i>
+          <div id="colorsAssignedContainer" class="colorsContainer"></div>
         </div>
 
         <div data-tip="Select a color to assign a height value" id="colorsUnassigned" style="display: none">
-          <i>Unassigned colors (<span id="colorsUnassignedNumber"></span>):</i><br />
+          <i>Unassigned colors (<span id="colorsUnassignedNumber"></span>):</i>
+          <div id="colorsUnassignedContainer" class="colorsContainer"></div>
         </div>
+
+        <button
+          id="convertComplete"
+          data-tip="Complete the conversion. All unassigned colors will be considered as ocean"
+          style="margin: 0.4em 0"
+          class="glow"
+        >
+          Complete the conversion
+        </button>
       </div>
 
       <div id="biomesEditor" class="dialog stable" style="display: none">

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() {