X-Git-Url: https://git.sesse.net/?a=blobdiff_plain;f=www%2Fjs%2Fremoteglot.js;h=de1bb1652c3960bde41bcac5ffea08a8476817f3;hb=d6ba2d130757a967d26638702e561feb48f0178e;hp=c2bf8ff482b7f69cb07bc09c4b1accd0659850e9;hpb=7afc6af9d2dbe5af72ad7b8308b74dad245559c0;p=remoteglot

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index c2bf8ff..de1bb16 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;
@@ -2077,12 +2076,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) {
@@ -2107,13 +2106,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') {
@@ -2487,6 +2486,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();