X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=c3de366309a6c6cd60289b551e4576515e531a7d;hb=4d96249116cab3219f4a36fd9bc97ac42dbf574b;hp=7b030cab1cf491d9aa786fdad89aec19164ae702;hpb=026c621f8c912aba3f53be9057078eefe9c92c6f;p=remoteglot

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 7b030ca..c3de366 100644
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -839,6 +839,8 @@ let update_refutation_lines = function() {
 	tbl.replaceChildren();
 
 	if (display_lines.length < 2) {
+		// Update the move highlight, as we've rewritten all the HTML.
+		update_move_highlight();
 		return;
 	}
 
@@ -1406,6 +1408,13 @@ let update_sparkline = function(data) {
 				if (score < min_score) min_score = score;
 				if (score > max_score) max_score = score;
 			}
+			if (max_score - min_score < 100) {
+				if (Math.abs(max_score) >= Math.abs(min_score)) {
+					max_score = min_score + 100;
+				} else {
+					min_score = max_score - 100;
+				}
+			}
 
 			const h = scorespark.getBoundingClientRect().height;
 
@@ -1425,16 +1434,16 @@ let update_sparkline = function(data) {
 				let color;
 				if (scores[i] === 0) {
 					color = [0.5, 0.5, 0.5];
-					rect.setAttributeNS(null, 'y', base_y - 1);
+					rect.setAttributeNS(null, 'y', base_y);
 					rect.setAttributeNS(null, 'height', 1);
 				} else if (scores[i] > 0) {
 					color = [0.2, 0.4, 0.8];
 					rect.setAttributeNS(null, 'y', base_y - extent);
-					rect.setAttributeNS(null, 'height', extent);
+					rect.setAttributeNS(null, 'height', extent + 1);
 				} else {
 					color = [1.0, 0.267, 0.267];
 					rect.setAttributeNS(null, 'y', base_y);
-					rect.setAttributeNS(null, 'height', -extent);
+					rect.setAttributeNS(null, 'height', -extent + 1);
 				}
 				let hlcolor = [color[0], color[1], color[2]];
 				if (scores[i] !== 0) { 
@@ -1836,20 +1845,38 @@ let update_imbalance = function(fen) {
 			}
 		}
 	}
-	let white_imbalance = '';
-	let black_imbalance = '';
+	let white_imbalance = document.getElementById('whiteimbalance');
+	let black_imbalance = document.getElementById('blackimbalance');
+	white_imbalance.textContent = '';
+	black_imbalance.textContent = '';
 	for (let piece in imbalance) {
 		for (let i = 0; i < imbalance[piece]; ++i) {
-			white_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
-			white_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
+			let i1 = document.createElement('img');
+			i1.src = svg_pieces['w' + piece.toUpperCase()];
+			i1.setAttribute('alt', piece.toUpperCase());
+			i1.classList.add('imbalance-piece');
+			white_imbalance.appendChild(i1);
+
+			let i2 = document.createElement('img');
+			i2.src = svg_pieces['b' + piece.toUpperCase()];
+			i2.setAttribute('alt', piece.toUpperCase());
+			i2.classList.add('imbalance-inverted-piece');
+			white_imbalance.appendChild(i2);
 		}
 		for (let i = 0; i < -imbalance[piece]; ++i) {
-			black_imbalance += '<img src="' + svg_pieces['b' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-piece">';
-			black_imbalance += '<img src="' + svg_pieces['w' + piece.toUpperCase()] + '" alt="" style="width: 15px;height: 15px;" class="imbalance-inverted-piece">';
+			let i1 = document.createElement('img');
+			i1.src = svg_pieces['b' + piece.toUpperCase()];
+			i1.setAttribute('alt', piece.toUpperCase());
+			i1.classList.add('imbalance-piece');
+			black_imbalance.appendChild(i1);
+
+			let i2 = document.createElement('img');
+			i2.src = svg_pieces['w' + piece.toUpperCase()];
+			i2.setAttribute('alt', piece.toUpperCase());
+			i2.classList.add('imbalance-inverted-piece');
+			black_imbalance.appendChild(i2);
 		}
 	}
-	document.getElementById('whiteimbalance').innerHTML = white_imbalance;
-	document.getElementById('blackimbalance').innerHTML = black_imbalance;
 }
 
 /** Mark the currently selected move in red.
@@ -2002,7 +2029,11 @@ let explore_hash = function(fen) {
 	fetch(backend_hash_url + "?fen=" + fen, { signal })
 		.then((response) => response.json())
 		.then((data) => { show_explore_hash_results(data, fen); })
-		.catch((err) => {});
+		.catch((err) => {
+			// Truncate the lines, since we already cleared the display.
+			display_lines = [ display_lines[0], display_lines[1] ];
+			update_move_highlight();
+		});
 }
 
 /** Process the JSON response from a hash probe request.
@@ -2039,12 +2070,12 @@ let onDragStart = function(source, piece, position, orientation) {
 }
 
 let mousedownSquare = function(e) {
-	if (!e.target || !e.target.matches('.square-55d63')) {
+	if (!e.target || !e.target.closest('.square-55d63')) {
 		return;
 	}
 
 	reverse_dragging_from = null;
-	let square = e.target.getAttribute('data-square');
+	let square = e.target.closest('.square-55d63').getAttribute('data-square');
 
 	let pseudogame = new Chess(display_fen);
 	if (pseudogame.game_over() === true) {
@@ -2069,13 +2100,13 @@ let mousedownSquare = function(e) {
 }
 
 let mouseupSquare = function(e) {
-	if (!e.target || !e.target.matches('.square-55d63')) {
+	if (!e.target || !e.target.closest('.square-55d63')) {
 		return;
 	}
 	if (reverse_dragging_from === null) {
 		return;
 	}
-	let source = e.target.getAttribute('data-square');
+	let source = e.target.closest('.square-55d63').getAttribute('data-square');
 	let target = reverse_dragging_from;
 	reverse_dragging_from = null;
 	if (onDrop(source, target) !== 'snapback') {
@@ -2204,7 +2235,7 @@ let onSnapEnd = function(source, target) {
 		}
 		let line = display_lines[i];
 		if (line.pv[line.start_display_move_num] === move.san) {
-			show_line(i, line.start_display_move_num);
+			show_line(i, 0);
 			return;
 		}
 	}