diff --git a/modules/io/load.js b/modules/io/load.js
index 8e05a798..69fc360c 100644
--- a/modules/io/load.js
+++ b/modules/io/load.js
@@ -458,7 +458,20 @@ async function parseLoadedData(data, mapVersion) {
if (isVisible(ruler)) turnOn("toggleRulers");
if (isVisible(scaleBar)) turnOn("toggleScaleBar");
if (isVisibleNode(byId("vignette"))) turnOn("toggleVignette");
-
+
+ window.uniquePictures = [];
+ window.iconReload = true;
+ $("#armies").each(function(id, armyGroup) {
+ $(armyGroup).children().each(function(aId, army){
+ $(army).children().each(function(rId, regiment){
+ if($(regiment).find(".regimentImage").length !== 0 && $(regiment).find(".regimentImage").attr('href')) {
+ let icon = $(regiment).find(".regimentImage").attr('href');
+ window.uniquePictures.push(icon);
+ }
+ });
+ });
+ });
+ window.uniquePictures = [...new Set(uniquePictures)];
getCurrentPreset();
}
diff --git a/modules/renderers/draw-military.js b/modules/renderers/draw-military.js
index 2a5614e3..bada7fa0 100644
--- a/modules/renderers/draw-military.js
+++ b/modules/renderers/draw-military.js
@@ -55,6 +55,13 @@ const drawRegiments = function (regiments, s) {
.attr("x", d => x(d) - size)
.attr("y", d => d.y)
.text(d => d.icon);
+ g.append("image")
+ .attr("class", "regimentImage")
+ .attr("x", d => x(d) - h)
+ .attr("y", d => y(d))
+ .attr("height", h)
+ .attr("width", h)
+ .text(d => d.image);
};
const drawRegiment = function (reg, stateId) {
@@ -96,6 +103,13 @@ const drawRegiment = function (reg, stateId) {
.attr("x", x1 - size)
.attr("y", reg.y)
.text(reg.icon);
+ g.append("image")
+ .attr("class", "regimentImage")
+ .attr("x", x1 - h)
+ .attr("y", y1)
+ .attr("height", h)
+ .attr("width", h)
+ .text(reg.image);
};
// move one regiment to another
@@ -122,5 +136,13 @@ const moveRegiment = function (reg, x, y) {
el.select(".regimentIcon")
.transition(move)
.attr("x", x1(x) - size)
- .attr("y", y);
+ .attr("y", y)
+ .attr("height", '6')
+ .attr("width", '6');
+ el.select(".regimentImage")
+ .transition(move)
+ .attr("x", x1(x) - h)
+ .attr("y", y1(y))
+ .attr("height", '6')
+ .attr("width", '6')
};
diff --git a/modules/ui/editors.js b/modules/ui/editors.js
index 752593dd..ab143395 100644
--- a/modules/ui/editors.js
+++ b/modules/ui/editors.js
@@ -960,6 +960,30 @@ function highlightElement(element, zoom) {
}
}
+$('#addImage').click(function(){
+ let icon = $('#imageInput').val();
+ addImage(icon);
+});
+
+function addImage(icon) {
+ let row = "";
+ let lastRowId = $('#iconTable').children('tbody').children('tr').length;
+ let lastRow = $('#iconTable').children('tbody').children('tr:last-child');
+ let countLastRow = lastRow.children().length;
+ if(icon.includes("http")) {
+ icon = '
';
+ const table = byId("iconTable");
+ if(countLastRow > 16) {
+ row = table.insertRow(lastRowId);
+ } else {
+ row = table.rows[lastRowId-1];
+ }
+
+ const cell = row.insertCell(lastRow % 17);
+ cell.innerHTML = icon;
+ }
+};
+
function selectIcon(initial, callback) {
if (!callback) return;
$("#iconSelector").dialog();
@@ -967,8 +991,11 @@ function selectIcon(initial, callback) {
const table = byId("iconTable");
const input = byId("iconInput");
input.value = initial;
-
- if (!table.innerHTML) {
+ if(window.iconReload) {
+ table.innerHTML = null;
+ window.iconReload = false;
+ }
+ if (!table.innerHTML.includes('⚔️')) {
const icons = [
"⚔️",
"🏹",
@@ -1156,26 +1183,40 @@ function selectIcon(initial, callback) {
"🍻",
"🍺",
"🍲",
- "🍷"
+ "🍷",
];
-
+ if(window.uniquePictures) { //if a load has been load, we might get already installed pictures list
+ window.uniquePictures.forEach((element) => icons.push(element));
+ }
let row = "";
for (let i = 0; i < icons.length; i++) {
+ if(icons[i].includes("http")) {
+ icons[i] = '
';
+ }
if (i % 17 === 0) row = table.insertRow((i / 17) | 0);
const cell = row.insertCell(i % 17);
cell.innerHTML = icons[i];
}
}
- input.oninput = e => callback(input.value);
+
table.onclick = e => {
- if (e.target.tagName === "TD") {
+ if (e.target.tagName === "TD" && e.target.textContent) {
input.value = e.target.textContent;
- callback(input.value);
}
+ if (e.target.tagName === "IMG" && e.target.src) {
+ input.value = e.target.src;
+ }
+ input.oninput = e => callback(input.value);
+ callback(input.value || "⠀");
};
table.onmouseover = e => {
- if (e.target.tagName === "TD") tip(`Click to select ${e.target.textContent} icon`);
+ if (e.target.tagName === "TD" && e.target.textContent) {
+ tip(`Click to select ${e.target.textContent} icon`);
+ }
+ if (e.target.tagName === "IMG" && e.target.src) {
+ tip(`Click to select ${e.target.src} icon`);
+ }
};
$("#iconSelector").dialog({
diff --git a/modules/ui/regiment-editor.js b/modules/ui/regiment-editor.js
index 707aff2b..fc286eca 100644
--- a/modules/ui/regiment-editor.js
+++ b/modules/ui/regiment-editor.js
@@ -45,7 +45,11 @@ function editRegiment(selector) {
function updateRegimentData(regiment) {
document.getElementById("regimentType").className = regiment.n ? "icon-anchor" : "icon-users";
document.getElementById("regimentName").value = regiment.name;
- document.getElementById("regimentEmblem").value = regiment.icon;
+ if(regiment.image) {
+ document.getElementById("regimentEmblem").value = regiment.image;
+ } else {
+ document.getElementById("regimentEmblem").value = regiment.icon;
+ }
const composition = document.getElementById("regimentComposition");
composition.innerHTML = options.military
@@ -132,6 +136,7 @@ function editRegiment(selector) {
const baseRect = elSelected.querySelectorAll("rect")[0];
const iconRect = elSelected.querySelectorAll("rect")[1];
const icon = elSelected.querySelector(".regimentIcon");
+ const image = elSelected.querySelector(".regimentIcon");
const x = reg.n ? reg.x - size * 2 : reg.x - size * 3;
baseRect.setAttribute("x", x);
baseRect.setAttribute("width", reg.n ? size * 4 : size * 6);
@@ -160,7 +165,13 @@ function editRegiment(selector) {
function changeEmblem() {
const emblem = document.getElementById("regimentEmblem").value;
- getRegiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
+ if(emblem.includes("http")) {
+ elSelected.querySelector(".regimentImage").setAttribute("href", emblem);
+ getRegiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = "";
+ } else {
+ getRegiment().icon = elSelected.querySelector(".regimentIcon").innerHTML = emblem;
+ elSelected.querySelector(".regimentImage").setAttribute("href", "");
+ }
}
function changeUnit() {
@@ -213,7 +224,7 @@ function editRegiment(selector) {
bx: reg.bx,
by: reg.by,
state,
- icon: reg.icon
+ icon: reg.icon,
};
newReg.name = Military.getName(newReg, military);
military.push(newReg);
@@ -427,6 +438,7 @@ function editRegiment(selector) {
const text = this.querySelector("text");
const iconRect = this.querySelectorAll("rect")[1];
const icon = this.querySelector(".regimentIcon");
+ const image = this.querySelector(".regimentImage");
const self = elSelected === this;
const baseLine = viewbox.select("g#regimentBase > line");
@@ -448,7 +460,9 @@ function editRegiment(selector) {
iconRect.setAttribute("y", y1);
icon.setAttribute("x", x1 - size);
icon.setAttribute("y", y);
- if (self) {
+ image.setAttribute("x", x1 - h);
+ image.setAttribute("y", y1);
+ if (self) {;
baseLine.attr("x2", x).attr("y2", y);
rotationControl
.attr("cx", x1 + w)
diff --git a/picList.txt b/picList.txt
new file mode 100644
index 00000000..d565f0bb
--- /dev/null
+++ b/picList.txt
@@ -0,0 +1,3 @@
+https://i.ibb.co/C2QDP8G/artillery.png
+https://i.ibb.co/DVHWLfB/soldier.png
+https://i.ibb.co/yQ713ck/tank.png
\ No newline at end of file