mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-17 17:51:24 +01:00
config generate markers dialog fixes
This commit is contained in:
Azgaar
parent
0c0e37d69b
commit
d2e9e007f7
5 changed files with 237 additions and 78 deletions
|
|
@ -782,8 +782,8 @@ window.Markers = (function () {
|
|||
|
||||
function addPortals(type, icon, multiplier) {
|
||||
const {burgs} = pack;
|
||||
let portals = burgs.slice(1, rand(12, 30) + 1).map(burg => [burg.name, burg.cell]);
|
||||
let quantity = getQuantity(portals, 10, 3, multiplier);
|
||||
let portals = burgs.slice(1, Math.ceil(burgs.length / 10) + 1).map(burg => [burg.name, burg.cell]);
|
||||
let quantity = getQuantity(portals, 16, 8, multiplier);
|
||||
if (!quantity) return;
|
||||
|
||||
while (quantity) {
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ function handleKeyup(event) {
|
|||
else if (shift && key === "T") overviewBurgs();
|
||||
else if (shift && key === "V") overviewRivers();
|
||||
else if (shift && key === "M") overviewMilitary();
|
||||
else if (shift && key === "K") overviewMarkers();
|
||||
else if (shift && key === "E") viewCellDetails();
|
||||
else if (shift && key === "1") toggleAddBurg();
|
||||
else if (shift && key === "2") toggleAddLabel();
|
||||
|
|
|
|||
130
modules/ui/markers-overview.js
Normal file
130
modules/ui/markers-overview.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
"use strict";
|
||||
function overviewMarkers() {
|
||||
if (customization) return;
|
||||
closeDialogs("#markersOverview, .stable");
|
||||
if (!layerIsOn("toggleMarkers")) toggleMarkers();
|
||||
|
||||
const body = document.getElementById("markersBody");
|
||||
const markersFooterNumber = document.getElementById("markersFooterNumber");
|
||||
const markersOverviewRefresh = document.getElementById("markersOverviewRefresh");
|
||||
const markersAddFromOverview = document.getElementById("markersAddFromOverview");
|
||||
const markersGenerationConfig = document.getElementById("markersGenerationConfig");
|
||||
const markersRemoveAll = document.getElementById("markersRemoveAll");
|
||||
|
||||
addLines();
|
||||
|
||||
$("#markersOverview").dialog({
|
||||
title: "Markers Overview",
|
||||
resizable: false,
|
||||
width: fitContent(),
|
||||
close: close,
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg", collision: "fit"}
|
||||
});
|
||||
|
||||
const listeners = [
|
||||
listen(markersOverviewRefresh, "click", addLines),
|
||||
listen(markersAddFromOverview, "click", () => {}),
|
||||
listen(markersGenerationConfig, "click", configMarkersGeneration),
|
||||
listen(markersRemoveAll, "click", triggerRemoveAll)
|
||||
];
|
||||
|
||||
function addLines() {
|
||||
const lines = pack.markers
|
||||
.map(({i, type, icon, lock}) => {
|
||||
return `<div class="states" data-id=${i} data-type="${type}">
|
||||
<div data-tip="Marker icon and type" style="width:12em">${icon} ${type}</div>
|
||||
<span data-tip="Edit marker" class="icon-pencil"></span>
|
||||
<span class="locks pointer ${lock ? "icon-lock" : "icon-lock-open inactive"}" onmouseover="showElementLockTip(event)"></span>
|
||||
<span data-tip="Remove marker" class="icon-trash-empty"></span>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
|
||||
body.innerHTML = lines;
|
||||
markersFooterNumber.innerText = pack.markers.length;
|
||||
|
||||
applySorting(markersHeader);
|
||||
}
|
||||
|
||||
function highlightMarkerOn(event) {
|
||||
if (!layerIsOn("toggleLabels")) toggleLabels();
|
||||
// burgLabels.select("[data-id='" + burg + "']").classed("drag", true);
|
||||
}
|
||||
|
||||
function highlightMarkerOff() {
|
||||
// burgLabels.selectAll("text.drag").classed("drag", false);
|
||||
}
|
||||
|
||||
function zoomInto() {
|
||||
const burg = +this.parentNode.dataset.id;
|
||||
const label = document.querySelector("#burgLabels [data-id='" + burg + "']");
|
||||
const x = +label.getAttribute("x"),
|
||||
y = +label.getAttribute("y");
|
||||
zoomTo(x, y, 8, 2000);
|
||||
}
|
||||
|
||||
function toggleLockStatus() {
|
||||
const burg = +this.parentNode.dataset.id;
|
||||
toggleBurgLock(burg);
|
||||
if (this.classList.contains("icon-lock")) {
|
||||
this.classList.remove("icon-lock");
|
||||
this.classList.add("icon-lock-open");
|
||||
this.classList.add("inactive");
|
||||
} else {
|
||||
this.classList.remove("icon-lock-open");
|
||||
this.classList.add("icon-lock");
|
||||
this.classList.remove("inactive");
|
||||
}
|
||||
}
|
||||
|
||||
function openEditor() {
|
||||
const burg = +this.parentNode.dataset.id;
|
||||
editBurg(burg);
|
||||
}
|
||||
|
||||
function triggerRemove(i) {
|
||||
confirmationDialog({
|
||||
title: "Remove marker",
|
||||
message: "Are you sure you want to remove this marker? The action cannot be reverted",
|
||||
confirm: "Remove",
|
||||
onConfirm: () => removeMarker(i)
|
||||
});
|
||||
}
|
||||
|
||||
function removeMarker(i) {
|
||||
notes = notes.filter(note => note.id !== `marker${i}`);
|
||||
pack.markers = pack.markers.filter(marker => marker.i !== i);
|
||||
document.getElementById(`marker${i}`)?.remove();
|
||||
}
|
||||
|
||||
function triggerRemoveAll() {
|
||||
confirmationDialog({
|
||||
title: "Remove all markers",
|
||||
message: "Are you sure you want to remove all non-locked markers? The action cannot be reverted",
|
||||
confirm: "Remove all",
|
||||
onConfirm: removeAllMarkers
|
||||
});
|
||||
}
|
||||
|
||||
function removeAllMarkers() {
|
||||
pack.markers = pack.markers.filter(({i, lock}) => {
|
||||
if (lock) return true;
|
||||
|
||||
const id = `marker${i}`;
|
||||
document.getElementById(id)?.remove();
|
||||
notes = notes.filter(note => note.id !== id);
|
||||
return false;
|
||||
});
|
||||
|
||||
addLines();
|
||||
}
|
||||
|
||||
function close() {
|
||||
listeners.forEach(removeListener => removeListener());
|
||||
|
||||
addMarker.classList.remove("pressed");
|
||||
markerAdd.classList.remove("pressed");
|
||||
restoreDefaultEvents();
|
||||
clearMainTip();
|
||||
}
|
||||
}
|
||||
|
|
@ -25,6 +25,7 @@ toolsContent.addEventListener("click", function (event) {
|
|||
else if (button === "overviewBurgsButton") overviewBurgs();
|
||||
else if (button === "overviewRiversButton") overviewRivers();
|
||||
else if (button === "overviewMilitaryButton") overviewMilitary();
|
||||
else if (button === "overviewMarkersButton") overviewMarkers();
|
||||
else if (button === "overviewCellsButton") viewCellDetails();
|
||||
|
||||
// click on Regenerate buttons
|
||||
|
|
@ -63,82 +64,7 @@ toolsContent.addEventListener("click", function (event) {
|
|||
}
|
||||
|
||||
// click on Configure regenerate buttons
|
||||
if (button === "configRegenerateMarkers") {
|
||||
const {markers} = pack;
|
||||
const config = Markers.getConfig();
|
||||
|
||||
const headers = `<thead style='font-weight:bold'><tr>
|
||||
<td data-tip="Marker type name">Type</td>
|
||||
<td data-tip="Marker icon">Icon</td>
|
||||
<td data-tip="Marker number multiplier">Multiplier</td>
|
||||
<td data-tip="Number of markers of that type on the current map">Number</td>
|
||||
</tr></thead>`;
|
||||
const lines = config.map(({type, icon, multiplier}, index) => {
|
||||
const inputId = `markerIconInput${index}`;
|
||||
return `<tr>
|
||||
<td><input value="${type}" /></td>
|
||||
<td>
|
||||
<input id="${inputId}" style="width: 5em" value="${icon}" />
|
||||
<i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
|
||||
</td>
|
||||
<td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
|
||||
<td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
|
||||
</tr>`;
|
||||
});
|
||||
const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
|
||||
alertMessage.innerHTML = table;
|
||||
|
||||
alertMessage.querySelectorAll("i").forEach(selectIconButton => {
|
||||
selectIconButton.addEventListener("click", function () {
|
||||
const input = this.previousElementSibling;
|
||||
selectIcon(input.value, icon => (input.value = icon));
|
||||
});
|
||||
});
|
||||
|
||||
const applyChanges = () => {
|
||||
const rows = alertMessage.querySelectorAll("tbody > tr");
|
||||
const rowsData = Array.from(rows).map(row => {
|
||||
const inputs = row.querySelectorAll("input");
|
||||
return {
|
||||
type: inputs[0].value,
|
||||
icon: inputs[1].value,
|
||||
multiplier: parseFloat(inputs[2].value)
|
||||
};
|
||||
});
|
||||
|
||||
const newConfig = config.map((markerType, index) => {
|
||||
const {type, icon, multiplier} = rowsData[index];
|
||||
return {...markerType, type, icon, multiplier};
|
||||
});
|
||||
Markers.setConfig(newConfig);
|
||||
|
||||
Markers.regenerate();
|
||||
turnButtonOn("toggleMarkers");
|
||||
drawMarkers();
|
||||
|
||||
$("#alert").dialog("close");
|
||||
};
|
||||
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Markers generation settings",
|
||||
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
|
||||
buttons: {
|
||||
Apply: applyChanges,
|
||||
Cancel: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
open: function () {
|
||||
const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
|
||||
buttons[0].addEventListener("mousemove", () => tip("Apply changes and regenerate markers"));
|
||||
buttons[1].addEventListener("mousemove", () => tip("Cancel changes"));
|
||||
},
|
||||
close: function () {
|
||||
$(this).dialog("destroy");
|
||||
}
|
||||
});
|
||||
}
|
||||
if (button === "configRegenerateMarkers") configMarkersGeneration();
|
||||
|
||||
// click on Add buttons
|
||||
if (button === "addLabel") toggleAddLabel();
|
||||
|
|
@ -498,6 +424,7 @@ function regenerateMarkers() {
|
|||
Markers.regenerate();
|
||||
turnButtonOn("toggleMarkers");
|
||||
drawMarkers();
|
||||
if (document.getElementById("markersOverviewRefresh").offsetParent) markersOverviewRefresh.click();
|
||||
}
|
||||
|
||||
function regenerateZones(event) {
|
||||
|
|
@ -790,6 +717,86 @@ function addMarkerOnClick() {
|
|||
}
|
||||
}
|
||||
|
||||
function configMarkersGeneration() {
|
||||
drawConfigTable();
|
||||
|
||||
function drawConfigTable() {
|
||||
const {markers} = pack;
|
||||
const config = Markers.getConfig();
|
||||
const headers = `<thead style='font-weight:bold'><tr>
|
||||
<td data-tip="Marker type name">Type</td>
|
||||
<td data-tip="Marker icon">Icon</td>
|
||||
<td data-tip="Marker number multiplier">Multiplier</td>
|
||||
<td data-tip="Number of markers of that type on the current map">Number</td>
|
||||
</tr></thead>`;
|
||||
const lines = config.map(({type, icon, multiplier}, index) => {
|
||||
const inputId = `markerIconInput${index}`;
|
||||
return `<tr>
|
||||
<td><input value="${type}" /></td>
|
||||
<td>
|
||||
<input id="${inputId}" style="width: 5em" value="${icon}" />
|
||||
<i class="icon-edit pointer" style="position: absolute; margin:.4em 0 0 -1.4em; font-size:.85em"></i>
|
||||
</td>
|
||||
<td><input type="number" min="0" max="100" step="0.1" value="${multiplier}" /></td>
|
||||
<td style="text-align:center">${markers.filter(marker => marker.type === type).length}</td>
|
||||
</tr>`;
|
||||
});
|
||||
const table = `<table class="table">${headers}<tbody>${lines.join("")}</tbody></table>`;
|
||||
alertMessage.innerHTML = table;
|
||||
|
||||
alertMessage.querySelectorAll("i").forEach(selectIconButton => {
|
||||
selectIconButton.addEventListener("click", function () {
|
||||
const input = this.previousElementSibling;
|
||||
selectIcon(input.value, icon => (input.value = icon));
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const applyChanges = () => {
|
||||
const rows = alertMessage.querySelectorAll("tbody > tr");
|
||||
const rowsData = Array.from(rows).map(row => {
|
||||
const inputs = row.querySelectorAll("input");
|
||||
return {
|
||||
type: inputs[0].value,
|
||||
icon: inputs[1].value,
|
||||
multiplier: parseFloat(inputs[2].value)
|
||||
};
|
||||
});
|
||||
|
||||
const config = Markers.getConfig();
|
||||
const newConfig = config.map((markerType, index) => {
|
||||
const {type, icon, multiplier} = rowsData[index];
|
||||
return {...markerType, type, icon, multiplier};
|
||||
});
|
||||
|
||||
Markers.setConfig(newConfig);
|
||||
};
|
||||
|
||||
$("#alert").dialog({
|
||||
resizable: false,
|
||||
title: "Markers generation settings",
|
||||
position: {my: "left top", at: "left+10 top+10", of: "svg", collision: "fit"},
|
||||
buttons: {
|
||||
Regenerate: () => {
|
||||
applyChanges();
|
||||
regenerateMarkers();
|
||||
drawConfigTable();
|
||||
},
|
||||
Close: function () {
|
||||
$(this).dialog("close");
|
||||
}
|
||||
},
|
||||
open: function () {
|
||||
const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
|
||||
buttons[0].addEventListener("mousemove", () => tip("Apply changes and regenerate markers"));
|
||||
buttons[1].addEventListener("mousemove", () => tip("Close the window"));
|
||||
},
|
||||
close: function () {
|
||||
$(this).dialog("destroy");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function viewCellDetails() {
|
||||
$("#cellInfo").dialog({
|
||||
resizable: false,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue