more chessground integration

app/views/account/pref.scala.html

@@ -21,9 +21,13 @@
             @base.radios(form("captured"), Seq(0 -> "No", 1 -> "Yes"))
           </li>
           <li>
-            <h2>Show board highlights</h2>
+            <h2>Show board highlights (last move and check)</h2>
             @base.radios(form("highlight"), Seq(0 -> "No", 1 -> "Yes"))
           </li>
+          <li>
+            <h2>Show piece destinations (valid moves and premoves)</h2>
+            @base.radios(form("destination"), Seq(0 -> "No", 1 -> "Yes"))
+          </li>
           <li>
             <h2>Show tenths of seconds on the clock</h2>
             @base.radios(form("clockTenths"), Seq(0 -> "Never", 1 -> "When time remaining < 10 seconds"))

app/views/puzzle/JsData.scala

@@ -33,6 +33,18 @@ object JsData extends lila.Steroids {
         "vote" -> puzzle.vote.sum,
         "url" -> s"$netBaseUrl${routes.Puzzle.show(puzzle.id)}"
       ),
+      "chessground" -> Json.obj(
+        "highlight" -> Json.obj(
+          "lastMove" -> ctx.pref.highlight,
+          "check" -> ctx.pref.highlight
+        ),
+        "movable" -> Json.obj(
+          "showDests" -> ctx.pref.destination
+        ),
+        "premovable" -> Json.obj(
+          "showDests" -> ctx.pref.destination
+        )
+      ),
       "animation" -> Json.obj(
         "duration" -> ctx.pref.animationFactor * animationDuration.toMillis
       ),

modules/pref/src/main/DataForm.scala

