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"] {
width: 8;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
@ -409,7 +405,7 @@ button.active {
.tabcontent {
display: none;
padding: 0 6px 0 12px;
padding: 0 6px 2px 12px;
opacity: 0.8;
max-width: 290px;
}
@ -468,10 +464,12 @@ p {
#statusbar {
display: none;
font-family: monospace;
position: absolute;
font-family: monospace;
margin-left: 10px;
color: #272727;
word-wrap: break-word;
font-size: 1.2vw;
}
table {
@ -915,6 +913,14 @@ div.states > .small {
max-height: 362px;
}
#countriesBody {
min-width: 366px;
}
#burgsBody {
min-width: 260px;
}
div.states .burgName, div.states .burgCulture {
width: 56px;
}
@ -1061,11 +1067,16 @@ div.states button.selectCapital {
#loading {
text-align: center;
font-family: "Arial";
font-family: "Courier New";
font-weight: bold;
width: 88px;
position: absolute;
left: 45%;
}
.spin {
animation: spin 4s infinite linear;
margin: 0;
}
@keyframes spin {
@ -1073,6 +1084,31 @@ div.states button.selectCapital {
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{
display: inline;
float: none;

5
index.html
View file

@ -35,7 +35,7 @@
<body class="fullscreen">
<div id="loading">
<h1 class="spin">&#9881;</h1>
<p id="loading-text">Loading...</p>
<p id="loading-text">Loading<span>.</span><span>.</span><span>.</span></p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="fullscreen">
<defs>
@ -152,7 +152,8 @@
<li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
<li title="Toggle Burg icons" id="toggleIcons" onclick="$('#burgs').fadeToggle()">Burgs</li>
</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 id="styleContent" class="tabcontent">
<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");
capitals = labels.append("g").attr("id", "capitals"),
towns = labels.append("g").attr("id", "towns"),
countries = labels.append("g").attr("id", "countries"),
addedLabels = labels.append("g").attr("id", "addedLabels");
countries = labels.append("g").attr("id", "countries");
// Common variables
var mapWidth, mapHeight,
@ -88,8 +87,8 @@ function fantasyMap() {
// toggle off loading screen and on menus
$("#loading").remove();
$("#statusbar").css("top", mapHeight - 20).show();
$("#optionsContainer").show();
fitStatusBar();
// D3 Line generator
var scX = d3.scaleLinear().domain([0, mapWidth]).range([0, mapWidth]),
@ -141,13 +140,9 @@ function fantasyMap() {
var el = d3.select(this);
var desired = +el.attr("data-size");
var relative = rn((desired + (desired / scale)) / 2, 2);
if (relative < 2) {relative = 2;}
el.attr("font-size", relative);
var size = +el.attr("font-size");
if (activeZooming.checked && size * scale < 6) {
el.classed("hidden", true);
} else {
el.classed("hidden", false);
}
el.classed("hidden", hideLabels.checked && relative * scale < 6);
});
if (ruler.size()) {
if (ruler.style("display") !== "none") {
@ -2382,10 +2377,10 @@ function fantasyMap() {
var cell = manors[i].cell;
var name = manors[i].name;
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);
} 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);
}
}
@ -2969,8 +2964,17 @@ function fantasyMap() {
var name = generateName(culture);
// please label
if (brush === "addLabel") {
labels.select("#addedLabels").append("text").attr("x", x).attr("y", y).text(name).on("click", editLabel);
if (!shift) {$("#"+brush).removeClass("pressed");}
var group = labels.select("#addedLabels");
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 (cells[cell].height < 0.2) {
@ -2983,10 +2987,15 @@ function fantasyMap() {
}
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));
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 region, state;
if ($("#burgAdd").hasClass("pressed")) {
state = +$("#burgsEditor").attr("data-state");
var group = labels.select("#addedBurgs");
if (!group.size()) {
group = labels.append("g").attr("id", "addedBurgs").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);
}
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;
var oldRegion = cells[cell].region;
if (region !== oldRegion) {
@ -3012,6 +3021,7 @@ function fantasyMap() {
$("#burgAdd").removeClass("pressed");
viewbox.style("cursor", "default");
}
return;
}
if (brush.includes("selectCapital")) {
if (cells[cell].height < 0.2) {
@ -3372,13 +3382,14 @@ function fantasyMap() {
var group = d3.select(elSelected.node().parentNode);
var groupOld = group.attr("id");
var groupNew = editGroupSelect.value;
var id = elSelected.attr("id") || "";
// check if label is a country name
if (elSelected.attr("id").includes("regionLabel")) {
if (id.includes("regionLabel")) {
var state = +elSelected.attr("id").slice(11);
states[state].name = editText.value;
}
// check if label is a manor name
if (elSelected.attr("id").includes("manorLabel")) {
if (id.includes("manorLabel")) {
var manor = +elSelected.attr("id").slice(10);
manors[manor].name = editText.value;
}
@ -4217,7 +4228,10 @@ function fantasyMap() {
$("#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 === "addRuler") {
$("#ruler").show();
@ -4388,12 +4402,12 @@ function fantasyMap() {
$(this).removeClass('pressed');
viewbox.style("cursor", "default").on(".drag", null);;
$("#brushRadiusLabel, #brushRadius").attr("disabled", true).addClass("disabled");
if (id === "addBurg") {$("#burgAdd").removeClass("pressed");}
$("#burgAdd").removeClass('pressed');
} else {
$(".pressed").removeClass('pressed');
$(this).addClass('pressed');
$(this).attr("data-state", -1).addClass('pressed');
if (id === "addBurg") {$("#burgAdd").addClass('pressed');}
viewbox.style("cursor", "crosshair");
if (id === "addBurg") {$("#burgAdd").addClass("pressed");}
if (id.slice(0,5) === "brush" && id !== "brushRange" && id !== "brushTrough") {
viewbox.call(drag);
}
@ -4470,7 +4484,7 @@ function fantasyMap() {
el.selectAll("g").each(function() {
var el = d3.select(this);
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));
});
return;
@ -4646,7 +4660,7 @@ function fantasyMap() {
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>');
$(".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 (count) {el.append(count);}
el.find("select.templateElDist").on("input", fireTemplateElDist);
@ -5245,7 +5259,7 @@ function fantasyMap() {
});
});
// 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?`;
var s = +(this.parentNode.id).slice(5);
var capital = states[s].capital;
@ -5415,7 +5429,7 @@ function fantasyMap() {
states[state].urbanPopulation = rn(states[state].urbanPopulation * change, 2);
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?`;
var b = +(this.parentNode.id).slice(5);
$(function() {$("#alert").dialog({resizable: false, title: "Remove burg",
@ -5486,6 +5500,7 @@ function fantasyMap() {
var pos = localStorage.getItem(this.id);
if (!pos) {return;}
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]}`;
$(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]);
lineGen = d3.line().x(function(d) {return scX(d.scX);}).y(function(d) {return scY(d.scY);});
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
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");
}
$("#statusbar").css("top", mapHeight + 8);
if ($("body").hasClass("fullscreen")) {$("#statusbar").css("top", mapHeight - 20);}
fitScaleBar();
fitStatusBar();
}
// fit full-screen map if window is resized
@ -5679,16 +5688,32 @@ function fantasyMap() {
oceanPattern.select("rect").attr("width", mapWidth).attr("height", mapHeight);
oceanLayers.select("rect").attr("width", mapWidth).attr("height", mapHeight);
zoom.translateExtent([[0, 0], [mapWidth, mapHeight]]);
$("#statusbar").css("top", mapHeight - 20);
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");
}
fitScaleBar();
fitStatusBar();
}
});
// 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
function applyDefaultStyle() {
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);
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