v1.4.05

modules/ui/battle-screen.js

@@ -19,13 +19,13 @@ function showBattleScreen(attacker, defender) {
   modules.showBattleScreen = true;
 
   // add listeners
-  //document.getElementById("regimentNameRestore").addEventListener("click", restoreName);
+  document.getElementById("battleAddRegiment").addEventListener("click", addSide);
 
   function addHeaders() {
     document.getElementById("battleScreen").querySelectorAll("th").forEach(el => el.remove());
     const attackers = battleAttackers.querySelector("tr");
     const defenders = battleDefenders.querySelector("tr");
-    let headers = "<th></th>";
+    let headers = "<th></th><th></th>";
 
     for (const u of options.military) {
       const label = capitalize(u.name.replace(/_/g, ' '));
@@ -38,12 +38,55 @@ function showBattleScreen(attacker, defender) {
   }
 
   function addRegiment(div, regiment) {
-    let line = `<tr><th>${regiment.name}</th>`;
+    const state = ra(pack.states), supply = rand(1000) + " " + distanceUnitInput.value;
+    const color = state.color[0] === "#" ? state.color : "#999";
+    const icon = `<svg width="1.4em" height="1.4em" style="margin-bottom: -.6em;">
+      <rect x="0" y="0" width="100%" height="100%" fill="${color}" class="fillRect"></rect>
+      <text x="0" y="1.04em" style="">${regiment.icon}</text></svg>`;
+    const body = `<tbody id="battle${state.i}-${regiment.i}">`;
+
+    let initial = `<tr class="battleInitial"><td>${icon}</td><td class="regiment">${regiment.name.slice(0,25)}</td>`;
+    let casualties = `<tr class="battleCasualties"><td></td><td>${state.fullName}</td>`;
+    let survivors = `<tr class="battleSurvivors"><td></td><td>Supply line length: ${supply}</td>`;
+
     for (const u of options.military) {
-      line += `<th>${regiment.u[u.name]||0}</th>`;
+      initial += `<td style="width: 2.5em; text-align: center">${regiment.u[u.name]||0}</td>`;
+      casualties += `<td style="width: 2.5em; text-align: center; color: red">0</td>`;
+      survivors += `<td style="width: 2.5em; text-align: center; color: green">${regiment.u[u.name]||0}</td>`;
+    }
+
+    initial += `<td style="width: 2.5em; text-align: center">${regiment.a||0}</td></tr>`;
+    casualties += `<td style="width: 2.5em; text-align: center; color: red">0</td></tr>`;
+    survivors += `<td style="width: 2.5em; text-align: center; color: green">${regiment.a||0}</td></tr>`;
+
+    div.innerHTML += body + initial + casualties + survivors + "</tbody>";
+  }
+
+  function addSide() {
+    const states = pack.states.filter(s => s.i && !s.removed);
+    const stateOptions = states.map(s => `<option value=${s.i}>${s.fullName}</option>`).join("");
+    const regiments = states[0].military.map(r => `<option value=${r.i}>${r.icon} ${r.name} (${r.a})</option>`).join("");
+    alertMessage.innerHTML = `<select id="addSideSide" data-tip="Select side"><option>Attackers</option><option>Defenders</option></select>
+      <select id="addSideState" data-tip="Select state">${stateOptions}</select><br>
+      <select id="addSideRegiment" data-tip="Select regiment">${regiments}</select>`;
+    $("#alert").dialog({resizable: false, title: "Add regiment to the battle",
+      buttons: {
+        Add: function() {
+          $(this).dialog("close");
+          const div = document.getElementById("addSideSide").selectedIndex ? battleDefenders : battleAttackers;
+          const state = pack.states.find(s => s.i == document.getElementById("addSideState").value);
+          const regiment = state.military.find(r => r.i == document.getElementById("addSideRegiment").value);
+          addRegiment(div, regiment);
+        },
+        Cancel: function() {$(this).dialog("close");}
+      }
+    });
+
+    document.getElementById("addSideState").onchange = function () {
+      const state = pack.states.find(s => s.i == this.value);
+      const regiments = state.military.map(r => `<option value=${r.i}>${r.icon} ${r.name} (${r.a})</option>`).join("");
+      document.getElementById("addSideRegiment").innerHTML = regiments;
     }
-    line += `<th>${regiment.a||0}</th></tr>`;
-    div.querySelector("tbody").insertAdjacentHTML("beforebegin", line);
   }
 
   function closeBattleScreen() {

modules/ui/elevation-profile.js

@@ -1,5 +1,4 @@
 "use strict";
-
 function showEPForRoute(node) {
   const points = [];
   debug.select("#controlPoints").selectAll("circle").each(function() {
@@ -34,7 +33,7 @@ function showElevationProfile(data, routeLen, isRiver) {
     position: {my: "left top", at: "left+20 bottom-240", of: window, collision: "fit"}
   });
 
-  // Azgaar asked if we can prevent river graphs from showing rivers as flowing uphill
+  // prevent river graphs from showing rivers as flowing uphill
   var slope = 0;
   if (isRiver) {
     if (pack.cells.h[data[0]] < pack.cells.h[data[data.length-1]]) {
@@ -73,10 +72,6 @@ function showElevationProfile(data, routeLen, isRiver) {
     j++;
   }
 
-  const heightDiff = ma-mi+1;
-
-
-//  const w = document.getElementById("elevationProfile").clientWidth - 32;
   const w = window.innerWidth-280;
   h = 100;
 
@@ -88,10 +83,7 @@ function showElevationProfile(data, routeLen, isRiver) {
   chart.append("defs").append("marker").attr("id", "arrowhead").attr("orient", "auto").attr("markerWidth", "2").attr("markerHeight", "4").attr("refX", "0.1").attr("refY", "2").append("path").attr("d", "M0,0 V4 L2,2 Z");
 
   // main graph line
-  var lineFunc = d3.line()
-    .x(function(d) { return d.x * w / points.length + xOffset})
-    .y(function(d) { return h-d.y + yOffset });
-
+  var lineFunc = d3.line().x(d => d.x * w / points.length + xOffset).y(d => h-d.y + yOffset);
   chart.append("path").attr("d", lineFunc(points)).attr("stroke", "purple").attr("fill", "none").attr("id", "elevationLine");
 
   // y-axis labels for starting and ending heights

modules/ui/regiment-editor.js

@@ -215,7 +215,7 @@ function editRegiment(selector) {
       .style("dominant-baseline", "central").style("text-anchor", "middle")
       .transition(attack).attr("font-size", 1000).attr("opacity", 0).remove();
 
-    tip("", false);
+    clearMainTip();
     $("#regimentEditor").dialog("close");
   }