improve lag display, also showing server latency

app/views/auth/userDropdown.scala.html

@@ -14,5 +14,9 @@
   <a href="@routes.Report.list()">User reports</a>
   }
   <span class="sep"></span>
-  <div class="ping">PING <strong>?</strong> ms</div>
+  <div class="status">
+    <div class="led"></div>
+    <div class="ping hint--left"  data-hint="PING: Network lag between you and lichess">PING&nbsp;&nbsp;<strong>?</strong>ms</div>
+    <div class="server hint--left" data-hint="SERVER: Time to process a move on lichess server">SERVER<strong>?</strong>ms</div>
+  </div>
 </div>

modules/socket/src/main/Channel.scala

@@ -20,7 +20,7 @@ final class Channel extends Actor {
 
     case SocketLeave(_, member) => members -= member
 
-    case Publish(msg) => members.foreach(_ push msg)
+    case Publish(msg)           => members.foreach(_ push msg)
 
   }
 }

modules/socket/src/main/Handler.scala

@@ -32,9 +32,9 @@ object Handler {
       case ("startWatching", o) => o str "d" foreach { ids =>
         hub.actor.moveBroadcast ! StartWatching(uid, member, ids.split(' ').toSet)
       }
-      case ("moveLat", o) => o boolean "d" foreach { v =>
-        hub.channel.moveLat ! v.fold(Channel.Sub(member), Channel.UnSub(member))
-      }
+      case ("moveLat", o) => hub.channel.moveLat ! (~(o boolean "d")).fold(
+        Channel.Sub(member),
+        Channel.UnSub(member))
       case ("anaMove", o) =>
         AnaMove parse o foreach { anaMove =>
           anaMove.step match {

public/javascripts/big.js

@@ -465,6 +465,15 @@ lichess.desktopNotification = function(msg) {
       },
       mlat: function(e) {
         console.log(e);
+        var $t = $('#top .server strong');
+        if ($t.is(':visible')) {
+          $t.text(e);
+          var l = parseInt(e || 0) + parseInt(lichess.socket.options.lagTag.text()) - 100;
+          var ratio = Math.max(Math.min(l / 1200, 1), 0);
+          var hue = ((1 - ratio) * 120).toString(10);
+          var color = ['hsl(', hue, ',100%,40%)'].join('');
+          $('#top .status .led').css('background', color);
+        } else lichess.socket.send('moveLat', false);
       },
       redirect: function(o) {
         setTimeout(function() {
@@ -1014,14 +1023,14 @@ lichess.desktopNotification = function(msg) {
 
       $('#top').on('click', 'a.toggle', function() {
         var $p = $(this).parent();
-        console.log(this, $p);
         $p.toggleClass('shown');
         $p.siblings('.shown').removeClass('shown');
         setTimeout(function() {
           $('html').one('click', function(e) {
-            $p.removeClass('shown').off('click');
+            $p.removeClass('shown');
           });
         }, 10);
+        if ($p.hasClass('auth')) lichess.socket.send('moveLat', true);
         return false;
       });
 
@@ -1650,7 +1659,6 @@ lichess.desktopNotification = function(msg) {
     $('body').on('socket.open', function() {
       socketOpened = true;
       startWatching();
-      lichess.socket.send("moveLat", true);
     });
 
     setTimeout(function() {

public/stylesheets/common.css

@@ -1213,9 +1213,29 @@ body.fpmenu #fpmenu {
   margin-top: 5px;
   border-top: 1px solid #d4d4d4;
 }
-#top div.auth .ping {
+#top div.auth .status {
+  position: relative;
+  padding-bottom: 5px;
+}
+#top div.auth .status .led {
+  position: absolute;
+  right: 10px;
+  top: 6px;
+  font-size: 20px;
+  opacity: 0.8;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  box-shadow: inset 0 2px 2px 0 rgba(0,0,0,0.4);
+}
+#top div.auth .status .ping,
+#top div.auth .status .server {
   display: block;
-  padding: 5px 10px 10px 10px;
+  font-family: monospace;
+  padding-left: 10px;
+}
+#top div.auth .status strong {
+  padding: 0 5px;
 }
 #challenge_notifications_tag.none {
   display: none!important;