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.558b

Browse source 
Fix labels resize option. Add option to restore default style
This commit is contained in:
Azgaar 2018-04-01 22:39:48 +03:00
parent 23a4e18693
commit 750003a280
3 changed files with 63 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
index.css
View file

Binary file not shown.

9
index.html
View file

@ -28,8 +28,8 @@
<script src="libs/polylabel.js"></script> <script src="libs/polylabel.js"></script>
<script src="libs/quantize.js" defer></script> <script src="libs/quantize.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.557b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.558b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.557b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.558b"/>
<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">
@ -177,6 +177,7 @@
<option value="scaleBar">Scale bar</option> <option value="scaleBar">Scale bar</option>
<option value="ruler">Rulers</option> <option value="ruler">Rulers</option>
</select> </select>
<a id="restoreStyle" title="Restore initial style" class="icon-ccw"></a>
<div id="styleInputs"> <div id="styleInputs">
<div id="styleOverlay"> <div id="styleOverlay">
<br>Overlay type: <select id="styleOverlayType" class="pureInput"> <br>Overlay type: <select id="styleOverlayType" class="pureInput">
@ -653,7 +654,7 @@
<button id="countriesAdd" title="Add country" class="icon-plus"></button> <button id="countriesAdd" title="Add country" class="icon-plus"></button>
<button id="countriesManuallyCancel" title="Cancel assignment" class="icon-cancel"></button> <button id="countriesManuallyCancel" title="Cancel assignment" class="icon-cancel"></button>
<label title="Set the brush power" class="italic">Brush size:</label> <label title="Set the brush power" class="italic">Brush size:</label>
<input id="countriesManuallyBrush" onchange="this.title = this.value" type="range" min="1" max="7" value="2"> <input id="countriesManuallyBrush" onchange="this.title = this.value" type="range" min="1" max="7" value="3">
</div> </div>
<div id="countriesRegenerateButtons" style="display: none"> <div id="countriesRegenerateButtons" style="display: none">
<button id="countriesManuallyCancel" title="Apply assignment" class="icon-check"></button> <button id="countriesManuallyCancel" title="Apply assignment" class="icon-check"></button>
@ -760,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.557b"></script> <script type="text/javascript" src="script.js?version=0.558b"></script>
</body> </body>

97
script.js
View file

