Implement replay and analysis mode

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "public/vendor/pgn4web"]
+ path = public/vendor/pgn4web
+ url = git:https://github.com/ornicar/pgn4web.git

app/controllers/Analyse.scala

@@ -8,8 +8,13 @@ import play.api.mvc._
 object Analyse extends LilaController {
 
  val gameRepo = env.game.gameRepo
+ val gameInfo = env.analyse.gameInfo
 
- def replay(id: String, color: String) = TODO
+ def replay(id: String, color: String) = Open { implicit ctx ⇒
+ IOptionIOk(gameRepo.pov(id, color)) { pov ⇒
+ gameInfo(pov.game) map { html.analyse.replay(pov, _) }
+ }
+ }
 
  def stats(id: String) = TODO
 }

app/controllers/LilaController.scala

@@ -91,6 +91,16 @@ trait LilaController
  ctx: Context) =
  ioa.unsafePerformIO.fold(a ⇒ Ok(op(a)), notFound(ctx))
 
+ def IOptionIOk[A, B](ioa: IO[Option[A]])(op: A ⇒ IO[B])(
+ implicit writer: Writeable[B],
+ ctype: ContentTypeOf[B],
+ ctx: Context) =
+ ioa flatMap { aOption ⇒
+ aOption.fold(
+ a ⇒ op(a) map { Ok(_) },
+ io(notFound(ctx))): IO[Result]
+ } unsafePerformIO
+
  def IOptionIOResult[A](ioa: IO[Option[A]])(op: A ⇒ IO[Result])(implicit ctx: Context) =
  ioa flatMap { _.fold(op, io(notFound(ctx))) } unsafePerformIO
 

app/templating/AssetHelper.scala

