backups/Fantasy-Map-Generator
1
0
Fork 0
mirror of https://github.com/Azgaar/Fantasy-Map-Generator.git synced 2025-12-18 18:11:24 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

v. 0.5591b

Browse source
This commit is contained in:
Azgaar 2018-04-03 21:56:35 +03:00
parent 9bd3d5aba2
commit 8dae6b7986
3 changed files with 63 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
index.css
View file

Binary file not shown.

16
index.html
View file

@ -28,8 +28,8 @@
<script src="libs/polylabel.min.js"></script> <script src="libs/polylabel.min.js"></script>
<script src="libs/quantize.min.js" defer></script> <script src="libs/quantize.min.js" defer></script>
<script src="libs/d3-hexbin.v0.2.min.js" defer></script> <script src="libs/d3-hexbin.v0.2.min.js" defer></script>
<link rel="stylesheet" type="text/css" href="index.css?version=0.559b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.5591b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.559b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.5591b"/>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/> <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
</head> </head>
<body class="fullscreen"> <body class="fullscreen">
@ -152,6 +152,7 @@
<li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li> <li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
<li title="Toggle Burg icons" id="toggleIcons" onclick="$('#burgs').fadeToggle()">Burgs</li> <li title="Toggle Burg icons" id="toggleIcons" onclick="$('#burgs').fadeToggle()">Burgs</li>
</div> </div>
<label id="activeZoomingLabel">Hide small labels: <input id="activeZooming" type="checkbox" checked></label>
</div> </div>
<div id="styleContent" class="tabcontent"> <div id="styleContent" class="tabcontent">
<p style="display: inline-block;">Select element:</p> <p style="display: inline-block;">Select element:</p>
@ -251,7 +252,7 @@
<p>Generate new map to apply the options!</p> <p>Generate new map to apply the options!</p>
<table> <table>
<tr> <tr>
<td title="Canvas size">Map size</td> <td title="Map size. Will be remembered on change">Map size</td>
<td style="width: 130px;"> <td style="width: 130px;">
<span title="width">w:</span> <span title="width">w:</span>
<input class="pairedNumber" id="mapWidthInput" type="number" min="240" value="960"> <input class="pairedNumber" id="mapWidthInput" type="number" min="240" value="960">
@ -259,7 +260,7 @@
<input class="pairedNumber" id="mapHeightInput" type="number" min="135" value="540"> <input class="pairedNumber" id="mapHeightInput" type="number" min="135" value="540">
</td> </td>
<td> <td>
<a title="Toggle full-screen / window view" id="mapScreenSize" class="icon-resize-small"></a> <a title="Toggle full-screen view" id="mapScreenSize" class="icon-resize-small"></a>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -437,9 +438,8 @@
<button id="saveButton" title="Select file format to save map" class="options">Save as</button> <button id="saveButton" title="Select file format to save map" class="options">Save as</button>
<div id="saveDropdown"> <div id="saveDropdown">
<div id="saveMap" title="Save as fully functional map in .map format">.map</div> <div id="saveMap" title="Save as fully functional map in .map format">.map</div>
<div id="saveSVG" title="Download the map as .svg image for later use in vector graphics editors">.svg</div> <div id="saveSVG" title="Download the map as .svg image (open in browser on vector graphics editor)">.svg</div>
<div id="savePNG" title="Download the visible part of the map as .png image">.png</div> <div id="savePNG" title="Download the visible part of the map as 4K .png image (may be pretty slow)">.png</div>
<div id="activeZooming" title="Click to show hidden elements (like labels)" class="icon-eye-off"></div>
</div> </div>
<button id="loadMap" title="Load fully functional map in a .map format" class="options">Load</button> <button id="loadMap" title="Load fully functional map in a .map format" class="options">Load</button>
<input type="file" accept=".map" id="fileToLoad"> <input type="file" accept=".map" id="fileToLoad">
@ -761,5 +761,5 @@
Type: <span id="feature">no</span> Type: <span id="feature">no</span>
</div> </div>
<script type="text/javascript" src="script.js?version=0.559b"></script> <script type="text/javascript" src="script.js?version=0.5591b"></script>
</body> </body>

85
script.js
View file

