v1.4.01

modules/ui/regiment-editor.js

@@ -14,8 +14,7 @@ function editRegiment(selector) {
 
   $("#regimentEditor").dialog({
     title: "Edit Regiment", resizable: false, close: closeEditor,
-    position: {my: "left top", at: "left+10 top+10", of: "#map"},
-    close: closeEditor
+    position: {my: "left top", at: "left+10 top+10", of: "#map"}
   });
 
   if (modules.editRegiment) return;
@@ -27,6 +26,7 @@ function editRegiment(selector) {
   document.getElementById("regimentName").addEventListener("change", changeName);
   document.getElementById("regimentEmblem").addEventListener("input", changeEmblem);
   document.getElementById("regimentEmblemSelect").addEventListener("click", selectEmblem);
+  document.getElementById("regimentAttack").addEventListener("click", toggleAttack);
   document.getElementById("regimentRegenerateLegend").addEventListener("click", regenerateLegend);
   document.getElementById("regimentLegend").addEventListener("click", editLegend);
   document.getElementById("regimentSplit").addEventListener("click", splitRegiment);
@@ -92,50 +92,15 @@ function editRegiment(selector) {
     elSelected.dataset.name = reg.name = document.getElementById("regimentName").value = name;
   }
 
+  function selectEmblem() {
+    selectIcon(regimentEmblem.value, v => {regimentEmblem.value = v; changeEmblem()});
+  }
+
   function changeEmblem() {
     const emblem = document.getElementById("regimentEmblem").value;
     regiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
   }
 
-  function selectEmblem() {
-    const emblems = ["⚔️","🏹","🐴","💣","🌊","🎯","⚓","🔮","📯","🛡️","👑",
-      "☠️","🎆","🗡️","⛏️","🔥","🐾","🎪","🏰","⚜️","⛓️","❤️","📜","🔱","🌈","🌠","💥","☀️","🍀",
-      "🔰","🕸️","⚗️","☣️","☢️","🎖️","⚕️","☸️","✡️","🚩","🏳️","🏴","🌈","💪","✊","👊","🤜","🤝","🙏","🧙","💂","🤴","🧛","🧟","🧞","🧝",
-      "🦄","🐲","🐉","🐎","🦓","🐺","🦊","🐱","🐈","🦁","🐯","🐅","🐆","🐕","🦌","🐵","🐒","🦍",
-      "🦅","🕊️","🐓","🦇","🐦","🦉","🐮","🐄","🐂","🐃","🐷","🐖","🐗","🐏","🐑","🐐","🐫","🦒","🐘","🦏",
-      "🐭","🐁","🐀","🐹","🐰","🐇","🦔","🐸","🐊","🐢","🦎","🐍","🐳","🐬","🦈","🐙","🦑","🐌","🦋","🐜","🐝","🐞","🦗","🕷️","🦂","🦀"];
-
-    alertMessage.innerHTML = "";
-    const container = document.createElement("div");
-    container.style.userSelect = "none";
-    container.style.cursor = "pointer";
-    container.style.fontSize = "2em";
-    container.style.width = "47vw";
-    container.innerHTML = emblems.map(i => `<span>${i}</span>`).join("");
-    container.addEventListener("mouseover", e => showTip(e), false);
-    container.addEventListener("click", e => clickEmblem(e), false);
-    alertMessage.appendChild(container);
-
-    $("#alert").dialog({
-      resizable: false, width: fitContent(), title: "Select emblem",
-      buttons: {
-        Emojipedia: function() {openURL("https://emojipedia.org/");},
-        Close: function() {$(this).dialog("close");}
-    }
-    });
-
-    function showTip(e) {
-      if (e.target.tagName !== "SPAN") return;
-      tip(`Click to select ${e.target.innerHTML} emblem`);
-    }
-
-    function clickEmblem(e) {
-      if (e.target.tagName !== "SPAN") return;
-      document.getElementById("regimentEmblem").value = e.target.innerHTML;
-      changeEmblem();
-    }
-  }
-
   function changeUnit() {
     const u = this.dataset.u;
     const reg = regiment();
@@ -200,6 +165,60 @@ function editRegiment(selector) {
     toggleAdd();
   }
 
+  function toggleAttack() {
+    document.getElementById("regimentAttack").classList.toggle("pressed");
+    if (document.getElementById("regimentAttack").classList.contains("pressed")) {
+      viewbox.style("cursor", "crosshair").on("click", attackRegimentOnClick);
+      tip("Click on another regiment to initiate battle", true);
+      armies.selectAll(":scope > g").classed("draggable", false);
+    } else {
+      clearMainTip();
+      armies.selectAll(":scope > g").classed("draggable", true);
+      viewbox.on("click", clicked).style("cursor", "default");
+    }
+  }
+
+  function attackRegimentOnClick() {
+    const target = d3.event.target, regSelected = target.parentElement, army = regSelected.parentElement;
+    const oldState = +elSelected.dataset.state, newState = +regSelected.dataset.state;
+
+    if (army.parentElement.id !== "armies") {tip("Please click on a regiment to attack", false, "error"); return;}
+    if (regSelected === elSelected) {tip("Regiment cannot attack itself", false, "error"); return;}
+    if (oldState === newState) {tip("Cannot attack fraternal regiment", false, "error"); return;}
+
+    const attacker = regiment();
+    const defender = pack.states[regSelected.dataset.state].military.find(r => r.i == regSelected.dataset.id);
+    if (!attacker.a || !defender.a) {tip("Regiment has no troops to battle", false, "error"); return;}
+
+    // move attacked to defender
+    const duration = Math.hypot(attacker.x - defender.x, attacker.y - defender.y) * 6;
+    const x = attacker.x = defender.x;
+    const y = attacker.y = defender.y + 8;
+
+    const size = +armies.attr("box-size");
+    const w = attacker.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);
+    const attack = d3.transition().delay(duration).duration(800).ease(d3.easeSinInOut).on("end", () => showBattleScreen(attacker, defender));
+
+    d3.select(elSelected.querySelector("rect")).transition(move).attr("x", x1(x)).attr("y", y1(y));
+    d3.select(elSelected.querySelector("text")).transition(move).attr("x", x).attr("y", y);
+    d3.select(elSelected.querySelectorAll("rect")[1]).transition(move).attr("x", x1(x)-h).attr("y", y1(y));
+    d3.select(elSelected.querySelector(".regimentIcon")).transition(move).attr("x", x1(x)-size).attr("y", y);
+
+    // battle icon
+    svg.append("text").attr("x", window.innerWidth/2).attr("y", window.innerHeight/2)
+      .text("⚔️").attr("font-size", 0).attr("opacity", 1)
+      .style("dominant-baseline", "central").style("text-anchor", "middle")
+      .transition(attack).attr("font-size", 1000).attr("opacity", 0).remove();
+
+    tip("", false);
+    $("#regimentEditor").dialog("close");
+  }
+
   function toggleAttach() {
     document.getElementById("regimentAttach").classList.toggle("pressed");
     if (document.getElementById("regimentAttach").classList.contains("pressed")) {
@@ -289,7 +308,7 @@ function editRegiment(selector) {
     const x1 = x => rn(x - w / 2, 2);
     const y1 = y => rn(y - size, 2);
 
-    const baseRect = this.querySelectorAll("rect")[0];
+    const baseRect = this.querySelector("rect");
     const text = this.querySelector("text");
     const iconRect = this.querySelectorAll("rect")[1];
     const icon = this.querySelector(".regimentIcon");
@@ -330,6 +349,7 @@ function editRegiment(selector) {
     armies.selectAll("g>g").call(d3.drag().on("drag", null));
     viewbox.selectAll("g#regimentBase").remove();
     document.getElementById("regimentAdd").classList.remove("pressed");
+    document.getElementById("regimentAttack").classList.remove("pressed");
     document.getElementById("regimentAttach").classList.remove("pressed");
     restoreDefaultEvents();
     elSelected = null;