round document title

app/views/round/jsI18n.scala.html

@@ -51,5 +51,6 @@ trans.viewTournament,
 trans.whitePlays,
 trans.blackPlays,
 trans.youAreViewingThisGameAsASpectator,
-trans.giveNbSeconds
+trans.giveNbSeconds,
+trans.gameOver
 )))

public/javascripts/big.js

@@ -218,12 +218,6 @@ var storage = {
     $(window).resize(onResize);
     onResize();
 
-    var bodyHeight = $('body').height();
-    var winHeight = $(window).height();
-    if (bodyHeight < winHeight) {
-      $('#footer_wrap').css('marginTop', winHeight - bodyHeight + 29 + 'px');
-    }
-
     if (!lichess.StrongSocket.available) {
       $('#lichess').on('mouseover', function() {
         $('#lichess').off('mouseover');
@@ -700,6 +694,7 @@ var storage = {
       $('#chat').chat({
         messages: cfg.data.chat
       });
+      var $watchers = $('#site_header div.watchers').watchers();
       lichess.socket = new lichess.StrongSocket(
         cfg.data.url.socket,
         cfg.data.player.version,
@@ -713,6 +708,9 @@ var storage = {
           },
           receive: function(t, d) { round.socketReceive(t, d); },
           events: {
+            crowd: function(e) {
+              $watchers.watchers("set", e.watchers);
+            }
           }
         });
       var round = LichessRound(this.element[0], cfg.data, cfg.routes, cfg.i18n, lichess.socket.send.bind(lichess.socket));

public/stylesheets/chessground.css

@@ -104,6 +104,10 @@ body.coords_2.is3d .cg-square[data-coord-y]::before {
 .cg-square.move-dest:hover {
   background: rgba(20, 85, 30, 0.3);
 }
+.cg-square.premove-dest.drag-over,
+.cg-square.premove-dest:hover {
+  background: rgba(20, 30, 85, 0.3);
+}
 /* .cg-square.move-dest.drag-over .cg-piece::after, */
 /* .cg-square.move-dest:hover .cg-piece::after { */
 /*   background: none; */

public/stylesheets/common.css

@@ -606,6 +606,7 @@ body.tight #site_baseline {
   border-top: 1px solid #c9c9c9;
   background: #e4e4e4;
   padding: 30px 0;
+  margin-top: 60px;
 }
 #footer_wrap div.footer {
   width: 1000px;

ui/round/src/ctrl.js

@@ -8,6 +8,7 @@ var status = require('./status');
 var ground = require('./ground');
 var socket = require('./socket');
 var xhr = require('./xhr');
+var title = require('./title');
 var promotion = require('./promotion');
 var clockCtrl = require('./clock/ctrl');
 
@@ -17,6 +18,8 @@ module.exports = function(cfg, router, i18n, socketSend) {
 
   this.socket = new socket(socketSend, this);
 
+  this.setTitle = partial(title.set, this);
+
   this.sendMove = function(orig, dest, prom) {
     var move = {
       from: orig,
@@ -38,6 +41,7 @@ module.exports = function(cfg, router, i18n, socketSend) {
   this.reload = function(cfg) {
     this.data = data(cfg);
     ground.reload(this.chessground, this.data, cfg.game.fen);
+    this.setTitle();
   }.bind(this);
 
   this.clock = this.data.clock ? new clockCtrl(
@@ -46,7 +50,7 @@ module.exports = function(cfg, router, i18n, socketSend) {
   ) : false;
 
   this.isClockRunning = function() {
-    return this.data.clock && round.playable(this.data) && 
+    return this.data.clock && round.playable(this.data) &&
       ((this.data.game.turns - this.data.game.startedAtTurn) > 1 || this.data.clock.running);
   }.bind(this);
 
@@ -65,4 +69,7 @@ module.exports = function(cfg, router, i18n, socketSend) {
     });
     return str;
   };
+
+  title.init(this);
+  this.setTitle();
 };

ui/round/src/ground.js

@@ -27,7 +27,11 @@ function makeConfig(data, fen) {
     },
     premovable: {
       enabled: data.pref.enablePremove,
-      showDests: data.pref.destination
+      showDests: data.pref.destination,
+      events: {
+        set: m.redraw,
+        unset: m.redraw
+      }
     }
   };
 }

ui/round/src/round.js

@@ -15,6 +15,10 @@ function isPlayerPlaying(data) {
   return playable(data) && !data.player.spectator;
 }
 
+function isPlayerTurn(data) {
+  return isPlayerPlaying(data) && data.game.player == data.player.color;
+}
+
 function mandatory(data) {
   return data.tournamentId || data.poolId;
 }
@@ -51,6 +55,7 @@ function nbMoves(data, color) {
 
 module.exports = {
   isPlayerPlaying: isPlayerPlaying,
+  isPlayerTurn: isPlayerTurn,
   playable: playable,
   abortable: abortable,
   takebackable: takebackable,

ui/round/src/socket.js

@@ -23,13 +23,12 @@ module.exports = function(send, ctrl) {
       ctrl.data.game.player = o.color;
       ctrl.data.game.turns = o.turns;
       m.endComputation();
+      ctrl.setTitle();
     },
     move: function(o) {
       m.startComputation();
       ctrl.chessground.apiMove(o.from, o.to);
-      if (ctrl.data.game.threefold) {
-        ctrl.data.game.threefold = false;
-      }
+      if (ctrl.data.game.threefold) ctrl.data.game.threefold = false;
       m.endComputation();
     },
     premove: function() {

ui/round/src/title.js

@@ -0,0 +1,36 @@
+var round = require('./round');
+var status = require('./status');
+var partial = require('chessground').util.partial;
+
+var initialTitle = document.title;
+var tickDelay = 400;
+
+var tick = function(ctrl) {
+  if (status.started(ctrl.data) && round.isPlayerTurn(ctrl.data)) {
+    document.title = document.title.indexOf('/\\/') === 0 ? '\\/\\ ' + document.title.replace(/\/\\\/ /, '') : '/\\/ ' + document.title.replace(/\\\/\\ /, '');
+  }
+  setTimeout(partial(tick, ctrl), tickDelay);
+};
+
+var init = function(ctrl) {
+  if (!ctrl.data.opponent.ai && !ctrl.data.player.spectator) setTimeout(partial(tick, ctrl), tickDelay);
+};
+
+var set = function(ctrl, text) {
+  if (ctrl.data.player.spectator) return;
+  if (!text) {
+    if (status.finished(ctrl.data)) {
+      text = ctrl.trans('gameOver');
+    } else if (round.isPlayerTurn(ctrl.data)) {
+      text = ctrl.trans('yourTurn');
+    } else {
+      text = ctrl.trans('waitingForOpponent');
+    }
+  }
+  document.title = text + " - " + initialTitle;
+};
+
+module.exports = {
+  init: init,
+  set: set
+};

ui/round/src/view/table.js

@@ -197,7 +197,7 @@ module.exports = function(ctrl) {
   return m('div.table_wrap', [
     (ctrl.clock && !ctrl.data.blindMode) ? renderClock(ctrl.clock, opposite(ctrl.data.player.color), "top", clockRunningColor) : null,
     m('div', {
-      class: 'table onbg' + (status.finished(ctrl.data) ? 'finished' : '')
+      class: 'table onbg' + (status.finished(ctrl.data) ? ' finished' : '')
     }, [
       renderPlayer(ctrl, ctrl.data.opponent),
       m('div.separator'),