diff --git a/app/views/account/pref.scala.html b/app/views/account/pref.scala.html
index 26fda54524..e95af0fd5a 100644
--- a/app/views/account/pref.scala.html
+++ b/app/views/account/pref.scala.html
@@ -21,9 +21,13 @@
@base.radios(form("captured"), Seq(0 -> "No", 1 -> "Yes"))
- Show board highlights
+ Show board highlights (last move and check)
@base.radios(form("highlight"), Seq(0 -> "No", 1 -> "Yes"))
+
+ Show piece destinations (valid moves and premoves)
+ @base.radios(form("destination"), Seq(0 -> "No", 1 -> "Yes"))
+
Show tenths of seconds on the clock
@base.radios(form("clockTenths"), Seq(0 -> "Never", 1 -> "When time remaining < 10 seconds"))
diff --git a/app/views/puzzle/JsData.scala b/app/views/puzzle/JsData.scala
index 6731294745..193c805d0d 100644
--- a/app/views/puzzle/JsData.scala
+++ b/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
),
diff --git a/modules/pref/src/main/DataForm.scala b/modules/pref/src/main/DataForm.scala
index 017cd2ccd4..6bb19730cc 100644
--- a/modules/pref/src/main/DataForm.scala
+++ b/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,
diff --git a/modules/pref/src/main/Pref.scala b/modules/pref/src/main/Pref.scala
index 47d206c810..23467dea21 100644
--- a/modules/pref/src/main/Pref.scala
+++ b/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,
diff --git a/public/stylesheets/chessground.css b/public/stylesheets/chessground.css
index 84a85ce492..d2cf6970eb 100644
--- a/public/stylesheets/chessground.css
+++ b/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 {
diff --git a/ui/editor/package.json b/ui/editor/package.json
index 168c2939e1..5136c62cc4 100644
--- a/ui/editor/package.json
+++ b/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"
}
diff --git a/ui/editor/src/drag.js b/ui/editor/src/drag.js
index b18285f6c3..15f4dc189b 100644
--- a/ui/editor/src/drag.js
+++ b/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);
}
diff --git a/ui/puzzle/package.json b/ui/puzzle/package.json
index 6f74583f6f..36d9d638f6 100644
--- a/ui/puzzle/package.json
+++ b/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"
}
diff --git a/ui/puzzle/src/ctrl.js b/ui/puzzle/src/ctrl.js
index 51a9ddc605..6fed5b1e34 100644
--- a/ui/puzzle/src/ctrl.js
+++ b/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);