refactor: drawMilitary

modules/military-generator.js

@@ -2,7 +2,7 @@
 
 window.Military = (function () {
   const generate = function () {
-    TIME && console.time("generateMilitaryForces");
+    TIME && console.time("generateMilitary");
     const {cells, states} = pack;
     const {p} = cells;
     const valid = states.filter(s => s.i && !s.removed); // valid states
@@ -252,8 +252,6 @@ window.Military = (function () {
       delete s.temp; // do not store temp data
     });
 
-    redraw();
-
     function createRegiments(nodes, s) {
       if (!nodes.length) return [];
 
@@ -312,19 +310,9 @@ window.Military = (function () {
       return regiments;
     }
 
-    TIME && console.timeEnd("generateMilitaryForces");
+    TIME && console.timeEnd("generateMilitary");
   };
 
-  function redraw() {
-    const validStates = pack.states.filter(s => s.i && !s.removed);
-    armies.selectAll("g > g").each(function () {
-      const index = notes.findIndex(n => n.id === this.id);
-      if (index != -1) notes.splice(index, 1);
-    });
-    armies.selectAll("g").remove();
-    validStates.forEach(s => drawRegiments(s.military, s.i));
-  }
-
   const getDefaultOptions = function () {
     return [
       {icon: "⚔️", name: "infantry", rural: 0.25, urban: 0.2, crew: 1, power: 1, type: "melee", separate: 0},
@@ -335,122 +323,6 @@ window.Military = (function () {
     ];
   };
 
-  const drawRegiments = function (regiments, s) {
-    const size = +armies.attr("box-size");
-    const w = d => (d.n ? size * 4 : size * 6);
-    const h = size * 2;
-    const x = d => rn(d.x - w(d) / 2, 2);
-    const y = d => rn(d.y - size, 2);
-
-    const baseColor = pack.states[s].color[0] === "#" ? pack.states[s].color : "#999";
-    const darkerColor = d3.color(baseColor).darker().hex();
-    const army = armies
-      .append("g")
-      .attr("id", "army" + s)
-      .attr("fill", baseColor)
-      .attr("color", darkerColor);
-
-    const g = army
-      .selectAll("g")
-      .data(regiments)
-      .enter()
-      .append("g")
-      .attr("id", d => "regiment" + s + "-" + d.i)
-      .attr("data-name", d => d.name)
-      .attr("data-state", s)
-      .attr("data-id", d => d.i)
-      .attr("transform", d => (d.angle ? `rotate(${d.angle})` : null))
-      .attr("transform-origin", d => `${d.x}px ${d.y}px`);
-    g.append("rect")
-      .attr("x", d => x(d))
-      .attr("y", d => y(d))
-      .attr("width", d => w(d))
-      .attr("height", h);
-    g.append("text")
-      .attr("x", d => d.x)
-      .attr("y", d => d.y)
-      .text(d => getTotal(d));
-    g.append("rect")
-      .attr("fill", "currentColor")
-      .attr("x", d => x(d) - h)
-      .attr("y", d => y(d))
-      .attr("width", h)
-      .attr("height", h);
-    g.append("text")
-      .attr("class", "regimentIcon")
-      .attr("x", d => x(d) - size)
-      .attr("y", d => d.y)
-      .text(d => d.icon);
-  };
-
-  const drawRegiment = function (reg, stateId) {
-    const size = +armies.attr("box-size");
-    const w = reg.n ? size * 4 : size * 6;
-    const h = size * 2;
-    const x1 = rn(reg.x - w / 2, 2);
-    const y1 = rn(reg.y - size, 2);
-
-    let army = armies.select("g#army" + stateId);
-    if (!army.size()) {
-      const baseColor = pack.states[stateId].color[0] === "#" ? pack.states[stateId].color : "#999";
-      const darkerColor = d3.color(baseColor).darker().hex();
-      army = armies
-        .append("g")
-        .attr("id", "army" + stateId)
-        .attr("fill", baseColor)
-        .attr("color", darkerColor);
-    }
-
-    const g = army
-      .append("g")
-      .attr("id", "regiment" + stateId + "-" + reg.i)
-      .attr("data-name", reg.name)
-      .attr("data-state", stateId)
-      .attr("data-id", reg.i)
-      .attr("transform", `rotate(${reg.angle || 0})`)
-      .attr("transform-origin", `${reg.x}px ${reg.y}px`);
-    g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h);
-    g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg));
-    g.append("rect")
-      .attr("fill", "currentColor")
-      .attr("x", x1 - h)
-      .attr("y", y1)
-      .attr("width", h)
-      .attr("height", h);
-    g.append("text")
-      .attr("class", "regimentIcon")
-      .attr("x", x1 - size)
-      .attr("y", reg.y)
-      .text(reg.icon);
-  };
-
-  // move one regiment to another
-  const moveRegiment = function (reg, x, y) {
-    const el = armies.select("g#army" + reg.state).select("g#regiment" + reg.state + "-" + reg.i);
-    if (!el.size()) return;
-
-    const duration = Math.hypot(reg.x - x, reg.y - y) * 8;
-    reg.x = x;
-    reg.y = y;
-    const size = +armies.attr("box-size");
-    const w = reg.n ? size * 4 : size * 6;
-    const h = size * 2;
-    const x1 = x => rn(x - w / 2, 2);
-    const y1 = y => rn(y - size, 2);
-
-    const move = d3.transition().duration(duration).ease(d3.easeSinInOut);
-    el.select("rect").transition(move).attr("x", x1(x)).attr("y", y1(y));
-    el.select("text").transition(move).attr("x", x).attr("y", y);
-    el.selectAll("rect:nth-of-type(2)")
-      .transition(move)
-      .attr("x", x1(x) - h)
-      .attr("y", y1(y));
-    el.select(".regimentIcon")
-      .transition(move)
-      .attr("x", x1(x) - size)
-      .attr("y", y);
-  };
-
   // utilize si function to make regiment total text fit regiment box
   const getTotal = reg => (reg.a > (reg.n ? 999 : 99999) ? si(reg.a) : reg.a);
 
@@ -513,13 +385,9 @@ window.Military = (function () {
 
   return {
     generate,
-    redraw,
     getDefaultOptions,
     getName,
     generateNote,
-    drawRegiments,
-    drawRegiment,
-    moveRegiment,
     getTotal,
     getEmblem
   };