show hook color in list, hide action link

app/templating/AssetHelper.scala

@@ -7,7 +7,7 @@ import controllers.routes
 
 trait AssetHelper {
 
-  val assetVersion = 55
+  val assetVersion = 56
 
   def cssTag(name: String) = css("stylesheets/" + name)
 

app/views/lobby/home.scala.html

@@ -54,11 +54,11 @@ underchat = underchat.some) {
       <table id="hooks_table" class="tab list none">
         <thead>
           <tr>
-            <th data-sort="string" data-sort-desc="1"><span>@trans.player()</span></th>
+            <th class="color"></th>
+            <th data-sort="string" data-sort-desc="1" class="player"><span>@trans.player()</span></th>
             <th data-sort="int" data-sort-desc="1" class="elo"><span>Elo</span></th>
             <th data-sort="int" data-sort-desc="1"><span>@trans.time()</span></th>
             <th data-sort="string" data-sort-desc="1"><span>@trans.mode()</span></th>
-            <th></th>
           </tr>
         </thead>
         <tbody></tbody>

public/javascripts/big.js

@@ -2219,12 +2219,12 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
     }
 
     function renderTr(hook) {
-      return '<tr class="' + hook.id + '">' + _.map([
+      return '<tr data-id="' + hook.id +'" class="' + hook.id + '">' + _.map([
+        [hook.color || '', '<span class="s16 ' + (hook.color || 'random') + '"></span>'],
         [hook.username, hook.elo ? '<a href="/@/' + hook.username + '" class="ulpt">' + hook.username + '</a>' : 'Anonymous'],
         [hook.elo || 1200, hook.elo || ''],
         [hook.time || 9999, hook.clock ? hook.clock : '∞'],
-        [hook.mode, $.trans(hook.mode) + (hook.variant == 'Chess960' ? '<span class="chess960">960</span>' : '')],
-        ['', hook.action == "join" ? '<a class="socket-link" data-msg="join" data-data="' + hook.id + '">Join</a>' : '<a class="socket-link" data-msg="cancel">Cancel</a>']
+        [hook.mode, $.trans(hook.mode) + (hook.variant == 'Chess960' ? '<span class="chess960">960</span>' : '')]
       ], function(x) {
         return '<td data-sort-value="'+x[0]+'">' + x[1] + '</td>';
       }).join('') + '</tr>';
@@ -2246,6 +2246,9 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       } else return true;
     }
 
+    $tbody.on('click', 'td', function() {
+      $('#' + $(this).parent().data('id')).click();
+    });
     $canvas.on('click', '>span.plot:not(.hiding)', function() {
       var hook = $(this).data('hook');
       if (confirm960(hook)) {

public/stylesheets/common.css

@@ -967,12 +967,15 @@ span.s16.clock {
   padding-left: 20px;
   white-space: nowrap;
 }
-.user_link.white, .s16.challenge {
+.user_link.white, .s16.challenge, .s16.white {
   background-position: 0 -240px;
 }
-.user_link.black {
+.user_link.black, .s16.black {
   background-position: 0 -256px;
 }
+.s16.random {
+  background-position: 0 -271px;
+}
 .user_link.offline {
   background-position: 0 -160px;
 }
@@ -1503,9 +1506,13 @@ div.game_config div.color_submits button.random span {
   background-position: right -368px;
   font-weight: bold;
 }
+#hooks_table th.player {
+  width: 110px;
+}
 #hooks_table td {
   padding: 12px 12px;
   border-bottom: 1px solid #ccc;
+  cursor: pointer;
 }
 #hooks_table.crowded td {
   padding: 8px 12px;
@@ -1514,11 +1521,20 @@ div.game_config div.color_submits button.random span {
   background: rgba(255, 255, 255, 0.6);
 }
 #hooks_table tr:nth-child(even) td {
-  background: rgba(220, 220, 220, 0.5);
+  background: rgba(230, 230, 230, 0.5);
+}
+#hooks_table tr:hover td {
+  background: rgba(255, 255, 200, 0.7);
 }
 #hooks_table td:first-child {
-  width: 120px;
-  overflow: hidden;
+  width: 16px;
+}
+#hooks_table td:first-child span {
+  display: block;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+  opacity: 0.7;
 }
 #hooks_table .chess960 {
   padding-left: 1em;

public/stylesheets/dark.css

@@ -187,12 +187,8 @@ body.dark #hooks_table tr:nth-child(even) td {
 body.dark #hooks_table tr:nth-child(odd) td {
   background: rgba(40, 40, 40, 0.6);
 }
-
-body.dark .user_link.white {
-  background-position: 0 -288px;
-}
-body.dark .user_link.black {
-  background-position: 0 -272px;
+body.dark #hooks_table tr:hover td {
+  background: rgba(50, 50, 20, 0.7);
 }
 
 body.dark #hook_filter {