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

v. 0.5595b

Browse source 
Map size conflict on load popup
This commit is contained in:
Azgaar 2018-04-09 23:51:29 +03:00
parent dc35fd3395
commit fc120a990d
2 changed files with 67 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

6
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.5594b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.5595b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.5594b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.5595b"/>
<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">
@ -762,5 +762,5 @@
Type: <span id="feature">no</span> Type: <span id="feature">no</span>
</div> </div>
<script type="text/javascript" src="script.js?version=0.5594b"></script> <script type="text/javascript" src="script.js?version=0.5595b"></script>
</body> </body>

96
script.js
View file

@ -74,8 +74,8 @@ function fantasyMap() {
$(".fullscreen").removeClass("fullscreen"); $(".fullscreen").removeClass("fullscreen");
$("#mapScreenSize").addClass("icon-resize-full-alt").removeClass("icon-resize-small"); $("#mapScreenSize").addClass("icon-resize-full-alt").removeClass("icon-resize-small");
} else { } else {
mapWidthInput.value = $(window).width(); mapWidthInput.value = window.innerWidth;
mapHeightInput.value = $(window).height(); mapHeightInput.value = window.innerHeight;
} }
applyMapSize(); applyMapSize();
@ -2985,7 +2985,7 @@ function fantasyMap() {
console.error("There is already a burg in this cell. Select a free cell"); console.error("There is already a burg in this cell. Select a free cell");
return; return;
} }
var i = manors.length; var i = manors.ljsength;
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag)); burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y).call(d3.drag().on("start", elementDrag));
var group = labels.select("#addedBurgs"); var group = labels.select("#addedBurgs");
if (!group.size()) { if (!group.size()) {
@ -3472,7 +3472,7 @@ function fantasyMap() {
} }
// corvent number to short string with SI postfix // corvent number to short string with SI postfix
function si(n, d) { function si(n) {
if (n >= 1e9) {return rn(n / 1e9, 1) + "B";} if (n >= 1e9) {return rn(n / 1e9, 1) + "B";}
if (n >= 1e8) {return rn(n / 1e6) + "M";} if (n >= 1e8) {return rn(n / 1e6) + "M";}
if (n >= 1e6) {return rn(n / 1e6, 1) + "M";} if (n >= 1e6) {return rn(n / 1e6, 1) + "M";}
@ -3673,7 +3673,7 @@ function fantasyMap() {
message += ` of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are made every month`; message += ` of the Generator. Please note the Gennerator is still on demo and a lot of crusial changes are made every month`;
} }
alertMessage.innerHTML = message; alertMessage.innerHTML = message;
$("#alert").dialog({title: "Load map", buttons: {OK: function() {$(this).dialog("close");}}}); $("#alert").dialog({title: "Map version conflict", 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;}
@ -3685,12 +3685,55 @@ function fantasyMap() {
} else { } else {
states = JSON.parse(data[4]); states = JSON.parse(data[4]);
document.body.insertAdjacentHTML("afterbegin", data[5]); document.body.insertAdjacentHTML("afterbegin", data[5]);
} }
// redefine variables
svg = d3.select("svg"); svg = d3.select("svg");
mapWidth = +svg.attr("width"); // check map size
mapHeight = +svg.attr("height"); const nWidth = +svg.attr("width"), nHeight = +svg.attr("height");
// temporary fit svg element to current canvas size
svg.attr("width", mapWidth).attr("height", mapHeight);
if (nWidth !== mapWidth || nHeight !== mapHeight) {
let message = `The loaded map has size ${nWidth} x ${nHeight} pixels, `
message += `while the current canvas size is ${mapWidthInput.value} x ${mapHeightInput.value} pixels. `;
message += `You should change the canvas size to fit the loaded map. `;
message += `You may also keep the current size, but it can cause issues`;
alertMessage.innerHTML = message;
$("#alert").dialog({title: "Map size conflict",
buttons: {
"Keep": function() {
/* Should not play with scale as it breaks edit, re-save and re-load!
scale = Math.min(mapWidth / nWidth, mapHeight / nHeight);
const difX = (mapWidth - nWidth * scale) / 2;
const difY = (mapHeight - nHeight * scale) / 2;
const transform = d3.zoomIdentity.translate(difX, difY).scale(scale);
svg.transition().duration(2000).call(zoom.transform, transform);
oceanPattern.select("rect").attr("x", -difX).attr("y", -difY).attr("width", mapWidth).attr("height", mapHeight);
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);
$(this).dialog("close");
},
"Change": function() {
mapWidthInput.value = nWidth;
mapHeightInput.value = nHeight;
changeMapSize();
if ($("body").hasClass("fullscreen")) {
$("svg").addClass("fullscreen");
$("#mapScreenSize").removeClass("icon-resize-full-alt").addClass("icon-resize-small");
} else {
$("svg").removeClass("fullscreen");
$("#mapScreenSize").addClass("icon-resize-full-alt").removeClass("icon-resize-small");
}
$(this).dialog("close");
}
}
});
}
invokeActiveZooming();
// redefine variables
defs = svg.select("#deftemp"); defs = svg.select("#deftemp");
viewbox = svg.select("#viewbox"); viewbox = svg.select("#viewbox");
ocean = viewbox.select("#ocean"); ocean = viewbox.select("#ocean");
@ -3721,7 +3764,7 @@ function fantasyMap() {
towns = labels.select("#towns"); towns = labels.select("#towns");
countries = labels.select("#countries"); countries = labels.select("#countries");
ruler = viewbox.select("#ruler"); ruler = viewbox.select("#ruler");
// restore events // restore events
svg.call(zoom); svg.call(zoom);
viewbox.on("touchmove mousemove", moved).on("click", clicked); viewbox.on("touchmove mousemove", moved).on("click", clicked);
@ -3742,15 +3785,6 @@ function fantasyMap() {
cells = JSON.parse(data[2]); cells = JSON.parse(data[2]);
land = $.grep(cells, function(e) {return (e.height >= 0.2);}); land = $.grep(cells, function(e) {return (e.height >= 0.2);});
manors = JSON.parse(data[3]); 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);}); cells.map(function(e) {newPoints.push(e.data);});
calculateVoronoi(newPoints); calculateVoronoi(newPoints);
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1; capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
@ -4450,17 +4484,17 @@ function fantasyMap() {
if ($("body").hasClass("fullscreen")) { if ($("body").hasClass("fullscreen")) {
mapWidthInput.value = 960; // default width mapWidthInput.value = 960; // default width
mapHeightInput.value = 540; // default height mapHeightInput.value = 540; // default height
$(".fullscreen").removeClass("fullscreen"); localStorage.setItem("screenSize", [960, 540]);
$(".fullscreen").removeClass("fullscreen");
$(this).addClass("icon-resize-full-alt").removeClass("icon-resize-small"); $(this).addClass("icon-resize-full-alt").removeClass("icon-resize-small");
} else { } else {
mapWidthInput.value = $(window).width(); localStorage.removeItem("screenSize");
mapHeightInput.value = $(window).height(); mapWidthInput.value = window.innerWidth;
$("body").addClass("fullscreen"); mapHeightInput.value = window.innerHeight;
$("svg").addClass("fullscreen"); $("body, svg").addClass("fullscreen");
$(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();}
@ -5499,7 +5533,7 @@ function fantasyMap() {
$(".dialog").on("dialogopen", function(event, ui) { $(".dialog").on("dialogopen", function(event, ui) {
var pos = localStorage.getItem(this.id); var pos = localStorage.getItem(this.id);
if (!pos) {return;} if (!pos) {return;}
pos = pos.split(","); pos = pos.split(",");
if (pos[0] > $(window).width() - 100 || pos[1] > $(window).width() - 40) {return;} // prevent showing out of screen if (pos[0] > $(window).width() - 100 || pos[1] > $(window).width() - 40) {return;} // prevent showing out of screen
var at = `left+${pos[0]} top+${pos[1]}`; var at = `left+${pos[0]} top+${pos[1]}`;
$(this).dialog("option", "position", {my: "left top", at: at, of: "svg"}); $(this).dialog("option", "position", {my: "left top", at: at, of: "svg"});
@ -5659,8 +5693,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);
canvas.width = mapWidth;
canvas.height = mapHeight;
} }
// change map size on manual size change or window resize // change map size on manual size change or window resize
@ -5674,7 +5706,7 @@ function fantasyMap() {
scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]); scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]);
scY = d3.scaleLinear().domain([0, mapHeight]).range([0, mapHeight]); 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);}); lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]); zoom.scaleExtent([1, 40]).translateExtent([[0, 0], [mapWidth, mapHeight]]);
fitScaleBar(); fitScaleBar();
fitStatusBar(); fitStatusBar();
} }
@ -5682,8 +5714,8 @@ function fantasyMap() {
// fit full-screen map if window is resized // fit full-screen map if window is resized
$(window).resize(function() { $(window).resize(function() {
if ($("body").hasClass("fullscreen")) { if ($("body").hasClass("fullscreen")) {
mapWidthInput.value = $(window).width(); mapWidthInput.value = window.innerWidth;
mapHeightInput.value = $(window).height(); mapHeightInput.value = window.innerHeight;
applyMapSize(); applyMapSize();
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);