adding tooltips for player connection status - closes #635

public/stylesheets/board.css

@@ -1166,16 +1166,10 @@ div.table div.username span.status {
   display: inline-block;
   margin-left: 5px;
 }
-div.table div.username span.status:before {
-  font-family: 'lichess';
-  font-size: 17px;
-  vertical-align: -4px;
-  content: '0';
+div.table div.username span.status span {
   color: #ac524f;
-  opacity: 1;
 }
-div.table div.username.on-game span.status:before {
-  content: '3';
+div.table div.username.on-game span.status span {
   color: #759900;
 }
 div.table div.username a:hover {

ui/game/src/view/user.js

@@ -11,6 +11,11 @@ function ratingDiff(player) {
 module.exports = function(ctrl, player, klass) {
   var perf = player.user ? player.user.perfs[ctrl.data.game.perf] : null;
   var rating = player.rating ? player.rating : (perf ? perf.rating : null);
+  var playerOnGameIcon = m('span.status.hint--top', {
+	  'data-hint': 'Player' + (player.onGame ? ' is connected' : ' has disconnected')
+	}, m('span', {
+	  'data-icon': (player.onGame ? '3' : '0')
+	}))
   return player.user ? [
     m('a', {
       class: 'text ulpt user_link ' + (player.user.online ? 'online is-green' : 'offline') + (klass ? ' ' + klass : ''),
@@ -26,9 +31,9 @@ module.exports = function(ctrl, player, klass) {
         title: ctrl.trans('thisPlayerUsesChessComputerAssistance')
       }) : null
     ]),
-    m('span.status')
+    playerOnGameIcon
   ] : m('span.user_link', [
     player.name || 'Anonymous',
-    ctrl.data.game.source == 'relay' ? null : m('span.status')
+    ctrl.data.game.source == 'relay' ? null : playerOnGameIcon
   ]);
 }

ui/round/src/view/table.js

@@ -27,7 +27,11 @@ function compact(x) {
 function renderPlayer(ctrl, player) {
   return player.ai ? m('div.username.on-game', [
     ctrl.trans('aiNameLevelAiLevel', 'Stockfish', player.ai),
-    m('span.status')
+    m('span.status.hint--top', {
+	  'data-hint': 'Player is connected'
+	}, m('span', {
+	  'data-icon': '3'
+	}))
   ]) : m('div', {
       class: 'username ' + player.color + (player.onGame ? ' on-game' : '')
     },