mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 02:01:22 +01:00
feat: burg groups - render anchors
This commit is contained in:
Azgaar
parent
5ed31dd8bf
commit
bd05453e63
6 changed files with 139 additions and 49 deletions
23
index.html
23
index.html
|
|
@ -2098,6 +2098,13 @@
|
|||
>
|
||||
Military
|
||||
</button>
|
||||
<button
|
||||
id="overviewEconomyButton"
|
||||
data-tip="Click to open Economy Overview"
|
||||
data-shortcut="Shift + E"
|
||||
>
|
||||
Economy
|
||||
</button>
|
||||
<button id="editNamesBaseButton" data-tip="Click to open Namesbase Editor" data-shortcut="Shift + N">
|
||||
Namesbase
|
||||
</button>
|
||||
|
|
@ -2147,6 +2154,13 @@
|
|||
>
|
||||
Military
|
||||
</button>
|
||||
<button
|
||||
id="overviewEconomyButton"
|
||||
data-tip="Click to open Economy Overview"
|
||||
data-shortcut="Shift + E"
|
||||
>
|
||||
Economy
|
||||
</button>
|
||||
<button id="regeneratePopulation" data-tip="Click to recalculate rural and urban population">
|
||||
Population
|
||||
</button>
|
||||
|
|
@ -8018,10 +8032,8 @@
|
|||
<circle fill="#EBE8DF" stroke-width="3" cx="0" cy="0" r="10" />
|
||||
</symbol>
|
||||
|
||||
<symbol id="icon-anchor" viewBox="0 0 30 28">
|
||||
<path
|
||||
d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"
|
||||
/>
|
||||
<symbol id="icon-anchor" viewBox="0 0 30 28" width="1em" height="1em" overflow="visible">
|
||||
<path transform="translate(-15 -14)" d="M15 4c0-0.547-0.453-1-1-1s-1 0.453-1 1 0.453 1 1 1 1-0.453 1-1zM28 18.5v5.5c0 0.203-0.125 0.391-0.313 0.469-0.063 0.016-0.125 0.031-0.187 0.031-0.125 0-0.25-0.047-0.359-0.141l-1.453-1.453c-2.453 2.953-6.859 4.844-11.688 4.844s-9.234-1.891-11.688-4.844l-1.453 1.453c-0.094 0.094-0.234 0.141-0.359 0.141-0.063 0-0.125-0.016-0.187-0.031-0.187-0.078-0.313-0.266-0.313-0.469v-5.5c0-0.281 0.219-0.5 0.5-0.5h5.5c0.203 0 0.391 0.125 0.469 0.313s0.031 0.391-0.109 0.547l-1.563 1.563c1.406 1.891 4.109 3.266 7.203 3.687v-10.109h-3c-0.547 0-1-0.453-1-1v-2c0-0.547 0.453-1 1-1h3v-2.547c-1.188-0.688-2-1.969-2-3.453 0-2.203 1.797-4 4-4s4 1.797 4 4c0 1.484-0.812 2.766-2 3.453v2.547h3c0.547 0 1 0.453 1 1v2c0 0.547-0.453 1-1 1h-3v10.109c3.094-0.422 5.797-1.797 7.203-3.687l-1.563-1.563c-0.141-0.156-0.187-0.359-0.109-0.547s0.266-0.313 0.469-0.313h5.5c0.281 0 0.5 0.219 0.5 0.5z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="icon-store" viewBox="0 0 616 512">
|
||||
|
|
@ -8344,6 +8356,7 @@
|
|||
<script src="modules/military-generator.js?v=1.107.0"></script>
|
||||
<script src="modules/markers-generator.js?v=1.107.0"></script>
|
||||
<script src="modules/zones-generator.js?v=1.106.0"></script>
|
||||
<script src="modules/economy-generator.js"></script>
|
||||
<script src="modules/coa-generator.js?v=1.99.00"></script>
|
||||
<script src="modules/resample.js?v=1.106.4"></script>
|
||||
<script src="libs/alea.min.js?v1.105.0"></script>
|
||||
|
|
@ -8360,6 +8373,7 @@
|
|||
|
||||
<script defer src="modules/ui/style.js?v=1.108.4"></script>
|
||||
<script defer src="modules/ui/editors.js?v=1.108.5"></script>
|
||||
<script defer src="modules/economy-overview.js"></script>
|
||||
<script defer src="modules/ui/tools.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/world-configurator.js?v=1.105.4"></script>
|
||||
<script defer src="modules/ui/heightmap-editor.js?v=1.105.2"></script>
|
||||
|
|
@ -8391,6 +8405,7 @@
|
|||
<script defer src="modules/ui/military-overview.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/regiments-overview.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/markers-overview.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/economy-overview.js"></script>
|
||||
<script defer src="modules/ui/regiment-editor.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/battle-screen.js?v=1.108.5"></script>
|
||||
<script defer src="modules/ui/emblems-editor.js?v=1.99.00"></script>
|
||||
|
|
|
|||
5
main.js
5
main.js
|
|
@ -166,10 +166,7 @@ let options = {
|
|||
};
|
||||
|
||||
// global style object; in v2.0 to be used for all map styles and render settings
|
||||
let style = {
|
||||
burgLabels: {},
|
||||
burgIcons: {}
|
||||
};
|
||||
let style = {burgLabels: {}, burgIcons: {}, anchors: {}};
|
||||
|
||||
let biomesData = Biomes.getDefault();
|
||||
let nameBases = Names.getNameBases(); // cultures-related data
|
||||
|
|
|
|||
|
|
@ -8,43 +8,23 @@ function drawBurgIcons() {
|
|||
const burgsInGroup = pack.burgs.filter(b => b.group === name && !b.removed);
|
||||
if (!burgsInGroup.length) continue;
|
||||
|
||||
const g = burgIcons.select("#" + name);
|
||||
if (g.empty()) continue;
|
||||
const burgGroup = document.querySelector("#burgIcons > g#" + name);
|
||||
if (!burgGroup) continue;
|
||||
|
||||
const icon = g.attr("data-icon") || "#icon-circle";
|
||||
const icon = burgGroup.dataset.icon || "#icon-circle";
|
||||
burgGroup.innerHTML = burgsInGroup
|
||||
.map(b => `<use id="burg${b.i}" data-id="${b.i}" href="${icon}" x="${b.x}" y="${b.y}"></use>`)
|
||||
.join("");
|
||||
|
||||
g.selectAll("use")
|
||||
.data(burgsInGroup)
|
||||
.enter()
|
||||
.append("use")
|
||||
.attr("href", icon)
|
||||
.attr("id", d => "burg" + d.i)
|
||||
.attr("data-id", d => d.i)
|
||||
.attr("x", d => d.x)
|
||||
.attr("y", d => d.y);
|
||||
const portsInGroup = burgsInGroup.filter(b => b.port);
|
||||
if (!portsInGroup.length) continue;
|
||||
|
||||
// g.selectAll("circle")
|
||||
// .data(burgsInGroup)
|
||||
// .enter()
|
||||
// .append("circle")
|
||||
// .attr("id", d => "burg_circle" + d.i)
|
||||
// .attr("cx", d => d.x)
|
||||
// .attr("cy", d => d.y)
|
||||
// .attr("r", 0.2)
|
||||
// .attr("fill", "red")
|
||||
// .attr("stroke", "none");
|
||||
const portGroup = document.querySelector("#anchors > g#" + name);
|
||||
if (!portGroup) continue;
|
||||
|
||||
// capitalAnchors
|
||||
// .selectAll("use")
|
||||
// .data(capital.filter(c => c.port))
|
||||
// .enter()
|
||||
// .append("use")
|
||||
// .attr("xlink:href", "#icon-anchor")
|
||||
// .attr("data-id", d => d.i)
|
||||
// .attr("x", d => rn(d.x - capitalAnchorsSize * 0.47, 2))
|
||||
// .attr("y", d => rn(d.y - capitalAnchorsSize * 0.47, 2))
|
||||
// .attr("width", capitalAnchorsSize)
|
||||
// .attr("height", capitalAnchorsSize);
|
||||
portGroup.innerHTML = portsInGroup
|
||||
.map(b => `<use id="anchor${b.i}" data-id="${b.i}" href="#icon-anchor" x="${b.x}" y="${b.y}"></use>`)
|
||||
.join("");
|
||||
}
|
||||
|
||||
TIME && console.timeEnd("drawBurgIcons");
|
||||
|
|
@ -59,14 +39,26 @@ function drawBurgIcon(burg) {
|
|||
.attr("data-id", burg.i)
|
||||
.attr("x", burg.x)
|
||||
.attr("y", burg.y);
|
||||
|
||||
if (burg.port) {
|
||||
anchors
|
||||
.select("#" + burg.group)
|
||||
.append("use")
|
||||
.attr("href", "#icon-anchor")
|
||||
.attr("id", "anchor" + burg.i)
|
||||
.attr("data-id", burg.i)
|
||||
.attr("x", burg.x)
|
||||
.attr("y", burg.y);
|
||||
}
|
||||
}
|
||||
|
||||
function createIconGroups() {
|
||||
const defaultStyle = style.burgIcons.town || Object.values(style.burgIcons)[0];
|
||||
const defaultIconStyle = style.burgIcons.town || Object.values(style.burgIcons)[0];
|
||||
const defaultAnchorStyle = style.anchors.town || Object.values(style.anchors)[0];
|
||||
|
||||
// save existing styles and remove all groups
|
||||
document.querySelectorAll("g#burgIcons > g").forEach(group => {
|
||||
const groupStyle = Object.keys(defaultStyle).reduce((acc, key) => {
|
||||
const groupStyle = Object.keys(defaultIconStyle).reduce((acc, key) => {
|
||||
acc[key] = group.getAttribute(key);
|
||||
return acc;
|
||||
}, {});
|
||||
|
|
@ -74,13 +66,28 @@ function createIconGroups() {
|
|||
group.remove();
|
||||
});
|
||||
|
||||
document.querySelectorAll("g#anchors > g").forEach(group => {
|
||||
const groupStyle = Object.keys(defaultAnchorStyle).reduce((acc, key) => {
|
||||
acc[key] = group.getAttribute(key);
|
||||
return acc;
|
||||
}, {});
|
||||
style.anchors[group.id] = groupStyle;
|
||||
group.remove();
|
||||
});
|
||||
|
||||
// create groups for each burg group and apply stored or default style
|
||||
const sortedGroups = [...options.burgs.groups].sort((a, b) => a.order - b.order);
|
||||
for (const {name} of sortedGroups) {
|
||||
const group = burgIcons.append("g").attr("id", name);
|
||||
const styles = style.burgIcons[name] || defaultStyle;
|
||||
Object.entries(styles).forEach(([key, value]) => {
|
||||
group.attr(key, value);
|
||||
const burgGroup = burgIcons.append("g").attr("id", name);
|
||||
const iconStyles = style.burgIcons[name] || defaultIconStyle;
|
||||
Object.entries(iconStyles).forEach(([key, value]) => {
|
||||
burgGroup.attr(key, value);
|
||||
});
|
||||
|
||||
const anchorGroup = anchors.append("g").attr("id", name);
|
||||
const anchorStyles = style.anchors[name] || defaultAnchorStyle;
|
||||
Object.entries(anchorStyles).forEach(([key, value]) => {
|
||||
anchorGroup.attr(key, value);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,11 +77,17 @@ function applyStyle(styleJSON) {
|
|||
const group = selector.replace("#burgLabels > g#", "");
|
||||
style.burgLabels[group] = styleJSON[selector];
|
||||
}
|
||||
|
||||
if (selector.startsWith("#burgIcons")) {
|
||||
const group = selector.replace("#burgIcons > g#", "");
|
||||
style.burgIcons[group] = styleJSON[selector];
|
||||
}
|
||||
|
||||
if (selector.startsWith("#anchors")) {
|
||||
const group = selector.replace("#anchors > g#", "");
|
||||
style.anchors[group] = styleJSON[selector];
|
||||
}
|
||||
|
||||
const el = document.querySelector(selector);
|
||||
if (!el) continue;
|
||||
|
||||
|
|
|
|||
|
|
@ -284,7 +284,7 @@ function selectStyleElement() {
|
|||
}
|
||||
}
|
||||
|
||||
if (styleElement == "burgIcons") {
|
||||
if (styleElement === "burgIcons") {
|
||||
styleBurgIcons.style.display = "block";
|
||||
styleBurgIconsIcon.value = el.attr("data-icon");
|
||||
styleBurgIconsIconSize.value = el.attr("font-size");
|
||||
|
|
@ -302,13 +302,15 @@ function selectStyleElement() {
|
|||
styleStrokeLinecapInput.value = el.attr("stroke-linecap") || "inherit";
|
||||
}
|
||||
|
||||
if (styleElement == "anchors") {
|
||||
if (styleElement === "anchors") {
|
||||
styleFill.style.display = "block";
|
||||
styleStroke.style.display = "block";
|
||||
styleStrokeWidth.style.display = "block";
|
||||
styleSize.style.display = "block";
|
||||
styleFillInput.value = styleFillOutput.value = el.attr("fill") || "#ffffff";
|
||||
styleStrokeInput.value = styleStrokeOutput.value = el.attr("stroke") || "#3e3e4b";
|
||||
styleStrokeWidthInput.value = el.attr("stroke-width") || 0.24;
|
||||
styleFontSize.value = el.attr("font-size") || 1;
|
||||
}
|
||||
|
||||
if (styleElement === "legend") {
|
||||
|
|
|
|||
|
|
@ -350,6 +350,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#capital": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 2,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#city": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -372,6 +379,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#city": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 1.5,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#fort": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -394,6 +408,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#fort": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.7,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#monastery": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -416,6 +437,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#monastery": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.7,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#caravanserai": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -438,6 +466,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#caravanserai": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.7,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#trading_post": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -460,6 +495,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#trading_post": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.7,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#village": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -482,6 +524,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#village": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.7,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#hamlet": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -504,6 +553,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#hamlet": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 0.5,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#burgLabels > g#town": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
@ -526,6 +582,13 @@
|
|||
"stroke-linecap": "butt",
|
||||
"stroke-linejoin": "round"
|
||||
},
|
||||
"#anchors > g#town": {
|
||||
"opacity": 1,
|
||||
"fill": "#ffffff",
|
||||
"font-size": 1,
|
||||
"stroke": "#3e3e4b",
|
||||
"stroke-width": 1.2
|
||||
},
|
||||
"#labels > #states": {
|
||||
"opacity": 1,
|
||||
"fill": "#3e3e4b",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue