mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-18 18:11:24 +01:00
v. 0.5599b
Firefox fixes
This commit is contained in:
Azgaar
parent
e812bba4cc
commit
63dc60cb00
3 changed files with 93 additions and 69 deletions
60
index.css
60
index.css
|
|
@ -1,3 +1,4 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Amatic SC';
|
||||
font-style: normal;
|
||||
|
|
@ -78,7 +79,6 @@ button, select, a {
|
|||
#rivers {
|
||||
stroke: none;
|
||||
mask: url(#shape);
|
||||
mask-mode: alpha;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -313,22 +313,17 @@ button.options {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#options input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#options input[type="range"] {
|
||||
width: 120px;
|
||||
height: 2px;
|
||||
background: #ffffff;
|
||||
top: -2px;
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
#options input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
#options input[type="range"]::slider-thumb {
|
||||
appearance: none;
|
||||
border-radius: 15%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -637,22 +632,10 @@ body button.noicon {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
.grayscale {
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
.sepia {
|
||||
filter: sepia(1) saturate(0.8);
|
||||
}
|
||||
|
||||
.tint {
|
||||
filter: sepia(1) hue-rotate(200deg);
|
||||
}
|
||||
|
||||
.dingy {
|
||||
filter: contrast(1) saturate(1.8) sepia(.6);
|
||||
}
|
||||
|
||||
.color-div {
|
||||
width: 32px;
|
||||
height: 12px;
|
||||
|
|
@ -720,12 +703,12 @@ body .ui-dialog-titlebar {
|
|||
background: #e9e9e9;
|
||||
top: -4px;
|
||||
position: relative;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.ui-dialog input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
.ui-dialog input[type="range"]::slider-thumb {
|
||||
appearance: none;
|
||||
border-radius: 15%;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
|
@ -748,7 +731,7 @@ body .ui-dialog-titlebar {
|
|||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.ui-dialog .disabled::-webkit-slider-thumb {
|
||||
.ui-dialog .disabled::slider-thumb {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
|
@ -793,7 +776,7 @@ div.slider .ui-slider-handle {
|
|||
color: white;
|
||||
}
|
||||
|
||||
#activeZoomingLabel {
|
||||
#layoutCheckboxes {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -1124,3 +1107,30 @@ ul.share-buttons li{
|
|||
ul.share-buttons img{
|
||||
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
30
index.html
|
|
@ -31,8 +31,8 @@
|
|||
<script src="libs/polylabel.min.js"></script>
|
||||
<script src="libs/quantize.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="icons.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.5599b"/>
|
||||
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
|
||||
</head>
|
||||
<body class="fullscreen">
|
||||
|
|
@ -40,7 +40,7 @@
|
|||
<h1 class="spin">⚙</h1>
|
||||
<p id="loading-text">Loading<span>.</span><span>.</span><span>.</span></p>
|
||||
</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>
|
||||
<filter id="blurFilter" x="-1" y="-1" width="100" height="100">
|
||||
<feGaussianBlur in="SourceGraphic" stdDeviation="0.2"/>
|
||||
|
|
@ -53,6 +53,18 @@
|
|||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</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">
|
||||
<mask id="shape" x="0" y="0" width="100%" height="100%" fill="black"></mask>
|
||||
</g>
|
||||
|
|
@ -155,8 +167,12 @@
|
|||
<li title="Toggle Labels" id="toggleLabels" onclick="$('#labels').fadeToggle()">Labels</li>
|
||||
<li title="Toggle Burg icons" id="toggleIcons" onclick="$('#burgs').fadeToggle()">Burgs</li>
|
||||
</ul>
|
||||
<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 id="layoutCheckboxes">
|
||||
<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 id="styleContent" class="tabcontent">
|
||||
<p style="display: inline-block;">Select element:</p>
|
||||
|
|
@ -249,8 +265,8 @@
|
|||
<p>Toggle filters:</p>
|
||||
<button id="grayscale" class="radio">Grayscale</button>
|
||||
<button id="sepia" class="radio">Sepia</button>
|
||||
<button id="tint" class="radio">Tint</button>
|
||||
<button id="dingy" class="radio">Dingy</button>
|
||||
<button id="tint" class="radio">Tint</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="optionsContent" class="tabcontent">
|
||||
|
|
@ -763,5 +779,5 @@
|
|||
Type: <span id="feature">no</span>
|
||||
</div>
|
||||
|
||||
<script src="script.js?version=0.5598b"></script>
|
||||
<script src="script.js?version=0.5599b"></script>
|
||||
</body>
|
||||
42
script.js
42
script.js
|
|
@ -3527,9 +3527,14 @@ function fantasyMap() {
|
|||
for (var i=0; i < compStyle.length; i++) {
|
||||
var key = compStyle[i];
|
||||
var value = compStyle.getPropertyValue(key);
|
||||
if (key !== "cursor" && value != defaultStyles.getPropertyValue(key)) {
|
||||
style += key + ':' + value + ';';
|
||||
// Firefox mask hack
|
||||
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);}
|
||||
});
|
||||
|
|
@ -3549,7 +3554,6 @@ function fantasyMap() {
|
|||
canvas.width = 3840; // ultraHD
|
||||
canvas.height = rn(3840 * ratio);
|
||||
var img = new Image();
|
||||
img.setAttribute('crossOrigin', 'anonymous');
|
||||
img.src = url;
|
||||
img.onload = function(){
|
||||
window.URL.revokeObjectURL(url);
|
||||
|
|
@ -3571,6 +3575,7 @@ function fantasyMap() {
|
|||
document.body.appendChild(link);
|
||||
link.click();
|
||||
}
|
||||
document.body.removeChild(link);
|
||||
console.timeEnd("saveAsImage");
|
||||
window.setTimeout(function() {window.URL.revokeObjectURL(url);}, 5000);
|
||||
});
|
||||
|
|
@ -3627,11 +3632,12 @@ function fantasyMap() {
|
|||
// Save in .map format, based on FileSystem API
|
||||
function 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%;
|
||||
var svg_xml = (new XMLSerializer()).serializeToString(svg.node());
|
||||
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 dataURL = window.URL.createObjectURL(dataBlob);
|
||||
var link = document.createElement("a");
|
||||
|
|
@ -3654,7 +3660,7 @@ function fantasyMap() {
|
|||
var dataLoaded = fileLoadedEvent.target.result;
|
||||
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];
|
||||
if (mapVersion !== version) {
|
||||
var message = `The Map version `;
|
||||
|
|
@ -3682,9 +3688,11 @@ function fantasyMap() {
|
|||
if (mapVersion === "0.52b" || mapVersion === "0.53b") {
|
||||
states = []; // no states data
|
||||
document.body.insertAdjacentHTML("afterbegin", data[4]);
|
||||
customization = 0;
|
||||
} else {
|
||||
states = JSON.parse(data[4]);
|
||||
document.body.insertAdjacentHTML("afterbegin", data[5]);
|
||||
customization = +data[6] || 0;
|
||||
}
|
||||
|
||||
svg = d3.select("svg");
|
||||
|
|
@ -3701,16 +3709,6 @@ function fantasyMap() {
|
|||
$("#alert").dialog({title: "Map size conflict",
|
||||
buttons: {
|
||||
"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]]);
|
||||
zoom.translateExtent([[0, 0], [nWidth, nHeight]]);
|
||||
applyLoadedData(data);
|
||||
|
|
@ -3787,15 +3785,17 @@ function fantasyMap() {
|
|||
ruler.selectAll(".linear").selectAll("circle.center").call(d3.drag().on("drag", rulerCenterDrag));
|
||||
|
||||
// update data
|
||||
newPoints = [], riversData = [], island = 0, queue = [], customization = 0, elSelected = "";
|
||||
newPoints = [], riversData = [], island = 0, queue = [], elSelected = "";
|
||||
points = JSON.parse(data[1]);
|
||||
cells = JSON.parse(data[2]);
|
||||
land = $.grep(cells, function(e) {return (e.height >= 0.2);});
|
||||
manors = JSON.parse(data[3]);
|
||||
cells.map(function(e) {newPoints.push(e.data);});
|
||||
calculateVoronoi(newPoints);
|
||||
if (!customization) {
|
||||
capitalsCount = +$("#regions > path:last").attr("class").slice(6) + 1;
|
||||
regionsOutput.innerHTML = regionsInput.value = capitalsCount;
|
||||
}
|
||||
|
||||
// restore layers state
|
||||
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") {
|
||||
$("svg").removeClass();
|
||||
$("svg").attr("filter", "");
|
||||
if ($(this).hasClass('pressed')) {
|
||||
$("#mapFilters .pressed").removeClass('pressed');
|
||||
} else {
|
||||
$("#mapFilters .pressed").removeClass('pressed');
|
||||
$(this).addClass('pressed');
|
||||
if (id === "grayscale") {$("svg").addClass("grayscale");}
|
||||
if (id === "sepia") {$("svg").addClass("sepia");}
|
||||
if (id === "tint") {$("svg").addClass("tint");}
|
||||
if (id === "dingy") {$("svg").addClass("dingy");}
|
||||
$("svg").attr("filter", "url(#filter-" + id + ")");
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
|
@ -5840,6 +5837,7 @@ function fantasyMap() {
|
|||
// Options handlers
|
||||
$("input, select").on("input change", function() {
|
||||
var id = this.id;
|
||||
if (id === "hideLabels") {invokeActiveZooming();}
|
||||
if (id === "styleElementSelect") {
|
||||
var sel = this.value;
|
||||
var el = viewbox.select("#"+sel);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue