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

Globe Temperature Display

Browse source
This commit is contained in:
StempunkDev 2023-07-30 13:55:46 +02:00
parent 104fd9b8d5
commit 31ba534762
2 changed files with 16 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

17
index.html
View file

@ -2353,15 +2353,14 @@
</label> </label>
</div> </div>
<div> <div>
<i data-locked="0" id="lock_temperaturePole" class="icon-lock-open"></i>
<label data-tip="Set temperature near poles"> <label data-tip="Set temperature near poles">
<i>Poles:</i> <i data-locked="0" id="lock_temperatureNorthPole" class="icon-lock-open"></i>
<br>
<i>North Pole</i> <i>North Pole</i>
<input id="temperatureNorthPoleInput" data-stored="temperatureNorthPole" type="number" min="-50" max="50" />°C = <input id="temperatureNorthPoleInput" data-stored="temperatureNorthPole" type="number" min="-50" max="50" />°C =
<span id="temperatureNorthPoleF"></span>°F <span id="temperatureNorthPoleF"></span>°F
<input id="temperatureNorthPoleOutput" data-stored="temperatureNorthPole" type="range" min="-50" max="50" /> <input id="temperatureNorthPoleOutput" data-stored="temperatureNorthPole" type="range" min="-50" max="50" />
<br> <br>
<i data-locked="0" id="lock_temperatureSouthPole" class="icon-lock-open"></i>
<i>South Pole</i> <i>South Pole</i>
<input id="temperatureSouthPoleInput" data-stored="temperatureSouthPole" type="number" min="-50" max="50" />°C = <input id="temperatureSouthPoleInput" data-stored="temperatureSouthPole" type="number" min="-50" max="50" />°C =
<span id="temperatureSouthPoleF"></span>°F <span id="temperatureSouthPoleF"></span>°F
@ -2424,13 +2423,13 @@
<svg id="globe" width="22em" height="22em" viewBox="-20 -25 240 240"> <svg id="globe" width="22em" height="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 class="tempGradient90" offset="0%" stop-color="blue" /> <stop class="tempNorthGradient90" offset="0%" stop-color="blue" />
<stop class="tempGradient60" offset="16.6%" stop-color="green" /> <stop class="tempNorthGradient60" offset="16.6%" stop-color="green" />
<stop class="tempGradient30" offset="33.3%" stop-color="yellow" /> <stop class="tempNorthGradient30" offset="33.3%" stop-color="yellow" />
<stop class="tempGradient0" offset="50%" stop-color="red" /> <stop class="tempGradient0" offset="50%" stop-color="red" />
<stop class="tempGradient30" offset="66.6%" stop-color="yellow" /> <stop class="tempSouthGradient30" offset="66.6%" stop-color="yellow" />
<stop class="tempGradient60" offset="83.3%" stop-color="green" /> <stop class="tempSouthGradient60" offset="83.3%" stop-color="green" />
<stop class="tempGradient90" offset="100%" stop-color="blue" /> <stop class="tempSouthGradient90" offset="100%" stop-color="blue" />
</linearGradient> </linearGradient>
</defs> </defs>
<g id="globeNoteLines"> <g id="globeNoteLines">

11
modules/ui/world-configurator.js
View file

@ -111,10 +111,15 @@ function editWorld() {
document.getElementById("temperatureNorthPoleF").innerHTML = rn((tNorthPole * 9) / 5 + 32); document.getElementById("temperatureNorthPoleF").innerHTML = rn((tNorthPole * 9) / 5 + 32);
const tSouthPole = +document.getElementById("temperatureSouthPoleOutput").value; const tSouthPole = +document.getElementById("temperatureSouthPoleOutput").value;
document.getElementById("temperatureSouthPoleF").innerHTML = rn((tSouthPole * 9) / 5 + 32); document.getElementById("temperatureSouthPoleF").innerHTML = rn((tSouthPole * 9) / 5 + 32);
globe.selectAll(".tempGradient90").attr("stop-color", clr(1 - (tNorthPole - tMin) / (tMax - tMin)));
globe.selectAll(".tempGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 2) / 3 - tMin) / (tMax - tMin))); //North to Equator to South
globe.selectAll(".tempGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 1) / 3 - tMin) / (tMax - tMin))); globe.select(".tempNorthGradient90").attr("stop-color", clr(1 - (tNorthPole - tMin) / (tMax - tMin)));
globe.select(".tempNorthGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 2) / 3 - tMin) / (tMax - tMin)));
globe.select(".tempNorthGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tNorthPole) * 1) / 3 - tMin) / (tMax - tMin)));
globe.select(".tempGradient0").attr("stop-color", clr(1 - (tEq - tMin) / (tMax - tMin))); globe.select(".tempGradient0").attr("stop-color", clr(1 - (tEq - tMin) / (tMax - tMin)));
globe.select(".tempSouthGradient30").attr("stop-color", clr(1 - (tEq - ((tEq - tSouthPole) * 1) / 3 - tMin) / (tMax - tMin)));
globe.select(".tempSouthGradient60").attr("stop-color", clr(1 - (tEq - ((tEq - tSouthPole) * 2) / 3 - tMin) / (tMax - tMin)));
globe.select(".tempSouthGradient90").attr("stop-color", clr(1 - (tSouthPole - tMin) / (tMax - tMin)));
} }
function updateWindDirections() { function updateWindDirections() {