From 6af5df0322234104e67664dc54ca4a0581bc7fbe Mon Sep 17 00:00:00 2001 From: Azgaar Date: Sun, 29 Mar 2020 15:11:14 +0300 Subject: [PATCH] v1.3.09a --- modules/military-generator.js | 12 ++--- modules/ui/regiment-editor.js | 78 ++++++++++++++++++-------------- modules/ui/regiments-overview.js | 2 +- 3 files changed, 51 insertions(+), 41 deletions(-) diff --git a/modules/military-generator.js b/modules/military-generator.js index c738624b..fe6eb128 100644 --- a/modules/military-generator.js +++ b/modules/military-generator.js @@ -181,7 +181,7 @@ const regiments = nodes.filter(n => n.t).sort((a,b) => b.t - a.t).map((r, i) => { const u = {}; u[r.u] = r.a; (r.childen||[]).forEach(n => u[n.u] = u[n.u] ? u[n.u] += n.a : n.a); - return {i, a:r.t, cell:r.cell, x:r.x, y:r.y, u, n:r.n, name}; + return {i, a:r.t, cell:r.cell, x:r.x, y:r.y, bx:r.x, by:r.y, u, n:r.n, name}; }); // generate name for regiments @@ -226,21 +226,21 @@ 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, s, x = reg.x, y = reg.y) { + const drawRegiment = function(reg, s) { const size = +armies.attr("box-size"); const w = reg.n ? size * 4 : size * 6; const h = size * 2; - const x1 = rn(x - w / 2, 2); - const y1 = rn(y - size, 2); + const x1 = rn(reg.x - w / 2, 2); + const y1 = rn(reg.y - size, 2); const army = armies.select("g#army"+s); const darkerColor = d3.color(army.attr("fill")).darker().hex(); const g = army.append("g").attr("id", "regiment"+s+"-"+reg.i).attr("data-name", reg.name).attr("data-state", s).attr("data-id", reg.i); g.append("rect").attr("x", x1).attr("y", y1).attr("width", w).attr("height", h); - g.append("text").attr("x", x).attr("y", y).text(getTotal(reg)); + g.append("text").attr("x", reg.x).attr("y", reg.y).text(getTotal(reg)); g.append("rect").attr("fill", darkerColor).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", y).text(reg.icon); + g.append("text").attr("class", "regimentIcon").attr("x", x1-size).attr("y", reg.y).text(reg.icon); } // utilize si function to make regiment total text fit regiment box diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js index b1339203..01b5f6a9 100644 --- a/modules/ui/regiment-editor.js +++ b/modules/ui/regiment-editor.js @@ -57,17 +57,12 @@ function editRegiment(selector) { function drawBase() { const reg = regiment(); - const tr = parseTransform(elSelected.getAttribute("transform")); - const tx = +tr[0], ty = +tr[1]; - const x2 = +elSelected.querySelector("text").getAttribute("x"), y2 = +elSelected.querySelector("text").getAttribute("y"); - const clr = pack.states[elSelected.dataset.state].color; - const base = viewbox.insert("g", "g#armies").attr("id", "regimentBase") - .attr("stroke-width", .3).attr("stroke", "#000").attr("cursor", "move"); - base.on("mouseenter", d => {tip("Regiment base. Drag to re-base the regiment", true);}).on("mouseleave", d => {tip('', true);}); + const base = viewbox.insert("g", "g#armies").attr("id", "regimentBase").attr("stroke-width", .3).attr("stroke", "#000").attr("cursor", "move"); + base.on("mouseenter", () => {tip("Regiment base. Drag to re-base the regiment", true);}).on("mouseleave", () => {tip('', true);}); - base.append("line").attr("x1", reg.x).attr("y1", reg.y).attr("x2", x2+tx).attr("y2", y2+ty).attr("class", "dragLine"); - base.append("circle").attr("cx", reg.x).attr("cy", reg.y).attr("r", 2).attr("fill", clr).call(d3.drag().on("drag", dragBase)); + base.append("line").attr("x1", reg.bx).attr("y1", reg.by).attr("x2", reg.x).attr("y2", reg.y).attr("class", "dragLine"); + base.append("circle").attr("cx", reg.bx).attr("cy", reg.by).attr("r", 2).attr("fill", clr).call(d3.drag().on("drag", dragBase)); } function changeType() { @@ -147,6 +142,8 @@ function editRegiment(selector) { function splitRegiment() { const reg = regiment(), u1 = reg.u; + if (reg.a < 2) return; // nothing to split + const state = elSelected.dataset.state, military = pack.states[state].military; const i = last(military).i + 1, u2 = Object.assign({}, u1); // u clone @@ -155,16 +152,19 @@ function editRegiment(selector) { reg.a = d3.sum(Object.values(u1)); // old reg total const a = d3.sum(Object.values(u2)); // new reg total - const newReg = {a, cell:reg.cell, i, n:reg.n, u:u2, x:reg.x, y:reg.y, icon: reg.icon}; + // update old regiment + regimentComposition.querySelectorAll("input").forEach(el => el.value = reg.u[el.dataset.u]||0); + elSelected.querySelector("text").innerHTML = Military.getTotal(reg); + + // create new regiment + const shift = +armies.attr("box-size") * 2; + const y = function(x, y) {do {y+=shift} while (military.find(r => r.x === x && r.y === y)); return y;} + const newReg = {a, cell:reg.cell, i, n:reg.n, u:u2, x:reg.x, y:y(reg.x, reg.y), bx:reg.bx, by:reg.by, icon: reg.icon}; newReg.name = Military.getName(newReg, military); military.push(newReg); - - elSelected.remove(); // undraw old reg - Military.drawRegiment(reg, state, reg.x, reg.y-6); // draw old reg above - Military.drawRegiment(newReg, state, reg.x, reg.y+6); // draw new reg below + Military.drawRegiment(newReg, state); // draw new reg below if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click(); - $("#regimentEditor").dialog("close"); } function toggleAdd() { @@ -185,7 +185,7 @@ function editRegiment(selector) { const state = elSelected.dataset.state, 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:"🛡️"}; + const reg = {a:0, cell, i, n, u:{}, x, y, bx:x, by:y, icon:"🛡️"}; reg.name = Military.getName(reg, military); military.push(reg); Military.drawRegiment(reg, state); @@ -212,7 +212,6 @@ function editRegiment(selector) { if (army.parentElement.id !== "armies") {tip("Please click on a regiment", false, "error"); return;} if (regSelected === elSelected) {tip("Cannot attach regiment to itself. Please click on another regiment", false, "error"); return;} - //if (army !== elSelected.parentElement) {tip("Cannot attach to a regiment of other state", false, "error"); return;}; const reg = regiment(); // reg to be attached const sel = pack.states[newState].military.find(r => r.i == regSelected.dataset.id); // reg to attach to @@ -233,6 +232,7 @@ function editRegiment(selector) { if (regimentsOverviewRefresh.offsetParent) regimentsOverviewRefresh.click(); $("#regimentEditor").dialog("close"); + editRegiment("#"+regSelected.id); } function regenerateLegend() { @@ -272,40 +272,50 @@ function editRegiment(selector) { } function dragRegiment() { - const tr = parseTransform(this.getAttribute("transform")); - const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y; d3.select(this).raise(); d3.select(this.parentNode).raise(); + const reg = pack.states[this.dataset.state].military.find(r => r.i == this.dataset.id); + 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 baseRect = this.querySelectorAll("rect")[0]; + const text = this.querySelector("text"); + const iconRect = this.querySelectorAll("rect")[1]; + const icon = this.querySelector(".regimentIcon"); + const self = elSelected === this; const baseLine = viewbox.select("g#regimentBase > line"); - const text = elSelected.querySelector("text"); - const x2 = +text.getAttribute("x"), y2 = +text.getAttribute("y"); d3.event.on("drag", function() { - const x = dx + d3.event.x, y = dy + d3.event.y; - this.setAttribute("transform", `translate(${(x)},${(y)})`); - if (self) baseLine.attr("x2", x2+x).attr("y2", y2+y); + const x = reg.x = d3.event.x, y = reg.y = d3.event.y; + + baseRect.setAttribute("x", x1(x)); + baseRect.setAttribute("y", y1(y)); + text.setAttribute("x", x); + text.setAttribute("y", y); + iconRect.setAttribute("x", x1(x)-h); + iconRect.setAttribute("y", y1(y)); + icon.setAttribute("x", x1(x)-size); + icon.setAttribute("y", y); + if (self) baseLine.attr("x2", x).attr("y2", y); }); } function dragBase() { - const tr = parseTransform(this.getAttribute("transform")); - const dx = +tr[0] - d3.event.x, dy = +tr[1] - d3.event.y; const baseLine = viewbox.select("g#regimentBase > line"); + const reg = regiment(); d3.event.on("drag", function() { - const x = dx + d3.event.x, y = dy + d3.event.y; - this.setAttribute("transform", `translate(${(x)},${(y)})`); + this.setAttribute("cx", d3.event.x); + this.setAttribute("cy", d3.event.y); baseLine.attr("x1", d3.event.x).attr("y1", d3.event.y); }); - d3.event.on("end", function() { - const reg = regiment(); - const x = d3.event.x, y = d3.event.y, cell = findCell(x, y); - reg.cell = cell, reg.x = x, reg.y = y; - - }); + d3.event.on("end", function() {reg.bx = d3.event.x; reg.by = d3.event.y;}); } function closeEditor() { diff --git a/modules/ui/regiments-overview.js b/modules/ui/regiments-overview.js index 40cba370..7878bb73 100644 --- a/modules/ui/regiments-overview.js +++ b/modules/ui/regiments-overview.js @@ -153,7 +153,7 @@ function overviewRegiments(state) { 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:"🛡️"}; + const reg = {a:0, cell, i, n, u:{}, x, y, bx:x, by:y, icon:"🛡️"}; reg.name = Military.getName(reg, military); military.push(reg); Military.drawRegiment(reg, state);