From 9300e624ab8607ce0d0b9a5cfe37c1847d1059b7 Mon Sep 17 00:00:00 2001
From: Texas <matthieuribotto@gmail.com>
Date: Thu, 16 Jan 2025 00:03:26 +0100
Subject: [PATCH] forms and ajustements

---
 index.css                          |  5 +++
 index.html                         |  7 +++-
 modules/io/load.js                 | 15 +++++++-
 modules/renderers/draw-military.js | 24 ++++++++++++-
 modules/ui/editors.js              | 57 +++++++++++++++++++++++++-----
 modules/ui/regiment-editor.js      | 22 +++++++++---
 picList.txt                        |  3 ++
 7 files changed, 118 insertions(+), 15 deletions(-)
 create mode 100644 picList.txt

diff --git a/index.css b/index.css
index 0244eb23..c9e9ecea 100644
--- a/index.css
+++ b/index.css
@@ -186,6 +186,11 @@ t,
   font-size: 0.8em;
 }
 
+.regimentImage {
+  object-fit: contain;
+  width: 6px !important;
+}
+
 #statesHalo {
   fill: none;
   stroke-linecap: round;
diff --git a/index.html b/index.html
index 9d8c9538..ef8297f8 100644
--- a/index.html
+++ b/index.html
@@ -5773,9 +5773,14 @@
         <table id="iconTable" class="table pointer" style="font-size: 2em; text-align: center; width: 100%"></table>
         <div style="font-style: italic; font-size: 1.2em; margin: 0.4em 0 0 0.4em">
           <span>Select from the list or paste a Unicode character here: </span>
-          <input id="iconInput" style="width: 2.5em" />
+          <input id="iconInput" style="width: 2.5em"/>
           <span>. See <a href="https://emojipedia.org" target="_blank">Emojipedia</a> for reference</span>
         </div>
+        <span>
+          <span>You can past a regiment picture link here: </span>
+          <input id="imageInput" style="width: 12em" />
+          <button id="addImage" type="button" class="ui-button ui-corner-all ui-widget">Add</button>
+        </span>
       </div>
 
       <div id="submapTool" style="display: none" class="dialog">
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..d7b7a1c9 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", '6')
+    .attr("width", '6')
+    .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", '6')
+    .attr("width", '6')
+    .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 = '<img height="46" width="46" src="'+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] = '<img height="46" width="46" src="'+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