Make biome name editable

index.html

@@ -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>

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.
+// Returns a new biome name for displaying
-function generateBiomeName(heat, humidity) {
+function generateBiomeName(id) {
-	return "("+heat+","+humidity+")";
+	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);
+	let displayName = point.name;
-	selected.innerText = 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;