@ -35,24 +35,10 @@ function fantasyMap() {
burgs = icons.append("g").attr("id", "burgs"), burgs = icons.append("g").attr("id", "burgs"),
ruler = viewbox.append("g").attr("id", "ruler"), ruler = viewbox.append("g").attr("id", "ruler"),
debug = viewbox.append("g").attr("id", "debug"); debug = viewbox.append("g").attr("id", "debug");
capitals = labels.append("g").attr("id", "capitals"),
// Declare styles towns = labels.append("g").attr("id", "towns"),
viewbox.on("touchmove mousemove", moved).on("click", clicked); countries = labels.append("g").attr("id", "countries"),
landmass.attr("fill", "#eef6fb"); addedLabels = labels.append("g").attr("id", "addedLabels");
coastline.attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("filter", "url(#dropShadow)");
regions.attr("opacity", .55);
stateBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .5).attr("stroke-dasharray", "1.2 1.5").attr("stroke-linecap", "butt");
neutralBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .3).attr("stroke-dasharray", "1 1.5").attr("stroke-linecap", "butt");
cults.attr("opacity", .6);
rivers.attr("fill", "#5d97bb");
lakes.attr("fill", "#a6c1fd").attr("stroke", "#477794").attr("stroke-width", .3);
burgs.attr("fill", "#ffffff").attr("stroke", "#3e3e4b");
roads.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .4).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
trails.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .1).attr("stroke-dasharray", ".5 1").attr("stroke-linecap", "round");
searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .2).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
grid.attr("stroke", "#808080").attr("stroke-width", .1);
ruler.style("display", "none").attr("filter", "url(#dropShadow)");
overlay.attr("stroke", "#808080").attr("stroke-width", .5);
// Common variables // Common variables
var mapWidth, mapHeight, var mapWidth, mapHeight,
@ -60,7 +46,10 @@ function fantasyMap() {
cells = [], land = [], riversData = [], manors = [], states = [], cells = [], land = [], riversData = [], manors = [], states = [],
queue = [], chain = {}, island = 0, cultureTree, manorTree, shift = false; queue = [], chain = {}, island = 0, cultureTree, manorTree, shift = false;
// canvas // default fonts
var fonts = ["Amatic+SC:700", "Georgia", "Times New Roman", "Arial", "Comic Sans MS", "Lucida Sans Unicode", "Verdana", "Courier New"];
// canvas
var canvas = document.getElementById("canvas"), var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
@ -78,15 +67,6 @@ function fantasyMap() {
sharpness = +sharpnessInput.value, sharpness = +sharpnessInput.value,
precipitation = +precInput.value; precipitation = +precInput.value;
// Groups for labels
var fonts = ["Amatic+SC:700", "Georgia", "Times New Roman", "Arial", "Comic Sans MS", "Lucida Sans Unicode", "Verdana", "Courier New"],
size = rn(10 - capitalsCount / 20),
capitals = labels.append("g").attr("id", "capitals").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size),
towns = labels.append("g").attr("id", "towns").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 4).attr("data-size", 4),
size = rn(18 - capitalsCount / 6),
countries = labels.append("g").attr("id", "countries").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size),
addedLabels = labels.append("g").attr("id", "addedLabels").attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 18).attr("data-size", 18);
// Get screen size // Get screen size
if (localStorage.getItem("screenSize")) { if (localStorage.getItem("screenSize")) {
var stored = localStorage.getItem("screenSize").split(","); var stored = localStorage.getItem("screenSize").split(",");
@ -99,19 +79,18 @@ function fantasyMap() {
mapHeightInput.value = $(window).height(); mapHeightInput.value = $(window).height();
} }
applyMapSize(); applyMapSize();
// append ocean pattern
oceanPattern.append("rect").attr("x", 0).attr("y", 0).attr("width", mapWidth).attr("height", mapHeight).attr("fill", "url(#oceanPattern)").attr("stroke", "none");
oceanLayers.append("rect").attr("x", 0).attr("y", 0).attr("width", mapWidth).attr("height", mapHeight).attr("id", "oceanBase");
applyDefaultStyle();
// toggle off loading screen and on menus // toggle off loading screen and on menus
$("#loading").remove(); $("#loading").remove();
$("#statusbar").css("top", mapHeight - 20).show(); $("#statusbar").css("top", mapHeight - 20).show();
$("#optionsContainer").show(); $("#optionsContainer").show();
// append ocean pattern
oceanPattern.append("rect").attr("x", 0).attr("y", 0)
.attr("width", mapWidth).attr("height", mapHeight).attr("class", "pattern")
.attr("stroke", "none").attr("fill", "url(#oceanPattern)");
oceanLayers.append("rect").attr("x", 0).attr("y", 0)
.attr("width", mapWidth).attr("height", mapHeight).attr("id", "oceanBase").attr("fill", "#5167a9");
// D3 Line generator // D3 Line generator
var scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]), var 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]),
@ -2072,7 +2051,7 @@ function fantasyMap() {
if (ports.length === 0) { if (ports.length === 0) {
var portCandidates = $.grep(manorsOnIsland, function(c) {return (c.harbor && c.ctype === 1);}); var portCandidates = $.grep(manorsOnIsland, function(c) {return (c.harbor && c.ctype === 1);});
if (portCandidates.length > 0) { if (portCandidates.length > 0) {
console.log("No ports on island " + manorsOnIsland[0].fn + ". Upgrading first burg to port"); // No ports on island. Upgrading first burg to port
portCandidates[0].harbor = 1; portCandidates[0].harbor = 1;
portCandidates[0].port = true; portCandidates[0].port = true;
portCandidates[0].data[0] = portCandidates[0].coastX; portCandidates[0].data[0] = portCandidates[0].coastX;
@ -2083,7 +2062,7 @@ function fantasyMap() {
// add 1 score point for every other burg on island (as it's the only port) // add 1 score point for every other burg on island (as it's the only port)
portCandidates[0].score += Math.floor((portCandidates.length - 1) / 2); portCandidates[0].score += Math.floor((portCandidates.length - 1) / 2);
} else { } else {
console.log("No ports on island " + manorsOnIsland[0].fn + ". Reducing score for " + manorsOnIsland.length + " burgs"); // No ports on island. Reducing score for burgs
manorsOnIsland.map(function(e) {e.score -= 2;}); manorsOnIsland.map(function(e) {e.score -= 2;});
} }
} }
@ -4403,6 +4382,19 @@ function fantasyMap() {
} }
return; return;
} }
if (id === "restoreStyle") {
alertMessage.innerHTML = "Are you sure you want to restore default style?";
$("#alert").dialog({resizable: false, title: "Restore style",
buttons: {
"Restore": function() {
applyDefaultStyle();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}});
}
if ($(this).hasClass('radio') && parent === "mapFilters") { if ($(this).hasClass('radio') && parent === "mapFilters") {
$("svg").removeClass(); $("svg").removeClass();
if ($(this).hasClass('pressed')) { if ($(this).hasClass('pressed')) {
@ -4453,7 +4445,7 @@ function fantasyMap() {
var mod = id === "styleFontPlus" ? 1.1 : 0.9; var mod = id === "styleFontPlus" ? 1.1 : 0.9;
el.selectAll("g").each(function() { el.selectAll("g").each(function() {
var el = d3.select(this); var el = d3.select(this);
var size = rn(el.attr("font-size") * mod, 2); var size = rn(el.attr("data-size") * mod, 2);
if (size < 0.2) {size = 0.2;} if (size < 0.2) {size = 0.2;}
el.attr("data-size", size).attr("font-size", rn((size + (size / scale)) / 2, 2)); el.attr("data-size", size).attr("font-size", rn((size + (size / scale)) / 2, 2));
}); });
@ -5668,7 +5660,6 @@ 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")) {
console.log("resized");
mapWidthInput.value = $(window).width(); mapWidthInput.value = $(window).width();
mapHeightInput.value = $(window).height(); mapHeightInput.value = $(window).height();
applyMapSize(); applyMapSize();
@ -5685,6 +5676,34 @@ function fantasyMap() {
} }
}); });
// restore initial style
function applyDefaultStyle() {
viewbox.on("touchmove mousemove", moved).on("click", clicked);
landmass.attr("opacity", 1).attr("fill", "#eef6fb");
coastline.attr("opacity", .5).attr("stroke", "#1f3846").attr("stroke-width", .7).attr("filter", "url(#dropShadow)");
regions.attr("opacity", .55);
stateBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .5).attr("stroke-dasharray", "1.2 1.5").attr("stroke-linecap", "butt");
neutralBorders.attr("opacity", .8).attr("stroke", "#56566d").attr("stroke-width", .3).attr("stroke-dasharray", "1 1.5").attr("stroke-linecap", "butt");
cults.attr("opacity", .6);
rivers.attr("opacity", 1).attr("fill", "#5d97bb");
lakes.attr("opacity", 1).attr("fill", "#a6c1fd").attr("stroke", "#477794").attr("stroke-width", .3);
burgs.attr("opacity", 1).attr("fill", "#ffffff").attr("stroke", "#3e3e4b");
roads.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .4).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
trails.attr("opacity", .8).attr("stroke", "#d06324").attr("stroke-width", .1).attr("stroke-dasharray", ".5 1").attr("stroke-linecap", "round");
searoutes.attr("opacity", .8).attr("stroke", "#ffffff").attr("stroke-width", .2).attr("stroke-dasharray", "1 2").attr("stroke-linecap", "round");
grid.attr("opacity", 1).attr("stroke", "#808080").attr("stroke-width", .1);
ruler.attr("opacity", 1).style("display", "none").attr("filter", "url(#dropShadow)");
overlay.attr("opacity", 1).attr("stroke", "#808080").attr("stroke-width", .5);
ocean.select("#oceanBase").attr("opacity", 1).attr("fill", "#5167a9");
labels.attr("opacity", 1);
size = rn(10 - capitalsCount / 20);
capitals.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size);
towns.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 4).attr("data-size", 4);
size = rn(18 - capitalsCount / 6);
countries.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", size).attr("data-size", size);
addedLabels.attr("fill", "#3e3e4b").attr("opacity", 1).attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 18).attr("data-size", 18);
}
// Options handlers // Options handlers
$("input, select").on("input change", function() { $("input, select").on("input change", function() {
var id = this.id; var id = this.id;