mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-16 17:31:24 +01:00
custom pictures for regiments (#1183)
* forms and ajustements * variable size for style as requested
This commit is contained in:
Issac411
GitHub
parent
5bb33311fb
commit
7b8ffd025f
7 changed files with 117 additions and 15 deletions
|
|
@ -186,6 +186,10 @@ t,
|
|||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.regimentImage {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#statesHalo {
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -459,6 +459,19 @@ async function parseLoadedData(data, mapVersion) {
|
|||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
3
picList.txt
Normal file
3
picList.txt
Normal file
|
|
@ -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
|
||||
Loading…
Add table
Add a link
Reference in a new issue