Update widgets on selection change, add, remove

This commit is contained in:
Wuzzy 2023-10-20 14:03:45 +02:00
parent 591ab7ef08
commit b68a81950f
2 changed files with 44 additions and 5 deletions

View File

@ -1,6 +1,10 @@
"use strict";
let MIN_Y_DEFAULT = -31000
let MAX_Y_DEFAULT = 31000
let biomePoints = [
{name: generateBiomeName(50, 50), heat:50, humidity:50},
{name: generateBiomeName(50, 50), heat:50, humidity:50, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT},
];
// FOREST-16 palette, plus black
@ -198,10 +202,18 @@ function draw(recalculate) {
putPoint(context, biomePoints[p]);
}
if (biomePoints.length === 0) {
context.textAlign = "center";
context.fillStyle = "black";
context.textBaseline = "middle";
context.fillText("No biomes.", 50, 50);
}
}
window.addEventListener("load", drawInit);
window.addEventListener("load", draw);
window.addEventListener("load", rewriteBiomeSelector);
window.addEventListener("load", updateWidgetStates);
function rewriteBiomeSelector() {
biomeSelector.innerHTML = "";
@ -215,12 +227,35 @@ function rewriteBiomeSelector() {
}
}
function updateWidgetStates() {
if (biomePoints.length === 0 || biomeSelector.selectedIndex === -1) {
removeBiomeButton.disabled = "disabled";
inputHeat.disabled = "disabled";
inputHumidity.disabled = "disabled";
inputMinY.disabled = "disabled";
inputMaxY.disabled = "disabled";
} else {
removeBiomeButton.disabled = "";
inputHeat.disabled = "";
inputHumidity.disabled = "";
inputMinY.disabled = "";
inputMaxY.disabled = "";
}
}
function generateBiomeName(heat, humidity) {
return "("+heat+","+humidity+")";
}
biomeSelector.onchange = function() {
draw(false);
if (biomeSelector.selectedIndex !== -1) {
let selected = biomeSelector.options[biomeSelector.selectedIndex];
let point = biomePoints[biomeSelector.selectedIndex];
inputHeat.value = point.heat;
inputHumidity.value = point.humidity;
}
updateWidgetStates();
}
addBiomeButton.onclick = function() {
@ -229,6 +264,8 @@ addBiomeButton.onclick = function() {
let newPoint = {
name: generateBiomeName(he, hu),
heat: he,
min_y: MIN_Y_DEFAULT,
max_y: MAX_Y_DEFAULT,
humidity: hu,
};
biomePoints.push(newPoint);
@ -242,6 +279,7 @@ addBiomeButton.onclick = function() {
newElem.selected = "selected";
draw(true);
updateWidgetStates();
}
removeBiomeButton.onclick = function() {
if (biomeSelector.selectedOptions.length === 0) {
@ -266,4 +304,5 @@ removeBiomeButton.onclick = function() {
}
draw(true);
updateWidgetStates();
}

View File

@ -38,11 +38,11 @@ A voronoi diagram is supposed to be here but for some reason it cannot be displa
<br>
<label for="minY">Min. Y:
<input id="minY" type="number" value="-31000">
<label for="inputMinY">Min. Y:
<input id="inputMinY" type="number" value="-31000">
</label>
<label for="maxY">Max. Y:
<input id="maxY" type="number" value="31000">
<label for="inputMaxY">Max. Y:
<input id="inputMaxY" type="number" value="31000">
</label>
</div>
</form>