style: respore winds button

This commit is contained in:
Azgaar 2023-08-06 18:53:05 +04:00
parent 42b0cafecd
commit 457db89cda
3 changed files with 68 additions and 61 deletions

View file

@ -2346,7 +2346,7 @@
<div id="dialogs"> <div id="dialogs">
<div id="worldConfigurator" class="dialog stable" style="display: none"> <div id="worldConfigurator" class="dialog stable" style="display: none">
<div> <div style="display: flex">
<div id="worldControls"> <div id="worldControls">
<div> <div>
<i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i> <i data-locked="0" id="lock_temperatureEquator" class="icon-lock-open"></i>
@ -2453,7 +2453,8 @@
<div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div> <div data-tip="Map coordinates on globe"><i>Coords:</i> <span id="mapCoordinates"></span></div>
</div> </div>
<svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240"> <div style="display: flex; flex-direction: column; align-items: flex-end">
<svg id="globe" width="22em" viewBox="-20 -25 240 240">
<defs> <defs>
<linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1"> <linearGradient id="temperatureGradient" x1="0" x2="0" y1="0" y2="1">
<stop id="grad90" offset="0%" stop-color="blue" /> <stop id="grad90" offset="0%" stop-color="blue" />
@ -2506,6 +2507,11 @@
<path id="globeGraticule" /> <path id="globeGraticule" />
<path id="globeArea" /> <path id="globeArea" />
</svg> </svg>
<button id="restoreWinds" data-tip="Click to restore default (Earth-based) wind directions">
Restore winds
</button>
</div>
</div> </div>
</div> </div>

View file

@ -972,7 +972,7 @@ function defineMapSize() {
const part = grid.features.some(f => f.land && f.border); // if land goes over map borders const part = grid.features.some(f => f.land && f.border); // if land goes over map borders
const max = part ? 80 : 100; // max size const max = part ? 80 : 100; // max size
const lat = () => gauss(P(0.5) ? 40 : 60, 15, 25, 75); // latitude shift const lat = () => gauss(P(0.5) ? 40 : 60, 20, 25, 75); // latitude shift
if (!part) { if (!part) {
if (template === "Pangea") return [100, 50]; if (template === "Pangea") return [100, 50];
@ -1007,7 +1007,8 @@ function calculateMapCoordinates() {
mapCoordinates = {latT, latN, latS, lonT: lon * 2, lonW: -lon, lonE: lon}; mapCoordinates = {latT, latN, latS, lonT: lon * 2, lonW: -lon, lonE: lon};
} }
// temperature model // temperature model, trying to follow real-world data
// based on http://www-das.uwyo.edu/~geerts/cwx/notes/chap16/Image64.gif
function calculateTemperatures() { function calculateTemperatures() {
TIME && console.time("calculateTemperatures"); TIME && console.time("calculateTemperatures");
const cells = grid.cells; const cells = grid.cells;

View file

@ -9,8 +9,7 @@ function editWorld() {
"Whole World": () => applyWorldPreset(100, 50), "Whole World": () => applyWorldPreset(100, 50),
Northern: () => applyWorldPreset(33, 25), Northern: () => applyWorldPreset(33, 25),
Tropical: () => applyWorldPreset(33, 50), Tropical: () => applyWorldPreset(33, 50),
Southern: () => applyWorldPreset(33, 75), Southern: () => applyWorldPreset(33, 75)
"Restore Winds": restoreDefaultWinds
}, },
open: function () { open: function () {
const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button"); const buttons = $(this).dialog("widget").find(".ui-dialog-buttonset > button");
@ -18,7 +17,6 @@ function editWorld() {
buttons[1].addEventListener("mousemove", () => tip("Click to set map size to cover the Northern latitudes")); buttons[1].addEventListener("mousemove", () => tip("Click to set map size to cover the Northern latitudes"));
buttons[2].addEventListener("mousemove", () => tip("Click to set map size to cover the Tropical latitudes")); buttons[2].addEventListener("mousemove", () => tip("Click to set map size to cover the Tropical latitudes"));
buttons[3].addEventListener("mousemove", () => tip("Click to set map size to cover the Southern latitudes")); buttons[3].addEventListener("mousemove", () => tip("Click to set map size to cover the Southern latitudes"));
buttons[4].addEventListener("mousemove", () => tip("Click to restore default wind directions"));
}, },
close: function () { close: function () {
$(this).dialog("destroy"); $(this).dialog("destroy");
@ -41,6 +39,8 @@ function editWorld() {
globe.select("#globeGraticule").attr("d", round(path(d3.geoGraticule()()))); // globe graticule globe.select("#globeGraticule").attr("d", round(path(d3.geoGraticule()()))); // globe graticule
updateWindDirections(); updateWindDirections();
byId("restoreWinds").addEventListener("click", restoreDefaultWinds);
function updateInputValues() { function updateInputValues() {
byId("temperatureEquatorInput").value = options.temperatureEquator; byId("temperatureEquatorInput").value = options.temperatureEquator;
byId("temperatureEquatorOutput").value = options.temperatureEquator; byId("temperatureEquatorOutput").value = options.temperatureEquator;
@ -144,9 +144,9 @@ function editWorld() {
globe.select("#grad90").attr("stop-color", getColor((tNP - tMin) / tDelta)); globe.select("#grad90").attr("stop-color", getColor((tNP - tMin) / tDelta));
globe.select("#grad60").attr("stop-color", getColor((tEq - ((tEq - tNP) * 2) / 3 - tMin) / tDelta)); globe.select("#grad60").attr("stop-color", getColor((tEq - ((tEq - tNP) * 2) / 3 - tMin) / tDelta));
globe.select("#grad30").attr("stop-color", getColor((tEq - ((tEq - tNP) * 1) / 3 - tMin) / tDelta)); globe.select("#grad30").attr("stop-color", getColor((tEq - ((tEq - tNP) * 1) / 4 - tMin) / tDelta));
globe.select("#grad0").attr("stop-color", getColor((tEq - tMin) / tDelta)); globe.select("#grad0").attr("stop-color", getColor((tEq - tMin) / tDelta));
globe.select("#grad-30").attr("stop-color", getColor((tEq - ((tEq - tSP) * 1) / 3 - tMin) / tDelta)); globe.select("#grad-30").attr("stop-color", getColor((tEq - ((tEq - tSP) * 1) / 4 - tMin) / tDelta));
globe.select("#grad-60").attr("stop-color", getColor((tEq - ((tEq - tSP) * 2) / 3 - tMin) / tDelta)); globe.select("#grad-60").attr("stop-color", getColor((tEq - ((tEq - tSP) * 2) / 3 - tMin) / tDelta));
globe.select("#grad-90").attr("stop-color", getColor((tSP - tMin) / tDelta)); globe.select("#grad-90").attr("stop-color", getColor((tSP - tMin) / tDelta));
} }