more progress on mithril play

modules/round/src/main/JsonView.scala

@@ -52,6 +52,7 @@ final class JsonView(
               "startedAtTurn" -> game.startedAtTurn,
               "lastMove" -> game.castleLastMoveTime.lastMoveString,
               "threefold" -> game.toChessHistory.threefoldRepetition,
+              "check" -> game.check.map(_.key),
               "status" -> Json.obj(
                 "id" -> pov.game.status.id,
                 "name" -> pov.game.status.name)),

public/stylesheets/board.css

@@ -3,7 +3,6 @@ div.lichess_game {
 }
 div.lichess_board_wrap {
   display: table-cell;
-  border: 1px solid #ccc;
   position: relative;
 }
 span.board_mark {
@@ -516,7 +515,6 @@ div.lichess_overboard p.explanations {
   padding: 1em 0;
 }
 #promotion_choice {
-  display: none;
   position: absolute;
   top: 0;
   left: 0;
@@ -525,8 +523,9 @@ div.lichess_overboard p.explanations {
   background: rgba(250, 250, 250, 0.7);
   text-align: center;
   padding: 224px 0 0 108px;
+  z-index: 5;
 }
-#promotion_choice div.piece {
+#promotion_choice div.cg-piece {
   float: left;
   position: static;
   padding: 5px;
@@ -536,10 +535,13 @@ div.lichess_overboard p.explanations {
   cursor: pointer;
   border-radius: 3px;
   background-color: #b0b0b0;
-  box-shadow: inset 0 0 15px 3px #707070;
+  box-shadow: inset 0 0 25px 3px #808080;
+  transition: all 0.3s;
 }
-#promotion_choice div.piece:hover {
-  box-shadow: 0 0 10px #d85000;
+#promotion_choice div.cg-piece:hover {
+  padding: 15px;
+  margin: -10px 0px;
+  box-shadow: inset 0 0 15px 3px #909090;
 }
 div.lichess_join_url {
   display: none;

ui/round/package.json

@@ -30,7 +30,7 @@
     "watchify": "^1.0.2"
   },
   "dependencies": {
-    "chessground": "^1.4.1",
+    "chessground": "^1.4.2",
     "lodash-node": "^2.4.1",
     "mithril": "^0.1.22"
   }

ui/round/src/ctrl.js

@@ -1,31 +1,39 @@
 var m = require('mithril');
-var partial = require('lodash-node/modern/functions/partial');
 var throttle = require('lodash-node/modern/functions/throttle');
 var chessground = require('chessground');
+var partial = chessground.util.partial;
 var data = require('./data');
 var round = require('./round');
 var status = require('./status');
 var ground = require('./ground');
 var socket = require('./socket');
