X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=42990ad0001ee6e716bba308ce4c901cdfe3f1cd;hb=3706bfa59b5f5b19c92f9b0cfa7b4497dd43bef7;hp=5d19116ee1927ebc82a989e0aab19a0dc646cf5b;hpb=e283dfb559a8f3504c1499c5ba2f34c717ada683;p=remoteglot

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index 5d19116..42990ad 100644
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -504,12 +504,11 @@ function position_arrow(arrow) {
 		return;
 	}
 
-	let board_width = parseInt(document.querySelector(".board-b72b1").style.width, 10);
-	let zoom_factor = board_width / 400.0;
-	let line_width = arrow.line_width * zoom_factor;
-	let arrow_size = arrow.arrow_size * zoom_factor;
+	// We always draw as if the board is 400x400, the viewBox will adjust that for us
+	let line_width = arrow.line_width;
+	let arrow_size = arrow.arrow_size;
 
-	let square_width = board_width / 8;
+	let square_width = 400 / 8;
 	let from_y, to_y, from_x, to_x;
 	if (board.orientation() === 'black') {
 		from_y = (arrow.from_row + 0.5)*square_width;
@@ -526,10 +525,9 @@ function position_arrow(arrow) {
 	let SVG_NS = "http://www.w3.org/2000/svg";
 	let XHTML_NS = "http://www.w3.org/1999/xhtml";
 	let svg = document.createElementNS(SVG_NS, "svg");
-	svg.setAttribute("width", board_width);
-	svg.setAttribute("height", board_width);
-	svg.setAttribute("style", "position: absolute");
-	svg.setAttribute("position", "absolute");
+	svg.setAttribute("width", "100%");
+	svg.setAttribute("height", "100%");
+	svg.setAttribute("viewBox", "0 0 400 400");
 	svg.setAttribute("version", "1.1");
 	svg.setAttribute("class", "c1");
 	svg.setAttribute("xmlns", XHTML_NS);
@@ -570,8 +568,9 @@ function position_arrow(arrow) {
 	head.setAttribute("fill", arrow.fg_color);
 	svg.appendChild(head);
 
-	svg.style.top = '2px';  /* Border for .board-b72b1. */
-	svg.style.left = '2px';
+	svg.style.position = 'absolute';
+	svg.style.top = '0px';  /* Border for .board-b72b1. */
+	svg.style.left = '0px';
 	svg.style.pointerEvents = 'none';
 	document.getElementById('board').appendChild(svg);
 	arrow.svg = svg;
@@ -733,16 +732,16 @@ function print_pv(line_num, splicepos, opt_limit, opt_showlast) {
 	}
 
 	let ret = document.createDocumentFragment();
-	let i = 0;
 	let in_tb = false;
-	let link = document.createElement('a');
-	link.className = 'move';
+	let i = 0;
 	if (opt_limit && opt_showlast && pv.length > opt_limit) {
 		// Truncate the PV at the beginning (instead of at the end).
 		// We assume here that toplay is 'W'. We also assume that if
 		// opt_showlast is set, then it is the history, and thus,
 		// the UI should be to expand the history.
 		ret.appendChild(document.createTextNode('('));
+		let link = document.createElement('a');
+		link.className = 'move';
 		link.href = 'javascript:collapse_history(false)';
 		link.textContent = '…';
 		ret.appendChild(link);
@@ -754,48 +753,39 @@ function print_pv(line_num, splicepos, opt_limit, opt_showlast) {
 		move_num += i / 2;
 	} else if (toplay == 'B' && pv.length > 0) {
 		ret.appendChild(document.createTextNode(move_num + '. … '));
-		let move = "";
-		if (splicepos === 0) {
-			ret.appendChild(document.createTextNode('(TB: '));
-			in_tb = true;
-		}
-		link.setAttribute('id', 'automove' + line_num + '-0');
-		link.href = 'javascript:show_line(' + line_num + ', ' + 0 + ');';
-		link.textContent = pv[0];
-		ret.appendChild(link);
-		toplay = 'W';
-		++i;
-		++move_num;
 	}
-	for ( ; i < pv.length; ++i) {
-		link = document.createElement('a');
-		link.className = 'move';
-		link.setAttribute('id', 'automove' + line_num + '-' + i);
-		link.textContent = pv[i];
-		link.href = 'javascript:show_line(' + line_num + ', ' + i + ');';
+	for (; i < pv.length; ++i) {
+		let prefix = '';
 		if (splicepos === i) {
-			ret.appendChild(document.createTextNode('(TB: '));
+			prefix = '(TB: ';
 			in_tb = true;
 		}
 
-		if (toplay == 'W') {
+		if (toplay == 'B' && i == 0) {
+			++move_num;
+			toplay = 'W';
+		} else if (toplay == 'W') {
 			if (i > opt_limit && !opt_showlast) {
 				if (in_tb) {
-					ret.appendChild(document.createTextNode(')'));
+					prefix += ')';
 				}
-				ret.appendChild(document.createTextNode(' (…)'));
+				ret.appendChild(document.createTextNode(prefix + ' (…)'));
 				return ret;
 			}
-			if (ret != '') {
-				ret.appendChild(document.createTextNode(' '));
-			}
-			ret.appendChild(document.createTextNode(move_num + '. '));
+			prefix += ' ' + move_num + '. ';
 			++move_num;
 			toplay = 'B';
 		} else {
-			ret.appendChild(document.createTextNode(' '));
+			prefix += ' ';
 			toplay = 'W';
 		}
+		ret.appendChild(document.createTextNode(prefix));
+
+		let link = document.createElement('a');
+		link.className = 'move';
+		link.setAttribute('id', 'automove' + line_num + '-' + i);
+		link.textContent = pv[i];
+		link.href = 'javascript:show_line(' + line_num + ', ' + i + ');';
 		ret.appendChild(link);
 	}
 	if (in_tb) {
@@ -2089,12 +2079,12 @@ function onDragStart(source, piece, position, orientation) {
 }
 
 function mousedownSquare(e) {
-	if (!e.target || !e.target.closest('.square-55d63')) {
+	if (!e.target || !e.target.getAttribute('data-square')) {
 		return;
 	}
 
 	reverse_dragging_from = null;
-	let square = e.target.closest('.square-55d63').getAttribute('data-square');
+	let square = e.target.getAttribute('data-square');
 
 	let pseudogame = new Chess(display_fen);
 	if (pseudogame.game_over() === true) {
@@ -2119,13 +2109,13 @@ function mousedownSquare(e) {
 }
 
 function mouseupSquare(e) {
-	if (!e.target || !e.target.closest('.square-55d63')) {
+	if (!e.target || !e.target.getAttribute('data-square')) {
 		return;
 	}
 	if (reverse_dragging_from === null) {
 		return;
 	}
-	let source = e.target.closest('.square-55d63').getAttribute('data-square');
+	let source = e.target.getAttribute('data-square');
 	let target = reverse_dragging_from;
 	reverse_dragging_from = null;
 	if (onDrop(source, target) !== 'snapback') {
@@ -2499,6 +2489,7 @@ function init() {
 		update_board_highlight();
 		redraw_arrows();
 	});
+	new ResizeObserver(() => update_sparkline(displayed_analysis_data || current_analysis_data)).observe(document.getElementById('scoresparkcontainer'));
 	window.addEventListener('keyup', function(event) {
 		if (event.which == 39) {  // Left arrow.
 			next_move();