implement blind play in new play UI

app/views/round/jsRoutes.scala.html

@@ -4,5 +4,6 @@ routes.javascript.Lobby.home,
 routes.javascript.Auth.signup,
 routes.javascript.User.show,
 routes.javascript.Tournament.show,
-routes.javascript.Round.watcher
-)(ctx.req)
+routes.javascript.Round.watcher,
+routes.javascript.Round.playerText,
+routes.javascript.Round.watcherText)(ctx.req)

modules/api/src/main/RoundApi.scala

@@ -6,7 +6,7 @@ import lila.game.Pov
 import lila.pref.Pref
 import lila.round.JsonView
 import lila.security.Granter
-import lila.tournament.TournamentRepo
+import lila.tournament.{ Tournament, TournamentRepo }
 import lila.user.User
 
 private[api] final class RoundApi(jsonView: JsonView) {
@@ -15,14 +15,10 @@ private[api] final class RoundApi(jsonView: JsonView) {
     jsonView.playerJson(pov, ctx.pref, apiVersion, ctx.me,
       withBlurs = ctx.me ?? Granter(_.ViewBlurs)) zip
       (pov.game.tournamentId ?? TournamentRepo.byId) map {
-        case (json, tourOption) => tourOption.fold(json) { tour =>
-          json + (
-            "tournament" -> Json.obj(
-              "id" -> tour.id,
-              "name" -> tour.name,
-              "running" -> tour.isRunning
-            )
-          )
+        case (json, tourOption) => blindMode {
+          tourOption.fold(json) { tour =>
+            json + ("tournament" -> tournamentJson(tour))
+          }
         }
       }
 
@@ -30,14 +26,18 @@ private[api] final class RoundApi(jsonView: JsonView) {
     jsonView.watcherJson(pov, ctx.pref, apiVersion, ctx.me, tv,
       withBlurs = ctx.me ?? Granter(_.ViewBlurs)) zip
       (pov.game.tournamentId ?? TournamentRepo.byId) map {
-        case (json, tourOption) => tourOption.fold(json) { tour =>
-          json + (
-            "tournament" -> Json.obj(
-              "id" -> tour.id,
-              "name" -> tour.name,
-              "running" -> tour.isRunning
-            )
-          )
+        case (json, tourOption) => blindMode {
+          tourOption.fold(json) { tour =>
+            json + ("tournament" -> tournamentJson(tour))
+          }
         }
       }
+
+  private def tournamentJson(tour: Tournament) = Json.obj(
+    "id" -> tour.id,
+    "name" -> tour.name,
+    "running" -> tour.isRunning)
+
+  private def blindMode(js: JsObject)(implicit ctx: Context) =
+    ctx.blindMode.fold(js + ("blind" -> JsBoolean(true)), js)
 }

public/stylesheets/board.css

@@ -8,6 +8,9 @@ body.is3d #lichess {
 div.lichess_game div.lichess_board_wrap {
   display: table-cell;
 }
+body.blind_mode .cg-board-wrap {
+  display: none;
+}
 div.lichess_game div.lichess_ground {
   display: table-cell;
   vertical-align: middle;

ui/round/src/blind.js

@@ -0,0 +1,31 @@
+var throttle = require('lodash-node/modern/functions/throttle');
+
+// #FIXME jQuery crap here
+
+var element;
+
+var reload = throttle(function(ctrl) {
+  var route = ctrl.data.player.spectator ? ctrl.router.Round.watcherText(ctrl.data.game.id, ctrl.data.player.color) : ctrl.router.Round.playerText(ctrl.data.game.id + ctrl.data.player.id);
+  $(element).load(route.url, function() {
+    $(this).find('form').submit(function() {
+      var text = $(this).find('.move').val();
+      var move = {
+        from: text.substring(0, 2),
+        to: text.substring(2, 4),
+        promotion: text.substring(4, 5)
+      };
+      ctrl.socket.send("move", move, {
+        ackable: true
+      });
+      return false;
+    }).find('.move').focus();
+  });
+}, 1000);
+
+module.exports = {
+  reload: reload,
+  init: function(el, ctrl) {
+    element = el;
+    reload(ctrl);
+  }
+};

ui/round/src/ctrl.js

@@ -13,6 +13,7 @@ var promotion = require('./promotion');
 var hold = require('./hold');
 var blur = require('./blur');
 var init = require('./init');
+var blind = require('./blind');
 var clockCtrl = require('./clock/ctrl');
 
 module.exports = function(cfg, router, i18n, socketSend) {
@@ -42,12 +43,22 @@ module.exports = function(cfg, router, i18n, socketSend) {
     $.sound.move(this.data.player.color == 'white');
   }.bind(this);
 
+  this.apiMove = function(o) {
+    this.chessground.apiMove(o.from, o.to);
+    if (this.data.game.threefold) this.data.game.threefold = false;
+    round.setOnGame(this.data, o.color, true);
+    m.redraw();
+    $.sound.move(o.color == 'white');
+    if (this.data.blind) blind.reload(this);
+  }.bind(this);
+
   this.chessground = ground.make(this.data, cfg.game.fen, this.userMove);
 
   this.reload = function(cfg) {
     this.data = data(cfg);
     ground.reload(this.chessground, this.data, cfg.game.fen);
     this.setTitle();
+    if (this.data.blind) blind.reload(this);
   }.bind(this);
 
   this.clock = this.data.clock ? new clockCtrl(

ui/round/src/init.js

@@ -15,7 +15,7 @@ module.exports = function(ctrl) {
   if (round.playable(d) && round.nbMoves(d, d.player.color) === 0) $.sound.dong();
 
   if (round.isPlayerPlaying(d)) window.addEventListener('beforeunload', function(e) {
-    if (!lichess.hasToReload && round.playable(ctrl.data) && ctrl.data.clock) {
+    if (!lichess.hasToReload && !ctrl.data.blind && round.playable(ctrl.data) && ctrl.data.clock) {
       ctrl.socket.send('bye');
       var msg = 'There is a game in progress!';
       (e || window.event).returnValue = msg;

ui/round/src/socket.js

@@ -25,11 +25,7 @@ module.exports = function(send, ctrl) {
       ctrl.setTitle();
     },
     move: function(o) {
-      ctrl.chessground.apiMove(o.from, o.to);
-      if (ctrl.data.game.threefold) ctrl.data.game.threefold = false;
-      round.setOnGame(ctrl.data, o.color, true);
-      m.redraw();
-      $.sound.move(o.color == 'white');
+      ctrl.apiMove(o);
     },
     premove: function() {
       ctrl.chessground.playPremove();

ui/round/src/view/main.js

@@ -6,6 +6,7 @@ var renderPromotion = require('../promotion').view;
 var renderUser = require('./user');
 var partial = require('chessground').util.partial;
 var button = require('./button');
+var blind = require('../blind');
 
 function renderMaterial(ctrl, material) {
   var children = [];
@@ -41,6 +42,26 @@ function holdOf(ctrl, player) {
   ]);
 }
 
+function visualBoard(ctrl) {
+  return m('div.lichess_board_wrap', ctrl.data.blindMode ? null : [
+    m('div.lichess_board.' + ctrl.data.game.variant.key, {
+      onclick: ctrl.data.player.spectator ? toggleDontTouch : null
+    }, chessground.view(ctrl.chessground)),
+    renderPromotion(ctrl)
+  ]);
+}
+
+function blindBoard(ctrl) {
+  return m('div.lichess_board_blind', [
+    m('div.textual', {
+      config: function(el, isUpdate) {
+        if (!isUpdate) blind.init(el, ctrl);
+      }
+    }),
+    chessground.view(ctrl.chessground)
+  ]);
+}
+
 var dontTouch = m.prop(false);
 
 function toggleDontTouch() {
@@ -57,13 +78,7 @@ module.exports = function(ctrl) {
           $('body').trigger('lichess.content_loaded');
         }
       }, [
-        ctrl.data.blindMode ? m('div#lichess_board_blind') : null,
-        m('div.lichess_board_wrap', ctrl.data.blindMode ? null : [
-          m('div.lichess_board.' + ctrl.data.game.variant.key, {
-            onclick: ctrl.data.player.spectator ? toggleDontTouch : null
-          }, chessground.view(ctrl.chessground)),
-          renderPromotion(ctrl)
-        ]),
+        ctrl.data.blind ? blindBoard(ctrl) : visualBoard(ctrl),
         m('div.lichess_ground',
           material ? renderMaterial(ctrl, material[ctrl.data.opponent.color]) : null,
           renderTable(ctrl),