implement game extra data and more UI improvements

2012-06-11 01:18:56 +02:00 · 2012-06-11 01:18:56 +02:00 · a1c1fa2344
parent 8c51c3307d
commit a1c1fa2344
13 changed files with 153 additions and 58 deletions
--- a/app/bookmark/BookmarkApi.scala
+++ b/app/bookmark/BookmarkApi.scala
@ -30,10 +30,12 @@ final class BookmarkApi(
  def countByUser(user: User): Int =
    cached.count(user.id)

-  def usersByGame(game: DbGame): IO[List[User]] = for {
-    userIds ← bookmarkRepo userIdsByGameId game.id
-    users ← (userIds map userRepo.byId).sequence
-  } yield users.flatten
+  def usersByGame(game: DbGame): IO[List[User]] = 
+    if (game.hasBookmarks) for {
+      userIds ← bookmarkRepo userIdsByGameId game.id
+      users ← (userIds map userRepo.byId).sequence
+    } yield users.flatten
+    else io(Nil)

  def removeByGame(game: DbGame): IO[Unit] =
    bookmarkRepo removeByGameId game.id
--- a/app/controllers/Round.scala
+++ b/app/controllers/Round.scala
@ -40,12 +40,14 @@ object Round extends LilaController {
  def player(fullId: String) = Open { implicit ctx ⇒
    IOptionIOResult(gameRepo pov fullId) { pov ⇒
      pov.game.started.fold(
-        messenger render pov.game map { roomHtml ⇒
-          Ok(html.round.player(
-            pov,
-            version(pov.gameId),
-            roomHtml map { Html(_) }))
-        },
+        for {
+          roomHtml ← messenger render pov.game
+          bookmarkers ← bookmarkApi usersByGame pov.game
+        } yield Ok(html.round.player(
+          pov,
+          version(pov.gameId),
+          roomHtml map { Html(_) },
+          bookmarkers)),
        io(Redirect(routes.Setup.await(fullId)))
      )
    }
--- a/app/views/analyse/replay.scala.html
+++ b/app/views/analyse/replay.scala.html
@ -35,25 +35,28 @@ moreJs = moreJs) {
  </div>
  <div class="moves_wrap">
    <div id="GameText"></div>
-    @trans.opening() @opening.map { o =>
-    <a href="http://www.chessgames.com/perl/chessopening?eco=@o.code">@o.code @o.name</a><br />
-    }.getOrElse { "Unknown" }
-    <br />
-    <a class="rotate_board" href="@routes.Analyse.replay(gameId, (!color).name)">@trans.flipBoard()</a><br />
-    <br />
-    <a href="@routes.Analyse.pgn(game.id)">Download PGN</a>
-    @if(bookmarkers.nonEmpty) {
-    <div class="bookmarkers">
-      <p>@trans.bookmarkedByNbPlayers(bookmarkers.size)</p>
-      <ul>
-        @bookmarkers.map { bookmarker =>
-        <li>@userLink(bookmarker)</li>
-        }
-      </ul>
-    </div>
-    }
  </div>
 </div>
 <textarea id="pgnText" readonly="readonly">@Html(pgn)</textarea>
-@round.share(game)
+@views.html.game.more(pov) {
+@trans.opening() @opening.map { o =>
+<a href="http://www.chessgames.com/perl/chessopening?eco=@o.code">@o.code @o.name</a>
+}.getOrElse { "Unknown" }
+<br />
+<a href="@routes.Analyse.stats(gameId)">@trans.viewGameStats()</a>
+<br />
+<a class="rotate_board" href="@routes.Analyse.replay(gameId, (!color).name)">@trans.flipBoard()</a>
+<br />
+<a href="@routes.Analyse.pgn(game.id)">Download PGN</a>
+@if(bookmarkers.nonEmpty) {
+<div class="bookmarkers">
+  <p>@trans.bookmarkedByNbPlayers(bookmarkers.size)</p>
+  <ul>
+    @bookmarkers.map { bookmarker =>
+    <li>@userLink(bookmarker)</li>
+    }
+  </ul>
+</div>
+}
+}
 }
--- a/app/views/game/more.scala.html
+++ b/app/views/game/more.scala.html
@ -0,0 +1,19 @@
+@(pov: Pov)(extra: Html)(implicit ctx: Context)
+
+@import pov._
+
+@defining("http://lichess.org" + routes.Round.watcher(gameId, color.name)) { url =>
+<div class="game_more clearfix">
+  <span class="toggle_extra"><span></span></span>
+  <div class="more_top">
+    @bookmark.toggle(game)
+    <a
+      title="@trans.shareThisUrlToLetSpectatorsSeeTheGame()"
+      class="game_permalink blank_if_play"
+      href="@url">@url</a>
+  </div>
+  <div class="game_extra">
+    @extra
+  </div>
+</div>
+}
--- a/app/views/game/sideMenu.scala.html
+++ b/app/views/game/sideMenu.scala.html
@ -13,7 +13,7 @@
 <a class="@active.active("bookmark")" href="@routes.Game.bookmark()">
  @trans.nbBookmarks(nb.localize)
 </a>
+}
 <a class="@active.active("popular")" href="@routes.Game.popular()">
  @trans.nbPopularGames(listMenu.nbPopular.localize)
 </a>
-}
--- a/app/views/lobby/home.scala.html
+++ b/app/views/lobby/home.scala.html
@ -2,7 +2,7 @@

