toggle loading menu

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

View file

@ -162,14 +162,14 @@
</g>
<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>
</defs>
<g id="viewbox"></g>
<g id="scaleBar"></g>
<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="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%"/>
</g>
</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("#init-rose").transition().duration(4000).style("opacity", 0);
} else {
hideLoading();
checkLoadParameters();
}
// remove loading screen
d3.select("#loading").transition().duration(4000).style("opacity", 0).remove();
d3.select("#initial").transition().duration(4000).attr("opacity", 0).remove();
function hideLoading() {
d3.select("#loading").transition().duration(4000).style("opacity", 0);
d3.select("#initial").transition().duration(4000).attr("opacity", 0);
d3.select("#optionsContainer").transition().duration(3000).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
function checkLoadParameters() {
const url = new URL(window.location.href);
@ -1921,16 +1930,18 @@ function showStatistics() {
INFO && console.log(stats);
}
const regenerateMap = debounce(function () {
const regenerateMap = debounce(async function () {
WARN && console.warn("Generate new random map");
showLoading();
closeDialogs("#worldConfigurator, #options3d");
customization = 0;
undraw();
resetZoom(1000);
generate();
undraw();
await generate();
restoreLayers();
if (ThreeD.options.isOn) ThreeD.redraw();
if ($("#worldConfigurator").is(":visible")) editWorld();
hideLoading();
}, 1000);
// clear the map