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

toggle loading menu

Browse source
This commit is contained in:
Azgaar 2022-02-19 22:22:30 +03:00
parent 5b6ec0cc2e
commit 9777df9a67
2 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -162,14 +162,14 @@
</g> </g>
<pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse"> <pattern id="oceanic" width="100" height="100" patternUnits="userSpaceOnUse">
<image id="oceanicPattern" href="./images/pattern1.png"></image> <image id="oceanicPattern" href="./images/pattern1.png" opacity="0.2"></image>
</pattern> </pattern>
</defs> </defs>
<g id="viewbox"></g> <g id="viewbox"></g>
<g id="scaleBar"></g> <g id="scaleBar"></g>
<g id="initial" opacity=1> <g id="initial" opacity=1>
<rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab"/> <rect x="-1%" y="-1%" width="102%" height="102%" fill="#466eab"/>
<rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)" opacity=".2"/> <rect x="-1%" y="-1%" width="102%" height="102%" fill="url(#oceanic)"/>
<use href="#rose" id="init-rose" x="50%" y="50%"/> <use href="#rose" id="init-rose" x="50%" y="50%"/>
</g> </g>
</svg> </svg>

23
main.js
View file

@ -192,15 +192,24 @@ if (!location.hostname) {
d3.select("#loading-text").transition().duration(1000).style("opacity", 0); d3.select("#loading-text").transition().duration(1000).style("opacity", 0);
d3.select("#init-rose").transition().duration(4000).style("opacity", 0); d3.select("#init-rose").transition().duration(4000).style("opacity", 0);
} else { } else {
hideLoading();
checkLoadParameters(); checkLoadParameters();
}
// remove loading screen function hideLoading() {
d3.select("#loading").transition().duration(4000).style("opacity", 0).remove(); d3.select("#loading").transition().duration(4000).style("opacity", 0);
d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove(); d3.select("#initial").transition().duration(4000).attr("opacity", 0);
d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1); d3.select("#optionsContainer").transition().duration(3000).style("opacity", 1);
d3.select("#tooltip").transition().duration(4000).style("opacity", 1); d3.select("#tooltip").transition().duration(4000).style("opacity", 1);
} }
function showLoading() {
d3.select("#loading").transition().duration(200).style("opacity", 1);
d3.select("#initial").transition().duration(200).attr("opacity", 1);
d3.select("#optionsContainer").transition().duration(100).style("opacity", 0);
d3.select("#tooltip").transition().duration(200).style("opacity", 0);
}
// decide which map should be loaded or generated on page load // decide which map should be loaded or generated on page load
function checkLoadParameters() { function checkLoadParameters() {
const url = new URL(window.location.href); const url = new URL(window.location.href);
@ -1921,16 +1930,18 @@ function showStatistics() {
INFO && console.log(stats); INFO && console.log(stats);
} }
const regenerateMap = debounce(function () { const regenerateMap = debounce(async function () {
WARN && console.warn("Generate new random map"); WARN && console.warn("Generate new random map");
showLoading();
closeDialogs("#worldConfigurator, #options3d"); closeDialogs("#worldConfigurator, #options3d");
customization = 0; customization = 0;
undraw();
resetZoom(1000); resetZoom(1000);
generate(); undraw();
await generate();
restoreLayers(); restoreLayers();
if (ThreeD.options.isOn) ThreeD.redraw(); if (ThreeD.options.isOn) ThreeD.redraw();
if ($("#worldConfigurator").is(":visible")) editWorld(); if ($("#worldConfigurator").is(":visible")) editWorld();
hideLoading();
}, 1000); }, 1000);
// clear the map // clear the map