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

v. 0.5599b

Browse source 
Firefox fixes
This commit is contained in:
Azgaar 2018-04-15 20:32:14 +03:00
parent e812bba4cc
commit 63dc60cb00
3 changed files with 93 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

60
index.css
View file

@ -1,3 +1,4 @@
@font-face { @font-face {
font-family: 'Amatic SC'; font-family: 'Amatic SC';
font-style: normal; font-style: normal;
@ -78,7 +79,6 @@ button, select, a {
#rivers { #rivers {
stroke: none; stroke: none;
mask: url(#shape); mask: url(#shape);
mask-mode: alpha;
cursor: pointer; cursor: pointer;
} }
@ -313,22 +313,17 @@ button.options {
cursor: pointer; cursor: pointer;
} }
#options input[type="checkbox"] {
cursor: pointer;
}
#options input[type="range"] { #options input[type="range"] {
width: 120px; width: 120px;
height: 2px; height: 2px;
background: #ffffff; background: #ffffff;
top: -2px; top: -2px;
position: relative; position: relative;
-webkit-appearance: none;
appearance: none; appearance: none;
} }
#options input[type="range"]::-webkit-slider-thumb { #options input[type="range"]::slider-thumb {
-webkit-appearance: none; appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -637,22 +632,10 @@ body button.noicon {
font-family: monospace; font-family: monospace;
} }
.grayscale {
filter: grayscale(1);
}
.sepia {
filter: sepia(1) saturate(0.8);
}
.tint { .tint {
filter: sepia(1) hue-rotate(200deg); filter: sepia(1) hue-rotate(200deg);
} }
.dingy {
filter: contrast(1) saturate(1.8) sepia(.6);
}
.color-div { .color-div {
width: 32px; width: 32px;
height: 12px; height: 12px;
@ -720,12 +703,12 @@ body .ui-dialog-titlebar {
background: #e9e9e9; background: #e9e9e9;
top: -4px; top: -4px;
position: relative; position: relative;
-webkit-appearance: none; appearance: none;
appearance: none; appearance: none;
} }
.ui-dialog input[type="range"]::-webkit-slider-thumb { .ui-dialog input[type="range"]::slider-thumb {
-webkit-appearance: none; appearance: none;
border-radius: 15%; border-radius: 15%;
width: 10px; width: 10px;
height: 10px; height: 10px;
@ -748,7 +731,7 @@ body .ui-dialog-titlebar {
opacity: 0.2; opacity: 0.2;
} }
.ui-dialog .disabled::-webkit-slider-thumb { .ui-dialog .disabled::slider-thumb {
opacity: 0.2; opacity: 0.2;
} }
@ -793,7 +776,7 @@ div.slider .ui-slider-handle {
color: white; color: white;
} }
#activeZoomingLabel { #layoutCheckboxes {
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
} }
@ -1124,3 +1107,30 @@ ul.share-buttons li{
ul.share-buttons img{ ul.share-buttons img{
width: 16px; width: 16px;
} }
input[type="checkbox"] {
display: none;
}
.checkbox, .checkbox-label {
margin: 5px;
cursor: pointer;
}
.checkbox + .checkbox-label:before {
content: '';
background: #ece6eb;
border-radius: 50%;
display: inline-block;
vertical-align: text-top;
width: 8px;
height: 8px;
padding: 2px;
margin-right: 2px;
}
.checkbox:checked + .checkbox-label:before {
background: #826473;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 2px #ece6ea;
}

30
index.html
View file

@ -31,8 +31,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.5598b"/> <link rel="stylesheet" type="text/css" href="index.css?version=0.5599b"/>
<link rel="stylesheet" type="text/css" href="icons.css?version=0.5598b"/> <link rel="stylesheet" type="text/css" href="icons.css?version=0.5599b"/>
<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">
@ -40,7 +40,7 @@
<h1 class="spin">&#9881;</h1> <h1 class="spin">&#9881;</h1>
<p id="loading-text">Loading<span>.</span><span>.</span><span>.</span></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" width="100%" height="100%" vector-effect="non-scaling-stroke">
<defs> <defs>
<filter id="blurFilter" x="-1" y="-1" width="100" height="100"> <filter id="blurFilter" x="-1" y="-1" width="100" height="100">
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2"/> <feGaussianBlur in="SourceGraphic" stdDeviation="0.2"/>
@ -53,6 +53,18 @@
<feMergeNode in="SourceGraphic"/> <feMergeNode in="SourceGraphic"/>
</feMerge> </feMerge>
</filter> </filter>
<filter id="filter-grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
<filter id="filter-sepia">
<feColorMatrix type="matrix" values="0.393 0.769 0.189 0 0 0.349 0.686 0.168 0 0 0.272 0.534 0.131 0 0 0 0 0 1 0"/>
</filter>
<filter id="filter-dingy">
<feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0.3 0.3 0 0 0 0 0 1 0"/>
</filter>
<filter id="filter-tint">
<feColorMatrix type="matrix" values="0 0.9 0.2 0 0 0 0.8 0.1 0 0.1 0 0.4 1.4 0 -0.1 0 0 0 1 1"/>
</filter>
<g id="deftemp"> <g id="deftemp">
<mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask> <mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask>
</g> </g>
@ -155,8 +167,12 @@
<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>
</ul> </ul>
<label id="activeZoomingLabel">Hide small labels: <input id="hideLabels" type="checkbox" checked></label> <div id="layoutCheckboxes">
<label>Show statusbar: <input id="toggleStatusbar" type="checkbox" checked onclick="$('#statusbar').fadeToggle()"></label> <input id="hideLabels" class="checkbox" type="checkbox" checked>
<label for="hideLabels" class="checkbox-label">Hide small labels</label>
<input id="toggleStatusbar" class="checkbox" type="checkbox" checked onclick="$('#statusbar').fadeToggle()">
<label for="toggleStatusbar" class="checkbox-label">Show statusbar</label>
</div>
</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>
@ -249,8 +265,8 @@
<p>Toggle filters:</p> <p>Toggle filters:</p>
<button id="grayscale" class="radio">Grayscale</button> <button id="grayscale" class="radio">Grayscale</button>
<button id="sepia" class="radio">Sepia</button> <button id="sepia" class="radio">Sepia</button>
<button id="tint" class="radio">Tint</button>
<button id="dingy" class="radio">Dingy</button> <button id="dingy" class="radio">Dingy</button>
<button id="tint" class="radio">Tint</button>
</div> </div>
</div> </div>
<div id="optionsContent" class="tabcontent"> <div id="optionsContent" class="tabcontent">
@ -763,5 +779,5 @@
Type: <span id="feature">no</span> Type: <span id="feature">no</span>
</div> </div>
<script src="script.js?version=0.5598b"></script> <script src="script.js?version=0.5599b"></script>
</body> </body>

42
script.js
View file

@ -3527,9 +3527,14 @@ function fantasyMap() {
for (var i=0; i < compStyle.length; i++) { for (var i=0; i < compStyle.length; i++) {
var key = compStyle[i]; var key = compStyle[i];
var value = compStyle.getPropertyValue(key); var value = compStyle.getPropertyValue(key);
if (key !== "cursor" && value != defaultStyles.getPropertyValue(key)) { // Firefox mask hack
style += key + ':' + value + ';'; if (key === "mask-image" && value !== defaultStyles.getPropertyValue(key)) {
style += "mask-image: url('#shape');";
continue;
} }
if (key === "cursor") {continue;} // cursor should be default
if (value === defaultStyles.getPropertyValue(key)) {continue;}
style += key + ':' + value + ';';
} }
if (style != "") {this.setAttribute('style', style);} if (style != "") {this.setAttribute('style', style);}
}); });
@ -3549,7 +3554,6 @@ function fantasyMap() {
canvas.width = 3840; // ultraHD canvas.width = 3840; // ultraHD
canvas.height = rn(3840 * ratio); canvas.height = rn(3840 * ratio);
var img = new Image(); var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url; img.src = url;
img.onload = function(){ img.onload = function(){
window.URL.revokeObjectURL(url); window.URL.revokeObjectURL(url);
@ -3571,6 +3575,7 @@ function fantasyMap() {
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
} }
document.body.removeChild(link);
console.timeEnd("saveAsImage"); console.timeEnd("saveAsImage");
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000); window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000);
}); });
@ -3627,11 +3632,12 @@ function fantasyMap() {
// Save in .map format, based on FileSystem API // Save in .map format, based on FileSystem API
function saveMap() { function saveMap() {
console.time("saveMap"); console.time("saveMap");
// data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
// size stats: points = 6%, cells = 36%, manors and states = 2%, svg = 56%; // size stats: points = 6%, cells = 36%, manors and states = 2%, svg = 56%;
var svg_xml = (new XMLSerializer()).serializeToString(svg.node()); var svg_xml = (new XMLSerializer()).serializeToString(svg.node());
var line = "\r\n"; var line = "\r\n";
var data = version + line + JSON.stringify(points) + line + JSON.stringify(cells) + line + JSON.stringify(manors) + line + JSON.stringify(states) + line + svg_xml; var data = version + line + JSON.stringify(points) + line + JSON.stringify(cells) + line;
data += JSON.stringify(manors) + line + JSON.stringify(states) + line + svg_xml + line + customization;
var dataBlob = new Blob([data], {type:"text/plain"}); var dataBlob = new Blob([data], {type:"text/plain"});
var dataURL = window.URL.createObjectURL(dataBlob); var dataURL = window.URL.createObjectURL(dataBlob);
var link = document.createElement("a"); var link = document.createElement("a");
@ -3654,7 +3660,7 @@ function fantasyMap() {
var dataLoaded = fileLoadedEvent.target.result; var dataLoaded = fileLoadedEvent.target.result;
var data = dataLoaded.split("\r\n"); var data = dataLoaded.split("\r\n");
// data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; // data convention: 0 - version; 1 - all points; 2 - cells; 3 - manors; 4 - states; 5 - svg; 6 - options;
var mapVersion = data[0]; var mapVersion = data[0];
if (mapVersion !== version) { if (mapVersion !== version) {
var message = `The Map version `; var message = `The Map version `;
@ -3682,9 +3688,11 @@ function fantasyMap() {
if (mapVersion === "0.52b" || mapVersion === "0.53b") { if (mapVersion === "0.52b" || mapVersion === "0.53b") {
states = []; // no states data states = []; // no states data
document.body.insertAdjacentHTML("afterbegin", data[4]); document.body.insertAdjacentHTML("afterbegin", data[4]);
customization = 0;
} else { } else {
states = JSON.parse(data[4]); states = JSON.parse(data[4]);
document.body.insertAdjacentHTML("afterbegin", data[5]); document.body.insertAdjacentHTML("afterbegin", data[5]);
customization = +data[6] || 0;
} }
svg = d3.select("svg"); svg = d3.select("svg");
@ -3701,16 +3709,6 @@ function fantasyMap() {
$("#alert").dialog({title: "Map size conflict", $("#alert").dialog({title: "Map size conflict",
buttons: { buttons: {
"Keep": function() { "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]]);
*/
voronoi = d3.voronoi().extent([[0, 0], [nWidth, nHeight]]); voronoi = d3.voronoi().extent([[0, 0], [nWidth, nHeight]]);
zoom.translateExtent([[0, 0], [nWidth, nHeight]]); zoom.translateExtent([[0, 0], [nWidth, nHeight]]);
applyLoadedData(data); applyLoadedData(data);
@ -3787,15 +3785,17 @@ function fantasyMap() {
ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag)); ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
// update data // update data
newPoints = [], riversData = [], island = 0, queue = [], customization = 0, elSelected = ""; newPoints = [], riversData = [], island = 0, queue = [], elSelected = "";
points = JSON.parse(data[1]); points = JSON.parse(data[1]);
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]);
cells.map(function(e) {newPoints.push(e.data);}); cells.map(function(e) {newPoints.push(e.data);});
calculateVoronoi(newPoints); calculateVoronoi(newPoints);
if (!customization) {
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1; capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
regionsOutput.innerHTML = regionsInput.value = capitalsCount; regionsOutput.innerHTML = regionsInput.value = capitalsCount;
}
// restore layers state // restore layers state
if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");} if (cults.selectAll("path").size() == 0) {$("#toggleCultures").addClass("buttonoff");} else {$("#toggleCultures").removeClass("buttonoff");}
@ -4475,16 +4475,13 @@ function fantasyMap() {
}}); }});
} }
if ($(this).hasClass('radio') && parent === "mapFilters") { if ($(this).hasClass('radio') && parent === "mapFilters") {
$("svg").removeClass(); $("svg").attr("filter", "");
if ($(this).hasClass('pressed')) { if ($(this).hasClass('pressed')) {
$("#mapFilters .pressed").removeClass('pressed'); $("#mapFilters .pressed").removeClass('pressed');
} else { } else {
$("#mapFilters .pressed").removeClass('pressed'); $("#mapFilters .pressed").removeClass('pressed');
$(this).addClass('pressed'); $(this).addClass('pressed');
if (id === "grayscale") {$("svg").addClass("grayscale");} $("svg").attr("filter", "url(#filter-" + id + ")");
if (id === "sepia") {$("svg").addClass("sepia");}
if (id === "tint") {$("svg").addClass("tint");}
if (id === "dingy") {$("svg").addClass("dingy");}
} }
return; return;
} }
@ -5840,6 +5837,7 @@ function fantasyMap() {
// Options handlers // Options handlers
$("input, select").on("input change", function() { $("input, select").on("input change", function() {
var id = this.id; var id = this.id;
if (id === "hideLabels") {invokeActiveZooming();}
if (id === "styleElementSelect") { if (id === "styleElementSelect") {
var sel = this.value; var sel = this.value;
var el = viewbox.select("#"+sel); var el = viewbox.select("#"+sel);