@ -143,10 +143,10 @@ function fantasyMap() {
var relative = rn((desired + (desired / scale)) / 2, 2); var relative = rn((desired + (desired / scale)) / 2, 2);
el.attr("font-size", relative); el.attr("font-size", relative);
var size = +el.attr("font-size"); var size = +el.attr("font-size");
if ($("#activeZooming").hasClass("icon-eye-off") && size * scale < 6) { if (activeZooming.checked && size * scale < 6) {
el.classed("hidden", true); el.classed("hidden", true);
} else { } else {
el.classed("hidden", false) el.classed("hidden", false);
} }
}); });
if (ruler.size()) { if (ruler.size()) {
@ -3500,6 +3500,11 @@ function fantasyMap() {
// for each g element get inline style // for each g element get inline style
var emptyG = clone.append("g").node(); var emptyG = clone.append("g").node();
var defaultStyles = window.getComputedStyle(emptyG); var defaultStyles = window.getComputedStyle(emptyG);
clone.select("#labels").selectAll(".hidden").each(function(e) {
// show hidden labels but in reduced size
var size = d3.select(this).attr("font-size");
d3.select(this).classed("hidden", false).attr("font-size", rn(size * 0.8, 2));
});
clone.selectAll("g, #ruler > g > *, #scaleBar > text").each(function(d) { clone.selectAll("g, #ruler > g > *, #scaleBar > text").each(function(d) {
var compStyle = window.getComputedStyle(this); var compStyle = window.getComputedStyle(this);
var style = ""; var style = "";
@ -3524,17 +3529,25 @@ function fantasyMap() {
var link = document.createElement("a"); var link = document.createElement("a");
link.target = "_blank"; link.target = "_blank";
if (type === "png") { if (type === "png") {
canvas.width = $(window).width(); var ratio = mapHeight / mapWidth;
canvas.height = $(window).height(); canvas.width = 3840; // ultraHD
canvas.height = rn(3840 * ratio);
var img = new Image(); var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url; img.src = url;
img.onload = function(){ img.onload = function(){
window.URL.revokeObjectURL(url);
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
link.download = "fantasy_map_" + Date.now() + ".png"; link.download = "fantasy_map_" + Date.now() + ".png";
link.href = canvas.toDataURL('image/png'); canvas.toBlob(function(blob) {
link.href = window.URL.createObjectURL(blob);
document.body.appendChild(link);
link.click();
window.setTimeout(function() {window.URL.revokeObjectURL(link.href);}, 5000);
});
canvas.style.opacity = 0; canvas.style.opacity = 0;
document.body.appendChild(link); canvas.width = mapWidth;
link.click(); canvas.height = mapHeight;
} }
} else { } else {
link.download = "fantasy_map_" + Date.now() + ".svg"; link.download = "fantasy_map_" + Date.now() + ".svg";
@ -3543,7 +3556,7 @@ function fantasyMap() {
link.click(); link.click();
} }
console.timeEnd("saveAsImage"); console.timeEnd("saveAsImage");
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 10000); window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000);
}); });
} }
@ -3652,14 +3665,9 @@ function fantasyMap() {
$("#alert").dialog({title: "Load map", buttons: {OK: function() {$(this).dialog("close");}}}); $("#alert").dialog({title: "Load map", buttons: {OK: function() {$(this).dialog("close");}}});
} }
if (mapVersion.length > 10) {console.error("Cannot load map"); return;} if (mapVersion.length > 10) {console.error("Cannot load map"); return;}
newPoints = [], points = [], cells = [], land = [], riversData = [], island = 0, manors = [], states = [], queue = [];
// replace svg
svg.remove(); svg.remove();
points = JSON.parse(data[1]);
cells = JSON.parse(data[2]);
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
cells.map(function(e) {newPoints.push(e.data);});
calculateVoronoi(newPoints);
manors = JSON.parse(data[3]);
if (mapVersion === "0.52b" || mapVersion === "0.53b") { if (mapVersion === "0.52b" || mapVersion === "0.53b") {
states = []; states = [];
document.body.insertAdjacentHTML("afterbegin", data[4]); document.body.insertAdjacentHTML("afterbegin", data[4]);
@ -3669,12 +3677,11 @@ function fantasyMap() {
} }
// redefine variables // redefine variables
customization = 0, elSelected = ""; svg = d3.select("svg");
svg = d3.select("svg").call(zoom);
mapWidth = +svg.attr("width"); mapWidth = +svg.attr("width");
mapHeight = +svg.attr("height"); mapHeight = +svg.attr("height");
defs = svg.select("#deftemp"); defs = svg.select("#deftemp");
viewbox = svg.select("#viewbox").on("touchmove mousemove", moved).on("click", clicked); viewbox = svg.select("#viewbox");
ocean = viewbox.select("#ocean"); ocean = viewbox.select("#ocean");
oceanLayers = ocean.select("#oceanLayers"); oceanLayers = ocean.select("#oceanLayers");
oceanPattern = ocean.select("#oceanPattern"); oceanPattern = ocean.select("#oceanPattern");
@ -3705,6 +3712,8 @@ function fantasyMap() {
ruler = viewbox.select("#ruler"); ruler = viewbox.select("#ruler");
// restore events // restore events
svg.call(zoom);
viewbox.on("touchmove mousemove", moved).on("click", clicked);
overlay.selectAll("*").call(d3.drag().on("start", elementDrag)); overlay.selectAll("*").call(d3.drag().on("start", elementDrag));
labels.selectAll("text").on("click", editLabel); labels.selectAll("text").on("click", editLabel);
burgs.selectAll("circle").call(d3.drag().on("start", elementDrag)); burgs.selectAll("circle").call(d3.drag().on("start", elementDrag));
@ -3716,7 +3725,23 @@ function fantasyMap() {
ruler.selectAll(".linear").selectAll("circle:not(.center)").call(d3.drag().on("drag", rulerEdgeDrag)); ruler.selectAll(".linear").selectAll("circle:not(.center)").call(d3.drag().on("drag", rulerEdgeDrag));
ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag)); ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
// get countries count // update data
newPoints = [], riversData = [], island = 0, queue = [], customization = 0, elSelected = "";
points = JSON.parse(data[1]);
cells = JSON.parse(data[2]);
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
manors = JSON.parse(data[3]);
mapWidthInput.value = +svg.attr("width");
mapHeightInput.value = +svg.attr("height");
if (mapWidthInput.value < $(window).width() || mapHeightInput.value < $(window).height()) {
$(".fullscreen").removeClass("fullscreen");
} else {
$("body").addClass("fullscreen");
$("svg").addClass("fullscreen");
}
changeMapSize();
cells.map(function(e) {newPoints.push(e.data);});
calculateVoronoi(newPoints);
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1; capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
regionsOutput.innerHTML = regionsInput.value = capitalsCount; regionsOutput.innerHTML = regionsInput.value = capitalsCount;
@ -4421,6 +4446,7 @@ function fantasyMap() {
$(this).removeClass("icon-resize-full-alt").addClass("icon-resize-small"); $(this).removeClass("icon-resize-full-alt").addClass("icon-resize-small");
} }
changeMapSize(); changeMapSize();
localStorage.setItem("screenSize", [+mapWidthInput.value, +mapHeightInput.value]);
} }
if (id === "saveButton") {$("#saveDropdown").slideToggle();} if (id === "saveButton") {$("#saveDropdown").slideToggle();}
if (id === "loadMap") {fileToLoad.click();} if (id === "loadMap") {fileToLoad.click();}
@ -4525,12 +4551,6 @@ function fantasyMap() {
if (id === "saveMap") {saveMap();} if (id === "saveMap") {saveMap();}
if (id === "saveSVG") {saveAsImage("svg");} if (id === "saveSVG") {saveAsImage("svg");}
if (id === "savePNG") {saveAsImage("png");} if (id === "savePNG") {saveAsImage("png");}
if (id === "activeZooming") {
$(this).toggleClass("icon-eye icon-eye-off");
zoomUpdate();
invokeActiveZooming();
return;
}
$("#saveDropdown").slideUp("fast"); $("#saveDropdown").slideUp("fast");
}); });
@ -5633,11 +5653,6 @@ function fantasyMap() {
mapWidth = +mapWidthInput.value; mapWidth = +mapWidthInput.value;
mapHeight = +mapHeightInput.value; mapHeight = +mapHeightInput.value;
svg.attr("width", mapWidth).attr("height", mapHeight); svg.attr("width", mapWidth).attr("height", mapHeight);
if ($("body").hasClass("fullscreen")) {
localStorage.removeItem("screenSize");
} else {
localStorage.setItem("screenSize", [mapWidth, mapHeight]);
}
voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]); voronoi = d3.voronoi().extent([[0, 0], [mapWidth, mapHeight]]);
oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight); oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight);
oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight); oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight);
@ -5847,7 +5862,15 @@ function fantasyMap() {
toggleOverlay(); toggleOverlay();
} }
} }
if (id === "mapWidthInput" || id === "mapHeightInput") {changeMapSize();} if (id === "activeZooming") {
zoomUpdate();
invokeActiveZooming();
return;
}
if (id === "mapWidthInput" || id === "mapHeightInput") {
changeMapSize();
localStorage.setItem("screenSize", [+mapWidthInput.value, +mapHeightInput.value]);
}
if (id === "sizeInput") {graphSize = sizeOutput.value = this.value;} if (id === "sizeInput") {graphSize = sizeOutput.value = this.value;}
if (id === "randomizeInput") {randomizeOutput.innerHTML = +this.value ? "✓" : "✕";} if (id === "randomizeInput") {randomizeOutput.innerHTML = +this.value ? "✓" : "✕";}
if (id === "manorsInput") { if (id === "manorsInput") {