@@ -7,13 +7,21 @@ import play.api.templates.Html
 
 trait AssetHelper {
 
- def cssTag(name: String) = Html {
+ def cssTag(name: String) = css("stylesheets/" + name)
+
+ def cssVendorTag(name: String) = css("vendor/" + name)
+
+ private def css(path: String) = Html {
  """<link href="%s" type="text/css" rel="stylesheet"/>"""
- .format(routes.Assets.at("stylesheets/" + name))
+ .format(routes.Assets.at(path))
  }
 
- def jsTag(name: String) = Html {
+ def jsTag(name: String) = js("javascripts/" + name)
+
+ def jsVendorTag(name: String) = js("vendor/" + name)
+
+ def js(path: String) = Html {
  """<script src="%s"></script>"""
- .format(routes.Assets.at("javascripts/" + name))
+ .format(routes.Assets.at(path))
  }
 }

app/views/analyse/layout.scala.html

@@ -0,0 +1,8 @@
+@(title: String, goodies: Option[Html] = None, moreCss: Html = Html(""), moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
+
+@base.layout(
+title = title, 
+goodies = goodies, 
+active = siteMenu.game.some,
+moreCss = moreCss,
+moreJs = moreJs)(body)

app/views/analyse/replay.scala.html

@@ -0,0 +1,76 @@
+@(pov: Pov, info: lila.analyse.GameInfo)(implicit ctx: Context)
+
+@import pov._
+
+@moreCss = {
+@cssVendorTag("pgn4web/fonts/pgn4web-fonts.css")
+@cssTag("analyse.css")
+}
+
+@moreJs = {
+@jsVendorTag("pgn4web/pgn4web.js")
+@jsTag("analyse.js")
+}
+
+@goodies = {
+<div class="lichess_goodies">
+ <br />
+ <div class="box">
+ @if(game.isBeingPlayed) {
+ <a class="link" href="@routes.Round.watcher(gameId, color.name)">
+ @trans.playingRightNow() 
+ </a>
+ } else {
+ @game.updatedAt.map(showDate)
+ }
+ @if(game.finishedOrAborted) {
+ <br />@gameEndStatus(game)
+ }
+ <br />
+ <br />
+ <div id="player_links">
+ @List(opponent, player).map { p =>
+ <div>
+ @p.aiLevel.map { l =>
+ @trans.aiNameLevelAiLevel(aiName, l)
+ }.getOrElse {
+ @playerLink(p)
+ }
+ </div>
+ }
+ </div>
+ <br />
+ @trans.variant() - @variantName(game.variant)<br />
+ @trans.timeControl() - @clockName(game.clock)<br />
+ @if(game.rated) {
+ @trans.thisGameIsRated()<br />
+ }
+ @trans.opening() -
+ @info.opening.map { o =>
+ <a href="http:https://www.chessgames.com/perl/[email protected]">@o.code @o.name</a><br />
+ }.getOrElse { "Unknown" }
+ </div>
+ <br />
+ <a class="rotate_board" href="@routes.Analyse.replay(gameId, (!color).name)">@trans.flipBoard()</a><br />
+ <br />
+ Export PGN:
+ <textarea id="pgnText" readonly="readonly">@Html(info.pgn)</textarea>
+</div>
+}
+
+@analyse.layout(
+title = trans.replayAndAnalyse() + " " + gameId,
+goodies = goodies.some,
+moreCss = moreCss,
+moreJs = moreJs) {
+<div class="analyse clearfix">
+ <div class="board_wrap">
+ <div id="GameBoard"@color.fold("", " class='flip'")></div>
+ <div id="GameButtons"></div>
+ </div>
+ <div class="moves_wrap">
+ <h1>@trans.replayAndAnalyse()</h1>
+ <div id="GameText"></div>
+ </div>
+</div>
+}

app/views/base/layout.scala.html

@@ -1,4 +1,4 @@
-@(title: String, active: Option[ui.SiteMenu.Elem] = None, baseline: Option[Html] = None, goodies: Option[Html] = None, chat: Option[Html] = None, robots: Boolean = true, moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
+@(title: String, active: Option[ui.SiteMenu.Elem] = None, baseline: Option[Html] = None, goodies: Option[Html] = None, chat: Option[Html] = None, robots: Boolean = true, moreCss: Html = Html(""), moreJs: Html = Html(""))(body: Html)(implicit ctx: Context)
 
 <!DOCTYPE html>
 <html lang="@lang.language">
@@ -14,6 +14,7 @@
  @cssTag("tooltip.css")
  @cssTag("opening.css")
  @cssTag("hook.css")
+ @moreCss
  <meta content="@trans.freeOnlineChessGamePlayChessNowInACleanInterfaceNoRegistrationNoAdsNoPluginRequiredPlayChessWithComputerFriendsOrRandomOpponents()" name="description">
  <meta name="google-site-verification" content="fZ08Imok7kcLaGcJg7BKQExO6vXGgSgsJUsW6JalUCo" />
  <link rel="shortcut icon" href="@routes.Assets.at("favicon.ico")" type="image/x-icon" />

public/javascripts/analyse.js

@@ -1,30 +1,30 @@
 jQuery(function() {
- SetImagePath("/vendor/pgn4web/lichess/64"); // use "" path if images are in the same folder as this javascript file
- SetImageType("png");
+ SetImagePath("/assets/vendor/pgn4web/lichess/64"); // use "" path if images are in the same folder as this javascript file
+ SetImageType("png");
 });
 
 function customFunctionOnPgnGameLoad() {
-  var $text = $('#ShowPgnText');
-  var html = '<table><tbody><tr>';
- $text.find('span.move').remove();
-  $text.find('>span').each(function(it) {
-  if (0 == it%2) {
-  html += '</tr><tr><th>' + (it/2+1) + '.</th>';
-  }
-  html += '<td>' + this.innerHTML + '</td>';
-  });
-  html += '</tr></tbody></table>';
-  $text.html(html).find('tr:empty').remove();
+ var $text = $('#ShowPgnText');
+ var html = '<table><tbody><tr>';
+ $text.find('span.move').remove();
+ $text.find('>span').each(function(it) {
+ if (0 == it%2) {
+ html += '</tr><tr><th>' + (it/2+1) + '.</th>';
+ }
+ html += '<td>' + this.innerHTML + '</td>';
+ });
+ html += '</tr></tbody></table>';
+ $text.html(html).find('tr:empty').remove();
 
- $('div.lichess_goodies a.rotate_board').click(function() {
- $('#GameBoard').toggleClass('flip');
-  $('#player_links div:first').appendTo($('#player_links'));
- redrawBoardMarks();
- return false;
- });
- redrawBoardMarks();
+ $('div.lichess_goodies a.rotate_board').click(function() {
+ $('#GameBoard').toggleClass('flip');
+ $('#player_links div:first').appendTo($('#player_links'));
+ redrawBoardMarks();
+ return false;
+ });
+ redrawBoardMarks();
 }
 
 function redrawBoardMarks() {
- jQuery.displayBoardMarks($('#GameBoard'), ! $('#GameBoard').hasClass('flip'));
+ jQuery.displayBoardMarks($('#GameBoard'), ! $('#GameBoard').hasClass('flip'));
 }