improve & unify await & join views

2014-10-17 23:24:53 +02:00 · 2014-10-17 23:24:53 +02:00 · 20f0737a9a
parent a728a85a91
commit 20f0737a9a
7 changed files with 82 additions and 76 deletions
--- a/app/controllers/Round.scala
+++ b/app/controllers/Round.scala
@ -93,10 +93,10 @@ object Round extends LilaController with TheftPrevention {

  private def join(pov: Pov)(implicit ctx: Context): Fu[Result] =
    GameRepo initialFen pov.gameId zip
-      env.version(pov.gameId) zip
+      Env.api.roundApi.player(pov, Env.api.version) zip
      ((pov.player.userId orElse pov.opponent.userId) ?? UserRepo.byId) map {
-        case ((fen, version), opponent) => Ok(html.setup.join(
-          pov, opponent, version, Env.setup.friendConfigMemo get pov.game.id, fen))
+        case ((fen, data), opponent) => Ok(html.setup.join(
+          pov, data, opponent, Env.setup.friendConfigMemo get pov.game.id, fen))
      }

  def tableWatcher(gameId: String, color: String) = Open { implicit ctx =>
--- a/app/views/setup/await.scala.html
+++ b/app/views/setup/await.scala.html
@ -5,7 +5,7 @@
@moreJs = {
@embedJs {
 lichess = lichess || {};
-lichess.await = {
+lichess.prelude = {
 data: @Html(play.api.libs.json.Json.stringify(data)),
 };
 }
@ -16,42 +16,40 @@ title = userOption.isDefined.fold(trans.challengeToPlay,trans.playWithAFriend).s
 moreJs = moreJs,
 side = Html(""),
 signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
-<div class="top">
-  <div class="lichess_game cg-512">
-    <div class="lichess_board_wrap">
-      <div class="lichess_board"></div>
-    </div>
-    <div class="lichess_overboard">
-      @userOption.map { user =>
-      <div id="challenge_await" data-user="@user.id">
-        <h2>@trans.challengeToPlay()</h2>
-        @userLink(user, cssClass="target".some)
-        <span class="loader"><span data-icon="U"></span></span>
-        <p class="explanations">
-          @trans.waitingForOpponent()<br />
-          <a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
-        </p>
-      </div>
-      <div id="challenge_declined" class="none">
-        <h2>Challenge declined</h2>
-        <a href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
-      </div>
-      }.getOrElse {
-      @trans.toInviteSomeoneToPlayGiveThisUrl():
-      <input id="lichess_id_input" class="copyable" spellcheck="false" readonly="true" value="@protocol@commonDomain@routes.Round.watcher(gameId, "white")" />
+<div class="lichess_game">
+  <div class="lichess_board_wrap cg-512">
+    <div class="lichess_board"></div>
+  </div>
+  <div class="lichess_overboard">
+    @userOption.map { user =>
+    <div id="challenge_await" data-user="@user.id">
+      <h2>@trans.challengeToPlay()</h2>
+      @userLink(user, cssClass="target".some)
+      <span class="loader"><span data-icon="U"></span></span>
      <p class="explanations">
-        @trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()<br />
+        @trans.waitingForOpponent()<br />
        <a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
      </p>
-      }
-      @config.map { c =>
-      <p class="explanations">
-        @trans.variant(): @views.html.game.variantLink(c.variant, variantName(c.variant))<br />
-        <span data-icon="p"></span> @clockName(c.makeClock)<br />
-        @trans.mode(): @modeName(c.mode)
-      </p>
-      }
    </div>
+    <div id="challenge_declined" class="none">
+      <h2>Challenge declined</h2>
+      <a href="@routes.Lobby.home()">@trans.playWithAnotherOpponent()</a>
+    </div>
+    }.getOrElse {
+    @trans.toInviteSomeoneToPlayGiveThisUrl():
+    <input id="lichess_id_input" class="copyable" spellcheck="false" readonly="true" value="@protocol@commonDomain@routes.Round.watcher(gameId, "white")" />
+    <p class="explanations">
+      @trans.theFirstPersonToComeOnThisUrlWillPlayWithYou()<br />
+      <a href="@routes.Setup.cancel(fullId)">@trans.cancel()</a>
+    </p>
+    }
+    @config.map { c =>
+    <p class="explanations">
+      @trans.variant(): @views.html.game.variantLink(c.variant, variantName(c.variant))<br />
+      <span data-icon="p"></span> @clockName(c.makeClock)<br />
+      @trans.mode(): @modeName(c.mode)
+    </p>
+    }
  </div>
 </div>
 }
--- a/app/views/setup/config.scala.html
+++ b/app/views/setup/config.scala.html
@ -1,6 +1,6 @@
@(form: Form[_], typ: String, title: Html, route: Call, fields: Html, error: Option[Html] = None)(implicit ctx: Context)

-<div class="lichess_overboard auto_center game_config game_config_@typ">
+<div class="lichess_overboard game_config game_config_@typ">
  <a href="@routes.Lobby.home" class="close icon" title="@trans.cancel()" data-icon="L"></a>
  <h2>@title</h2>
  @error.map { e =>
--- a/app/views/setup/join.scala.html
+++ b/app/views/setup/join.scala.html
@ -1,44 +1,51 @@
-@(pov: Pov, opponentUser: Option[User], version: Int, config: Option[lila.setup.FriendConfig], initialFen: Option[String])(implicit ctx: Context)
+@(pov: Pov, data: play.api.libs.json.JsObject, opponentUser: Option[User], config: Option[lila.setup.FriendConfig], initialFen: Option[String])(implicit ctx: Context)

@import pov._

+@moreJs = {
+@embedJs {
+lichess = lichess || {};
+lichess.prelude = {
+data: @Html(play.api.libs.json.Json.stringify(data)),
+};
+}
+}
+
@round.layout(
 title = trans.playWithAFriend.str(),
+moreJs = moreJs,
 side = Html(""),
 signedJs = routes.Round.signedJs(pov.gameId).toString.some) {
-<div class="lichess_game lichess_game_not_started clearfix pov_@color">
-  <div class="lichess_board_wrap">
-    <div class="ground cg-512"></div>
-    <div class="lichess_overboard auto_center joining @game.id">
-      @opponentUser.map { u =>
-      @userLink(u)
-      }.getOrElse {
-      @User.anonymous
-      }
-      @config.map { c =>
-      <p class="explanations">
-        @views.html.game.variantLink(c.variant, variantName(c.variant)), @modeName(c.mode)<br />
-        <span data-icon="p"></span> @clockName(c.makeClock)<br />
-      </p>
-      }
-      @initialFen.map { fen =>
-      @views.html.game.miniBoard(fen)
-      }
-      @if(!game.rated || ctx.isAuth) {
-      @if(game.rated && !game.hasClock) {
-      <div class="join_warning warning">@trans.bewareTheGameIsRatedButHasNoClock()</div>
-      }
-      <form style="margin-top: 20px" action="@routes.Setup.join(gameId)" method="post">
-        <button name="submit" type="submit" class="submit button" data-icon="G">&nbsp;@trans.joinTheGame()</button>
-      </form>
-      } else {
-      <hr />
-      <p class="error">This game is rated<br />You must <a href="@routes.Auth.login?referrer=@routes.Round.watcher(pov.gameId, "white")">log in</a> to join it.</p>
-      }
-    </div>
+<div class="lichess_game">
+  <div class="lichess_board_wrap cg-512">
+    <div class="lichess_board"></div>
+  </div>
+  <div class="lichess_overboard joining @game.id">
+    @opponentUser.map { u =>
+    @userLink(u)
+    }.getOrElse {
+    @User.anonymous
+    }
+    @config.map { c =>
+    <p class="explanations">
+      @views.html.game.variantLink(c.variant, variantName(c.variant)), @modeName(c.mode)<br />
+      <span data-icon="p"></span> @clockName(c.makeClock)<br />
+    </p>
+    }
+    @initialFen.map { fen =>
+    @views.html.game.miniBoard(fen, color = pov.color.name)
+    }
+    @if(!game.rated || ctx.isAuth) {
+    @if(game.rated && !game.hasClock) {
+    <div class="join_warning warning">@trans.bewareTheGameIsRatedButHasNoClock()</div>
+    }
+    <form style="margin-top: 20px" action="@routes.Setup.join(gameId)" method="post">
+      <button name="submit" type="submit" class="submit button" data-icon="G">&nbsp;@trans.joinTheGame()</button>
+    </form>
+    } else {
+    <hr />
+    <p class="error">This game is rated<br />You must <a href="@routes.Auth.login?referrer=@routes.Round.watcher(pov.gameId, "white")">log in</a> to join it.</p>
+    }
  </div>
 </div>
-@*
-@embedJs("var _ld_ = " + roundWatcherJsData(pov, version, false, ctx.pref))
-*@
 }
--- a/public/javascripts/big.js
+++ b/public/javascripts/big.js
@ -329,7 +329,7 @@ var storage = {
    }

    if (lichess.round) startRound(document.getElementById('lichess'), lichess.round);
-    else if (lichess.await) startAwait(document.querySelector('.lichess_game'), lichess.await);
+    else if (lichess.prelude) startPrelude(document.querySelector('.lichess_game'), lichess.prelude);

    setTimeout(function() {
      if (lichess.socket === null) {
@ -727,13 +727,13 @@ var storage = {
    });
  }

-  function startAwait(element, cfg) {
+  function startPrelude(element, cfg) {
    var data = cfg.data;
    lichess.socket = new lichess.StrongSocket(
      data.url.socket,
      data.player.version, {
        options: {
-          name: "await"
+          name: "prelude"
        },
        params: {
          ran: "--ranph--"
@ -742,7 +742,7 @@ var storage = {

    Chessground(element.querySelector('.lichess_board'), {
      viewOnly: true,
-      fen: data.fen,
+      fen: data.game.fen,
      orientation: data.player.color,
      check: data.game.check,
      coordinates: data.pref.coords !== 0,
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@ -1507,6 +1507,7 @@ div.extra_top {
  margin: 20px 20px 0 0;
 }
 .mini_board .cg-board-wrap {
+  margin: auto;
  width: 224px;
  height: 224px;
  position: relative;
--- a/ui/round/package.json
+++ b/ui/round/package.json
@ -30,7 +30,7 @@
    "watchify": "^1.0.2"
  },
  "dependencies": {
-    "chessground": "^1.6.1",
+    "chessground": "^1.6.2",
    "lodash-node": "^2.4.1",
    "mithril": "^0.1.22"
  }