ui/replay -> lichess-org/pgn-viewer

app/controllers/Analyse.scala

@@ -95,6 +95,23 @@ final class Analyse(
       }
 
   def embed(gameId: String, color: String) =
+    Action.async { implicit req =>
+      env.game.gameRepo.gameWithInitialFen(gameId) flatMap {
+        case Some((game, initialFen)) =>
+          val pov = Pov(game, chess.Color.fromName(color) | White)
+          env.api.roundApi.embed(
+            pov,
+            lila.api.Mobile.Api.currentVersion,
+            initialFen = Preload(initialFen),
+            withFlags = WithFlags(opening = true)
+          ) map { data =>
+            Ok(html.analyse.embed(pov, data))
+          }
+        case _ => fuccess(NotFound(html.analyse.embed.notFound))
+      } dmap EnableSharedArrayBuffer
+    }
+
+  def embedReplayGame(gameId: String, color: String) =
     Action.async { implicit req =>
       env.game.gameRepo.gameWithInitialFen(gameId) flatMap {
         case Some((game, initialFen)) =>

app/views/analyse/embed.scala

@@ -14,7 +14,7 @@ object embed {
 
   def apply(pov: lila.game.Pov, data: JsObject)(implicit config: EmbedConfig) =
     views.html.base.embed(
-      title = replay titleOf pov,
+      title = views.html.analyse.replay titleOf pov,
       cssModule = "analyse.embed"
     )(
       div(cls    := "is2d")(
@@ -36,7 +36,7 @@ object embed {
       jsModule("analysisBoard.embed"),
       analyseTag,
       embedJsUnsafeLoadThen(
-        s"""analyseEmbed(${safeJsonValue(
+        s"""analyseEmbed.embed(${safeJsonValue(
             Json.obj(
               "data"  -> data,
               "embed" -> true,
@@ -47,6 +47,39 @@ object embed {
       )
     )
 
+  def replay(pov: lila.game.Pov, data: JsObject)(implicit config: EmbedConfig) =
+    views.html.base.embed(
+      title = views.html.analyse.replay titleOf pov,
+      cssModule = "replay.embed"
+    )(
+      div(cls    := "is2d")(
+        main(cls := "replay")
+      ),
+      footer {
+        val url = routes.Round.watcher(pov.gameId, pov.color.name)
+        frag(
+          div(cls := "left")(
+            a(targetBlank, href := url)(h1(titleGame(pov.game))),
+            " ",
+            em("brought to you by ", a(targetBlank, href := netBaseUrl)(netConfig.domain))
+          ),
+          a(targetBlank, cls := "open", href := url)("Open")
+        )
+      },
+      views.html.base.layout.inlineJs(config.nonce)(config.lang),
+      depsTag,
+      jsModule("analysisBoard.embed"),
+      embedJsUnsafeLoadThen(
+        s"""analyseEmbed.replayEmbed(${safeJsonValue(
+            Json.obj(
+              "data" -> data,
+              "i18n" -> views.html.board.userAnalysisI18n(withCeval = false, withExplorer = false)
+            )
+          )})""",
+        config.nonce
+      )
+    )
+
   def notFound(implicit config: EmbedConfig) =
     views.html.base.embed(
       title = "404 - Game not found",

conf/routes

@@ -297,6 +297,9 @@ POST  /$fullId<\w{12}>/resign                    controllers.Round.resign(fullId
 GET   /embed/$gameId<\w{8}>                      controllers.Analyse.embed(gameId: String, color: String = "white")
 GET   /embed/$gameId<\w{8}>/$color<white|black>  controllers.Analyse.embed(gameId: String, color: String)
 
+GET   /embed/game/$gameId<\w{8}>                      controllers.Analyse.embedReplayGame(gameId: String, color: String = "white")
+GET   /embed/game/$gameId<\w{8}>/$color<white|black>  controllers.Analyse.embedReplayGame(gameId: String, color: String)
+
 POST  /$gameId<\w{8}>/delete                     controllers.Game.delete(gameId: String)
 
 GET   /round-next/$gameId<\w{8}>                 controllers.Round.next(gameId: String)

modules/round/src/main/JsonView.scala

@@ -211,7 +211,11 @@ final class JsonView(
         import LightUser.lightUserWrites
         Json
           .obj(
-            "game"        -> gameJsonView(game, initialFen),
+            "game" -> {
+              gameJsonView(game, initialFen) ++ Json.obj(
+                "pgn" -> pov.game.pgnMoves.mkString(" ")
+              )
+            },
             "white"       -> Json.obj("user" -> white),
             "black"       -> Json.obj("user" -> black),
             "orientation" -> pov.color.name,

package.json

@@ -77,7 +77,6 @@
     "ui/storm",
     "ui/racer",
     "ui/opening",
-    "ui/replay",
     "ui/@build/rollupProject",
     "ui/@types/lichess",
     "ui/@types/cash"

ui/analyse/css/build/_analyse.embed.scss

@@ -13,13 +13,11 @@
 @import '../../../common/css/vendor/chessground/chessground';
 
 @import '../../../common/css/component/board';
+@import '../../../common/css/component/lichess-pgn-viewer';
 
 @import '../../../common/css/base/scrollbar';
 @import '../../../common/css/component/fbt';
 @import '../../../common/css/component/button';
 @import '../../../common/css/form/cmn-toggle';
-@import '../../../tree/css/tree';
-@import '../../../chess/css/control';
-@import '../../../chess/css/zh-pocket';
 
-@import '../embed/embed';
+// @import '../embed/replay';

ui/build

@@ -17,7 +17,7 @@ mkdir -p public/compiled
 apps1="common"
 apps2="chess palantir"
 apps3="ceval game tree chat nvui puz keyboardMove"
-apps4="site swiss msg tutor replay opening cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher serviceWorker dgt storm racer coordinateTrainer"
+apps4="site swiss msg tutor opening cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule tournamentCalendar simul dasher serviceWorker dgt storm racer coordinateTrainer"
 site_plugins="tvEmbed puzzleEmbed analyseEmbed user clas captcha expandText team forum account coachShow coachForm challengePage checkout plan login passwordComplexity tourForm teamBattleForm gameSearch userComplete infiniteScroll flatpickr appeal publicChats contact userGamesDownload tvGames ublog ublogForm speech"
 other_plugins="round:nvui analyse:nvui analyse:study analyse:studyTopicForm puzzle:nvui puzzle:dashboard puzzle:opening chart:ratingDistribution chart:ratingHistory chart:game mod:user mod:inquiry mod:search mod:games mod:activity mod:teamAdmin "
 

ui/common/css/component/_lichess-pgn-viewer.scss

@@ -0,0 +1,104 @@
+$c-bg: $c-bg-box;
+$c-accent: $c-good;
+
+.lpv {
+  @extend %box-neat-force;
+  background: $c-bg;
+
+  &__board,
+  &__menu {
+    position: relative;
+    display: block;
+    height: 0;
+    padding-bottom: 100%;
+    width: 100%;
+  }
+  &__board {
+  }
+
+  &__controls {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: stretch;
+
+    .fbt {
+      flex: 1 1 auto;
+      padding: 0.4em 0.7em;
+      border-left: 1px solid $c-border;
+      &:first-child {
+        border: none;
+      }
+    }
+
+    &__menu.fbt {
+      flex: 0 1 auto;
+      padding: 0.4em 1em;
+    }
+    &__backward::before {
+      content: '←';
+    }
+    &__forward::before {
+      content: '→';
+    }
+    &__backward,
+    &__forward {
+      padding: 0.4rem 0.7rem;
+      &::before {
+        font-size: 3em;
+        line-height: 0.5em;
+      }
+    }
+  }
+
+  &__menu {
+    outline: 1px solid $c-border;
+    &__inner {
+      display: flex;
+      flex-flow: column;
+      padding-top: 2em;
+    }
+    &__entry.fbt {
+      text-align: left;
+      padding: 0.8em 2.5em;
+      transition: none;
+      &::before {
+        color: $c-accent;
+        font-size: 2em;
+      }
+      &:hover::before {
+        color: $c-accent-over;
+      }
+    }
+  }
+
+  &__fbt {
+    background: none;
+    border: none;
+    outline: none;
+    color: $c-font;
+    align-items: normal;
+    cursor: pointer;
+    text-transform: uppercase;
+    font-size: 1em;
+    line-height: 1.5;
+    text-decoration: none;
+
+    @media (hover: hover) {
+      &:hover:not(.disabled):not([disabled]) {
+        background: mix($c-accent, $c-bg, 75%);
+        color: #fff;
+      }
+    }
+
+    &.active {
+      background: $c-accent !important;
+      color: #fff;
+    }
+
+    &.disabled,
+    &[disabled] {
+      opacity: 0.4;
+      cursor: default;
+    }
+  }
+}

ui/opening/css/build/_opening.scss

@@ -1,6 +1,4 @@
 @import '../../../common/css/plugin';
-@import '../../../common/css/component/fbt';
-
-@import '../../../replay/css/replay';
+@import '../../../common/css/component/lichess-pgn-viewer';
 
 @import '../opening';

ui/opening/package.json

@@ -14,7 +14,8 @@
     "typescript": "^4"
   },
   "dependencies": {
-    "common": "2.0.0"
+    "common": "2.0.0",
+    "lichess-pgn-viewer": "^0"
   },
   "scripts": {
     "dev": "rollup --config",

ui/opening/src/main.ts

@@ -1,10 +1,9 @@
-import LichessReplay from 'replay';
+import Lpv from 'lichess-pgn-viewer';
 
 lichess.load.then(() => {
   $('.replay--autoload').each(function (this: HTMLElement) {
-    LichessReplay(this, {
+    Lpv(this, {
       pgn: this.dataset['pgn']!,
-      i18n: {},
     });
   });
 });