Make biome name editable
This commit is contained in:
parent
4a63b518c6
commit
a5055b93ca
@ -54,6 +54,12 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
|
||||
</div>
|
||||
<div id="biomeEditElements">
|
||||
<h3>Selected biome</h3>
|
||||
<label for="inputBiomeName">Name:
|
||||
<input id="inputBiomeName" type="text">
|
||||
</label>
|
||||
|
||||
<br>
|
||||
|
||||
<label for="inputHeat">Heat:
|
||||
<input id="inputHeat" type="number" value="50" step="1">
|
||||
</label>
|
||||
|
45
mibpov.js
45
mibpov.js
@ -11,6 +11,9 @@ const GRID_STEP = 10
|
||||
// be selected by clicking on it
|
||||
const POINT_SELECT_DISTANCE = 25
|
||||
|
||||
// name to display if empty
|
||||
const FALLBACK_NAME = "(no name)"
|
||||
|
||||
// Symbol for storing the biome ID in site objects
|
||||
// for the Voronoi script
|
||||
const biomeIDSymbol = Symbol("Biome ID");
|
||||
@ -178,7 +181,7 @@ function addBiome(biomeDef) {
|
||||
}
|
||||
|
||||
// Add a default biome at the midpoint
|
||||
addBiome({name: generateBiomeName(midpoint_heat, midpoint_humidity), heat:midpoint_heat, humidity:midpoint_humidity, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT})
|
||||
addBiome({name: "default", heat:midpoint_heat, humidity:midpoint_humidity, min_y: MIN_Y_DEFAULT, max_y: MAX_Y_DEFAULT})
|
||||
|
||||
function getViewY() {
|
||||
if (!inputViewY) {
|
||||
@ -198,9 +201,9 @@ function getBiomeByID(id) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Returns a biome name for displaying it, based on heat and humidity values.
|
||||
function generateBiomeName(heat, humidity) {
|
||||
return "("+heat+","+humidity+")";
|
||||
// Returns a new biome name for displaying
|
||||
function generateBiomeName(id) {
|
||||
return +id;
|
||||
}
|
||||
|
||||
function biomePointToVoronoiPoint(point) {
|
||||
@ -237,7 +240,11 @@ function putPointName(context, point) {
|
||||
context.textBaseline = "alphabetic";
|
||||
}
|
||||
context.font = "120% sans-serif"
|
||||
context.fillText(point.name, x, y);
|
||||
let displayName = point.name;
|
||||
if (displayName === "") {
|
||||
displayName = FALLBACK_NAME;
|
||||
}
|
||||
context.fillText(displayName, x, y);
|
||||
}
|
||||
function putPoint(context, point) {
|
||||
const ARROW_SIZE_SIDE = 7;
|
||||
@ -664,7 +671,11 @@ function rewriteBiomeSelector() {
|
||||
let newElem = document.createElement("option");
|
||||
newElem.value = num;
|
||||
newElem.id = "biome_list_element_" + biomePoints[b].id;
|
||||
let newElemText = document.createTextNode(biomePoints[b].name);
|
||||
let displayName = biomePoints[b].name;
|
||||
if (displayName === "") {
|
||||
displayName = FALLBACK_NAME;
|
||||
}
|
||||
let newElemText = document.createTextNode(displayName);
|
||||
newElem.append(newElemText);
|
||||
biomeSelector.append(newElem);
|
||||
}
|
||||
@ -677,12 +688,14 @@ function updateWidgetStates() {
|
||||
inputHumidity.disabled = "disabled";
|
||||
inputMinY.disabled = "disabled";
|
||||
inputMaxY.disabled = "disabled";
|
||||
inputBiomeName.disabled = "disabled";
|
||||
} else {
|
||||
removeBiomeButton.disabled = "";
|
||||
inputHeat.disabled = "";
|
||||
inputHumidity.disabled = "";
|
||||
inputMinY.disabled = "";
|
||||
inputMaxY.disabled = "";
|
||||
inputBiomeName.disabled = "";
|
||||
if (biomeSelector.selectedIndex !== -1) {
|
||||
let selected = biomeSelector.options[biomeSelector.selectedIndex];
|
||||
let point = biomePoints[biomeSelector.selectedIndex];
|
||||
@ -690,6 +703,7 @@ function updateWidgetStates() {
|
||||
inputHumidity.value = point.humidity;
|
||||
inputMinY.value = point.min_y;
|
||||
inputMaxY.value = point.max_y;
|
||||
inputBiomeName.value = point.name;
|
||||
}
|
||||
}
|
||||
inputNoiseHeatOffset.value = noises.heat.offset;
|
||||
@ -728,8 +742,11 @@ function onChangeBiomeValueWidget(pointField, value) {
|
||||
}
|
||||
let point = biomePoints[biomeSelector.selectedIndex];
|
||||
point[pointField] = value;
|
||||
point.name = generateBiomeName(point.heat, point.humidity);
|
||||
selected.innerText = point.name;
|
||||
let displayName = point.name;
|
||||
if (displayName === "") {
|
||||
displayName = FALLBACK_NAME;
|
||||
}
|
||||
selected.innerText = displayName;
|
||||
draw(getViewY(), true);
|
||||
}
|
||||
|
||||
@ -745,6 +762,9 @@ inputMinY.oninput = function() {
|
||||
inputMaxY.oninput = function() {
|
||||
onChangeBiomeValueWidget("max_y", +this.value);
|
||||
}
|
||||
inputBiomeName.oninput = function() {
|
||||
onChangeBiomeValueWidget("name", this.value);
|
||||
}
|
||||
inputViewY.oninput = function() {
|
||||
draw(getViewY(), true);
|
||||
updateAltitudeText();
|
||||
@ -758,7 +778,7 @@ addBiomeButton.onclick = function() {
|
||||
let hu = Math.round(limit_humidity_min + Math.random() * (limit_humidity_max - limit_humidity_min));
|
||||
let newPoint = {
|
||||
id: lastBiomeID,
|
||||
name: generateBiomeName(he, hu),
|
||||
name: generateBiomeName(lastBiomeID),
|
||||
heat: he,
|
||||
humidity: hu,
|
||||
min_y: MIN_Y_DEFAULT,
|
||||
@ -881,12 +901,15 @@ function updatePointWhenDragged(pointID) {
|
||||
let [newHeat, newHumidity] = canvasPixelCoordsToBiomeCoords(event.offsetX, event.offsetY);
|
||||
selectedPoint.heat = newHeat;
|
||||
selectedPoint.humidity = newHumidity;
|
||||
selectedPoint.name = generateBiomeName(newHeat, newHumidity);
|
||||
draw(getViewY(), true);
|
||||
updateWidgetStates();
|
||||
let [elemID, elem] = getSelectedBiomeIDAndElement();
|
||||
if (elemID !== null && points[i].id === elemID) {
|
||||
elem.innerText = selectedPoint.name;
|
||||
let displayName = selectedPoint.name;
|
||||
if (displayName === "") {
|
||||
displayName = FALLBACK_NAME;
|
||||
}
|
||||
elem.innerText = displayName;
|
||||
break;
|
||||
}
|
||||
return;
|
||||
|
Loading…
x
Reference in New Issue
Block a user