v1.5.65 - allow to hide certain Emblems

This commit is contained in:
Azgaar 2021-02-26 18:13:04 +03:00
parent bc149bc65f
commit 9a20a3e4c6
5 changed files with 170 additions and 145 deletions

View file

@ -1839,7 +1839,6 @@ input[type="checkbox"] {
.checkbox,
.checkbox-label {
margin: 3px;
cursor: pointer;
}

View file

@ -2861,6 +2861,11 @@
</optgroup>
</select>
</div>
<div data-tip="Show or hide this particular emblem on map. To hide the entire category go to Menu ⭢ Style ⭢ Emblems">
<input id="emblemShow" class="checkbox" type="checkbox">
<label for="emblemShow" class="checkbox-label">Show emblem on map</label>
</div>
</div>
<div id="emblemsBottom">
<button id="emblemsRegenerate" data-tip="Regenerate emblem" class="icon-shuffle"></button>

View file

@ -306,7 +306,7 @@
if (culturesSet.value === "random") {
return d3.range(count).map(i => {
const rnd = rand(nameBases.length-1);
return {name:Names.getBaseShort(rnd), base:rnd, odd: 1}
return {name:Names.getBaseShort(rnd), base:rnd, odd:1, shield:getRandomShield()}
});
}

View file

@ -23,6 +23,7 @@ function editEmblem(type, id, el) {
emblemProvinces.oninput = selectProvince;
emblemBurgs.oninput = selectBurg;
emblemShapeSelector.oninput = changeShape;
document.getElementById("emblemShow").onchange = toggleEmblem;
document.getElementById("emblemsRegenerate").onclick = regenerate;
document.getElementById("emblemsArmoria").onclick = openInArmoria;
document.getElementById("emblemsUpload").onclick = toggleUpload;
@ -103,6 +104,8 @@ function editEmblem(type, id, el) {
emblemShapeSelector.disabled = false;
emblemShapeSelector.value = el.coa.shield;
}
document.getElementById("emblemShow").checked = !el.coaHidden;
}
function selectState() {
@ -159,6 +162,24 @@ function editEmblem(type, id, el) {
highlightEmblemElement(type, el);
}
function toggleEmblem() {
el.coaHidden = !el.coaHidden;
const g = emblems.select("#"+type+"Emblems");
if (el.coaHidden) g.select("[data-i='"+el.i+"']").remove();
else {
// re-append use element
if (g.select("[data-i='"+el.i+"']").size()) return; // alredy displayed
const halfSize = +g.attr("font-size") / 2;
const x = el.x || el.pole[0];
const y = el.y || el.pole[1];
g.append("use").attr("data-i", el.i)
.attr("x", rn(x - halfSize), 2).attr("y", rn(y - halfSize), 2)
.attr("width", "1em").attr("height", "1em")
.attr("href", "#"+id);
}
}
function regenerate() {
let parent = null;
if (type === "province") parent = pack.states[el.state];

View file

@ -1245,9 +1245,9 @@ function drawEmblems() {
TIME && console.time("drawEmblems");
const {states, provinces, burgs} = pack;
const validStates = states.filter(s => s.i && !s.removed && s.coa);
const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa);
const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa);
const validStates = states.filter(s => s.i && !s.removed && s.coa && !s.coaHidden);
const validProvinces = provinces.filter(p => p.i && !p.removed && p.coa && !p.coaHidden);
const validBurgs = burgs.filter(b => b.i && !b.removed && b.coa && !b.coaHidden);
const getStateEmblemsSize = () => {
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 40, 10), 100);
@ -1257,17 +1257,17 @@ function drawEmblems() {
};
const getProvinceEmblemsSize = () => {
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 80, 5), 75);
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 100, 5), 70);
const provincesMod = (1 + validProvinces.length / 1000) - (115 - validProvinces.length) / 1000; // states number modifier
const sizeMod = +document.getElementById("styleEmblemsProvinceSizeInput").value || 1;
return rn(startSize / provincesMod * sizeMod); // target size ~26px on 1536x754 map with 115 provinces
return rn(startSize / provincesMod * sizeMod); // target size ~20px on 1536x754 map with 115 provinces
}
const getBurgEmblemSize = () => {
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 150, 5), 50);
const startSize = Math.min(Math.max((graphHeight + graphWidth) / 185, 2), 50);
const burgsMod = (1 + validBurgs.length / 1000) - (450 - validBurgs.length) / 1000; // states number modifier
const sizeMod = +document.getElementById("styleEmblemsBurgSizeInput").value || 1;
return rn(startSize / burgsMod * sizeMod); // target size ~10px on 1536x754 map with 450 burgs
return rn(startSize / burgsMod * sizeMod); // target size ~8.5px on 1536x754 map with 450 burgs
}
const sizeBurgs = getBurgEmblemSize();