Can now select biome color

dark_style.css

@@ -62,10 +62,15 @@ input {
 select {
 	width: 20em;
 }
-button:hover {
+button:disabled {
+	background-color: #101010;
+	color: #404040;
+	border-color: #606060;
+}
+button:enabled:hover {
 	background-color: gray;
 }
-button:active {
+button:enabled:active {
 	background-color: white;
 	border-color: #808080;
 	color: black;
@@ -155,3 +160,14 @@ h3 {
 .collapser {
 	cursor: pointer;
 }
+#biomeColorSection {
+	margin: 0;
+	padding: 0;
+	display: inline;
+}
+.biomeColorButton {
+	margin-left: 0px;
+	margin-right: 1px;
+	margin-top: 0.2em;
+	margin-bottom: 0.2em;
+}

index.html

@@ -54,27 +54,28 @@ 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:
+	<label for="inputBiomeName">Name:&nbsp;</label>
 	<input id="inputBiomeName" type="text">
-	</label>
 
 	<br>
 
-	<label for="inputHeat">Heat:
+	<div id="biomeColorSection">
+	<label>Color:&nbsp;</label>
+	</div>
+
+	<br>
+
+	<label for="inputHeat">Heat:&nbsp;</label>
 	<input id="inputHeat" type="number" value="50" step="1">
-	</label>
+	<label for="inputHumidity">Humidity:&nbsp;</label>
-	<label for="inputHumidity">Humidity:
 	<input id="inputHumidity" type="number" value="50" step="1">
-	</label>
 
 	<br>
 
-	<label for="inputMinY">Min. Y:
+	<label for="inputMinY">Min. Y:&nbsp;</label>
 	<input id="inputMinY" type="number" value="-31000" step="1">
-	</label>
+	<label for="inputMaxY">Max. Y:&nbsp;</label>
-	<label for="inputMaxY">Max. Y:
 	<input id="inputMaxY" type="number" value="31000" step="1">
-	</label>
 	</div>
 </form>
 </div>
@@ -82,7 +83,7 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
 <h2 class="configHeader"><span class="collapser" id="viewConfigHeaderLink">▼</span> Diagram view settings</h2>
 <div id="viewConfigContainer" class="configFrame">
 <form id="viewForm">
-	<label for="inputViewY">Altitude:</label>
+	<label for="inputViewY">Altitude:&nbsp;</label>
 	<input id="inputViewY" type="number" value="0" step="1">
 
 	<br>
@@ -109,29 +110,29 @@ A Voronoi diagram is supposed to be here but for some reason it cannot be displa
 <div class="configFrame" id="noiseConfigContainer">
 <form id="noiseForm">
 	<h3>Heat (<code>mg_biome_np_heat</code>)</h3>
-	<label for="inputNoiseHeatOffset">Offset:</label>
+	<label for="inputNoiseHeatOffset">Offset:&nbsp;</label>
 	<input id="inputNoiseHeatOffset" type="number" value="50">
 
-	<label for="inputNoiseHeatScale">Scale:</label>
+	<label for="inputNoiseHeatScale">Scale:&nbsp;</label>
 	<input id="inputNoiseHeatScale" type="number" value="50">
 
-	<label for="inputNoiseHeatOctaves">Octaves:</label>
+	<label for="inputNoiseHeatOctaves">Octaves:&nbsp;</label>
 	<input id="inputNoiseHeatOctaves" type="number" value="3" step="1" min="1">
 
-	<label for="inputNoiseHeatPersistence">Persistence:</label>
+	<label for="inputNoiseHeatPersistence">Persistence:&nbsp;</label>
 	<input id="inputNoiseHeatPersistence" type="number" value="0.5" step=0.1>
 
 	<h3>Humidity (<code>mg_biome_np_humidity</code>)</h3>
-	<label for="inputNoiseHumidityOffset">Offset:</label>
+	<label for="inputNoiseHumidityOffset">Offset:&nbsp;</label>
 	<input id="inputNoiseHumidityOffset" type="number" value="50">
 
-	<label for="inputNoiseHumidityScale">Scale:</label>
+	<label for="inputNoiseHumidityScale">Scale:&nbsp;</label>
 	<input id="inputNoiseHumidityScale" type="number" value="50">
 
-	<label for="inputNoiseHumidityOctaves">Octaves:</label>
+	<label for="inputNoiseHumidityOctaves">Octaves:&nbsp;</label>
 	<input id="inputNoiseHumidityOctaves" type="number" value="3" step="1" min="1">
 
-	<label for="inputNoiseHumidityPersistence">Persistence:</label>
+	<label for="inputNoiseHumidityPersistence">Persistence:&nbsp;</label>
 	<input id="inputNoiseHumidityPersistence" type="number" value="0.5" step=0.1>
 
 	<h3>Reset</h3>

mibpov.js

@@ -56,6 +56,7 @@ const CELL_COLORS = [
 	"#836299",
 ];
 const CELL_COLOR_NEUTRAL = "#888888";
+const COLOR_BUTTON_BORDER_SELECTED = "#FF0000";
 
 /* Status variables for the diagram calculations */
 
@@ -195,6 +196,7 @@ let biomePoints = [];
 // Add a biome to the biome list
 function addBiome(biomeDef) {
 	biomeDef.id = lastBiomeID;
+	biomeDef.colorIndex = lastBiomeID % CELL_COLORS.length;
 	biomePoints.push(biomeDef);
 	// The biome ID is just a simple ascending number
 	lastBiomeID++;
@@ -662,8 +664,8 @@ function draw(recalculate) {
 			let biomeID = cell.site[biomeIDSymbol];
 			// This works because the biome ID is a number
 			let biome = getBiomeByID(biomeID);
-			if (biome.color) {
+			if (biome.colorIndex) {
-				context.strokeStyle = biome.color;
+				context.strokeStyle = CELL_COLORS[biome.colorIndex];
 			} else {
 				let ccol = biomeID % CELL_COLORS.length;
 				context.strokeStyle = CELL_COLORS[ccol];
@@ -686,8 +688,8 @@ function draw(recalculate) {
 			// This works because the biome ID is a number
 
 			let biome = getBiomeByID(biomeID);
-			if (biome.color) {
+			if (biome.colorIndex) {
-				context.fillStyle = biome.color;
+				context.fillStyle = CELL_COLORS[biome.colorIndex];
 			} else {
 				let ccol = biomeID % CELL_COLORS.length;
 				context.fillStyle = CELL_COLORS[ccol];
@@ -701,7 +703,16 @@ function draw(recalculate) {
 		// the Voronoi script doesn't return that area in this special case.
 		if (points.length === 1 && diagram.cells.length === 1) {
 			// 1 cell means the whole area is filled
-			context.fillStyle = colors[points[0].id % colors.length];
+
+			let cell = diagram.cells[0];
+			let biomeID = cell.site[biomeIDSymbol];
+			let biome = getBiomeByID(biomeID);
+			if (biome.colorIndex) {
+				context.fillStyle = CELL_COLORS[biome.colorIndex];
+			} else {
+				let ccol = biomeID % CELL_COLORS.length;
+				context.fillStyle = CELL_COLORS[ccol];
+			}
 			context.fillRect(-DRAW_OFFSET, -DRAW_OFFSET, w+DRAW_OFFSET, h+DRAW_OFFSET);
 		}
 	} else {
@@ -790,22 +801,25 @@ function repopulateBiomeSelector() {
 /* Update the status (like disabled or value) of all widgets that
 affect the diagram, based on the internal data */
 function updateWidgetStates() {
+	let state;
 	if (biomePoints.length === 0 || biomeSelector.selectedIndex === -1) {
-		removeBiomeButton.disabled = "disabled";
+		state = "disabled";
-		inputHeat.disabled = "disabled";
-		inputHumidity.disabled = "disabled";
-		inputMinY.disabled = "disabled";
-		inputMaxY.disabled = "disabled";
-		inputBiomeName.disabled = "disabled";
-		inputBiomeColor.disabled = "disabled";
 	} else {
-		removeBiomeButton.disabled = "";
+		state = "";
-		inputHeat.disabled = "";
+	}
-		inputHumidity.disabled = "";
+	inputHeat.disabled = state;
-		inputMinY.disabled = "";
+	inputHumidity.disabled = state;
-		inputMaxY.disabled = "";
+	inputMinY.disabled = state;
-		inputBiomeName.disabled = "";
+	inputMaxY.disabled = state;
-		inputBiomeColor.disabled = "";
+	inputBiomeName.disabled = state;
+	for (let c=0; c<CELL_COLORS.length; c++) {
+		let elem = document.getElementById("inputBiomeColor"+c);
+		if (elem) {
+			elem.disabled = state;
+			elem.style.borderColor = "";
+			elem.innerHTML = "&nbsp;";
+		}
+	}
 	if (biomeSelector.selectedIndex !== -1) {
 		let selected = biomeSelector.options[biomeSelector.selectedIndex];
 		let point = biomePoints[biomeSelector.selectedIndex];
@@ -814,7 +828,18 @@ function updateWidgetStates() {
 		inputMinY.value = point.min_y;
 		inputMaxY.value = point.max_y;
 		inputBiomeName.value = point.name;
-			inputBiomeColor.value = point.color;
+		let colorIndex = point.colorIndex;
+		for (let c=0; c<CELL_COLORS.length; c++) {
+			let elem = document.getElementById("inputBiomeColor"+c);
+			if (elem) {
+				if (c === colorIndex) {
+					// Add a symbol for selected color
+					elem.innerHTML = "&#9679;"; // Unicode: BLACK CIRCLE
+				} else {
+					// Blank out non-selected color
+					elem.innerHTML = "&nbsp;";
+				}
+			}
 		}
 	}
 	inputNoiseHeatOffset.value = noises.heat.offset;
@@ -832,9 +857,6 @@ Will update internal data, biome list and the diagram.
 * pointField: Name of the field it affects (same as in biomePoints)
 * value: The value to set */
 function onChangeBiomeValueWidget(pointField, value) {
-	if (value === null) {
-		return;
-	}
 	if (biomeSelector.selectedIndex === -1) {
 		return;
 	}
@@ -1050,6 +1072,25 @@ function unhideContent() {
 	noscriptContainer.hidden = true;
 }
 
+function initBiomeColorSelectors() {
+	for (let c=0; c<CELL_COLORS.length; c++) {
+		let button = document.createElement("button");
+		button.type = "button";
+		button.style.backgroundColor = CELL_COLORS[c];
+		button.style.width = "2em";
+		button.style.height = "2em";
+		button.innerHTML = "&nbsp;";
+		button.id = "inputBiomeColor"+c;
+		button.className = "biomeColorButton";
+		biomeColorSection.append(button);
+
+		button.onclick = function() {
+			onChangeBiomeValueWidget("colorIndex", c);
+			updateWidgetStates();
+		}
+	}
+}
+
 /***** EVENTS *****/
 
 /* Canvas events */
@@ -1143,7 +1184,7 @@ addBiomeButton.onclick = function() {
 		humidity: hu,
 		min_y: MIN_Y_DEFAULT,
 		max_y: MAX_Y_DEFAULT,
-		color: null,
+		colorIndex: lastBiomeID % CELL_COLORS.length,
 	};
 	biomePoints.push(newPoint);
 	let num = biomePoints.length
@@ -1205,9 +1246,6 @@ inputMaxY.oninput = function() {
 inputBiomeName.oninput = function() {
 	onChangeBiomeValueWidget("name", this.value);
 }
-inputBiomeColor.oninput = function() {
-	onChangeBiomeValueWidget("color", this.value);
-}
 
 /* Diagram view settings events */
 
@@ -1326,6 +1364,7 @@ noiseConfigHeaderLink.onclick = function() {
 
 /* Load events */
 
+window.addEventListener("load", initBiomeColorSelectors);
 window.addEventListener("load", checkboxVarsInit);
 window.addEventListener("load", function() {
 	draw(true);