mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 17:51:24 +01:00
refactor(es modules): continue migration
This commit is contained in:
Azgaar
parent
4a04a8622d
commit
922c6e2431
39 changed files with 551 additions and 589 deletions
|
|
@ -28,7 +28,7 @@ export class Battle {
|
|||
$("#battleScreen").dialog({
|
||||
title: this.name,
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "center", at: "center", of: "#map"},
|
||||
close: () => Battle.prototype.context.cancelResults()
|
||||
});
|
||||
|
|
@ -235,7 +235,7 @@ export class Battle {
|
|||
|
||||
$("#regimentSelectorScreen").dialog({
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
title: "Add regiment to the battle",
|
||||
position: {my: "left center", at: "right+10 center", of: "#battleScreen"},
|
||||
close: addSideClosed,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editBiomes() {
|
||||
if (customization) return;
|
||||
|
|
@ -20,7 +21,7 @@ export function editBiomes() {
|
|||
$("#biomesEditor").dialog({
|
||||
title: "Biomes Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: closeBiomesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
});
|
||||
|
|
@ -154,7 +155,7 @@ export function editBiomes() {
|
|||
togglePercentageMode();
|
||||
}
|
||||
applySorting(biomesHeader);
|
||||
$("#biomesEditor").dialog({width: fitContent()});
|
||||
$("#biomesEditor").dialog({width: "fit-content"});
|
||||
}
|
||||
|
||||
function biomeHighlightOn(event) {
|
||||
|
|
@ -308,7 +309,7 @@ export function editBiomes() {
|
|||
|
||||
body.insertAdjacentHTML("beforeend", line);
|
||||
biomesFooterBiomes.innerHTML = body.querySelectorAll(":scope > div").length;
|
||||
$("#biomesEditor").dialog({width: fitContent()});
|
||||
$("#biomesEditor").dialog({width: "fit-content"});
|
||||
}
|
||||
|
||||
function removeCustomBiome(el) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editBurg(id) {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function overviewBurgs() {
|
||||
if (customization) return;
|
||||
|
|
@ -19,7 +20,7 @@ export function overviewBurgs() {
|
|||
$("#burgsOverview").dialog({
|
||||
title: "Burgs Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: exitAddBurgMode,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -110,14 +111,12 @@ export function overviewBurgs() {
|
|||
data-tip="${b.capital ? " This burg is a state capital" : "Click to assign a capital status"}"
|
||||
class="icon-star-empty${b.capital ? "" : " inactive pointer"}"
|
||||
></span>
|
||||
<span data-tip="Click to toggle port status" class="icon-anchor pointer${
|
||||
b.port ? "" : " inactive"
|
||||
}" style="font-size:.9em"></span>
|
||||
<span data-tip="Click to toggle port status"
|
||||
class="icon-anchor pointer${b.port ? "" : " inactive"}" style="font-size:.9em"></span>
|
||||
</div>
|
||||
<span data-tip="Edit burg" class="icon-pencil"></span>
|
||||
<span class="locks pointer ${
|
||||
b.lock ? "icon-lock" : "icon-lock-open inactive"
|
||||
}" onmouseover="showElementLockTip(event)"></span>
|
||||
<span data-tip="Toggle element lock. Lock will prevent it from regeneration"
|
||||
class="locks pointer ${b.lock ? "icon-lock" : "icon-lock-open inactive"}"></span>
|
||||
<span data-tip="Remove burg" class="icon-trash-empty"></span>
|
||||
</div>`;
|
||||
}
|
||||
|
|
@ -473,7 +472,7 @@ export function overviewBurgs() {
|
|||
|
||||
$("#alert").dialog({
|
||||
title: "Burgs bubble chart",
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
|
||||
buttons: {},
|
||||
close: () => (alertMessage.innerHTML = "")
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editDiplomacy() {
|
||||
if (customization) return;
|
||||
|
|
@ -65,7 +66,7 @@ export function editDiplomacy() {
|
|||
$("#diplomacyEditor").dialog({
|
||||
title: "Diplomacy Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: closeDiplomacyEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -236,7 +237,7 @@ export function editDiplomacy() {
|
|||
alertMessage.innerHTML = /* html */ `<div style="overflow: hidden">${header} ${options} ${footer}</div>`;
|
||||
|
||||
$("#alert").dialog({
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
title: `Change relations`,
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
|
|
|
|||
|
|
@ -2,35 +2,8 @@ import {restoreDefaultEvents} from "/src/scripts/events";
|
|||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {byId} from "/src/utils/shorthands";
|
||||
|
||||
// on viewbox click event - run function based on target
|
||||
function clicked() {
|
||||
const el = d3.event.target;
|
||||
if (!el || !el.parentElement || !el.parentElement.parentElement) return;
|
||||
const parent = el.parentElement;
|
||||
const grand = parent.parentElement;
|
||||
const great = grand.parentElement;
|
||||
const p = d3.mouse(this);
|
||||
const i = findCell(p[0], p[1]);
|
||||
|
||||
if (grand.id === "emblems") editEmblem();
|
||||
else if (parent.id === "rivers") editRiver(el.id);
|
||||
else if (grand.id === "routes") editRoute();
|
||||
else if (el.tagName === "tspan" && grand.parentNode.parentNode.id === "labels") editLabel();
|
||||
else if (grand.id === "burgLabels") editBurg();
|
||||
else if (grand.id === "burgIcons") editBurg();
|
||||
else if (parent.id === "ice") editIce();
|
||||
else if (parent.id === "terrain") editReliefIcon();
|
||||
else if (grand.id === "markers" || great.id === "markers") editMarker();
|
||||
else if (grand.id === "coastline") editCoastline();
|
||||
else if (great.id === "armies") editRegiment();
|
||||
else if (pack.cells.t[i] === 1) {
|
||||
const node = byId("island_" + pack.cells.f[i]);
|
||||
editCoastline(node);
|
||||
} else if (grand.id === "lakes") editLake();
|
||||
}
|
||||
|
||||
// clear elSelected variable
|
||||
function unselect() {
|
||||
export function unselect() {
|
||||
restoreDefaultEvents();
|
||||
if (!elSelected) return;
|
||||
elSelected.call(d3.drag().on("drag", null)).attr("class", null);
|
||||
|
|
@ -40,7 +13,7 @@ function unselect() {
|
|||
}
|
||||
|
||||
// close all dialogs except stated
|
||||
function closeDialogs(except = "#except") {
|
||||
export function closeDialogs(except = "#except") {
|
||||
try {
|
||||
$(".dialog:visible")
|
||||
.not(except)
|
||||
|
|
@ -51,7 +24,7 @@ function closeDialogs(except = "#except") {
|
|||
}
|
||||
|
||||
// move brush radius circle
|
||||
function moveCircle(x, y, r = 20) {
|
||||
export function moveCircle(x, y, r = 20) {
|
||||
let circle = byId("brushCircle");
|
||||
if (!circle) {
|
||||
const html = /* html */ `<circle id="brushCircle" cx=${x} cy=${y} r=${r}></circle>`;
|
||||
|
|
@ -63,15 +36,10 @@ function moveCircle(x, y, r = 20) {
|
|||
}
|
||||
}
|
||||
|
||||
function removeCircle() {
|
||||
export function removeCircle() {
|
||||
if (byId("brushCircle")) byId("brushCircle").remove();
|
||||
}
|
||||
|
||||
// get browser-defined fit-content
|
||||
function fitContent() {
|
||||
return !window.chrome ? "-moz-max-content" : "fit-content";
|
||||
}
|
||||
|
||||
// apply sorting behaviour for lines on Editor header click
|
||||
document.querySelectorAll(".sortable").forEach(function (event) {
|
||||
event.on("click", function () {
|
||||
|
|
@ -348,118 +316,6 @@ function getMFCGlink(burg) {
|
|||
return url.toString();
|
||||
}
|
||||
|
||||
// draw legend box
|
||||
function drawLegend(name, data) {
|
||||
legend.selectAll("*").remove(); // fully redraw every time
|
||||
legend.attr("data", data.join("|")); // store data
|
||||
|
||||
const itemsInCol = +styleLegendColItems.value;
|
||||
const fontSize = +legend.attr("font-size");
|
||||
const backClr = styleLegendBack.value;
|
||||
const opacity = +styleLegendOpacity.value;
|
||||
|
||||
const lineHeight = Math.round(fontSize * 1.7);
|
||||
const colorBoxSize = Math.round(fontSize / 1.7);
|
||||
const colOffset = fontSize;
|
||||
const vOffset = fontSize / 2;
|
||||
|
||||
// append items
|
||||
const boxes = legend.append("g").attr("stroke-width", 0.5).attr("stroke", "#111111").attr("stroke-dasharray", "none");
|
||||
const labels = legend.append("g").attr("fill", "#000000").attr("stroke", "none");
|
||||
|
||||
const columns = Math.ceil(data.length / itemsInCol);
|
||||
for (let column = 0, i = 0; column < columns; column++) {
|
||||
const linesInColumn = Math.ceil(data.length / columns);
|
||||
const offset = column ? colOffset * 2 + legend.node().getBBox().width : colOffset;
|
||||
|
||||
for (let l = 0; l < linesInColumn && data[i]; l++, i++) {
|
||||
boxes
|
||||
.append("rect")
|
||||
.attr("fill", data[i][1])
|
||||
.attr("x", offset)
|
||||
.attr("y", lineHeight + l * lineHeight + vOffset)
|
||||
.attr("width", colorBoxSize)
|
||||
.attr("height", colorBoxSize);
|
||||
|
||||
labels
|
||||
.append("text")
|
||||
.text(data[i][2])
|
||||
.attr("x", offset + colorBoxSize * 1.6)
|
||||
.attr("y", fontSize / 1.6 + lineHeight + l * lineHeight + vOffset);
|
||||
}
|
||||
}
|
||||
|
||||
// append label
|
||||
const offset = colOffset + legend.node().getBBox().width / 2;
|
||||
labels
|
||||
.append("text")
|
||||
.attr("text-anchor", "middle")
|
||||
.attr("font-weight", "bold")
|
||||
.attr("font-size", "1.2em")
|
||||
.attr("id", "legendLabel")
|
||||
.text(name)
|
||||
.attr("x", offset)
|
||||
.attr("y", fontSize * 1.1 + vOffset / 2);
|
||||
|
||||
// append box
|
||||
const bbox = legend.node().getBBox();
|
||||
const width = bbox.width + colOffset * 2;
|
||||
const height = bbox.height + colOffset / 2 + vOffset;
|
||||
|
||||
legend
|
||||
.insert("rect", ":first-child")
|
||||
.attr("id", "legendBox")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.attr("fill", backClr)
|
||||
.attr("fill-opacity", opacity);
|
||||
|
||||
fitLegendBox();
|
||||
}
|
||||
|
||||
// fit Legend box to canvas size
|
||||
function fitLegendBox() {
|
||||
if (!legend.selectAll("*").size()) return;
|
||||
const px = isNaN(+legend.attr("data-x")) ? 99 : legend.attr("data-x") / 100;
|
||||
const py = isNaN(+legend.attr("data-y")) ? 93 : legend.attr("data-y") / 100;
|
||||
const bbox = legend.node().getBBox();
|
||||
const x = rn(svgWidth * px - bbox.width),
|
||||
y = rn(svgHeight * py - bbox.height);
|
||||
legend.attr("transform", `translate(${x},${y})`);
|
||||
}
|
||||
|
||||
// draw legend with the same data, but using different settings
|
||||
function redrawLegend() {
|
||||
if (!legend.select("rect").size()) return;
|
||||
const name = legend.select("#legendLabel").text();
|
||||
const data = legend
|
||||
.attr("data")
|
||||
.split("|")
|
||||
.map(l => l.split(","));
|
||||
drawLegend(name, data);
|
||||
}
|
||||
|
||||
function dragLegendBox() {
|
||||
const tr = parseTransform(this.getAttribute("transform"));
|
||||
const x = +tr[0] - d3.event.x,
|
||||
y = +tr[1] - d3.event.y;
|
||||
const bbox = legend.node().getBBox();
|
||||
|
||||
d3.event.on("drag", function () {
|
||||
const px = rn(((x + d3.event.x + bbox.width) / svgWidth) * 100, 2);
|
||||
const py = rn(((y + d3.event.y + bbox.height) / svgHeight) * 100, 2);
|
||||
const transform = `translate(${x + d3.event.x},${y + d3.event.y})`;
|
||||
legend.attr("transform", transform).attr("data-x", px).attr("data-y", py);
|
||||
});
|
||||
}
|
||||
|
||||
function clearLegend() {
|
||||
legend.selectAll("*").remove();
|
||||
legend.attr("data", null);
|
||||
}
|
||||
|
||||
// draw color (fill) picker
|
||||
function createPicker() {
|
||||
const pos = () => tip("Drag to change the picker position");
|
||||
|
|
@ -1097,7 +953,7 @@ function selectIcon(initial, callback) {
|
|||
};
|
||||
|
||||
$("#iconSelector").dialog({
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
title: "Select Icon",
|
||||
buttons: {
|
||||
Apply: function () {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use strict";
|
||||
function editEmblem(type, id, el) {
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editEmblem(type, id, el) {
|
||||
if (customization) return;
|
||||
if (!id && d3.event) defineEmblemData(d3.event);
|
||||
|
||||
|
|
@ -44,7 +45,12 @@ function editEmblem(type, id, el) {
|
|||
|
||||
function defineEmblemData(e) {
|
||||
const parent = e.target.parentNode;
|
||||
const [g, t] = parent.id === "burgEmblems" ? [pack.burgs, "burg"] : parent.id === "provinceEmblems" ? [pack.provinces, "province"] : [pack.states, "state"];
|
||||
const [g, t] =
|
||||
parent.id === "burgEmblems"
|
||||
? [pack.burgs, "burg"]
|
||||
: parent.id === "provinceEmblems"
|
||||
? [pack.provinces, "province"]
|
||||
: [pack.states, "state"];
|
||||
const i = +e.target.dataset.i;
|
||||
type = t;
|
||||
id = type + "COA" + i;
|
||||
|
|
@ -88,8 +94,12 @@ function editEmblem(type, id, el) {
|
|||
|
||||
emblemBurgs.options.length = 0;
|
||||
emblemBurgs.options.add(new Option("", 0, false, !burg));
|
||||
const burgList = validBurgs.filter(burg => (province ? pack.cells.province[burg.cell] === province : burg.state === state));
|
||||
burgList.forEach(b => emblemBurgs.options.add(new Option(b.capital ? "👑 " + b.name : b.name, b.i, false, b.i === burg)));
|
||||
const burgList = validBurgs.filter(burg =>
|
||||
province ? pack.cells.province[burg.cell] === province : burg.state === state
|
||||
);
|
||||
burgList.forEach(b =>
|
||||
emblemBurgs.options.add(new Option(b.capital ? "👑 " + b.name : b.name, b.i, false, b.i === burg))
|
||||
);
|
||||
emblemBurgs.options[0].disabled = true;
|
||||
|
||||
COArenderer.trigger(id, el.coa);
|
||||
|
|
@ -224,12 +234,18 @@ function editEmblem(type, id, el) {
|
|||
}
|
||||
|
||||
function upload(type) {
|
||||
const input = type === "image" ? document.getElementById("emblemImageToLoad") : document.getElementById("emblemSVGToLoad");
|
||||
const input =
|
||||
type === "image" ? document.getElementById("emblemImageToLoad") : document.getElementById("emblemSVGToLoad");
|
||||
const file = input.files[0];
|
||||
input.value = "";
|
||||
|
||||
if (file.size > 500000) {
|
||||
tip(`File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB`, true, "error", 5000);
|
||||
tip(
|
||||
`File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB`,
|
||||
true,
|
||||
"error",
|
||||
5000
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -257,7 +273,11 @@ function editEmblem(type, id, el) {
|
|||
|
||||
const svg = el.querySelector("svg");
|
||||
if (!svg) {
|
||||
tip("The file should be prepated for load to FMG. Please use Armoria or other relevant tools", false, "error");
|
||||
tip(
|
||||
"The file should be prepated for load to FMG. Please use Armoria or other relevant tools",
|
||||
false,
|
||||
"error"
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -351,7 +371,9 @@ function editEmblem(type, id, el) {
|
|||
validStates
|
||||
.map(state => {
|
||||
const el = document.getElementById("stateCOA" + state.i);
|
||||
return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${state.fullName}</figcaption>${getSVG(el, 200)}</a></figure>`;
|
||||
return `<figure id="state_${state.i}"><a href="#provinces_${state.i}"><figcaption>${
|
||||
state.fullName
|
||||
}</figcaption>${getSVG(el, 200)}</a></figure>`;
|
||||
})
|
||||
.join("") +
|
||||
`</div>`;
|
||||
|
|
@ -362,13 +384,14 @@ function editEmblem(type, id, el) {
|
|||
const figures = stateProvinces
|
||||
.map(province => {
|
||||
const el = document.getElementById("provinceCOA" + province.i);
|
||||
return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${province.fullName}</figcaption>${getSVG(
|
||||
el,
|
||||
200
|
||||
)}</a></figure>`;
|
||||
return `<figure id="province_${province.i}"><a href="#burgs_${province.i}"><figcaption>${
|
||||
province.fullName
|
||||
}</figcaption>${getSVG(el, 200)}</a></figure>`;
|
||||
})
|
||||
.join("");
|
||||
return stateProvinces.length ? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>` : "";
|
||||
return stateProvinces.length
|
||||
? `<div id="provinces_${state.i}">${back}<h2>${state.fullName} provinces</h2>${figures}</div>`
|
||||
: "";
|
||||
})
|
||||
.join("");
|
||||
|
||||
|
|
@ -385,7 +408,9 @@ function editEmblem(type, id, el) {
|
|||
return `<figure id="burg_${burg.i}"><figcaption>${burg.name}</figcaption>${getSVG(el, 200)}</figure>`;
|
||||
})
|
||||
.join("");
|
||||
return provinceBurgs.length ? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>` : "";
|
||||
return provinceBurgs.length
|
||||
? `<div id="burgs_${province.i}">${back}<h2>${province.fullName} burgs</h2>${provinceBurgFigures}</div>`
|
||||
: "";
|
||||
})
|
||||
.join("");
|
||||
|
||||
|
|
|
|||
|
|
@ -13,221 +13,6 @@ if (location.hostname && location.hostname !== "localhost" && location.hostname
|
|||
window.onbeforeunload = () => "Are you sure you want to navigate away?";
|
||||
}
|
||||
|
||||
// Tooltips
|
||||
const tooltip = document.getElementById("tooltip");
|
||||
|
||||
// show tip for non-svg elemets with data-tip
|
||||
document.getElementById("dialogs").addEventListener("mousemove", showDataTip);
|
||||
document.getElementById("optionsContainer").addEventListener("mousemove", showDataTip);
|
||||
document.getElementById("exitCustomization").addEventListener("mousemove", showDataTip);
|
||||
|
||||
const tipBackgroundMap = {
|
||||
info: "linear-gradient(0.1turn, #ffffff00, #5e5c5c80, #ffffff00)",
|
||||
success: "linear-gradient(0.1turn, #ffffff00, #127912cc, #ffffff00)",
|
||||
warn: "linear-gradient(0.1turn, #ffffff00, #be5d08cc, #ffffff00)",
|
||||
error: "linear-gradient(0.1turn, #ffffff00, #e11d1dcc, #ffffff00)"
|
||||
};
|
||||
|
||||
function tip(tip = "Tip is undefined", main = false, type = "info", time = 0) {
|
||||
tooltip.innerHTML = tip;
|
||||
tooltip.style.background = tipBackgroundMap[type];
|
||||
|
||||
if (main) {
|
||||
tooltip.dataset.main = tip;
|
||||
tooltip.dataset.color = tooltip.style.background;
|
||||
}
|
||||
if (time) setTimeout(clearMainTip, time);
|
||||
}
|
||||
|
||||
function showMainTip() {
|
||||
tooltip.style.background = tooltip.dataset.color;
|
||||
tooltip.innerHTML = tooltip.dataset.main;
|
||||
}
|
||||
|
||||
function clearMainTip() {
|
||||
tooltip.dataset.color = "";
|
||||
tooltip.dataset.main = "";
|
||||
tooltip.innerHTML = "";
|
||||
}
|
||||
|
||||
// show tip at the bottom of the screen, consider possible translation
|
||||
function showDataTip(event) {
|
||||
if (!event.target) return;
|
||||
|
||||
let dataTip = event.target.dataset.tip;
|
||||
if (!dataTip && event.target.parentNode.dataset.tip) dataTip = event.target.parentNode.dataset.tip;
|
||||
if (!dataTip) return;
|
||||
|
||||
const shortcut = event.target.dataset.shortcut;
|
||||
if (shortcut && !MOBILE) dataTip += `. Shortcut: ${shortcut}`;
|
||||
|
||||
//const tooltip = lang === "en" ? dataTip : translate(e.target.dataset.t || e.target.parentNode.dataset.t, dataTip);
|
||||
tip(dataTip);
|
||||
}
|
||||
|
||||
function showElementLockTip(event) {
|
||||
const locked = event?.target?.classList?.contains("icon-lock");
|
||||
if (locked) {
|
||||
tip("Click to unlock the element and allow it to be changed by regeneration tools");
|
||||
} else {
|
||||
tip("Click to lock the element and prevent changes to it by regeneration tools");
|
||||
}
|
||||
}
|
||||
|
||||
const onMouseMove = debounce(handleMouseMove, 100);
|
||||
function handleMouseMove() {
|
||||
const point = d3.mouse(this);
|
||||
const i = findCell(point[0], point[1]); // pack cell id
|
||||
if (i === undefined) return;
|
||||
|
||||
showNotes(d3.event);
|
||||
const gridCell = findGridCell(point[0], point[1], grid);
|
||||
if (tooltip.dataset.main) showMainTip();
|
||||
else showMapTooltip(point, d3.event, i, gridCell);
|
||||
if (cellInfo?.offsetParent) updateCellInfo(point, i, gridCell);
|
||||
}
|
||||
|
||||
// show note box on hover (if any)
|
||||
function showNotes(e) {
|
||||
if (notesEditor?.offsetParent) return;
|
||||
let id = e.target.id || e.target.parentNode.id || e.target.parentNode.parentNode.id;
|
||||
if (e.target.parentNode.parentNode.id === "burgLabels") id = "burg" + e.target.dataset.id;
|
||||
else if (e.target.parentNode.parentNode.id === "burgIcons") id = "burg" + e.target.dataset.id;
|
||||
|
||||
const note = notes.find(note => note.id === id);
|
||||
if (note !== undefined && note.legend !== "") {
|
||||
document.getElementById("notes").style.display = "block";
|
||||
document.getElementById("notesHeader").innerHTML = note.name;
|
||||
document.getElementById("notesBody").innerHTML = note.legend;
|
||||
} else if (!options.pinNotes && !markerEditor?.offsetParent) {
|
||||
document.getElementById("notes").style.display = "none";
|
||||
document.getElementById("notesHeader").innerHTML = "";
|
||||
document.getElementById("notesBody").innerHTML = "";
|
||||
}
|
||||
}
|
||||
|
||||
// show viewbox tooltip if main tooltip is blank
|
||||
function showMapTooltip(point, e, i, g) {
|
||||
tip(""); // clear tip
|
||||
const path = e.composedPath ? e.composedPath() : getComposedPath(e.target); // apply polyfill
|
||||
if (!path[path.length - 8]) return;
|
||||
const group = path[path.length - 7].id;
|
||||
const subgroup = path[path.length - 8].id;
|
||||
const land = pack.cells.h[i] >= 20;
|
||||
|
||||
// specific elements
|
||||
if (group === "armies") return tip(e.target.parentNode.dataset.name + ". Click to edit");
|
||||
|
||||
if (group === "emblems" && e.target.tagName === "use") {
|
||||
const parent = e.target.parentNode;
|
||||
const [g, type] =
|
||||
parent.id === "burgEmblems"
|
||||
? [pack.burgs, "burg"]
|
||||
: parent.id === "provinceEmblems"
|
||||
? [pack.provinces, "province"]
|
||||
: [pack.states, "state"];
|
||||
const i = +e.target.dataset.i;
|
||||
if (event.shiftKey) highlightEmblemElement(type, g[i]);
|
||||
|
||||
d3.select(e.target).raise();
|
||||
d3.select(parent).raise();
|
||||
|
||||
const name = g[i].fullName || g[i].name;
|
||||
tip(`${name} ${type} emblem. Click to edit. Hold Shift to show associated area or place`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (group === "rivers") {
|
||||
const river = +e.target.id.slice(5);
|
||||
const r = pack.rivers.find(r => r.i === river);
|
||||
const name = r ? r.name + " " + r.type : "";
|
||||
tip(name + ". Click to edit");
|
||||
if (riversOverview?.offsetParent) highlightEditorLine(riversOverview, river, 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (group === "routes") return tip("Click to edit the Route");
|
||||
|
||||
if (group === "terrain") return tip("Click to edit the Relief Icon");
|
||||
|
||||
if (subgroup === "burgLabels" || subgroup === "burgIcons") {
|
||||
const burg = +path[path.length - 10].dataset.id;
|
||||
const b = pack.burgs[burg];
|
||||
const population = si(b.population * populationRate * urbanization);
|
||||
tip(`${b.name}. Population: ${population}. Click to edit`);
|
||||
if (burgsOverview?.offsetParent) highlightEditorLine(burgsOverview, burg, 5000);
|
||||
return;
|
||||
}
|
||||
if (group === "labels") return tip("Click to edit the Label");
|
||||
|
||||
if (group === "markers") return tip("Click to edit the Marker and pin the marker note");
|
||||
|
||||
if (group === "ruler") {
|
||||
const tag = e.target.tagName;
|
||||
const className = e.target.getAttribute("class");
|
||||
if (tag === "circle" && className === "edge")
|
||||
return tip("Drag to adjust. Hold Ctrl and drag to add a point. Click to remove the point");
|
||||
if (tag === "circle" && className === "control")
|
||||
return tip("Drag to adjust. Hold Shift and drag to keep axial direction. Click to remove the point");
|
||||
if (tag === "circle") return tip("Drag to adjust the measurer");
|
||||
if (tag === "polyline") return tip("Click on drag to add a control point");
|
||||
if (tag === "path") return tip("Drag to move the measurer");
|
||||
if (tag === "text") return tip("Drag to move, click to remove the measurer");
|
||||
}
|
||||
|
||||
if (subgroup === "burgIcons") return tip("Click to edit the Burg");
|
||||
|
||||
if (subgroup === "burgLabels") return tip("Click to edit the Burg");
|
||||
|
||||
if (group === "lakes" && !land) {
|
||||
const lakeId = +e.target.dataset.f;
|
||||
const name = pack.features[lakeId]?.name;
|
||||
const fullName = subgroup === "freshwater" ? name : name + " " + subgroup;
|
||||
tip(`${fullName} lake. Click to edit`);
|
||||
return;
|
||||
}
|
||||
if (group === "coastline") return tip("Click to edit the coastline");
|
||||
|
||||
if (group === "zones") {
|
||||
const zone = path[path.length - 8];
|
||||
tip(zone.dataset.description);
|
||||
if (zonesEditor?.offsetParent) highlightEditorLine(zonesEditor, zone.id, 5000);
|
||||
return;
|
||||
}
|
||||
|
||||
if (group === "ice") return tip("Click to edit the Ice");
|
||||
|
||||
// covering elements
|
||||
if (layerIsOn("togglePrec") && land) tip("Annual Precipitation: " + getFriendlyPrecipitation(i));
|
||||
else if (layerIsOn("togglePopulation")) tip(getPopulationTip(i));
|
||||
else if (layerIsOn("toggleTemp")) tip("Temperature: " + convertTemperature(grid.cells.temp[g]));
|
||||
else if (layerIsOn("toggleBiomes") && pack.cells.biome[i]) {
|
||||
const biome = pack.cells.biome[i];
|
||||
tip("Biome: " + biomesData.name[biome]);
|
||||
if (biomesEditor?.offsetParent) highlightEditorLine(biomesEditor, biome);
|
||||
} else if (layerIsOn("toggleReligions") && pack.cells.religion[i]) {
|
||||
const religion = pack.cells.religion[i];
|
||||
const r = pack.religions[religion];
|
||||
const type = r.type === "Cult" || r.type == "Heresy" ? r.type : r.type + " religion";
|
||||
tip(type + ": " + r.name);
|
||||
if (religionsEditor?.offsetParent) highlightEditorLine(religionsEditor, religion);
|
||||
} else if (pack.cells.state[i] && (layerIsOn("toggleProvinces") || layerIsOn("toggleStates"))) {
|
||||
const state = pack.cells.state[i];
|
||||
const stateName = pack.states[state].fullName;
|
||||
const province = pack.cells.province[i];
|
||||
const prov = province ? pack.provinces[province].fullName + ", " : "";
|
||||
tip(prov + stateName);
|
||||
if (document.getElementById("statesEditor")?.offsetParent) highlightEditorLine(statesEditor, state);
|
||||
if (document.getElementById("diplomacyEditor")?.offsetParent) highlightEditorLine(diplomacyEditor, state);
|
||||
if (document.getElementById("militaryOverview")?.offsetParent) highlightEditorLine(militaryOverview, state);
|
||||
if (document.getElementById("provincesEditor")?.offsetParent) highlightEditorLine(provincesEditor, province);
|
||||
} else if (layerIsOn("toggleCultures") && pack.cells.culture[i]) {
|
||||
const culture = pack.cells.culture[i];
|
||||
tip("Culture: " + pack.cultures[culture].name);
|
||||
if (document.getElementById("culturesEditor")?.offsetParent) highlightEditorLine(culturesEditor, culture);
|
||||
} else if (layerIsOn("toggleHeight")) tip("Height: " + getFriendlyHeight(point));
|
||||
}
|
||||
|
||||
function highlightEditorLine(editor, id, timeout = 10000) {
|
||||
Array.from(editor.getElementsByClassName("states hovered")).forEach(el => el.classList.remove("hovered")); // clear all hovered
|
||||
const hovered = Array.from(editor.querySelectorAll("div")).find(el => el.dataset.id == id);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findGridCell, findGridAll, findCell, getPackPolygon, getGridPolygon} from "/src/utils/graphUtils";
|
||||
import {last, createTypedArray} from "/src/utils/arrayUtils";
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
import {byId} from "/src/utils/shorthands";
|
||||
|
||||
export function editHeightmap(options) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {findGridCell, getGridPolygon} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editIce() {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {showMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editLabel() {
|
||||
if (customization) return;
|
||||
|
|
@ -14,7 +15,7 @@ export function editLabel() {
|
|||
$("#labelEditor").dialog({
|
||||
title: "Edit Label",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "center top+10", at: "bottom", of: text, collision: "fit"},
|
||||
close: closeLabelEditor
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editMarker(markerI) {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function overviewMarkers() {
|
||||
if (customization) return;
|
||||
|
|
@ -21,7 +22,7 @@ export function overviewMarkers() {
|
|||
$("#markersOverview").dialog({
|
||||
title: "Markers Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: close,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -51,16 +52,14 @@ export function overviewMarkers() {
|
|||
function addLines() {
|
||||
const lines = pack.markers
|
||||
.map(({i, type, icon, pinned, lock}) => {
|
||||
return `<div class="states" data-i=${i} data-type="${type}">
|
||||
return /* html */ `<div class="states" data-i=${i} data-type="${type}">
|
||||
<div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
|
||||
<span style="padding-right:.1em" data-tip="Edit marker" class="icon-pencil"></span>
|
||||
<span style="padding-right:.1em" data-tip="Focus on marker position" class="icon-dot-circled pointer"></span>
|
||||
<span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)" class="icon-pin ${
|
||||
pinned ? "" : "inactive"
|
||||
}" pointer"></span>
|
||||
<span style="padding-right:.1em" class="locks pointer ${
|
||||
lock ? "icon-lock" : "icon-lock-open inactive"
|
||||
}" onmouseover="showElementLockTip(event)"></span>
|
||||
<span style="padding-right:.1em" data-tip="Pin marker (display only pinned markers)"
|
||||
class="icon-pin ${pinned ? "" : "inactive"}" pointer"></span>
|
||||
<span style="padding-right:.1em" data-tip="Toggle element lock. Lock will prevent it from regeneration"
|
||||
class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" ></span>
|
||||
<span data-tip="Remove marker" class="icon-trash-empty"></span>
|
||||
</div>`;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ function overviewMilitary() {
|
|||
$("#militaryOverview").dialog({
|
||||
title: "Military Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
|
|
@ -244,7 +244,7 @@ function overviewMilitary() {
|
|||
$("#militaryOptions").dialog({
|
||||
title: "Edit Military Units",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "center", at: "center", of: "svg"},
|
||||
buttons: {
|
||||
Apply: applyMilitaryOptions,
|
||||
|
|
@ -382,7 +382,7 @@ function overviewMilitary() {
|
|||
</table>`;
|
||||
|
||||
$("#alert").dialog({
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
title: `Limit unit`,
|
||||
buttons: {
|
||||
Invert: function () {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import {applyOption} from "./general";
|
||||
import {last} from "/src/utils/arrayUtils";
|
||||
import {byId, stored} from "/src/utils/shorthands";
|
||||
import {lock, locked} from "/src/scripts/options/lock";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
import {byId, stored} from "/src/utils/shorthands";
|
||||
|
||||
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
|
||||
$("#exitCustomization").draggable({handle: "div"});
|
||||
|
|
@ -963,7 +964,7 @@ function toggle3dOptions() {
|
|||
$("#options3d").dialog({
|
||||
title: "3D mode settings",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "right top", at: "right-30 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findAll, findCell, getPackPolygon, isLand} from "/src/utils/graphUtils";
|
||||
import {unique} from "/src/utils/arrayUtils";
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editProvinces() {
|
||||
if (customization) return;
|
||||
|
|
@ -20,7 +21,7 @@ export function editProvinces() {
|
|||
$("#provincesEditor").dialog({
|
||||
title: "Provinces Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: closeProvincesEditor,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -197,7 +198,7 @@ export function editProvinces() {
|
|||
togglePercentageMode();
|
||||
}
|
||||
applySorting(provincesHeader);
|
||||
$("#provincesEditor").dialog({width: fitContent()});
|
||||
$("#provincesEditor").dialog({width: "fit-content"});
|
||||
}
|
||||
|
||||
function getCapitalOptions(burgs, capital) {
|
||||
|
|
@ -748,7 +749,7 @@ export function editProvinces() {
|
|||
|
||||
$("#alert").dialog({
|
||||
title: "Provinces chart",
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "left bottom", at: "left+10 bottom-10", of: "svg"},
|
||||
buttons: {},
|
||||
close: () => {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {last} from "/src/utils/arrayUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editRegiment(selector) {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {last} from "/src/utils/arrayUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function overviewRegiments(state) {
|
||||
if (customization) return;
|
||||
|
|
@ -18,7 +19,7 @@ export function overviewRegiments(state) {
|
|||
$("#regimentsOverview").dialog({
|
||||
title: "Regiments Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editReliefIcon() {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {getPackPolygon, findCell} from "/src/utils/graphUtils";
|
||||
import {last} from "/src/utils/arrayUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function createRiver() {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {findCell, getPackPolygon} from "/src/utils/graphUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editRiver(id) {
|
||||
if (customization) return;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ function overviewRivers() {
|
|||
$("#riversOverview").dialog({
|
||||
title: "Rivers Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
"use strict";
|
||||
function editRoute(onClick) {
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editRoute(onClick) {
|
||||
if (customization) return;
|
||||
if (!onClick && elSelected && d3.event.target.id === elSelected.attr("id")) return;
|
||||
closeDialogs(".stable");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {byId} from "/src/utils/shorthands";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
window.UISubmap = (function () {
|
||||
byId("submapPointsInput").addEventListener("input", function () {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findCell} from "/src/utils/graphUtils";
|
||||
import {last} from "/src/utils/arrayUtils";
|
||||
import {clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
// module to control the Tools options (click to edit, to re-geenerate, tp add)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import {restoreDefaultEvents} from "/src/scripts/events";
|
||||
import {findAll, findCell, getPackPolygon} from "/src/utils/graphUtils";
|
||||
import {unique} from "/src/utils/arrayUtils";
|
||||
import {showMainTip, clearMainTip} from "/src/scripts/tooltips";
|
||||
|
||||
export function editZones() {
|
||||
closeDialogs();
|
||||
|
|
@ -16,7 +17,7 @@ export function editZones() {
|
|||
$("#zonesEditor").dialog({
|
||||
title: "Zones Editor",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
width: "fit-content",
|
||||
close: () => exitZonesManualAssignment("close"),
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
|
@ -136,7 +137,7 @@ export function editZones() {
|
|||
body.dataset.type = "absolute";
|
||||
togglePercentageMode();
|
||||
}
|
||||
$("#zonesEditor").dialog({width: fitContent()});
|
||||
$("#zonesEditor").dialog({width: "fit-content"});
|
||||
}
|
||||
|
||||
function zoneHighlightOn(event) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue