Better map generation

client/js/app.js

@@ -41,7 +41,10 @@ $("#menu-join").on("click", () => {
 // ---------------------------------------------------------- new game ------
 
 const $civSelect = $("#new-civs");
-for (const civ of CIVILISATIONS) {
+// The picker reads alphabetically; the catalogue order is left alone so it can
+// still drive the default roster.
+const menuCivs = CIVILISATIONS.slice().sort((a, b) => a.name.localeCompare(b.name));
+for (const civ of menuCivs) {
   const $item = civOption(civ);
   $item.on("click", () => {
     selectedCivId = civ.id;
@@ -50,7 +53,7 @@ for (const civ of CIVILISATIONS) {
   });
   $civSelect.append($item);
 }
-$civSelect.children().first().addClass("selected");
+$civSelect.children().filter(`[data-civ-id="${selectedCivId}"]`).addClass("selected");
 $("#new-count").attr("max", CIVILISATIONS.length);
 // A fresh game starts with every civilisation in the world.
 $("#new-count").val(CIVILISATIONS.length);