show bookmark links every fucking where

app/game/DbGame.scala

@@ -328,6 +328,8 @@ case class DbGame(
 
   def hasBookmarks = bookmarks > 0
 
+  def showBookmarks = if (hasBookmarks) bookmarks else ""
+
   def encode = RawDbGame(
     id = id,
     players = players map (_.encode),

app/game/bookmark.scala

@@ -0,0 +1 @@
+

app/views/game/bookmark.scala.html

@@ -0,0 +1,13 @@
+@(g: DbGame)(implicit ctx: Context)
+
+<span class="star_game">
+@ctx.me.map { m =>
+<a 
+  href="@routes.Star.toggle(g.id)" 
+  class="icon
+  @starred(g, m).fold("starred", "")"
+  title="@trans.bookmarkThisGame()">@g.showBookmarks</a>
+}.getOrElse {
+<span class="icon">@g.showBookmarks</span>
+}
+</span>

app/views/game/widgets.scala.html

@@ -1,35 +1,36 @@
 @(games: List[DbGame], user: Option[User] = None, mini: Boolean = false)(implicit ctx: Context)
 
-@games.map { game =>
+@games.map { g =>
 <div class="game_row paginated_element clearfix">
-  @defining(user flatMap game.player) { fromPlayer =>
-  @defining(fromPlayer | game.creator ) { firstPlayer =>
-  @gameFen(game, firstPlayer.color.some)
+  @defining(user flatMap g.player) { fromPlayer =>
+  @defining(fromPlayer | g.creator ) { firstPlayer =>
+  @gameFen(g, firstPlayer.color.some)
   <div class="infos">
+    @game.bookmark(g)
     <b>
-      @if(game.isBeingPlayed) {
-      <a class="link" href="@routes.Round.watcher(game.id, firstPlayer.color.name)">@trans.playingRightNow()</a>,
+      @if(g.isBeingPlayed) {
+      <a class="link" href="@routes.Round.watcher(g.id, firstPlayer.color.name)">@trans.playingRightNow()</a>,
       } else {
-      @game.updatedAt.map(showDate)
+      @g.updatedAt.map(showDate)
       }
     </b>-
-    @if(game.finishedOrAborted) {
-    @gameEndStatus(game)
-    @game.winner.map { winner =>
+    @if(g.finishedOrAborted) {
+    @gameEndStatus(g)
+    @g.winner.map { winner =>
     , <span class="@{ fromPlayer.map(p => (p == winner).fold("win", "loss")) }">
       @winner.color.fold(trans.whiteIsVictorious(), trans.blackIsVictorious())
     </span>
     }
     } else {
-    @game.turnColor.fold(trans.whitePlays(), trans.blackPlays())
+    @g.turnColor.fold(trans.whitePlays(), trans.blackPlays())
     }
-    @if(game.variant.exotic) {
+    @if(g.variant.exotic) {
     <br />
-    @trans.variant(): <strong>@game.variant.name</strong>
+    @trans.variant(): <strong>@g.variant.name</strong>
     }
     <br /><br />
     <table class="game_players">
-      @List(game.opponent(firstPlayer), firstPlayer).map { p =>
+      @List(g.opponent(firstPlayer), firstPlayer).map { p =>
       <tr>
         <td><span class="color s16 @p.color.name">@p.color.fold(trans.white(), trans.black())</span></td>
         <td>@playerLink(p)</td>
@@ -37,7 +38,7 @@
       }
     </table>
     <br />
-    @game.clock.map { c =>
+    @g.clock.map { c =>
     <span class="s16 clock">
       @if(!mini) {
       @trans.timeControl():
@@ -46,12 +47,12 @@
     </span>
     <br /><br />
     }
-    @if(game.rated) {
+    @if(g.rated) {
     @trans.thisGameIsRated()
     <br /><br />
     }
     @if(!mini) {
-    <a class="go_analyse" href="@routes.Analyse.replay(game.id, firstPlayer.color.name)">&gt;&gt; @trans.replayAndAnalyse()</a>
+    <a class="go_analyse" href="@routes.Analyse.replay(g.id, firstPlayer.color.name)">&gt;&gt; @trans.replayAndAnalyse()</a>
     }
   </div>
   }

app/views/round/share.scala.html

@@ -1,13 +1,11 @@
-@(game: DbGame)(implicit ctx: Context)
+@(g: DbGame)(implicit ctx: Context)
 
-@defining("http://lichess.org" + routes.Round.watcher(game.id, "white")) { url =>
+@defining("http://lichess.org" + routes.Round.watcher(g.id, "white")) { url =>
 <div class="game_share clearfix">
-  @ctx.me.map { m =>
+  @game.bookmark(g)
   <a 
-    href="@routes.Star.toggle(game.id)" 
-    class="star_game @starred(game, m).fold("starred", "")"
-    title="@trans.bookmarkThisGame()"></a>
-  }
-  <a title="@trans.shareThisUrlToLetSpectatorsSeeTheGame()" class="game_permalink blank_if_play" href="@url">@url</a>
+    title="@trans.shareThisUrlToLetSpectatorsSeeTheGame()" 
+    class="game_permalink blank_if_play" 
+    href="@url">@url</a>
 </div>
 }

public/javascripts/ctrl.js

@@ -162,11 +162,20 @@ $(function() {
     return confirm('Confirm this action?');
   });
 
-  $('a.star_game').click(function() {
-    $(this).toggleClass("starred");
-    $.post($(this).attr("href"));
-    return false;
-  });
+  function stars() {
+    $('span.star_game a.icon:not(.jsed)').each(function() {
+      var t = $(this).addClass("jsed");
+      t.click(function() {
+        t.toggleClass("starred");
+        $.post(t.attr("href"));
+        var count = (parseInt(t.html()) || 0) + (t.hasClass("starred") ? 1 : -1);
+        t.html(count > 0 ? count : "");
+        return false;
+      });
+    });
+  }
+  stars();
+  $('body').on('lichess.content_loaded', stars);
 
   var elem = document.createElement('audio');
   var canPlayAudio = !! elem.canPlayType && elem.canPlayType('audio/ogg; codecs="vorbis"');

public/stylesheets/common.css

@@ -590,15 +590,23 @@ div.game_share a.game_permalink {
   margin-top: 3px;
 }
 
-a.star_game {
+span.star_game {
+  position: relative;
+  float: right;
+  margin-right: 40px;
+}
+span.star_game .icon {
+  position: absolute;
+  top: 0;
+  left: 0;
   background: transparent url(../images/s24.png) top left no-repeat;
-  width: 24px;
   height: 24px;
   display: block;
+  padding-left: 28px;
+  line-height: 28px;
+  text-decoration: none;
+  color: #aaa;
 }
-a.star_game.starred {
+span.star_game .icon.starred {
   background-position: 0 -24px;
 }
-div.game_share a.star_game {
-  float: right;
-}