Show retained/interpolated scores with 50% alpha.

[remoteglot] / www / js / remoteglot.js

diff --git a/www/js/remoteglot.js b/www/js/remoteglot.js
index b06a45ae2d82ff37b720b53087a7ae244da296bf..1b905a34949de7b67e9b46ffdd19ac710c764fda 100644 (file)
--- a/www/js/remoteglot.js
+++ b/www/js/remoteglot.js
@@ -1393,12 +1393,16 @@ let update_sparkline = function(data) {
                        let max_score = 1;
                        let last_score = null;
                        let scores = [];
+                       let scores_missing = [];
                        for (let halfmove_num = first_move_num; halfmove_num <= last_move_num; ++halfmove_num) {
                                if (data['score_history'][halfmove_num]) {
                                        let score = compute_plot_score(data['score_history'][halfmove_num]);
                                        last_score = score;
                                        if (score < min_score) min_score = score;
                                        if (score > max_score) max_score = score;
+                                       scores_missing.push(false);
+                               } else {
+                                       scores_missing.push(true);
                                }
                                scores.push(last_score);
                        }
@@ -1427,16 +1431,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) { 
@@ -1444,7 +1448,8 @@ let update_sparkline = function(data) {
                                        hlcolor[1] = Math.min(hlcolor[1] * 1.4, 1.0);
                                        hlcolor[2] = Math.min(hlcolor[2] * 1.4, 1.0);
                                }
-                               rect.style.fill = 'rgb(' + color[0]*100.0 + '%, ' + color[1]*100.0 + '%, ' + color[2]*100.0 + '%)';
+                               let alpha = scores_missing[i] ? 50 : 100;
+                               rect.style.fill = 'rgba(' + color[0]*100.0 + '%, ' + color[1]*100.0 + '%, ' + color[2]*100.0 + '%, ' + alpha + '%)';
 
                                // score_history contains the Nth _position_, but format_tooltip
                                // wants to format the Nth _move_; thus the -1.
@@ -2063,12 +2068,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) {
@@ -2093,13 +2098,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') {
@@ -2228,7 +2233,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;
                }
        }