hilight current game in crosstable - resolves 152

app/views/analyse/replay.scala.html

@@ -135,7 +135,7 @@ openGraph = povOpenGraph(pov)) {
     </div>
     @cross.map { c =>
     <div class="panel crosstable">
-      @views.html.game.crosstable(pov.player.userId.fold(c)(c.fromPov))
+      @views.html.game.crosstable(pov.player.userId.fold(c)(c.fromPov), pov.gameId.some)
     </div>
     }
   </div>

app/views/game/crosstable.scala.html

@@ -1,4 +1,4 @@
-@(crosstable: lila.game.Crosstable)(implicit ctx: Context)
+@(crosstable: lila.game.Crosstable, currentId: Option[String])(implicit ctx: Context)
 
 <table>
   <tbody>
@@ -11,7 +11,7 @@
       }
       @crosstable.results.zipWithIndex.map {
       case (r, index) => {
-      <td @if(index == crosstable.size - 1) { class="last" }>
+      <td @if(currentId.??(r.gameId==)){class="current"}>
         <a href="@routes.Round.watcher(r.gameId, "white")" class="@r.winnerId match {
           case Some(w) if w == u.id => { win }
           case None => {}

app/views/round/player.scala.html

@@ -28,7 +28,7 @@ chessground = false) {
 <div class="round cg-512">@miniBoardContent</div>
 <div class="crosstable" style="display:none">
   @cross.map { c =>
-  @views.html.game.crosstable(ctx.userId.fold(c)(c.fromPov))
+  @views.html.game.crosstable(ctx.userId.fold(c)(c.fromPov), pov.gameId.some)
   }
 </div>
 @if(playing.nonEmpty) {

app/views/round/watcher.scala.html

@@ -26,7 +26,7 @@ chessground = false) {
 <div class="round cg-512">@miniBoardContent</div>
 <div class="crosstable" style="display:none">
   @cross.map { c =>
-  @views.html.game.crosstable(c)
+  @views.html.game.crosstable(c, pov.gameId.some)
   }
 </div>
 }

app/views/tv/index.scala.html

@@ -28,7 +28,7 @@ chessground = false) {
 </div>
 <div class="crosstable" style="display:none">
   @cross.map { c =>
-  @game.crosstable(pov.player.userId.fold(c)(c.fromPov))
+  @game.crosstable(pov.player.userId.fold(c)(c.fromPov), pov.gameId.some)
   }
 </div>
 }

app/views/user/show.scala.html

@@ -219,7 +219,7 @@ openGraph = Map(
   </div>
   @if(filters.current.name == "me") {
   @info.crosstable.map { c =>
-  <div class="crosstable">@game.crosstable(c)</div>
+  <div class="crosstable">@game.crosstable(c, none)</div>
   }
   }
   @views.html.user.games(u, games, filters.current.name)

public/stylesheets/analyse.css

@@ -31,6 +31,8 @@ div.analysis_menu > a {
 div.analysis_menu > a.active {
   background-color: #eee;
   border-top: 1px solid #eee;
+}
+body.base div.analysis_menu > a.active {
   border-bottom: 2px solid #d85000;
 }
 div.analysis_panels {

public/stylesheets/common.css

@@ -1932,6 +1932,7 @@ div.lichess_overboard.joining .mini_board {
   border: 1px solid #eee;
   padding: 0;
   min-width: 15px;
+  transition: 0.13s;
 }
 .crosstable td a {
   line-height: 2em;
@@ -1941,6 +1942,13 @@ div.lichess_overboard.joining .mini_board {
   background: #fff;
   text-decoration: none;
 }
+.crosstable td.current {
+  box-shadow: 0 4px 12px #666;
+  transform: translateY(-3px);
+}
+.crosstable td:hover {
+  transform: translateY(-3px);
+}
 body.base .crosstable .win {
   font-weight: bold;
   color: #759900;
@@ -1948,7 +1956,7 @@ body.base .crosstable .win {
 body.base .crosstable .loss {
   color: #ac524f;
 }
-.crosstable td.last {
+.crosstable td:nth-last-child(3) {
   border-right: 1px solid #ccc;
 }
 .crosstable th {

public/stylesheets/dark.css

@@ -134,9 +134,15 @@ body.dark #message_notifications div.notification,
 body.dark div.chat_menu > a {
   border-color: #3d3d3d;
 }
-body.dark .crosstable td.last {
+body.dark .crosstable td:nth-last-child(2) {
   border-right-color: #3d3d3d;
 }
+body.dark .crosstable td.current {
+  box-shadow: none;
+}
+body.dark .crosstable td.current a {
+  background-color: #303030;
+}
 body.dark .ui-slider,
 body.dark div.progressbar,
 body.dark #translation_call div.progressbar,