From 8a342bfeefc28aa1859914a53cc2e94e674c3ab4 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 4 Apr 2018 23:46:59 +0300 Subject: [PATCH] v. 05593b --- index.css | 50 ++++++++++++++++++++---- index.html | 5 ++- script.js | 110 ++++++++++++++++++++++++++++++++--------------------- 3 files changed, 113 insertions(+), 52 deletions(-) diff --git a/index.css b/index.css index bb13aae9..c1479ab8 100644 --- a/index.css +++ b/index.css @@ -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; diff --git a/index.html b/index.html index 0cf38b5e..45ecbee4 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@

⚙

-

Loading...

+

Loading...

@@ -152,7 +152,8 @@
  • Labels
  • Burgs
    • - + +

    Select element:

    diff --git a/script.js b/script.js index f436eca8..a23339ab 100644 --- a/script.js +++ b/script.js @@ -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 = ''; } el.append(''); - $(".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