Update widgets on selection change, add, remove
This commit is contained in:
parent
591ab7ef08
commit
b68a81950f
41
biome-ui.js
41
biome-ui.js
@ -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();
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user