v1.3.04a

modules/ui/general.js

@@ -45,8 +45,8 @@ function showDataTip(e) {
   let dataTip = e.target.dataset.tip;
   if (!dataTip && e.target.parentNode.dataset.tip) dataTip = e.target.parentNode.dataset.tip;
   if (!dataTip) return;
-  const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
-  tip(tooltip);
+  //const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
+  tip(dataTip);
 }
 
 function moved() {
@@ -403,7 +403,8 @@ document.addEventListener("keyup", event => {
   else if (key === 65) togglePrec(); // "A" to toggle Precipitation layer
   else if (key === 76) toggleLabels(); // "L" to toggle Labels layer
   else if (key === 73) toggleIcons(); // "I" to toggle Icons layer
-  else if (key === 77) toggleMarkers(); // "M" to toggle Markers layer
+  else if (key === 77) toggleMilitary(); // "M" to toggle Military layer
+  else if (key === 75) toggleMarkers(); // "K" to toggle Markers layer
   else if (key === 187) toggleRulers(); // Equal (=) to toggle Rulers
   else if (key === 189) toggleScaleBar(); // Minus (-) to toggle Scale bar
 

modules/ui/layers.js

@@ -36,6 +36,7 @@ function getDefaultPresets() {
     "heightmap": ["toggleHeight", "toggleRivers"],
     "physical": ["toggleCoordinates", "toggleHeight", "toggleRivers", "toggleScaleBar"],
     "poi": ["toggleBorders", "toggleHeight", "toggleIcons", "toggleMarkers", "toggleRivers", "toggleRoutes", "toggleScaleBar"],
+    "military": ["toggleBorders", "toggleIcons", "toggleLabels", "toggleMilitary", "toggleRivers", "toggleRoutes", "toggleScaleBar", "toggleStates"],
     "landmass": ["toggleScaleBar"]
   }
 }
@@ -1058,6 +1059,18 @@ function toggleRoutes(event) {
   }
 }
 
+function toggleMilitary() {
+  if (!layerIsOn("toggleMilitary")) {
+    turnButtonOn("toggleMilitary");
+    $('#armies').fadeIn();
+    if (event && isCtrlClick(event)) editStyle("armies");
+  } else {
+    if (event && isCtrlClick(event)) {editStyle("armies"); return;}
+    $('#armies').fadeOut();
+    turnButtonOff("toggleMilitary");
+  }
+}
+
 function toggleMarkers(event) {
   if (!layerIsOn("toggleMarkers")) {
     turnButtonOn("toggleMarkers");

modules/ui/military-overview.js

@@ -4,6 +4,7 @@ function overviewMilitary() {
   closeDialogs("#militaryOverview, .stable");
   if (!layerIsOn("toggleStates")) toggleStates();
   if (!layerIsOn("toggleBorders")) toggleBorders();
+  if (!layerIsOn("toggleMilitary")) toggleMilitary();
 
   const body = document.getElementById("militaryBody");
   addLines();
@@ -22,6 +23,7 @@ function overviewMilitary() {
   document.getElementById("militaryOverviewRefresh").addEventListener("click", addLines);
   document.getElementById("militaryPercentage").addEventListener("click", togglePercentageMode);
   document.getElementById("militaryOptionsButton").addEventListener("click", militaryCustomize);
+  document.getElementById("militaryRegimentsList").addEventListener("click", () => overviewRegiments(-1));
   document.getElementById("militaryOverviewRecalculate").addEventListener("click", militaryRecalculate);
   document.getElementById("militaryExport").addEventListener("click", downloadMilitaryData);
 
@@ -120,9 +122,11 @@ function overviewMilitary() {
   }
 
   function stateHighlightOn(event) {
-    if (!layerIsOn("toggleStates")) return;
     const state = +event.target.dataset.id;
     if (customization || !state) return;
+    armies.select("#army"+state).transition().duration(2000).style("fill", "#ff0000");
+
+    if (!layerIsOn("toggleStates")) return;
     const d = regions.select("#state"+state).attr("d");
 
     const path = debug.append("path").attr("class", "highlight").attr("d", d)
@@ -132,8 +136,6 @@ function overviewMilitary() {
     const l = path.node().getTotalLength(), dur = (l + 5000) / 2;
     const i = d3.interpolateString("0," + l, l + "," + l);
     path.transition().duration(dur).attrTween("stroke-dasharray", function() {return t => i(t)});
-
-    armies.select("#army"+state).transition().duration(dur).style("fill", "#ff0000");
   }
 
   function stateHighlightOff(event) {
@@ -161,7 +163,7 @@ function overviewMilitary() {
         el.querySelectorAll("div").forEach(function(div) {
           const type = div.dataset.type;
           if (type === "rate") return;
-          div.textContent = rn(+el.dataset[type] / total(type) * 100) + "%";
+          div.textContent = total(type) ? rn(+el.dataset[type] / total(type) * 100) + "%" : "0%";
         });
       });
     } else {
@@ -181,7 +183,7 @@ function overviewMilitary() {
       position: {my: "center", at: "center", of: "svg"},
       buttons: {
         Apply: function() {applyMilitaryOptions(); $(this).dialog("close");},
-        Add: () => addUnitLine({name: "custom", rural: 0.2, urban: 0.5, crew: 1, type: "default"}),
+        Add: () => addUnitLine({name: "custom"+rand(1000), rural: .2, urban: .5, crew: 1, type: "default"}),
         Restore: restoreDefaultUnits,
         Cancel: function() {$(this).dialog("close");}
       }, open: function() {
@@ -215,11 +217,7 @@ function overviewMilitary() {
 
     function restoreDefaultUnits() {
       removeUnitLines();
-      [{name:"infantry", rural:.25, urban:.2, crew:1, type:"melee", separate:0},
-      {name:"archers", rural:.12, urban:.2, crew:1, type:"ranged", separate:0},
-      {name:"cavalry", rural:.12, urban:.03, crew:3, type:"mounted", separate:0},
-      {name:"artillery", rural:0, urban:.03, crew:8, type:"machinery", separate:0},
-      {name:"fleet", rural:0, urban:.015, crew:100, type:"naval", separate:1}].map(u => addUnitLine(u));
+      Military.getDefaultOptions().map(u => addUnitLine(u));
     }
 
     function applyMilitaryOptions() {
@@ -236,7 +234,7 @@ function overviewMilitary() {
   }
 
   function militaryRecalculate() {
-    alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?";
+    alertMessage.innerHTML = "Are you sure you want to recalculate military forces for all states?<br>Regiments for all states will be regenerated";
     $("#alert").dialog({resizable: false, title: "Remove regiment",
       buttons: {
         Recalculate: function() {

modules/ui/regiment-editor.js

@@ -1,12 +1,12 @@
 "use strict";
-function editRegiment() {
+function editRegiment(selector) {
   if (customization) return;
   closeDialogs(".stable");
-  // if (!layerIsOn("toggleArmies")) toggleArmies();
+  if (!layerIsOn("toggleMilitary")) toggleMilitary();
 
   armies.selectAll(":scope > g").classed("draggable", true);
   armies.selectAll(":scope > g > g").call(d3.drag().on("drag", dragRegiment));
-  elSelected = d3.event.target.parentElement; // select g element
+  elSelected = selector ? document.querySelector(selector) : d3.event.target.parentElement; // select g element
   if (!pack.states[elSelected.dataset.state]) return;
   if (!regiment()) return;
   updateRegimentData(regiment());

modules/ui/regiments-overview.js

@@ -2,9 +2,10 @@
 function overviewRegiments(state) {
   if (customization) return;
   closeDialogs(".stable");
+  if (!layerIsOn("toggleMilitary")) toggleMilitary();
 
   const body = document.getElementById("regimentsBody");
-  updateFilter();
+  updateFilter(state);
   addLines();
   $("#regimentsOverview").dialog();
 
@@ -13,21 +14,16 @@ function overviewRegiments(state) {
   updateHeaders();
 
   $("#regimentsOverview").dialog({
-    title: "Regiments Overview", resizable: false, width: fitContent(),
-    position: {my: "center", at: "center", of: "svg"}
+    title: "Military Overview", resizable: false, width: fitContent(),
+    position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
   });
 
   // add listeners
   document.getElementById("regimentsOverviewRefresh").addEventListener("click", addLines);
   document.getElementById("regimentsPercentage").addEventListener("click", togglePercentageMode);
-  document.getElementById("regimentsAddNew").addEventListener("click", toggleAddRegiment);
+  document.getElementById("regimentsAddNew").addEventListener("click", toggleAdd);
   document.getElementById("regimentsExport").addEventListener("click", downloadRegimentsData);
-  document.getElementById("regimentsFilter").addEventListener("change", filterRegiments);
-
-  body.addEventListener("click", function(ev) {
-    const el = ev.target, line = el.parentNode, state = +line.dataset.id;
-    //if (el.tagName === "SPAN") showRegimentList(state);
-  });
+  document.getElementById("regimentsFilter").addEventListener("change", addLines);
 
   // update military types in header and tooltips
   function updateHeaders() {
@@ -45,6 +41,7 @@ function overviewRegiments(state) {
 
   // add line for each state
   function addLines() {
+    const state = +regimentsFilter.value;
     body.innerHTML = "";
     let lines = "";
     const regiments = [];
@@ -64,7 +61,7 @@ function overviewRegiments(state) {
           <input data-tip="Regiment's name" style="width:13em" value="${r.name}" readonly>
           ${lineData}
           <div data-type="total" data-tip="Total military personnel (not considering crew)" style="font-weight: bold">${r.a}</div>
-          <span data-tip="Edit regiment" class="icon-pencil pointer"></span>
+          <span data-tip="Edit regiment" onclick="editRegiment('#regiment${s.i}-${r.i}')" class="icon-pencil pointer"></span>
         </div>`;
 
         regiments.push(r);
@@ -86,7 +83,7 @@ function overviewRegiments(state) {
     body.querySelectorAll("div.states").forEach(el => el.addEventListener("mouseleave", ev => regimentHighlightOff(ev)));
   }
 
-  function updateFilter() {
+  function updateFilter(state) {
     const filter = document.getElementById("regimentsFilter");
     filter.options.length = 0; // remove all options
     filter.options.add(new Option(`all`, -1, false, state === -1));
@@ -94,11 +91,6 @@ function overviewRegiments(state) {
     statesSorted.forEach(s => filter.options.add(new Option(s.name, s.i, false, s.i == state)));
   }
 
-  function filterRegiments() {
-    state = +this.value;
-    addLines();
-  }
-
   function regimentHighlightOn(event) {
     const state = +event.target.dataset.s;
     const id = +event.target.dataset.id;
@@ -128,7 +120,7 @@ function overviewRegiments(state) {
         el.querySelectorAll("div").forEach(function(div) {
           const type = div.dataset.type;
           if (type === "rate") return;
-          div.textContent = rn(+el.dataset[type] / total(type) * 100) + "%";
+          div.textContent = total(type) ? rn(+el.dataset[type] / total(type) * 100) + "%" : "0%";
         });
       });
     } else {
@@ -137,8 +129,35 @@ function overviewRegiments(state) {
     }
   }
 
-  function toggleAddRegiment() {
+  function toggleAdd() {
+    document.getElementById("regimentsAddNew").classList.toggle("pressed");
+    if (document.getElementById("regimentsAddNew").classList.contains("pressed")) {
+      viewbox.style("cursor", "crosshair").on("click", addRegimentOnClick);
+      tip("Click on map to create new regiment or fleet", true);
+      if (regimentAdd.offsetParent) regimentAdd.classList.add("pressed");
+    } else {
+      clearMainTip();
+      viewbox.on("click", clicked).style("cursor", "default");
+      addLines();
+      if (regimentAdd.offsetParent) regimentAdd.classList.remove("pressed");
+    }
+  }
 
+  function addRegimentOnClick() {
+    const state = +regimentsFilter.value;
+    if (state === -1) {tip("Please select state from the list", false, "error"); return;}
+
+    const point = d3.mouse(this);
+    const cell = findCell(point[0], point[1]);
+    const x = pack.cells.p[cell][0], y = pack.cells.p[cell][1];
+    const military = pack.states[state].military;
+    const i = military.length ? last(military).i + 1 : 0;
+    const n = +(pack.cells.h[cell] < 20); // naval or land
+    const reg = {a:0, cell, i, n, u:{}, x, y, icon:"🛡️"};
+    reg.name = Military.getName(reg, military);
+    military.push(reg);
+    Military.drawRegiment(reg, state);
+    toggleAdd();
   }
 
   function downloadRegimentsData() {

modules/ui/tools.js

@@ -64,6 +64,7 @@ function processFeatureRegeneration(event, button) {
   if (button === "regenerateStates") regenerateStates(); else
   if (button === "regenerateProvinces") regenerateProvinces(); else
   if (button === "regenerateReligions") regenerateReligions(); else
+  if (button === "regenerateMilitary") regenerateMilitary(); else
   if (button === "regenerateMarkers") regenerateMarkers(event); else
   if (button === "regenerateZones") regenerateZones(event);
 }
@@ -238,6 +239,12 @@ function regenerateReligions() {
   if (!layerIsOn("toggleReligions")) toggleReligions(); else drawReligions();
 }
 
+function regenerateMilitary() {
+  Military.generate();
+  if (!layerIsOn("toggleMilitary")) toggleMilitary();
+  if (document.getElementById("militaryOverviewRefresh").offsetParent) militaryOverviewRefresh.click();
+}
+
 function regenerateMarkers(event) {
   let number = gauss(1, .5, .3, 5, 2);