rewrite puzzle config

app/controllers/Puzzle.scala

@@ -29,8 +29,6 @@ object Puzzle extends LilaController {
     puzzle = puzzle,
     userInfos = userInfos,
     mode = mode,
-    animationDuration = env.AnimationDuration,
-    pref = ctx.pref,
     isMobileApi = ctx.isMobileApi,
     result = result,
     voted = voted)
@@ -38,7 +36,7 @@ object Puzzle extends LilaController {
   private def renderShow(puzzle: PuzzleModel, mode: String)(implicit ctx: Context) =
     env userInfos ctx.me flatMap { infos =>
       renderJson(puzzle = puzzle, userInfos = infos, mode = mode, voted = none) map { json =>
-        views.html.puzzle.show(puzzle, json)
+        views.html.puzzle.show(puzzle, data = json, pref = env.jsonView.pref(ctx.pref))
       }
     }
 

app/views/puzzle/show.scala.html

@@ -1,4 +1,4 @@
-@(puzzle: lila.puzzle.Puzzle, data: play.api.libs.json.JsObject)(implicit ctx: Context)
+@(puzzle: lila.puzzle.Puzzle, data: play.api.libs.json.JsObject, pref: play.api.libs.json.JsObject)(implicit ctx: Context)
 
 @moreCss = {
 @cssTag("analyse.css")
@@ -12,6 +12,7 @@
 lichess = lichess || {};
 lichess.puzzle = {
 data: @Html(toJson(data)),
+pref: @Html(toJson(pref)),
 i18n: @jsI18n()
 };
 }

modules/puzzle/src/main/Env.scala

@@ -8,7 +8,7 @@ import lila.common.PimpedConfig._
 final class Env(
     config: Config,
     renderer: ActorSelection,
-  lightUser: lila.common.LightUser.Getter,
+    lightUser: lila.common.LightUser.Getter,
     system: ActorSystem,
     lifecycle: play.api.inject.ApplicationLifecycle) {
 
@@ -19,16 +19,17 @@ final class Env(
     val CollectionVote = config getString "collection.vote"
     val CollectionHead = config getString "collection.head"
     val ApiToken = config getString "api.token"
+    val AnimationDuration = config duration "animation.duration"
   }
   import settings._
 
-  val AnimationDuration = config duration "animation.duration"
-
   private val db = new lila.db.Env("puzzle", config getConfig "mongodb", lifecycle)
 
   private lazy val gameJson = new GameJson(lightUser)
 
-  lazy val jsonView = new JsonView(gameJson)
+  lazy val jsonView = new JsonView(
+    gameJson,
+    animationDuration = AnimationDuration)
 
   lazy val api = new PuzzleApi(
     puzzleColl = puzzleColl,

modules/puzzle/src/main/JsonView.scala

@@ -6,14 +6,14 @@ import lila.common.PimpedJson._
 import lila.puzzle._
 import lila.tree
 
-final class JsonView(gameJson: GameJson) {
+final class JsonView(
+    gameJson: GameJson,
+    animationDuration: scala.concurrent.duration.Duration) {
 
   def apply(
     puzzle: Puzzle,
     userInfos: Option[UserInfos],
     mode: String,
-    animationDuration: scala.concurrent.duration.Duration,
-    pref: lila.pref.Pref,
     isMobileApi: Boolean,
     round: Option[Round] = None,
     result: Option[Result] = None,
@@ -35,28 +35,6 @@ final class JsonView(gameJson: GameJson) {
           "enabled" -> puzzle.enabled,
           "vote" -> puzzle.vote.sum
         ),
-        "pref" -> Json.obj(
-          "coords" -> pref.coords,
-          "rookCastle" -> pref.rookCastle
-        ),
-        "chessground" -> (!isMobileApi).option(Json.obj(
-          "highlight" -> Json.obj(
-            "lastMove" -> pref.highlight,
-            "check" -> pref.highlight
-          ),
-          "movable" -> Json.obj(
-            "showDests" -> pref.destination
-          ),
-          "draggable" -> Json.obj(
-            "showGhost" -> pref.highlight
-          ),
-          "premovable" -> Json.obj(
-            "showDests" -> pref.destination
-          )
-        )),
-        "animation" -> Json.obj(
-          "duration" -> pref.animationFactor * animationDuration.toMillis
-        ),
         "mode" -> mode,
         "round" -> round.map(JsonView.round),
         "attempt" -> round.ifTrue(isMobileApi).map { r =>
@@ -79,6 +57,14 @@ final class JsonView(gameJson: GameJson) {
         }).noNull
     }
 
+  def pref(p: lila.pref.Pref) = Json.obj(
+    "coords" -> p.coords,
+    "rookCastle" -> p.rookCastle,
+    "animation" -> Json.obj(
+      "duration" -> p.animationFactor * animationDuration.toMillis
+    ),
+    "highlight" -> p.highlight)
+
   private def makeBranch(puzzle: Puzzle): Option[tree.Branch] = {
     import chess.format._
     val solution: List[Uci.Move] = (Line solution puzzle.lines).map { uci =>

public/stylesheets/puzzle.css

@@ -6,7 +6,7 @@
   border: 1px solid #ccc;
   border-top: 0;
   background: #fff;
-  height: 32%;
+  height: 30%;
   display: flex;
   flex-flow: column;
   justify-content: center;

ui/puzzle/src/ctrl.js

@@ -107,7 +107,7 @@ module.exports = function(opts, i18n) {
       config.premovable.enabled = true;
     }
     vm.cgConfig = config;
-    if (!ground) ground = groundBuild(data, config, userMove);
+    if (!ground) ground = groundBuild(data, config, opts.pref, userMove);
     ground.set(config);
     if (!dests) getDests();
   };

ui/puzzle/src/ground.js

@@ -1,17 +1,17 @@
 var chessground = require('chessground');
 
-function makeConfig(data, config, onMove) {
-  return {
+module.exports = function(data, config, pref, onMove) {
+  return new chessground.controller({
     fen: config.fen,
     check: config.check,
     lastMove: config.lastMove,
     orientation: data.puzzle.color,
-    coordinates: data.pref.coords !== 0,
+    coordinates: pref.coords !== 0,
     movable: {
       free: false,
       color: config.movable.color,
       dests: config.movable.dests,
-      rookCastle: data.pref.rookCastle
+      rookCastle: pref.rookCastle
     },
     events: {
       move: onMove
@@ -23,18 +23,14 @@ function makeConfig(data, config, onMove) {
       enabled: true
     },
     highlight: {
-      lastMove: true,
-      check: true,
+      lastMove: pref.highlight,
+      check: pref.highlight,
       dragOver: true
     },
     animation: {
       enabled: true,
-      duration: data.animation.duration
+      duration: pref.animation.duration
     },
     disableContextMenu: true
-  };
-}
-
-module.exports = function(data, config, onMove) {
-  return new chessground.controller(makeConfig(data, config, onMove));
+  });
 };

ui/puzzle/src/view/after.js

@@ -2,6 +2,7 @@ var m = require('mithril');
 
 function renderVote(ctrl) {
   var data = ctrl.getData();
+  if (!data.puzzle.enabled) return;
   return m('div.vote', [
     m('a[data-icon=S]', {
       title: ctrl.trans.noarg('thisPuzzleIsCorrect'),