show source game in puzzle UI

app/controllers/Puzzle.scala

@@ -38,8 +38,10 @@ 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)
+      renderJson(puzzle = puzzle, userInfos = infos, mode = mode, voted = none) flatMap { json =>
+        (!ctx.isMobileApi).??(GameRepo game puzzle.gameId) map { game =>
+          views.html.puzzle.show(puzzle, json, game)
+        }
       }
     }
 

app/views/game/side.scala.html

@@ -1,4 +1,4 @@
-@(pov: Pov, initialFen: Option[String], tour: Option[lila.tournament.MiniStanding], simul: Option[lila.simul.Simul], userTv: Option[User] = None, bookmarked: Boolean)(implicit ctx: Context)
+@(pov: Pov, initialFen: Option[String], tour: Option[lila.tournament.MiniStanding], simul: Option[lila.simul.Simul], userTv: Option[User] = None, bookmarked: Boolean, suspense: Boolean = false)(implicit ctx: Context)
 
 @import pov._
 
@@ -7,7 +7,7 @@
     <div class="game_infos" data-icon="@gameIcon(game)">
       <div class="header">
         <span class="setup">
-          @bookmark.toggle(game, bookmarked)
+          @if(!suspense) {@bookmark.toggle(game, bookmarked)}
           @if(game.imported) {
           <a class="hint--top" href="@routes.Importer.importGame" data-hint="@trans.importGame()">IMPORT</a>
           •
@@ -49,11 +49,11 @@
     <div class="players">
       @List(game.whitePlayer, game.blackPlayer).map { p =>
       <div class="player color-icon is @{p.color.name}">
-        @playerLink(p, withOnline = false, withDiff = true, withBerserk = true, variant = pov.game.variant)
+        @playerLink(p, withOnline = false, withDiff = !suspense, withBerserk = true, variant = pov.game.variant)
       </div>
       }
     </div>
-    @if(game.finishedOrAborted) {
+    @if(game.finishedOrAborted && !suspense) {
     <div class="status">
       @gameEndStatus(game)
       @game.winner.map { winner =>

app/views/puzzle/layout.scala.html

@@ -1,23 +0,0 @@
-@(title: String, evenMoreCss: Option[Html] = None, evenMoreJs: Option[Html] = None, openGraph: Option[lila.app.ui.OpenGraph] = None)(body: Html)(implicit ctx: Context)
-
-@moreCss = {
-@cssTag("analyse.css")
-@cssTag("puzzle.css")
-@evenMoreCss
-}
-
-@moreJs = {
-@jsTag("vendor/sparkline.min.js")
-@jsAt(s"compiled/lichess.puzzle${isProd??(".min")}.js")
-@evenMoreJs
-}
-
-@base.layout(
-title = title,
-moreCss = moreCss,
-moreJs = moreJs,
-chessground = false,
-withLangAnnotations = false,
-openGraph = openGraph) {
-@body
-}

app/views/puzzle/show.scala.html

@@ -1,6 +1,13 @@
-@(puzzle: lila.puzzle.Puzzle, data: play.api.libs.json.JsObject)(implicit ctx: Context)
+@(puzzle: lila.puzzle.Puzzle, data: play.api.libs.json.JsObject, gameOption: Option[Game])(implicit ctx: Context)
 
-@evenMoreJs = {
+@moreCss = {
+@cssTag("analyse.css")
+@cssTag("puzzle.css")
+}
+
+@moreJs = {
+@jsTag("vendor/sparkline.min.js")
+@jsAt(s"compiled/lichess.puzzle${isProd??(".min")}.js")
 @embedJs {
 lichess = lichess || {};
 lichess.puzzle = {
@@ -10,9 +17,25 @@ i18n: @jsI18n()
 }
 }
 
-@layout(
-trans.training.str(),
-evenMoreJs = Some(evenMoreJs),
+@side = {
+@gameOption.map { g =>
+@game.side(Pov(g, puzzle.color),
+initialFen = none,
+tour = none,
+simul = none,
+bookmarked = false,
+suspense = true)
+<div class="side_box puzzle_box"></div>
+}
+}
+
+@base.layout(
+title = trans.training.str(),
+side = side.some,
+moreCss = moreCss,
+moreJs = moreJs,
+chessground = false,
+withLangAnnotations = false,
 openGraph = lila.app.ui.OpenGraph(
 image = cdnUrl(routes.Export.puzzlePng(puzzle.id).url).some,
 title = s"Chess tactic training ${puzzle.id} • ${puzzle.color.name.capitalize} to play",

public/javascripts/main.js

@@ -1593,7 +1593,7 @@ lichess.notifyApp = (function() {
   function startPuzzle(cfg) {
     var puzzle;
     cfg.element = document.querySelector('#puzzle');
-    cfg.sideElement = document.querySelector('#site_header .side_box');
+    cfg.sideElement = document.querySelector('#site_header .puzzle_box');
     lichess.socket = lichess.StrongSocket('/socket', 0, {
       options: {
         name: "puzzle"

ui/puzzle/src/main.js

@@ -1,5 +1,6 @@
 var ctrl = require('./ctrl');
-var view = require('./view');
+var view = require('./view/main');
+var sideView = require('./view/side');
 var m = require('mithril');
 
 module.exports = function(opts) {
@@ -13,13 +14,13 @@ module.exports = function(opts) {
     view: view
   });
 
-  // if (opts.sideElement) m.module(opts.sideElement, {
-  //   controller: function() {
-  //     m.redraw.strategy("diff"); // prevents double full redraw on page load
-  //     return controller.side;
-  //   },
-  //   view: sideView
-  // });
+  m.module(opts.sideElement, {
+    controller: function() {
+      m.redraw.strategy("diff"); // prevents double full redraw on page load
+      return controller;
+    },
+    view: sideView
+  });
 
   return {
     socketReceive: controller.socketReceive

ui/puzzle/src/view/main.js

@@ -1,10 +1,10 @@
 var m = require('mithril');
 var chessground = require('chessground');
 var bindOnce = require('common').bindOnce;
-var treeView = require('./treeView');
-var control = require('./control');
-var feedbackView = require('./feedbackView');
-var historyView = require('./historyView');
+var treeView = require('./tree');
+var control = require('../control');
+var feedbackView = require('./feedback');
+var historyView = require('./history');
 
 function renderOpeningBox(ctrl) {
   var opening = ctrl.tree.getOpening(ctrl.vm.nodeList);

ui/puzzle/src/view/side.js

@@ -0,0 +1,8 @@
+var m = require('mithril');
+
+var historySize = 15;
+
+module.exports = function(ctrl) {
+
+  return 'side :)';
+};