+var xhr = require('./xhr');
+var promotion = require('./promotion');
 var clockCtrl = require('./clock/ctrl');
 
 module.exports = function(cfg, router, i18n, socketSend) {
 
   this.data = data(cfg);
+  console.log(this.data);
 
   this.socket = new socket(socketSend, this);
 
-  this.userMove = function(orig, dest) {
+  this.sendMove = function(orig, dest, prom) {
     var move = {
       from: orig,
       to: dest,
     };
+    if (prom) move.promotion = prom;
     if (this.clock) move.lag = Math.round(lichess.socket.averageLag);
     this.socket.send('move', move, {
       ackable: true
     });
   }.bind(this);
 
+  this.userMove = function(orig, dest, isPremove) {
+    if (!promotion.start(this, orig, dest, isPremove)) this.sendMove(orig, dest);
+  }.bind(this);
+
   this.chessground = ground.make(this.data, cfg.game.fen, this.userMove);
 
   this.reload = function(cfg) {

ui/round/src/ground.js

@@ -8,6 +8,7 @@ function makeConfig(data, fen) {
     orientation: data.player.color,
     turnColor: data.game.player,
     lastMove: util.str2move(data.game.lastMove),
+    check: data.game.check,
     highlight: {
       lastMove: data.pref.highlight,
       check: data.pref.highlight,
@@ -42,6 +43,18 @@ function reload(ground, data, fen) {
   ground.set(makeConfig(data, fen));
 }
 
+function promote(ground, key, role) {
+  var pieces = {};
+  var piece = ground.data.pieces[key];
+  if (piece && piece.role == 'pawn') {
+    pieces[key] = {
+      color: piece.color,
+      role: role
+    };
+    ground.setPieces(pieces);
+  }
+}
+
 function end(ground) {
   ground.stop();
 }
@@ -49,5 +62,6 @@ function end(ground) {
 module.exports = {
   make: make,
   reload: reload,
+  promote: promote,
   end: end
 };

ui/round/src/promotion.js

@@ -0,0 +1,52 @@
+var m = require('mithril');
+var chessground = require('chessground');
+var partial = chessground.util.partial;
+var ground = require('./ground');
+var xhr = require('./xhr');
+
+var promoting = false;
+
+function start(ctrl, orig, dest, isPremove) {
+  var piece = ctrl.chessground.data.pieces[dest];
+  if (piece && piece.role == 'pawn' &&
+    (dest[1] == 8 && ctrl.data.player.color == 'white') ||
+    (dest[1] == 1 && ctrl.data.player.color == 'black')) {
+    if (ctrl.data.pref.autoQueen == 3 || (ctrl.data.pref.autoQueen == 2 && isPremove)) return false;
+    m.startComputation();
+    promoting = [orig, dest];
+    m.endComputation();
+    return true;
+  }
+  return false;
+}
+
+function finish(ctrl, role) {
+  if (promoting) {
+    ground.promote(ctrl.chessground, promoting[1], role);
+    ctrl.sendMove(promoting[0], promoting[1], role);
+  }
+  promoting = false;
+}
+
+function cancel(ctrl) {
+  if (promoting) xhr.reload(ctrl.data).then(ctrl.reload);
+  promoting = false;
+}
+
+module.exports = {
+
+  start: start,
+
+  view: function(ctrl) {
+    return promoting ? m('div#promotion_choice', {
+      onclick: partial(cancel, ctrl)
+    }, ['queen', 'knight', 'rook', 'bishop'].map(function(role) {
+      return m('div.cg-piece.' + role + '.' + ctrl.data.player.color, {
+        onclick: function(e) {
+          e.stopPropagation();
+          finish(ctrl, role);
+        }
+      });
+    })) : null
+  }
+};

ui/round/src/round.js

@@ -8,7 +8,7 @@ function parsePossibleMoves(possibleMoves) {
 }
 
 function playable(data) {
-  return status.started(data) && !status.finished(data);
+  return data.game.status.id < status.ids.aborted;
 }
 
 function isPlayerPlaying(data) {

ui/round/src/socket.js

@@ -7,8 +7,6 @@ module.exports = function(send, ctrl) {
 
   this.send = send;
 
-  var d = ctrl.data;
-
   var handlers = {
     possibleMoves: function(o) {
       ctrl.chessground.set({
@@ -21,14 +19,15 @@ module.exports = function(send, ctrl) {
       ctrl.chessground.set({
         turnColor: o.color
       });
-      d.game.player = o.color;
-      d.game.turns = o.turns;
+      ctrl.data.game.player = o.color;
+      ctrl.data.game.turns = o.turns;
     },
     move: function(o) {
       ctrl.chessground.apiMove(o.from, o.to);
-      if (d.game.threefold) {
+      if (ctrl.data.game.threefold) {
+        console.log('unset threefold');
         m.startComputation();
-        d.game.threefold = false;
+        ctrl.data.game.threefold = false;
         m.endComputation();
       }
     },
@@ -67,33 +66,37 @@ module.exports = function(send, ctrl) {
       }, 400);
     },
     reload: function(o) {
-      xhr.reload(d).then(ctrl.reload);
+      xhr.reload(ctrl.data).then(ctrl.reload);
     },
     threefoldRepetition: function() {
+      console.log('set threefold');
       m.startComputation();
-      d.game.threefold = true;
+      ctrl.data.game.threefold = true;
       m.endComputation();
     },
+    promotion: function(o) {
+      ground.promote(ctrl.chessground, o.key, o.pieceClass);
+    },
     clock: function(o) {
       if (ctrl.clock) ctrl.clock.update(o.white, o.black);
     },
     crowd: function(o) {
       m.startComputation();
       ['white', 'black'].forEach(function(c) {
-        round.getPlayer(d, c).statused = true;
-        round.getPlayer(d, c).connected = o[c];
+        round.getPlayer(ctrl.data, c).statused = true;
+        round.getPlayer(ctrl.data, c).connected = o[c];
       });
-      d.watchers = o.watchers;
+      ctrl.data.watchers = o.watchers;
       m.endComputation();
     },
     end: function() {
       ground.end(ctrl.chessground);
-      xhr.reload(d).then(ctrl.reload);
+      xhr.reload(ctrl.data).then(ctrl.reload);
     }
   };
 
   this.receive = function(type, data) {
-    console.log(type, data);
+    if (type != 'n') console.log(type, data);
     if (handlers[type]) {
       handlers[type](data);
       return true;

ui/round/src/view/main.js

@@ -1,6 +1,8 @@
 var m = require('mithril');
 var chessground = require('chessground');
+var partial = chessground.util.partial;
 var renderTable = require('./table');
+var renderPromotion = require('../promotion').view;
 
 module.exports = function(ctrl) {
   return m('div', {
@@ -12,8 +14,9 @@ module.exports = function(ctrl) {
   }, [
     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, chessground.view(ctrl.chessground)),
-      m('div#premove_alert', ctrl.trans('premoveEnabledClickAnywhereToCancel'))
+      m('div.lichess_board.cg-board-wrap' + ctrl.data.game.variant.key, chessground.view(ctrl.chessground)),
+      m('div#premove_alert', ctrl.trans('premoveEnabledClickAnywhereToCancel')),
+      renderPromotion(ctrl)
     ]),
     m('div.lichess_ground', renderTable(ctrl))
   ]);