getting close to have the mithril round

app/views/round/jsI18n.scala.html

@@ -52,5 +52,6 @@ trans.whitePlays,
 trans.blackPlays,
 trans.youAreViewingThisGameAsASpectator,
 trans.giveNbSeconds,
-trans.gameOver
+trans.gameOver,
+trans.replayAndAnalyse
 )))

app/views/round/watcher.scala.html

@@ -27,13 +27,6 @@ chat = pov.game.hasChat.option(base.chatDom(trans.spectatorRoom.str())),
 underchat = views.html.game.watchers().some,
 moreJs = moreJs,
 openGraph = povOpenGraph(pov)) {
-@*
-@embedJs("var _ld_ = " + roundWatcherJsData(pov, version, false, ctx.pref))
-<div class="underboard during_game">
-  <a class="button" data-icon="B" href="@routes.Round.watcher(gameId, (!color).name)"> @trans.flipBoard()</a>
-</div>
-@replayButton(pov)
-*@
 <div id="playing_crosstable">
   @cross.map { c =>
   @views.html.game.crosstable(c)

modules/round/src/main/JsonView.scala

@@ -6,7 +6,7 @@ import scala.math.{ min, max, round }
 import play.api.libs.json._
 
 import lila.common.PimpedJson._
-import lila.game.{ Pov, Game, PerfPicker }
+import lila.game.{ Pov, Game, PerfPicker, Source }
 import lila.pref.Pref
 import lila.user.{ User, UserRepo }
 
@@ -54,6 +54,7 @@ final class JsonView(
               "lastMove" -> game.castleLastMoveTime.lastMoveString,
               "threefold" -> game.toChessHistory.threefoldRepetition,
               "check" -> game.check.map(_.key),
+              "source" -> game.source.map(sourceJson),
               "status" -> Json.obj(
                 "id" -> pov.game.status.id,
                 "name" -> pov.game.status.name)),
@@ -136,6 +137,7 @@ final class JsonView(
               "lastMove" -> game.castleLastMoveTime.lastMoveString,
               "check" -> game.check.map(_.key),
               "rematch" -> game.next,
+              "source" -> game.source.map(sourceJson),
               "status" -> Json.obj(
                 "id" -> pov.game.status.id,
                 "name" -> pov.game.status.name)),
@@ -196,8 +198,9 @@ final class JsonView(
     "white" -> clock.remainingTime(Color.White),
     "black" -> clock.remainingTime(Color.Black),
     "emerg" -> clock.emergTime,
-    "moretime" -> moretimeSeconds
-  )
+    "moretime" -> moretimeSeconds)
+
+  private def sourceJson(source: Source) = source.name
 
   private def possibleMoves(pov: Pov) = (pov.game playableBy pov.player) option {
     pov.game.toChess.situation.destinations map {

public/javascripts/big.js

@@ -711,11 +711,17 @@ var storage = {
           events: {
             crowd: function(e) {
               $watchers.watchers("set", e.watchers);
-            }
+            },
+            featured: function(o) {
+              if (cfg.tv) lichess.reload();
+            },
           }
         });
       var round = LichessRound(this.element[0], cfg.data, cfg.routes, cfg.i18n, lichess.socket.send.bind(lichess.socket));
       startTournamentClock();
+      $('#tv_history').on("click", "tr", function() {
+        location.href = $(this).find('a.view').attr('href');
+      });
     },
     _old_init: function() {
       var self = this;

public/stylesheets/board.css

@@ -1029,6 +1029,10 @@ div.table_wrap a.moretime {
   font-size: 20px;
   right: 0;
   top: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 div.table_wrap a.moretime:hover {
   opacity: 1;
@@ -1309,7 +1313,8 @@ div.underboard {
 div.underboard a {
   display: inline-block;
 }
-div.underboard.replay_and_analyse a {
+div.underboard .replay_and_analyse {
+  margin-top: 20px;
   font-size: 1.4em;
 }
 div.check_count span.player.color {

ui/round/src/round.js

@@ -43,12 +43,22 @@ function moretimeable(data) {
   return data.clock && playable(data) && !mandatory(data);
 }
 
+function replayable(data) {
+  return data.source == 'import' || status.finished(data);
+}
+
 function getPlayer(data, color) {
   if (data.player.color == color) return data.player;
   if (data.opponent.color == color) return data.opponent;
   return null;
 }
 
+function setOnGame(data, color, onGame) {
+  var player = getPlayer(data, color);
+  player.onGame = onGame;
+  if (onGame && player.user) player.user.online = true;
+}
+
 function nbMoves(data, color) {
   return data.turns + (color == 'white' ? 1 : 0) / 2;
 }
@@ -63,7 +73,9 @@ module.exports = {
   resignable: resignable,
   moretimeable: moretimeable,
   mandatory: mandatory,
+  replayable: replayable,
   getPlayer: getPlayer,
   parsePossibleMoves: parsePossibleMoves,
-  nbMoves: nbMoves
+  nbMoves: nbMoves,
+  setOnGame: setOnGame
 };

ui/round/src/socket.js

@@ -16,20 +16,19 @@ module.exports = function(send, ctrl) {
       });
     },
     state: function(o) {
-      m.startComputation();
       ctrl.chessground.set({
         turnColor: o.color
       });
       ctrl.data.game.player = o.color;
       ctrl.data.game.turns = o.turns;
-      m.endComputation();
+      m.redraw();
       ctrl.setTitle();
     },
     move: function(o) {
-      m.startComputation();
       ctrl.chessground.apiMove(o.from, o.to);
       if (ctrl.data.game.threefold) ctrl.data.game.threefold = false;
-      m.endComputation();
+      round.setOnGame(ctrl.data, o.color, true);
+      m.redraw();
       $.sound.move(o.color == 'white');
     },
     premove: function() {
@@ -81,7 +80,7 @@ module.exports = function(send, ctrl) {
     },
     crowd: function(o) {
       ['white', 'black'].forEach(function(c) {
-        round.getPlayer(ctrl.data, c).onGame = o[c];
+        round.setOnGame(ctrl.data, c, o[c]);
       });
       m.redraw();
     },
@@ -92,7 +91,7 @@ module.exports = function(send, ctrl) {
     },
     gone: function(isGone) {
       if (!ctrl.data.opponent.ai) {
-        ctrl.data.opponent.onGame = !isGone;
+        round.setOnGame(ctrl.data, ctrl.data.opponent.color, !isGone);
         m.redraw();
       }
     },

ui/round/src/view/button.js

@@ -119,5 +119,16 @@ module.exports = {
       'data-hint': ctrl.trans('giveNbSeconds', ctrl.data.clock.moretime),
       onclick: partial(ctrl.socket.send, 'moretime', null)
     }, m('span[data-icon=O]'));
+  },
+  flip: function(ctrl) {
+    if (ctrl.data.player.spectator) return m('div.underboard',
+      m('a.button[data-icon=B]', {
+        href: ctrl.router.Round.watcher(ctrl.data.game.id, chessground.util.opposite(ctrl.data.player.color)).url
+      }, ctrl.trans('flipBoard')));
+  },
+  replayAndAnalyse: function(ctrl) {
+    if (round.replayable(ctrl.data)) return m('a.button.replay_and_analyse[data-icon=G]', {
+      href: ctrl.router.Round.watcher(ctrl.data.game.id, ctrl.data.player.color).url
+    }, ctrl.trans('replayAndAnalyse'));
   }
 };

ui/round/src/view/main.js

@@ -1,8 +1,8 @@
 var m = require('mithril');
 var chessground = require('chessground');
-var partial = chessground.util.partial;
 var renderTable = require('./table');
 var renderPromotion = require('../promotion').view;
+var button = require('./button');
 
 function renderMaterial(ctrl, material) {
   var children = [];
@@ -53,10 +53,8 @@ module.exports = function(ctrl) {
       dontTouch() ? m('div.dont_touch', {
         onclick: toggleDontTouch
       }, ctrl.trans('youAreViewingThisGameAsASpectator')) : null,
-      ctrl.data.player.spectator ? m('div.underboard',
-        m('a.button[data-icon=B]', {
-          href: ctrl.router.Round.watcher(ctrl.data.game.id, chessground.util.opposite(ctrl.data.player.color)).url
-        }, ctrl.trans('flipBoard'))) : null
+      button.flip(ctrl),
+      button.replayAndAnalyse(ctrl)
     ])
   ];
 };

ui/round/src/view/table.js

@@ -55,7 +55,7 @@ function renderTableEnd(ctrl) {
       button.backToTournament(ctrl) || (
         d.opponent.ai ? button.rematch(ctrl) : [
           m('div.separator'),
-          button.answerOpponentRematch(ctrl) || cancelRematch(ctrl) || button.rematch(ctrl)
+          button.answerOpponentRematch(ctrl) || button.cancelRematch(ctrl) || button.rematch(ctrl)
         ]),
       button.newGame(ctrl)
     ])