@chat = {
@for(m <- ctx.me; if m.canChat) {
-<div class="lichess_chat anon_chat">
+<div class="lichess_chat anon_chat lobby_chat">
  <div class="lichess_chat_top">
    <span class="title">@trans.chatRoom()</span>
    <input 
--- a/app/views/round/player.scala.html
+++ b/app/views/round/player.scala.html
@ -1,4 +1,4 @@
-@(pov: Pov, version: Int, roomHtml: Option[Html])(implicit ctx: Context)
+@(pov: Pov, version: Int, roomHtml: Option[Html], bookmarkers: List[User])(implicit ctx: Context)

@import pov._

@ -50,5 +50,21 @@ underchat = underchat.some) {
  </div>
 </div>
 <script type="text/javascript">var lichess_data = @Html(roundPlayerJsData(pov, version))</script>
-@round.share(game)
+@views.html.game.more(pov) {
+<a href="@routes.Analyse.replay(gameId, color.name)">@trans.replayAndAnalyse()</a>
+<br />
+<a href="@routes.Analyse.stats(gameId)">@trans.viewGameStats()</a>
+<br />
+<a href="@routes.Analyse.pgn(game.id)">Download PGN</a>
+@if(bookmarkers.nonEmpty) {
+<div class="bookmarkers">
+  <p>@trans.bookmarkedByNbPlayers(bookmarkers.size)</p>
+  <ul>
+    @bookmarkers.map { bookmarker =>
+    <li>@userLink(bookmarker)</li>
+    }
+  </ul>
+</div>
+}
+}
 }
--- a/app/views/round/share.scala.html
+++ b/app/views/round/share.scala.html
@ -1,11 +0,0 @@
-@(g: DbGame)(implicit ctx: Context)
-
-@defining("http://lichess.org" + routes.Round.watcher(g.id, "white")) { url =>
-<div class="game_share clearfix">
-  @bookmark.toggle(g)
-  <a 
-    title="@trans.shareThisUrlToLetSpectatorsSeeTheGame()" 
-    class="game_permalink blank_if_play" 
-    href="@url">@url</a>
-</div>
-}
--- a/app/views/round/watcher.scala.html
+++ b/app/views/round/watcher.scala.html
@ -53,5 +53,23 @@ underchat = underchat.some) {
  </div>
 </div>
 <script type="text/javascript">var lichess_data = @Html(roundWatcherJsData(pov, version))</script>
-@round.share(game)
+@views.html.game.more(pov) {
+<a href="@routes.Analyse.replay(gameId, color.name)">@trans.replayAndAnalyse()</a>
+<br />
+<a href="@routes.Analyse.stats(gameId)">@trans.viewGameStats()</a>
+<br />
+<a href="@routes.Round.watcher(gameId, (!color).name)">@trans.flipBoard()</a>
+<br />
+<a href="@routes.Analyse.pgn(game.id)">Download PGN</a>
+@if(bookmarkers.nonEmpty) {
+<div class="bookmarkers">
+  <p>@trans.bookmarkedByNbPlayers(bookmarkers.size)</p>
+  <ul>
+    @bookmarkers.map { bookmarker =>
+    <li>@userLink(bookmarker)</li>
+    }
+  </ul>
+</div>
+}
+}
 }