@@ -15,6 +15,7 @@ private[pref] final class DataForm(api: PrefApi) {
     "clockBar" -> number.verifying(Set(0, 1) contains _),
     "follow" -> number.verifying(Set(0, 1) contains _),
     "highlight" -> number.verifying(Set(0, 1) contains _),
+    "destination" -> number.verifying(Set(0, 1) contains _),
     "challenge" -> number.verifying(Pref.Challenge.choices.toMap contains _),
     "premove" -> number.verifying(Set(0, 1) contains _),
     "animation" -> number.verifying(Set(0, 1, 2, 3) contains _),
@@ -29,6 +30,7 @@ private[pref] final class DataForm(api: PrefApi) {
       clockBar: Int,
       follow: Int,
       highlight: Int,
+      destination: Int,
       challenge: Int,
       premove: Int,
       animation: Int,
@@ -42,6 +44,7 @@ private[pref] final class DataForm(api: PrefApi) {
       clockBar = clockBar == 1,
       follow = follow == 1,
       highlight = highlight == 1,
+      destination = destination == 1,
       challenge = challenge,
       premove = premove == 1,
       animation = animation,
@@ -58,6 +61,7 @@ private[pref] final class DataForm(api: PrefApi) {
       clockBar = pref.clockBar.fold(1, 0),
       follow = pref.follow.fold(1, 0),
       highlight = pref.highlight.fold(1, 0),
+      destination = pref.destination.fold(1, 0),
       challenge = pref.challenge,
       premove = pref.premove.fold(1, 0),
       animation = pref.animation,

modules/pref/src/main/Pref.scala

@@ -21,6 +21,7 @@ case class Pref(
     captured: Boolean,
     follow: Boolean,
     highlight: Boolean,
+    destination: Boolean,
     challenge: Int,
     coordColor: Int,
     puzzleDifficulty: Int,
@@ -169,6 +170,7 @@ object Pref {
     captured = true,
     follow = true,
     highlight = true,
+    destination = true,
     challenge = Challenge.RATING,
     coordColor = Color.RANDOM,
     puzzleDifficulty = Difficulty.NORMAL,
@@ -197,6 +199,7 @@ object Pref {
     "captured" -> default.captured,
     "follow" -> default.follow,
     "highlight" -> default.highlight,
+    "destination" -> default.destination,
     "challenge" -> default.challenge,
     "coordColor" -> default.coordColor,
     "puzzleDifficulty" -> default.puzzleDifficulty,

public/stylesheets/chessground.css

@@ -35,11 +35,11 @@
   right: 1px;
   top: 1px;
 }
-body.highlight .cg-square.move-dest {
+.cg-square.move-dest {
   background: radial-gradient(rgba(20, 85, 30, 0.3) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
   cursor: pointer;
 }
-body.highlight .cg-square.occupied.move-dest {
+.cg-square.occupied.move-dest {
   background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 85, 0, 0.3) 80%);
 }
 /* .cg-square.occupied.move-dest .cg-piece::after { */
@@ -49,16 +49,15 @@ body.highlight .cg-square.occupied.move-dest {
 /*   height: 100%; */
 /*   background: radial-gradient(rgba(20, 85, 30, 0.5) 22%, #208530 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0); */
 /* } */
-body.highlight .cg-square.premove-dest {
+.cg-square.premove-dest {
   background: radial-gradient(rgba(20, 30, 85, 0.3) 22%, #203085 0, rgba(0, 0, 0, 0.3) 0, rgba(0, 0, 0, 0) 0);
 }
-body.highlight .cg-square.occupied.premove-dest {
+.cg-square.occupied.premove-dest {
   background: radial-gradient(transparent 0%, transparent 80%, rgba(20, 30, 85, 0.3) 80%);
 }
 .cg-square.move-dest.drag-over,
 .cg-square.move-dest:hover {
   background: rgba(20, 85, 30, 0.3);
-  border: none;
 }
 /* .cg-square.move-dest.drag-over .cg-piece::after, */
 /* .cg-square.move-dest:hover .cg-piece::after { */
@@ -67,10 +66,10 @@ body.highlight .cg-square.occupied.premove-dest {
 .cg-square.selected {
   background-color: rgba(20, 85, 30, 0.5);
 }
-body.highlight .cg-square.last-move {
+.cg-square.last-move {
   background-color: rgba(155, 199, 0, 0.41);
 }
-body.highlight .cg-square.check {
+.cg-square.check {
   background: radial-gradient(ellipse at center, rgba(255, 0, 0, 1) 0%, rgba(231, 0, 0, 1) 25%, rgba(169, 0, 0, 0) 89%, rgba(158, 0, 0, 0) 100%);
 }
 .cg-square.current-premove {

ui/editor/package.json

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

ui/editor/src/drag.js

@@ -1,6 +1,7 @@
 var range = require('lodash-node/modern/arrays/range');
 var find = require('lodash-node/modern/collections/find');
 var util = require('chessground').util;
+var drag = require('chessground').drag;
 
 module.exports = function(ctrl, e) {
   if (e.button !== 0) return; // only left click
@@ -29,10 +30,11 @@ module.exports = function(ctrl, e) {
   ctrl.chessground.data.draggable.current = {
     orig: key,
     rel: rel,
+    epos: [e.clientX, e.clientY],
     pos: [e.clientX - rel[0], e.clientY - rel[1]],
     dec: [-pieceBounds.width / 2, -pieceBounds.height / 2],
     bounds: bounds,
     started: true
   };
-  m.redraw();
+  drag.processDrag(ctrl.chessground.data);
 }

ui/puzzle/package.json

@@ -31,7 +31,7 @@
   },
   "dependencies": {
     "chess.js": "^0.1.0",
-    "chessground": "^1.1.2",
+    "chessground": "^1.3.0",
     "lodash-node": "^2.4.1",
     "mithril": "^0.1.22"
   }

ui/puzzle/src/ctrl.js

@@ -1,5 +1,6 @@
 var m = require('mithril');
 var partial = require('lodash-node/modern/functions/partial');
+var merge = require('lodash-node/modern/objects/merge');
 var last = require('lodash-node/modern/arrays/last');
 var chessground = require('chessground');
 var data = require('./data');
@@ -62,7 +63,7 @@ module.exports = function(cfg, router, i18n) {
     });
   }.bind(this);
 
-  this.chessground = new chessground.controller({
+  this.chessground = new chessground.controller(merge({
     fen: cfg.puzzle.fen,
     orientation: this.data.puzzle.color,
     turnColor: this.data.puzzle.opponentColor,
@@ -80,7 +81,7 @@ module.exports = function(cfg, router, i18n) {
     premovable: {
       enabled: true
     }
-  });
+  }, this.data.chessground));
 
   this.initiate = function() {
     if (this.data.mode != 'view')
@@ -89,7 +90,7 @@ module.exports = function(cfg, router, i18n) {
 
   this.reload = function(cfg) {
     this.data = data(cfg);
-    this.chessground.reset();
+    chessground.board.reset(this.chessground.data);
     chessground.anim(puzzle.reload, this.chessground.data)(this.data, cfg);
     this.initiate();
   }.bind(this);