Make biome name editable

This commit is contained in:
Wuzzy 2023-10-23 03:10:59 +02:00
parent 4a63b518c6
commit a5055b93ca
2 changed files with 40 additions and 11 deletions

View File

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

View File

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