mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 10:01:23 +01:00
v. 0.5596b
This commit is contained in:
Azgaar
parent
03ec9b4334
commit
3e8be329f5
3 changed files with 171 additions and 132 deletions
|
|
@ -426,6 +426,8 @@ button.active {
|
|||
|
||||
#mapLayers {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tabcontent li {
|
||||
|
|
|
|||
59
index.html
59
index.html
File diff suppressed because one or more lines are too long
78
script.js
78
script.js
|
|
@ -39,6 +39,9 @@ function fantasyMap() {
|
|||
towns = labels.append("g").attr("id", "towns"),
|
||||
countries = labels.append("g").attr("id", "countries");
|
||||
|
||||
// main data variables
|
||||
var voronoi, diagram, polygons, points = [], sample;
|
||||
|
||||
// Common variables
|
||||
var mapWidth, mapHeight,
|
||||
customization, history = [], historyStage = -1, elSelected,
|
||||
|
|
@ -57,6 +60,11 @@ function fantasyMap() {
|
|||
colors8 = d3.scaleOrdinal(d3.schemeSet2),
|
||||
colors20 = d3.scaleOrdinal(d3.schemeCategory20);
|
||||
|
||||
// D3 drag and zoom behavior
|
||||
var scale = 1, viewX = 0, viewY = 0;
|
||||
var zoom = d3.zoom().scaleExtent([1, 40]).on("zoom", zoomed);
|
||||
svg.call(zoom);
|
||||
|
||||
// randomize options
|
||||
var graphSize = +sizeInput.value,
|
||||
manorsCount = manorsOutput.innerHTML = +manorsInput.value,
|
||||
|
|
@ -95,17 +103,6 @@ function fantasyMap() {
|
|||
scY = d3.scaleLinear().domain([0, mapHeight]).range([0, mapHeight]),
|
||||
lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
|
||||
|
||||
// main data variables
|
||||
var voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
|
||||
var diagram, polygons, points = [], sample;
|
||||
|
||||
// D3 drag and zoom behavior
|
||||
var scale = 1, viewX = 0, viewY = 0;
|
||||
var zoom = d3.zoom().scaleExtent([1, 40]) // 40x is default max zoom
|
||||
.translateExtent([[0, 0], [mapWidth, mapHeight]]) // 0,0 as default extent
|
||||
.on("zoom", zoomed);
|
||||
svg.call(zoom);
|
||||
|
||||
$("#optionsContainer").draggable({handle: ".drag-trigger", snap: "svg", snapMode: "both"});
|
||||
$("#mapLayers").sortable({items: "li:not(.solid)", cancel: ".solid", update: moveLayer});
|
||||
$("#templateBody").sortable({items: "div:not(div[data-type='Mountain'])"});
|
||||
|
|
@ -2711,9 +2708,17 @@ function fantasyMap() {
|
|||
});
|
||||
// restore heightmap layer if it was turned on
|
||||
if (!$("#toggleHeight").hasClass("buttonoff") && !terrs.selectAll("path").size()) {toggleHeight();}
|
||||
closeAllDialogs();
|
||||
console.timeEnd("cleanData");
|
||||
}
|
||||
|
||||
// close all dialogs on re-load
|
||||
function closeAllDialogs() {
|
||||
$(".dialog:visible").each(function(e) {
|
||||
$(this).dialog("close");
|
||||
});
|
||||
}
|
||||
|
||||
// Draw the water flux system (for dubugging)
|
||||
function toggleFlux() {
|
||||
var colorFlux = d3.scaleSequential(d3.interpolateBlues);
|
||||
|
|
@ -3647,6 +3652,7 @@ function fantasyMap() {
|
|||
// Map Loader based on FileSystem API
|
||||
$("#fileToLoad").change(function() {
|
||||
console.time("loadMap");
|
||||
closeAllDialogs();
|
||||
var fileToLoad = this.files[0];
|
||||
this.value = "";
|
||||
var fileReader = new FileReader();
|
||||
|
|
@ -3680,7 +3686,7 @@ function fantasyMap() {
|
|||
// replace svg
|
||||
svg.remove();
|
||||
if (mapVersion === "0.52b" || mapVersion === "0.53b") {
|
||||
states = [];
|
||||
states = []; // no states data
|
||||
document.body.insertAdjacentHTML("afterbegin", data[4]);
|
||||
} else {
|
||||
states = JSON.parse(data[4]);
|
||||
|
|
@ -3711,8 +3717,9 @@ function fantasyMap() {
|
|||
oceanLayers.select("rect").attr("x", -difX).attr("y", -difY).attr("width", mapWidth).attr("height", mapHeight);
|
||||
zoom.scaleExtent([scale, 40]).translateExtent([[-difX, -difY], [mapWidth / scale, mapHeight / scale]]);
|
||||
*/
|
||||
oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight);
|
||||
oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight);
|
||||
voronoi = d3.voronoi().extent([[0, 0], [nWidth, nHeight]]);
|
||||
zoom.translateExtent([[0, 0], [nWidth, nHeight]]);
|
||||
applyLoadedData(data);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
"Change": function() {
|
||||
|
|
@ -3726,13 +3733,19 @@ function fantasyMap() {
|
|||
$("svg").removeClass("fullscreen");
|
||||
$("#mapScreenSize").addClass("icon-resize-full-alt").removeClass("icon-resize-small");
|
||||
}
|
||||
applyLoadedData(data);
|
||||
$(this).dialog("close");
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
applyLoadedData(data);
|
||||
}
|
||||
invokeActiveZooming();
|
||||
};
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
});
|
||||
|
||||
function applyLoadedData(data) {
|
||||
// redefine variables
|
||||
defs = svg.select("#deftemp");
|
||||
viewbox = svg.select("#viewbox");
|
||||
|
|
@ -3812,11 +3825,10 @@ function fantasyMap() {
|
|||
el.attr("data-size", +el.attr("font-size"));
|
||||
if (el.style("display") === "none") {el.node().style.display = null;}
|
||||
});
|
||||
|
||||
invokeActiveZooming();
|
||||
console.timeEnd("loadMap");
|
||||
};
|
||||
fileReader.readAsText(fileToLoad, "UTF-8");
|
||||
});
|
||||
}
|
||||
|
||||
// Poisson-disc sampling for a points
|
||||
// Source: bl.ocks.org/mbostock/99049112373e12709381; Based on https://www.jasondavies.com/poisson-disc
|
||||
|
|
@ -4046,7 +4058,7 @@ function fantasyMap() {
|
|||
return;
|
||||
}
|
||||
if (id === "editCountries") {editCountries();}
|
||||
if (id === "editScale") {editScale();}
|
||||
if (id === "editScale" || id === "editScaleCountries" || id === "editScaleBurgs") {editScale();}
|
||||
if (id === "countriesManually") {
|
||||
customization = 2;
|
||||
mockRegions();
|
||||
|
|
@ -4102,6 +4114,7 @@ function fantasyMap() {
|
|||
customization = 0;
|
||||
viewbox.style("cursor", "default").on(".drag", null);
|
||||
}
|
||||
if (id === "countriesApply") {$("#countriesManuallyCancel").click();}
|
||||
if (id === "countriesRandomize") {
|
||||
var mod = +powerInput.value * 2;
|
||||
$(".statePower").each(function(e, i) {
|
||||
|
|
@ -4114,7 +4127,7 @@ function fantasyMap() {
|
|||
});
|
||||
regenerateCountries();
|
||||
}
|
||||
if (id === "countriesAdd") {
|
||||
if (id === "countriesAddM" || id === "countriesAddR" || id === "countriesAddG") {
|
||||
var i = states.length;
|
||||
// move neutrals to the last line
|
||||
if (states[i-1].color === "neutral") {states[i-1].i = i; i -= 1;}
|
||||
|
|
@ -4596,6 +4609,23 @@ function fantasyMap() {
|
|||
// support save options
|
||||
$("#saveDropdown > div").click(function() {
|
||||
var id = this.id;
|
||||
var dns_allow_popup_message = localStorage.getItem("dns_allow_popup_message");
|
||||
if (!dns_allow_popup_message) {
|
||||
var message = "Generator uses pop-up window to download files. ";
|
||||
message += "Please ensure your browser does not block popups. ";
|
||||
message += "Please check browser settings and turn off adBlocker if it is enabled";
|
||||
alertMessage.innerHTML = message;
|
||||
$("#alert").dialog({title: "File saver. Please enable popups!",
|
||||
buttons: {
|
||||
"Don't show again": function() {
|
||||
localStorage.setItem("dns_allow_popup_message", true);
|
||||
$(this).dialog("close");
|
||||
},
|
||||
Close: function() {$(this).dialog("close");}
|
||||
},
|
||||
position: {my: "center", at: "center", of: "svg"}
|
||||
});
|
||||
}
|
||||
if (id === "saveMap") {saveMap();}
|
||||
if (id === "saveSVG") {saveAsImage("svg");}
|
||||
if (id === "savePNG") {saveAsImage("png");}
|
||||
|
|
@ -5195,7 +5225,9 @@ function fantasyMap() {
|
|||
title: "Countries Editor",
|
||||
minHeight: "auto", width: "auto",
|
||||
position: {my: "right top", at: "right-10 top+10", of: "svg"}
|
||||
}).on("dialogclose", function() {$("#countriesManuallyCancel").click();});
|
||||
}).on("dialogclose", function() {
|
||||
if (customization === 2 || customization === 3) {$("#countriesManuallyCancel").click()};
|
||||
});
|
||||
}
|
||||
// restore customization Editor version
|
||||
if (customization === 3) {
|
||||
|
|
@ -5692,7 +5724,9 @@ function fantasyMap() {
|
|||
function applyMapSize() {
|
||||
mapWidth = +mapWidthInput.value;
|
||||
mapHeight = +mapHeightInput.value;
|
||||
voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
|
||||
svg.attr("width", mapWidth).attr("height", mapHeight);
|
||||
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
|
||||
}
|
||||
|
||||
// change map size on manual size change or window resize
|
||||
|
|
@ -5701,12 +5735,12 @@ function fantasyMap() {
|
|||
mapHeight = +mapHeightInput.value;
|
||||
svg.attr("width", mapWidth).attr("height", mapHeight);
|
||||
voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
|
||||
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
|
||||
oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight);
|
||||
oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight);
|
||||
scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]);
|
||||
scY = d3.scaleLinear().domain([0, mapHeight]).range([0, mapHeight]);
|
||||
lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
|
||||
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
|
||||
fitScaleBar();
|
||||
fitStatusBar();
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue