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

Browse source
This commit is contained in:
Azgaar 2018-04-04 23:46:59 +03:00
parent 01af21b989
commit 8a342bfeef
3 changed files with 113 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

50
index.css
View file

@ -314,10 +314,6 @@ button.options {
} }
#options input[type="checkbox"] { #options input[type="checkbox"] {
width: 8;
padding: 0;
border: 0;
background: none;
cursor: pointer; cursor: pointer;
} }
@ -409,7 +405,7 @@ button.active {
.tabcontent { .tabcontent {
display: none; display: none;
padding: 0 6px 0 12px; padding: 0 6px 2px 12px;
opacity: 0.8; opacity: 0.8;
max-width: 290px; max-width: 290px;
} }
@ -468,10 +464,12 @@ p {
#statusbar { #statusbar {
display: none; display: none;
font-family: monospace;
position: absolute; position: absolute;
font-family: monospace;
margin-left: 10px; margin-left: 10px;
color: #272727; color: #272727;
word-wrap: break-word;
font-size: 1.2vw;
} }
table { table {
@ -915,6 +913,14 @@ div.states > .small {
max-height: 362px; max-height: 362px;
} }
#countriesBody {
min-width: 366px;
}
#burgsBody {
min-width: 260px;
}
div.states .burgName, div.states .burgCulture { div.states .burgName, div.states .burgCulture {
width: 56px; width: 56px;
} }
@ -1061,11 +1067,16 @@ div.states button.selectCapital {
#loading { #loading {
text-align: center; text-align: center;
font-family: "Arial"; font-family: "Courier New";
font-weight: bold;
width: 88px;
position: absolute;
left: 45%;
} }
.spin { .spin {
animation: spin 4s infinite linear; animation: spin 4s infinite linear;
margin: 0;
} }
@keyframes spin { @keyframes spin {
@ -1073,6 +1084,31 @@ div.states button.selectCapital {
100% {transform: rotate(359deg);} 100% {transform: rotate(359deg);}
} }
#loading-text {
margin: 0;
}
#loading-text span {
animation-name: blink;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-fill-mode: both;
}
#loading-text span:nth-child(2) {
animation-delay: 1s;
}
#loading-text span:nth-child(3) {
animation-delay: 2s;
}
@keyframes blink {
0% {opacity: .05;}
20% {opacity: 1;}
100% {opacity: .05;}
}
ul.share-buttons li{ ul.share-buttons li{
display: inline; display: inline;
float: none; float: none;

5
index.html
View file

@ -35,7 +35,7 @@
<body class="fullscreen"> <body class="fullscreen">
<div id="loading"> <div id="loading">
<h1 class="spin">&#9881;</h1> <h1 class="spin">&#9881;</h1>
<p id="loading-text">Loading...</p> <p id="loading-text">Loading<span>.</span><span>.</span><span>.</span></p>
</div> </div>
<svg xmlns="http://www.w3.org/2000/svg" class="fullscreen"> <svg xmlns="http://www.w3.org/2000/svg" class="fullscreen">
<defs> <defs>
@ -152,7 +152,8 @@
<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> <label id="activeZoomingLabel">Hide small labels: <input id="hideLabels" type="checkbox" checked></label>
<label>Show statusbar: <input id="toggleStatusbar" type="checkbox" checked onclick="$('#statusbar').fadeToggle()"></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>

110
script.js
View file

@ -37,8 +37,7 @@ function fantasyMap() {
debug = viewbox.append("g").attr("id", "debug"); debug = viewbox.append("g").attr("id", "debug");
capitals = labels.append("g").attr("id", "capitals"), capitals = labels.append("g").attr("id", "capitals"),
towns = labels.append("g").attr("id", "towns"), towns = labels.append("g").attr("id", "towns"),
countries = labels.append("g").attr("id", "countries"), countries = labels.append("g").attr("id", "countries");
addedLabels = labels.append("g").attr("id", "addedLabels");
// Common variables // Common variables
var mapWidth, mapHeight, var mapWidth, mapHeight,
@ -88,8 +87,8 @@ function fantasyMap() {
// toggle off loading screen and on menus // toggle off loading screen and on menus
$("#loading").remove(); $("#loading").remove();
$("#statusbar").css("top", mapHeight - 20).show();
$("#optionsContainer").show(); $("#optionsContainer").show();
fitStatusBar();
// 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]),
@ -141,13 +140,9 @@ function fantasyMap() {
var el = d3.select(this); var el = d3.select(this);
var desired = +el.attr("data-size"); var desired = +el.attr("data-size");
var relative = rn((desired + (desired / scale)) / 2, 2); var relative = rn((desired + (desired / scale)) / 2, 2);
if (relative < 2) {relative = 2;}
el.attr("font-size", relative); el.attr("font-size", relative);
var size = +el.attr("font-size"); el.classed("hidden", hideLabels.checked && relative * scale < 6);
if (activeZooming.checked && size * scale < 6) {
el.classed("hidden", true);
} else {
el.classed("hidden", false);
}
}); });
if (ruler.size()) { if (ruler.size()) {
if (ruler.style("display") !== "none") { if (ruler.style("display") !== "none") {
@ -2382,10 +2377,10 @@ function fantasyMap() {
var cell = manors[i].cell; var cell = manors[i].cell;
var name = manors[i].name; var name = manors[i].name;
if (i < capitalsCount) { if (i < capitalsCount) {
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", 1).attr("stroke-width", .24).attr("class", "manor").attr("cx", x).attr("cy", y); burgs.append("circle").attr("id", "manorIcon"+i).attr("r", 1).attr("stroke-width", .24).attr("cx", x).attr("cy", y);
capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name); capitals.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -1.3).text(name);
} else { } else {
burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("class", "manor").attr("cx", x).attr("cy", y); burgs.append("circle").attr("id", "manorIcon"+i).attr("r", .5).attr("stroke-width", .12).attr("cx", x).attr("cy", y);
towns.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -.7).text(name); towns.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -.7).text(name);
} }
} }
@ -2969,8 +2964,17 @@ function fantasyMap() {
var name = generateName(culture); var name = generateName(culture);
// please label // please label
if (brush === "addLabel") { if (brush === "addLabel") {
labels.select("#addedLabels").append("text").attr("x", x).attr("y", y).text(name).on("click", editLabel); var group = labels.select("#addedLabels");
if (!shift) {$("#"+brush).removeClass("pressed");} if (!group.size()) {
group = 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);
}
group.append("text").attr("x", x).attr("y", y).text(name).on("click", editLabel);
if (!shift) {
$("#"+brush).removeClass("pressed");
viewbox.style("cursor", "default");
}
return;
} }
if (brush === "addBurg") { if (brush === "addBurg") {
if (cells[cell].height < 0.2) { if (cells[cell].height < 0.2) {
@ -2983,10 +2987,15 @@ function fantasyMap() {
} }
var i = manors.length; var i = manors.length;
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));
labels.select("#towns").append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -0.7).text(name).on("click", editLabel); var group = labels.select("#addedBurgs");
var region, state; if (!group.size()) {
if ($("#burgAdd").hasClass("pressed")) { group = labels.append("g").attr("id", "addedBurgs").attr("fill", "#3e3e4b").attr("opacity", 1)
state = +$("#burgsEditor").attr("data-state"); .attr("font-family", "Amatic SC").attr("data-font", "Amatic+SC:700").attr("font-size", 4).attr("data-size", 4);
}
group.append("text").attr("id", "manorLabel"+i).attr("x", x).attr("y", y).attr("dy", -0.7).text(name).on("click", editLabel);
invokeActiveZooming();
var region, state = +$("#addBurg").attr("data-state");
if (state !== -1) {
region = states[state].color === "neutral" ? "neutral" : state; region = states[state].color === "neutral" ? "neutral" : state;
var oldRegion = cells[cell].region; var oldRegion = cells[cell].region;
if (region !== oldRegion) { if (region !== oldRegion) {
@ -3012,6 +3021,7 @@ function fantasyMap() {
$("#burgAdd").removeClass("pressed"); $("#burgAdd").removeClass("pressed");
viewbox.style("cursor", "default"); viewbox.style("cursor", "default");
} }
return;
} }
if (brush.includes("selectCapital")) { if (brush.includes("selectCapital")) {
if (cells[cell].height < 0.2) { if (cells[cell].height < 0.2) {
@ -3372,13 +3382,14 @@ function fantasyMap() {
var group = d3.select(elSelected.node().parentNode); var group = d3.select(elSelected.node().parentNode);
var groupOld = group.attr("id"); var groupOld = group.attr("id");
var groupNew = editGroupSelect.value; var groupNew = editGroupSelect.value;
var id = elSelected.attr("id") || "";
// check if label is a country name // check if label is a country name
if (elSelected.attr("id").includes("regionLabel")) { if (id.includes("regionLabel")) {
var state = +elSelected.attr("id").slice(11); var state = +elSelected.attr("id").slice(11);
states[state].name = editText.value; states[state].name = editText.value;
} }
// check if label is a manor name // check if label is a manor name
if (elSelected.attr("id").includes("manorLabel")) { if (id.includes("manorLabel")) {
var manor = +elSelected.attr("id").slice(10); var manor = +elSelected.attr("id").slice(10);
manors[manor].name = editText.value; manors[manor].name = editText.value;
} }
@ -4217,7 +4228,10 @@ function fantasyMap() {
$("#state"+s+" > .stateCapital").val(manors[c].name); $("#state"+s+" > .stateCapital").val(manors[c].name);
} }
} }
if (id === "burgAdd") {$("#addBurg").click();} if (id === "burgAdd") {
var state = +$("#burgsEditor").attr("data-state");
$("#addBurg").click().attr("data-state", state);
}
if (id === "toggleScaleBar") {$("#scaleBar").toggleClass("hidden");} if (id === "toggleScaleBar") {$("#scaleBar").toggleClass("hidden");}
if (id === "addRuler") { if (id === "addRuler") {
$("#ruler").show(); $("#ruler").show();
@ -4388,12 +4402,12 @@ function fantasyMap() {
$(this).removeClass('pressed'); $(this).removeClass('pressed');
viewbox.style("cursor", "default").on(".drag", null);; viewbox.style("cursor", "default").on(".drag", null);;
$("#brushRadiusLabel, #brushRadius").attr("disabled", true).addClass("disabled"); $("#brushRadiusLabel, #brushRadius").attr("disabled", true).addClass("disabled");
if (id === "addBurg") {$("#burgAdd").removeClass("pressed");} $("#burgAdd").removeClass('pressed');
} else { } else {
$(".pressed").removeClass('pressed'); $(".pressed").removeClass('pressed');
$(this).addClass('pressed'); $(this).attr("data-state", -1).addClass('pressed');
if (id === "addBurg") {$("#burgAdd").addClass('pressed');}
viewbox.style("cursor", "crosshair"); viewbox.style("cursor", "crosshair");
if (id === "addBurg") {$("#burgAdd").addClass("pressed");}
if (id.slice(0,5) === "brush" && id !== "brushRange" && id !== "brushTrough") { if (id.slice(0,5) === "brush" && id !== "brushRange" && id !== "brushTrough") {
viewbox.call(drag); viewbox.call(drag);
} }
@ -4470,7 +4484,7 @@ function fantasyMap() {
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("data-size") * mod, 2); var size = rn(el.attr("data-size") * mod, 2);
if (size < 0.2) {size = 0.2;} if (size < 2) {size = 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));
}); });
return; return;
@ -4646,7 +4660,7 @@ function fantasyMap() {
var count = '<label>width:<input class="templateElCount" title="Set strait width" value="1-7"></label>'; var count = '<label>width:<input class="templateElCount" title="Set strait width" value="1-7"></label>';
} }
el.append('<span title="Remove step" class="icon-trash-empty"></span>'); el.append('<span title="Remove step" class="icon-trash-empty"></span>');
$(".icon-trash-empty").on("click", function() {$(this).parent().remove();}); $("#templateBody .icon-trash-empty").on("click", function() {$(this).parent().remove();});
if (dist) {el.append(dist);} if (dist) {el.append(dist);}
if (count) {el.append(count);} if (count) {el.append(count);}
el.find("select.templateElDist").on("input", fireTemplateElDist); el.find("select.templateElDist").on("input", fireTemplateElDist);
@ -5245,7 +5259,7 @@ function fantasyMap() {
}); });
}); });
// fully remove country // fully remove country
$(".icon-trash-empty").on("click", function() { $("#countriesBody .icon-trash-empty").on("click", function() {
alertMessage.innerHTML = `Are you sure you want to remove the country?`; alertMessage.innerHTML = `Are you sure you want to remove the country?`;
var s = +(this.parentNode.id).slice(5); var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital; var capital = states[s].capital;
@ -5415,7 +5429,7 @@ function fantasyMap() {
states[state].urbanPopulation = rn(states[state].urbanPopulation * change, 2); states[state].urbanPopulation = rn(states[state].urbanPopulation * change, 2);
updateCountryPopulationUI(state); updateCountryPopulationUI(state);
}); });
$(".icon-trash-empty").on("click", function() { $("#burgsBody .icon-trash-empty").on("click", function() {
alertMessage.innerHTML = `Are you sure you want to remove the burg?`; alertMessage.innerHTML = `Are you sure you want to remove the burg?`;
var b = +(this.parentNode.id).slice(5); var b = +(this.parentNode.id).slice(5);
$(function() {$("#alert").dialog({resizable: false, title: "Remove burg", $(function() {$("#alert").dialog({resizable: false, title: "Remove burg",
@ -5486,6 +5500,7 @@ function fantasyMap() {
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
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"});
}); });
@ -5660,14 +5675,8 @@ function fantasyMap() {
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.translateExtent([[0, 0], [mapWidth, mapHeight]]);
if (d3.select("#scaleBar").size()) { fitScaleBar();
var bbox = d3.select("#scaleBar").node().getBBox(); fitStatusBar();
var tr = [mapWidth - 10 - bbox.width, mapHeight - 10 - bbox.height];
d3.select("#scaleBar").attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
localStorage.removeItem("scaleBar");
}
$("#statusbar").css("top", mapHeight + 8);
if ($("body").hasClass("fullscreen")) {$("#statusbar").css("top", mapHeight - 20);}
} }
// fit full-screen map if window is resized // fit full-screen map if window is resized
@ -5679,16 +5688,32 @@ function fantasyMap() {
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);
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]); zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
$("#statusbar").css("top", mapHeight - 20); fitScaleBar();
if (d3.select("#scaleBar").size()) { fitStatusBar();
var bbox = d3.select("#scaleBar").node().getBBox();
var tr = [mapWidth - 10 - bbox.width, mapHeight - 10 - bbox.height];
d3.select("#scaleBar").attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
localStorage.removeItem("scaleBar");
}
} }
}); });
// fit ScaleBar to map size
function fitScaleBar() {
if (d3.select("#scaleBar").size()) {
var bbox = d3.select("#scaleBar").node().getBBox();
var tr = [mapWidth - 10 - bbox.width, mapHeight - 10 - bbox.height];
d3.select("#scaleBar").attr("transform", "translate(" + rn(tr[0]) + "," + rn(tr[1]) + ")");
localStorage.removeItem("scaleBar");
}
}
// fit Statusbar to map size
function fitStatusBar() {
var el = $("#statusbar");
if ($("body").hasClass("fullscreen")) {
el.css("top", mapHeight - 20);
} else {
el.css("top", mapHeight + 8);
}
if (toggleStatusbar.checked) {el.show();}
}
// restore initial style // restore initial style
function applyDefaultStyle() { function applyDefaultStyle() {
viewbox.on("touchmove mousemove", moved).on("click", clicked); viewbox.on("touchmove mousemove", moved).on("click", clicked);
@ -5714,7 +5739,6 @@ function fantasyMap() {
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); 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); 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); 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