mirror of
https://github.com/Azgaar/Fantasy-Map-Generator.git
synced 2025-12-21 19:41:23 +01:00
feat: slider-input - units editor
This commit is contained in:
Azgaar
parent
bba23c6fc7
commit
292b2820e8
8 changed files with 62 additions and 143 deletions
|
|
@ -24,13 +24,11 @@
|
|||
constructor() {
|
||||
super();
|
||||
this.appendChild(template.content.cloneNode(true));
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
const range = this.querySelector("input[type=range]");
|
||||
const number = this.querySelector("input[type=number]");
|
||||
|
||||
range.value = number.value = this.getAttribute("value") || 50;
|
||||
range.value = number.value = this.value || this.getAttribute("value") || 50;
|
||||
range.min = number.min = this.getAttribute("min") || 0;
|
||||
range.max = number.max = this.getAttribute("max") || 100;
|
||||
range.step = number.step = this.getAttribute("step") || 1;
|
||||
|
|
|
|||
26
index.css
26
index.css
|
|
@ -1820,11 +1820,6 @@ div.editorLine {
|
|||
padding: 0px 3px !important;
|
||||
}
|
||||
|
||||
#unitsBody > div > * {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.unitsHeader {
|
||||
margin: 0.8em 0 0 -1.1em;
|
||||
font-weight: bold;
|
||||
|
|
@ -1836,28 +1831,21 @@ div.editorLine {
|
|||
margin: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
#unitsBody > div > div {
|
||||
#unitsBody label {
|
||||
display: inline-block;
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input[type="range"] {
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
#unitsBody > div > select,
|
||||
#unitsBody > div > input[type="text"] {
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input[type="number"] {
|
||||
width: 4.35em;
|
||||
}
|
||||
|
||||
#unitsBody > div > input,
|
||||
#unitsBody > div > select {
|
||||
width: 14.4em;
|
||||
border: 1px solid #e9e9e9;
|
||||
}
|
||||
|
||||
#unitsBody input[type="range"] {
|
||||
width: 9em;
|
||||
}
|
||||
|
||||
#unitsEditor i.icon-lock-open,
|
||||
#unitsEditor i.icon-lock {
|
||||
color: #626573;
|
||||
|
|
|
|||
107
index.html
107
index.html
|
|
@ -5107,11 +5107,11 @@
|
|||
<div id="unitsBody" style="margin-left: 1.1em">
|
||||
<div class="unitsHeader" style="margin-top: 0.4em">
|
||||
<span class="icon-map-signs"></span>
|
||||
<div>Distance:</div>
|
||||
<label>Distance:</label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Select a distance unit or provide a custom name">
|
||||
<div>Distance unit:</div>
|
||||
<label>Distance unit:</label>
|
||||
<select id="distanceUnitInput" data-stored="distanceUnit">
|
||||
<option value="mi" selected>Mile (mi)</option>
|
||||
<option value="km">Kilometer (km)</option>
|
||||
|
|
@ -5123,34 +5123,25 @@
|
|||
</select>
|
||||
</div>
|
||||
|
||||
<i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
|
||||
<div data-tip="Select how many distance units are in one pixel">
|
||||
<div>1 map pixel =</div>
|
||||
<input id="distanceScaleOutput" type="range" min=".01" max="20" step=".1" value="3" />
|
||||
<input
|
||||
id="distanceScaleInput"
|
||||
data-stored="distanceScale"
|
||||
type="number"
|
||||
min=".01"
|
||||
max="100"
|
||||
step=".01"
|
||||
value="3"
|
||||
data-value="3"
|
||||
/>
|
||||
<i data-locked="0" id="lock_distanceScale" class="icon-lock-open"></i>
|
||||
<slider-input id="distanceScaleInput" data-stored="distanceScale" min=".01" max="20" step=".1" value="3">
|
||||
<label>1 map pixel:</label>
|
||||
</slider-input>
|
||||
</div>
|
||||
|
||||
<div data-tip='Area unit name, type "square" to add ² to the distance unit'>
|
||||
<div>Area unit:</div>
|
||||
<label>Area unit:</label>
|
||||
<input id="areaUnit" data-stored="areaUnit" type="text" value="square" />
|
||||
</div>
|
||||
|
||||
<div class="unitsHeader">
|
||||
<span class="icon-signal"></span>
|
||||
<div>Altitude:</div>
|
||||
<label>Altitude:</label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Select an altitude unit or provide a custom name">
|
||||
<div>Height unit:</div>
|
||||
<label>Height unit:</label>
|
||||
<select id="heightUnit" data-stored="heightUnit">
|
||||
<option value="ft" selected>Feet (ft)</option>
|
||||
<option value="m">Meters (m)</option>
|
||||
|
|
@ -5162,26 +5153,25 @@
|
|||
<div
|
||||
data-tip="Set height exponent, i.e. a value for altitude change sharpness. Altitude affects temperature and hence biomes"
|
||||
>
|
||||
<div>Exponent:</div>
|
||||
<input id="heightExponentOutput" type="range" min="1.5" max="2.2" value="2" step=".01" />
|
||||
<input
|
||||
<slider-input
|
||||
id="heightExponentInput"
|
||||
data-stored="heightExponent"
|
||||
type="number"
|
||||
min="1.5"
|
||||
max="2.2"
|
||||
value="2"
|
||||
step=".01"
|
||||
/>
|
||||
value="2"
|
||||
>
|
||||
<label>Exponent:</label>
|
||||
</slider-input>
|
||||
</div>
|
||||
|
||||
<div class="unitsHeader" data-tip="Select Temperature scale">
|
||||
<span class="icon-temperature-high"></span>
|
||||
<div>Temperature:</div>
|
||||
<label>Temperature:</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>Temperature scale:</div>
|
||||
<label>Temperature scale:</label>
|
||||
<select id="temperatureScale" data-stored="temperatureScale">
|
||||
<option value="°C" selected>degree Celsius (°C)</option>
|
||||
<option value="°F">degree Fahrenheit (°F)</option>
|
||||
|
|
@ -5196,73 +5186,32 @@
|
|||
|
||||
<div class="unitsHeader">
|
||||
<span class="icon-male"></span>
|
||||
<div>Population:</div>
|
||||
<label>Population:</label>
|
||||
</div>
|
||||
|
||||
<div data-tip="Set how many people are in one population point">
|
||||
<div>1 population point =</div>
|
||||
<input
|
||||
id="populationRateOutput"
|
||||
data-stored="populationRate"
|
||||
type="range"
|
||||
min="10"
|
||||
max="9990"
|
||||
step="10"
|
||||
value="1000"
|
||||
/>
|
||||
<input
|
||||
<slider-input
|
||||
id="populationRateInput"
|
||||
data-stored="populationRate"
|
||||
type="number"
|
||||
min="10"
|
||||
max="9990"
|
||||
max="10000"
|
||||
step="10"
|
||||
value="1000"
|
||||
/>
|
||||
>
|
||||
<label>1 population point:</label>
|
||||
</slider-input>
|
||||
</div>
|
||||
|
||||
<div data-tip="Set urbanization rate: burgs population relative to all population">
|
||||
<div>Urbanization rate:</div>
|
||||
<input
|
||||
id="urbanizationOutput"
|
||||
data-stored="urbanization"
|
||||
type="range"
|
||||
min=".01"
|
||||
max="5"
|
||||
step=".01"
|
||||
value="1"
|
||||
/>
|
||||
<input
|
||||
id="urbanizationInput"
|
||||
data-stored="urbanization"
|
||||
type="number"
|
||||
min=".01"
|
||||
max="5"
|
||||
step=".01"
|
||||
value="1"
|
||||
/>
|
||||
<slider-input id="urbanizationInput" data-stored="urbanization" min=".01" max="5" step=".01" value="1">
|
||||
<label>Urbanization rate:</label>
|
||||
</slider-input>
|
||||
</div>
|
||||
|
||||
<div data-tip="Set urban density: average population per building in Medieval Fantasy City Generator">
|
||||
<div>Urban density:</div>
|
||||
<input
|
||||
id="urbanDensityOutput"
|
||||
data-stored="urbanDensity"
|
||||
type="range"
|
||||
min="1"
|
||||
max="200"
|
||||
step="1"
|
||||
value="10"
|
||||
/>
|
||||
<input
|
||||
id="urbanDensityInput"
|
||||
data-stored="urbanDensity"
|
||||
type="number"
|
||||
min="1"
|
||||
max="200"
|
||||
step="1"
|
||||
value="10"
|
||||
/>
|
||||
<slider-input id="urbanDensityInput" data-stored="urbanDensity" min="1" max="200" step="1" value="10">
|
||||
<label>Urban density:</label>
|
||||
</slider-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -222,14 +222,14 @@ async function parseLoadedData(data, mapVersion) {
|
|||
void (function parseSettings() {
|
||||
const settings = data[1].split("|");
|
||||
if (settings[0]) applyOption(distanceUnitInput, settings[0]);
|
||||
if (settings[1]) distanceScale = distanceScaleInput.value = distanceScaleOutput.value = settings[1];
|
||||
if (settings[1]) distanceScale = distanceScaleInput.value = settings[1];
|
||||
if (settings[2]) areaUnit.value = settings[2];
|
||||
if (settings[3]) applyOption(heightUnit, settings[3]);
|
||||
if (settings[4]) heightExponentInput.value = heightExponentOutput.value = settings[4];
|
||||
if (settings[4]) heightExponentInput.value = settings[4];
|
||||
if (settings[5]) temperatureScale.value = settings[5];
|
||||
// setting 6-11 (scaleBar) are part of style now, kept as "" in newer versions for compatibility
|
||||
if (settings[12]) populationRate = populationRateInput.value = populationRateOutput.value = settings[12];
|
||||
if (settings[13]) urbanization = urbanizationInput.value = urbanizationOutput.value = settings[13];
|
||||
if (settings[12]) populationRate = populationRateInput.value = settings[12];
|
||||
if (settings[13]) urbanization = urbanizationInput.value = settings[13];
|
||||
if (settings[14]) mapSizeInput.value = mapSizeOutput.value = minmax(settings[14], 1, 100);
|
||||
if (settings[15]) latitudeInput.value = latitudeOutput.value = minmax(settings[15], 0, 100);
|
||||
if (settings[18]) precInput.value = precOutput.value = settings[18];
|
||||
|
|
@ -241,7 +241,7 @@ async function parseLoadedData(data, mapVersion) {
|
|||
if (settings[21]) hideLabels.checked = +settings[21];
|
||||
if (settings[22]) stylePreset.value = settings[22];
|
||||
if (settings[23]) rescaleLabels.checked = +settings[23];
|
||||
if (settings[24]) urbanDensity = urbanDensityInput.value = urbanDensityOutput.value = +settings[24];
|
||||
if (settings[24]) urbanDensity = urbanDensityInput.value = +settings[24];
|
||||
if (settings[25]) longitudeInput.value = longitudeOutput.value = minmax(settings[25] || 50, 0, 100);
|
||||
})();
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,6 @@ window.Rivers = (function () {
|
|||
TIME && console.timeEnd("generateRivers");
|
||||
|
||||
function drainWater() {
|
||||
//const MIN_FLUX_TO_FORM_RIVER = 10 * distanceScale;
|
||||
const MIN_FLUX_TO_FORM_RIVER = 30;
|
||||
const cellsNumberModifier = (pointsInput.dataset.cells / 10000) ** 0.25;
|
||||
|
||||
|
|
|
|||
|
|
@ -539,7 +539,6 @@ function applyStoredOptions() {
|
|||
|
||||
for (let i = 0; i < localStorage.length; i++) {
|
||||
const key = localStorage.key(i);
|
||||
|
||||
if (key === "speakerVoice") continue;
|
||||
|
||||
const input = byId(key + "Input") || byId(key);
|
||||
|
|
@ -612,8 +611,7 @@ function randomizeOptions() {
|
|||
|
||||
// 'Units Editor' settings
|
||||
const US = navigator.language === "en-US";
|
||||
if (randomize || !locked("distanceScale"))
|
||||
distanceScale = distanceScaleOutput.value = distanceScaleInput.value = gauss(3, 1, 1, 5);
|
||||
if (randomize || !locked("distanceScale")) distanceScale = distanceScaleInput.value = gauss(3, 1, 1, 5);
|
||||
if (!stored("distanceUnit")) distanceUnitInput.value = US ? "mi" : "km";
|
||||
if (!stored("heightUnit")) heightUnit.value = US ? "ft" : "m";
|
||||
if (!stored("temperatureScale")) temperatureScale.value = US ? "°F" : "°C";
|
||||
|
|
|
|||
|
|
@ -258,15 +258,8 @@ window.UISubmap = (function () {
|
|||
byId("latitudeInput").value = latitudeOutput.value;
|
||||
|
||||
// fix scale
|
||||
distanceScale =
|
||||
distanceScaleInput.value =
|
||||
distanceScaleOutput.value =
|
||||
rn((distanceScale = distanceScaleOutput.value / scale), 2);
|
||||
|
||||
populationRateInput.value = populationRateOutput.value = rn(
|
||||
(populationRate = populationRateOutput.value / scale),
|
||||
2
|
||||
);
|
||||
distanceScale = distanceScaleInput.value = rn(distanceScaleInput.value / scale, 2);
|
||||
populationRate = populationRateInput.value = rn(populationRateInput.value / scale, 2);
|
||||
|
||||
customization = 0;
|
||||
startResample(options);
|
||||
|
|
|
|||
|
|
@ -17,27 +17,22 @@ function editUnits() {
|
|||
};
|
||||
|
||||
// add listeners
|
||||
byId("distanceUnitInput").addEventListener("change", changeDistanceUnit);
|
||||
byId("distanceScaleOutput").addEventListener("input", changeDistanceScale);
|
||||
byId("distanceScaleInput").addEventListener("change", changeDistanceScale);
|
||||
byId("heightUnit").addEventListener("change", changeHeightUnit);
|
||||
byId("heightExponentInput").addEventListener("input", changeHeightExponent);
|
||||
byId("heightExponentOutput").addEventListener("input", changeHeightExponent);
|
||||
byId("temperatureScale").addEventListener("change", changeTemperatureScale);
|
||||
byId("distanceUnitInput").on("change", changeDistanceUnit);
|
||||
byId("distanceScaleInput").on("change", changeDistanceScale);
|
||||
byId("heightUnit").on("change", changeHeightUnit);
|
||||
byId("heightExponentInput").on("input", changeHeightExponent);
|
||||
byId("temperatureScale").on("change", changeTemperatureScale);
|
||||
|
||||
byId("populationRateOutput").addEventListener("input", changePopulationRate);
|
||||
byId("populationRateInput").addEventListener("change", changePopulationRate);
|
||||
byId("urbanizationOutput").addEventListener("input", changeUrbanizationRate);
|
||||
byId("urbanizationInput").addEventListener("change", changeUrbanizationRate);
|
||||
byId("urbanDensityOutput").addEventListener("input", changeUrbanDensity);
|
||||
byId("urbanDensityInput").addEventListener("change", changeUrbanDensity);
|
||||
byId("populationRateInput").on("change", changePopulationRate);
|
||||
byId("urbanizationInput").on("change", changeUrbanizationRate);
|
||||
byId("urbanDensityInput").on("change", changeUrbanDensity);
|
||||
|
||||
byId("addLinearRuler").addEventListener("click", addRuler);
|
||||
byId("addOpisometer").addEventListener("click", toggleOpisometerMode);
|
||||
byId("addRouteOpisometer").addEventListener("click", toggleRouteOpisometerMode);
|
||||
byId("addPlanimeter").addEventListener("click", togglePlanimeterMode);
|
||||
byId("removeRulers").addEventListener("click", removeAllRulers);
|
||||
byId("unitsRestore").addEventListener("click", restoreDefaultUnits);
|
||||
byId("addLinearRuler").on("click", addRuler);
|
||||
byId("addOpisometer").on("click", toggleOpisometerMode);
|
||||
byId("addRouteOpisometer").on("click", toggleRouteOpisometerMode);
|
||||
byId("addPlanimeter").on("click", togglePlanimeterMode);
|
||||
byId("removeRulers").on("click", removeAllRulers);
|
||||
byId("unitsRestore").on("click", restoreDefaultUnits);
|
||||
|
||||
function changeDistanceUnit() {
|
||||
if (this.value === "custom_name") {
|
||||
|
|
@ -92,7 +87,6 @@ function editUnits() {
|
|||
|
||||
function restoreDefaultUnits() {
|
||||
distanceScale = 3;
|
||||
byId("distanceScaleOutput").value = distanceScale;
|
||||
byId("distanceScaleInput").value = distanceScale;
|
||||
unlock("distanceScale");
|
||||
|
||||
|
|
@ -110,16 +104,16 @@ function editUnits() {
|
|||
calculateFriendlyGridSize();
|
||||
|
||||
// height exponent
|
||||
heightExponentInput.value = heightExponentOutput.value = 1.8;
|
||||
heightExponentInput.value = 1.8;
|
||||
localStorage.removeItem("heightExponent");
|
||||
calculateTemperatures();
|
||||
|
||||
renderScaleBar();
|
||||
|
||||
// population
|
||||
populationRate = populationRateOutput.value = populationRateInput.value = 1000;
|
||||
urbanization = urbanizationOutput.value = urbanizationInput.value = 1;
|
||||
urbanDensity = urbanDensityOutput.value = urbanDensityInput.value = 10;
|
||||
populationRate = populationRateInput.value = 1000;
|
||||
urbanization = urbanizationInput.value = 1;
|
||||
urbanDensity = urbanDensityInput.value = 10;
|
||||
localStorage.removeItem("populationRate");
|
||||
localStorage.removeItem("urbanization");
|
||||
localStorage.removeItem("urbanDensity");
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue