More work on front end

Its extra shiny

static/koboldai.css

@@ -693,51 +693,30 @@ border-top-right-radius: var(--tabs_rounding);
 .bias_slider_labels {
 	display: flex;
 	justify-content: space-between;
+	position: relative;
 }
 
-.bias_slider_bar {
+.bias_slider_min, .bias_slider_max{
-	grid-area: bar;
-}
-
-.bias_slider_min {
-	grid-area: min;
 	font-size: calc(0.8em + var(--font_size_adjustment));
-	margin-right: 5px;
+	user-select: none;
-	margin-left: 5px;
 }
 
 .bias_slider_cur {
-	grid-area: cur;
 	text-align: center;
+	outline: none;
 }
 
-.bias_slider_max {
+.bias_score, .bias_top {
-	grid-area: max;
+	margin-bottom: 12px;
-	font-size: calc(0.8em + var(--font_size_adjustment));
-	text-align: right;
-	margin-right: 5px;
-	margin-left: 5px;
 }
 
-.bias_header {
+.bias_slider_centerlayer {
-	display: grid;
+	/* Yeah its a bit of a hack */
-	grid-template-areas: "phrase percent max";
+	position: absolute;
-	grid-template-columns: auto 100px 100px;
+	left: 0px;
-}
+	width: 100%;
-
+	display: flex;
-.bias_header_phrase {
+	justify-content: center;
-	grid-area: phrase;
-	font-size: calc(1.1em + var(--font_size_adjustment));
-}
-
-.bias_header_score {
-	grid-area: percent;
-	font-size: calc(1.1em + var(--font_size_adjustment));
-}
-
-.bias_header_max {
-	grid-area: max;
-	font-size: calc(1.1em + var(--font_size_adjustment));
 }
 
 /* Theme */

static/koboldai.js

@@ -2862,8 +2862,7 @@ function save_as_story(response) {
 	if (response === "overwrite?") openPopup("save-confirm");
 }
 
-function save_bias(item) {
+function save_bias() {
-	
 	var have_blank = false;
 	var biases = {};
 	//get all of our biases
@@ -3634,8 +3633,15 @@ function options_on_right(data) {
 }
 
 function makeBiasCard(phrase, score, compThreshold) {
-	function updateLabel(input) {
+	function updateBias(origin, input, save=true) {
-		input.closest(".bias_slider").querySelector(".bias_slider_cur").innerText = input.value;
+		const textInput = input.closest(".bias_slider").querySelector(".bias_slider_cur");
+		let value = (origin === "slider") ? input.value : parseFloat(textInput.innerText);
+		textInput.innerText = value;
+		input.value = value;
+
+		// Only save on "commitful" actions like blur or mouseup to not spam
+		// the poor server
+		if (save) console.warn("saving")
 	}
 
 	const biasContainer = $el("#biasing");
@@ -3647,14 +3653,78 @@ function makeBiasCard(phrase, score, compThreshold) {
 	const compThresholdInput = biasCard.querySelector(".bias_comp_threshold input");
 
 	phraseInput.value = phrase;
-
 	scoreInput.value = score;
-	scoreInput.addEventListener("input", function() { updateLabel(this) });
-	updateLabel(scoreInput);
-
 	compThresholdInput.value = compThreshold;
-	compThresholdInput.addEventListener("input", function() { updateLabel(this) });
+
-	updateLabel(compThresholdInput);
+	for (const input of [scoreInput, compThresholdInput]) {
+		// Init sync
+		updateBias("slider", input, false);
+
+		// Visual update on each value change
+		input.addEventListener("input", function() { updateBias("slider", this, false) });
+
+		// Only when we leave do we sync to server (might come back to bite us)
+		input.addEventListener("mouseup", function() { updateBias("slider", this) });
+		input.addEventListener("blur", function() { updateBias("slider", this) });
+
+		// Personally I don't want to press a key 100 times to add one
+		const nudge = parseFloat(input.getAttribute("keyboard-step") ?? input.getAttribute("step"));
+		const min = parseFloat(input.getAttribute("min"));
+		const max = parseFloat(input.getAttribute("max"));
+
+		const currentHitbox = input.closest(".hitbox");
+		const currentLabel = input.closest(".bias_slider").querySelector(".bias_slider_cur");
+		currentLabel.addEventListener("keydown", function(event) {
+			// Nothing special for numbers
+			if ([".", "-"].includes(event.key) || parseInt(event.key)) return;
+
+			// Either we are special keys or forbidden keys
+			event.preventDefault();
+
+			switch (event.key) {
+				case "Enter":
+					currentLabel.blur();
+					break;
+				// This feels very nice :^)
+				case "ArrowDown":
+				case "ArrowUp":
+					let delta = (event.key === "ArrowUp") ? nudge : -nudge;
+					let currentValue = parseFloat(currentLabel.innerText);
+
+					event.preventDefault();
+					if (!currentValue && currentValue !== 0) return;
+
+					// toFixed because 1.1 + 0.1 !== 1.2 yay rounding errors.
+					// Although the added decimal place(s) look cleaner now
+					// that I think about it.
+					let value = Math.min(max, Math.max(min, currentValue + delta));
+					currentLabel.innerText = value.toFixed(2);
+
+					updateBias("text", input, false);
+					break;
+			}
+		});
+
+		currentHitbox.addEventListener("wheel", function(event) {
+			// Only when focused! (May drop this requirement later, browsers seem to behave when scrolling :] )
+			if (currentLabel !== document.activeElement) return;
+			if (event.deltaY === 0) return;
+
+			let delta = (event.deltaY > 0) ? nudge : -nudge;
+			let currentValue = parseFloat(currentLabel.innerText);
+
+			event.preventDefault();
+			if (!currentValue && currentValue !== 0) return;
+			let value = Math.min(max, Math.max(min, currentValue + delta));
+			currentLabel.innerText = value.toFixed(2);
+
+			updateBias("text", input, false);
+		});
+
+		currentLabel.addEventListener("blur", function(event) {
+			updateBias("text", input);
+		});
+	}
 
 	biasContainer.appendChild(biasCard);
 }

templates/templates.html

@@ -118,20 +118,25 @@
 		<span class="close_button material-icons-outlined">close</span>
 	</div>
 
-	<span>Score</span>
+	<div class="hitbox">
+		<span class="bias_label">Bias Amount</span>
 		<div class="bias_score bias_slider">
 			<div class="bias_slider_bar">
-			<input type="range" min="-50" max="50" step="0.01" value="0" class="setting_item_input" 
+				<input type="range" min="-50" max="50" keyboard-step="0.1" step="0.01" value="0" class="setting_item_input" 
 					onchange="save_bias(this);"/>
 			</div>
 			<div class="bias_slider_labels">
-			<div class="bias_slider_min">-50</div>
+				<span class="bias_slider_min">-50</span>
-			<div class="bias_slider_cur">0</div>
+				<div class="bias_slider_centerlayer">
+					<span class="bias_slider_cur" contenteditable="true">0</span>
+				</div>
 				<div class="bias_slider_max">50</div>
 			</div>
 		</div>
+	</div>
 
-	<span class="bias_header_comp_threshold">
+	<div class="hitbox">
+		<span class="bias_label">
 			Completion Threshold
 			<span class="helpicon material-icons-outlined" tooltip="Amount of tokens that must match the phrase before it is force-completed.">help_icon</span>
 		</span>
@@ -142,8 +147,11 @@
 			</div>
 			<div class="bias_slider_labels">
 				<div class="bias_slider_min">0</div>
-			<div class="bias_slider_cur">10</div>
+				<div class="bias_slider_centerlayer">
+					<span class="bias_slider_cur" contenteditable="true">10</span>
+				</div>
 				<div class="bias_slider_max">10</div>
 			</div>
 		</div>
+	</div>
 </div>