--- a/public/images/s24.png
+++ b/public/images/s24.png
--- a/public/javascripts/ctrl.js
+++ b/public/javascripts/ctrl.js
@ -176,6 +176,10 @@ $(function() {
  bookmarks();
  $('body').on('lichess.content_loaded', bookmarks);

+  $(".toggle_extra").click(function() {
+    $(this).parent().toggleClass("extra");
+  });
+
  var elem = document.createElement('audio');
  var canPlayAudio = !! elem.canPlayType && elem.canPlayType('audio/ogg; codecs="vorbis"');
  var $soundToggle = $('#sound_state');
--- a/public/stylesheets/board.css
+++ b/public/stylesheets/board.css
@ -583,6 +583,9 @@ div.lichess_chat {
  -moz-box-shadow: 0 0 7px #d0d0d0;
  -webkit-box-shadow: 0 0 7px #d0d0d0;
 }
+div.lichess_chat.lobby_chat {
+  top: 157px;
+}
 div.lichess_chat_top {
  border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
@ -618,6 +621,9 @@ div.lichess_chat ol {
  position:relative;
  overflow:hidden;
 }
+div.lichess_chat.lobby_chat ol {
+  height: 313px;
+}

 div.lichess_chat form {
  position: relative;
--- a/public/stylesheets/common.css
+++ b/public/stylesheets/common.css
@ -213,13 +213,6 @@ div.lichess_goodies div.box .player {
  margin: 4px 0;
 }

-div.bookmarkers {
-  margin-top: 2em;
-}
-div.bookmarkers li {
-  margin-top: 5px;
-}
-
 div.side_menu {
  margin-top: 15px;
 }
@ -507,7 +500,7 @@ div.lichess_social div.addtochrome {
 }

 /* soft inactive gradient */
-#top, div.lichess_chat_top, div.undertable_top, .button, .button:visited, .ui-state-default, div.content_box_top, div.hooks tr {
+#top, div.lichess_chat_top, div.undertable_top, .button, .button:visited, .ui-state-default, div.content_box_top, div.hooks tr, span.toggle_extra  {
  color: #666;
  background: #fafafa;
  background: -moz-linear-gradient(center top , #fafafa, #dadada) repeat scroll 0 0 #fafafa;
@ -519,7 +512,7 @@ div.lichess_social div.addtochrome {
 }

 /* active gradient */
-#top a.goto_nav.active, .button.active, .button:hover, .ui-state-active, .ui-widget-header, div.pagination span.current, a.goto_nav span.new_messages.unread, div.hooks td.action:hover, div.hooks table.empty_table tr:hover {
+#top a.goto_nav.active, .button.active, .button:hover, .ui-state-active, .ui-widget-header, div.pagination span.current, a.goto_nav span.new_messages.unread, div.hooks td.action:hover, div.hooks table.empty_table tr:hover, span.toggle_extra:hover {
  color: #fff;
  background: #d85000;
  background: -moz-linear-gradient(center top , #f49c00, #d85000) repeat scroll 0 0 #d85000;
@ -573,9 +566,10 @@ div.checkmateCaptcha input {
  width: 5em;
 }

-div.game_share {
+div.game_more {
  margin-top: 1em;
-  width: 492px;
+  width: 512px;
+  height: 35px;
  box-shadow: 0 0 7px #d0d0d0;
  -moz-box-shadow: 0 0 7px #d0d0d0;
  -webkit-box-shadow: 0 0 7px #d0d0d0;
@ -583,19 +577,61 @@ div.game_share {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
-  padding: 3px 10px;
  line-height: 24px;
 }
-div.game_share a.game_permalink {
+div.game_more.extra {
+  height: auto;
+}
+div.game_more div.more_top {
+  width: 100%;
+  width: 432px;
+  padding: 3px 10px;
+  height: 29px;
+}
+div.game_more a.game_permalink {
  float: left;
  display: block;
  margin-top: 3px;
 }
+div.game_more span.toggle_extra {
+  float: right;
+  display: block;
+  width: 35px;
+  height: 35px;
+  border-radius: 0 5px 5px 0;
+  border-left: 1px solid #ccc;
+  cursor: pointer;
+}
+div.game_more span.toggle_extra span {
+  display: block;
+  width: 16px;
+  height: 16px;
+  margin: 9px 0 0 10px;
+  background: url(../images/s16.png) 0 -192px no-repeat;
+}
+div.game_more.extra span.toggle_extra {
+  background: none;
+  border: none;
+}
+div.game_extra {
+  display: none;
+  padding: 10px 10px;
+  border-top: 1px solid #ccc;
+}
+div.extra div.game_extra {
+  display: block;
+}
+div.bookmarkers {
+  margin-top: 1em;
+}
+div.bookmarkers li {
+  margin-top: 5px;
+}

 span.bookmark {
  position: relative;
  float: right;
-  margin-right: 40px;
+  margin-right: 14px;
 }
 span.bookmark .icon {
  position: absolute;