show only graph lobby

app/templating/AssetHelper.scala

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

app/views/lobby/home.scala.html

@@ -47,7 +47,6 @@ underchat = underchat.some) {
         <span class="s16 ddown">@trans.filterGames()</span>
         <span class="number">(0)</span>
       </a>
-      <div id="hooks"></div>
       <div id="hooks_chart"><div class="canvas"></div></div>
       <a class="no_hook">@trans.noGameAvailableRightNowCreateOne()</a>
       <div id="hook_filter"></div>

public/javascripts/big.js

@@ -1938,28 +1938,6 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
     var animation = 500;
 
     var pool = [];
-    // extras
-    // for (elo = 800; elo <= 2000; elo += 100) {
-    // // for (elo = 1200; elo <= 1200; elo += 100) {
-    //   _.each(['0+1','1+0','2+0','3+0','4+0','5+0','6+0','7+0','8+0','9+0','10+0','12+0','15+0','20+0','25+0','30+0','30+30'], function(time) {
-    //   // _.each(['5+8'], function(time) {
-    //     pool.push({
-    //       username: elo + " and " + time,
-    //       id: elo + "and" + time.replace(/\+/,'-'),
-    //       elo: elo,
-    //       clock: time 
-    //     });
-    //   });
-    // }
-
-    var slots = [];
-    for (i = 1; i <= 12; i++) {
-      var j = (i > 5) ? (i > 7) ? i + 4 : i + 2 : i;
-      var top = Math.floor((j - 1) / 4) * 128;
-      var left = ((j - 1) % 4) * 128;
-      slots.push('<div id="slot' + i + '" style="top:' + top + 'px;left:' + left + 'px;"></div>');
-    }
-    $hooks.html(slots.join(''));
 
     $wrap.find('a.filter').click(function() {
       var $a = $(this);
@@ -2103,6 +2081,13 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       drawHooks();
     }
 
+    function undrawHook(hook) {
+      $('#'+hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
+        $.powerTip.destroy($(this));
+        $(this).remove();
+      });
+    }
+
     function drawHooks() {
       var filter = lichess_preload.filter;
       var seen = [];
@@ -2115,33 +2100,26 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
           (filter.eloDiff > 0 && (!hook.elo || hook.elo > (myElo + filter.eloDiff) || hook.elo < (myElo - filter.eloDiff)));
         var hash = hook.mode + hook.variant + hook.clock + hook.elo;
         if (hide && hook.action != 'cancel') {
-          $wrap.find('.' + hook.id).not('.hiding').addClass('hiding').fadeOut(animation, function() {
+          undrawHook(hook);
-            $(this).remove();
-          });
           hidden++;
         } else if (_.contains(seen, hash) && hook.action != 'cancel') {
-          $wrap.find('.' + hook.id).filter(':visible').hide();
+          $('#' + hook.id).filter(':visible').hide();
           hidden++;
         } else {
           visible++;
-          if (!$hooks.find('div.' + hook.id).length) {
+          if (!$('#' + hook.id).length) {
-            $(_.shuffle($hooks.find('>div:empty'))[0]).html($(renderHook(hook)).fadeIn(animation));
-          }
-          if (!$canvas.find('> span.' + hook.id).length) {
             $canvas.append($(renderPlot(hook)).fadeIn(animation));
           }
-          $wrap.find('.' + hook.id).not(':visible').fadeIn(animation);
+          $wrap.find('#' + hook.id).not(':visible').fadeIn(animation);
         }
         if (hook.action != 'cancel') seen.push(hash);
       });
-      $hooks.find('div.hook').each(function() {
+      $canvas.find('>span.plot').each(function() {
-        var id = $(this).data('id');
+        var id = $(this).attr('id');
         if (!_.find(pool, function(h) {
           return h.id == id;
         })) {
-          $wrap.find('.' + id).fadeOut(animation, function() {
+          undrawHook($(this).data('hook'));
-            $(this).remove();
-          });
         }
       });
 
@@ -2157,17 +2135,28 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       var left = clockX(hook.clock);
       var klass = [
           'plot',
-        hook.id,
         hook.mode == "Rated" ? 'rated' : 'casual',
         hook.variant == "Chess960" ? 'chess960' : '',
         hook.action == 'cancel' ? 'cancel' : ''
       ].join(' ');
-      return '<span data-id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>';
+      var $plot = $('<span id="' + hook.id + '" class="' + klass + '" style="bottom:' + bottom + 'px;left:' + left + 'px;"></span>');
+      return $plot.data('hook', hook).powerTip({
+        fadeInTime: 0,
+        fadeOutTime: 0,
+        placement: 'ne',
+        mouseOnToPopup: true,
+        closeDelay: 200,
+        intentPollInterval: 50
+      }).data('powertipjq', $(renderHook(hook))).on({
+        powerTipRender: function() {
+          $('#powerTip').addClass('hook');
+        }
+      });
     }
 
     function eloY(e) {
       function eloLog(a) {
-        return Math.log(a / 200 + 1);
+        return Math.log(a / 150 + 1);
       }
       var elo = Math.max(800, Math.min(2000, e || 1200));
       if (elo == 1200) {
@@ -2177,11 +2166,12 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
       } else {
         var ratio = 0.25 - (eloLog(1200 - elo) / eloLog(400)) / 4;
       }
-      return Math.round(ratio * 237);
+      return Math.round(ratio * 489);
     }
 
     function clockX(c) {
       var maxDur = 2000;
+
       function durLog(a) {
         return Math.log((a - 30) / 200 + 1);
       }
@@ -2189,81 +2179,59 @@ var lichess_sri = Math.random().toString(36).substring(5); // 8 chars
         var parts = c.replace(/\s/g, '').split('+');
         var dur = Math.min(maxDur, parseInt(parts[0]) * 60 + parseInt(parts[1]) * 30);
       } else dur = maxDur;
-      return Math.round(durLog(dur) / durLog(maxDur) * 237);
+      return Math.round(durLog(dur) / durLog(maxDur) * 489);
     }
 
     function renderHook(hook) {
-      var title = hook.action == 'cancel' ? 'title="Click to cancel"' : '';
+      var html = '';
-      var klass = ['hook', hook.id, hook.action].join(' ');
-      var html = '<div '+title+' data-id="' + hook.id + '" class="' + klass + '">';
       if (hook.elo) {
-        html += '<a class="opponent ulpt" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
+        html += '<a class="opponent" href="/@/' + hook.username + '">' + hook.username.substr(0, 14) + '</a>';
         html += '<span class="elo">' + hook.elo + '</span>';
       } else {
         html += '<span class="opponent anon">Anonymous</span>';
       }
-      if (isRegistered) {
-        var mode = $.trans(hook.mode);
-      } else {
-        var mode = "";
-      }
       if (hook.clock) {
         var clock = hook.clock.replace(/\s/g, '').replace(/\+/, '<span>+</span>');
         html += '<span class="clock">' + clock + '</span>';
       } else {
         html += '<span class="clock nope">∞</span>';
       }
-      html += '<span class="mode">' + mode + '</span>';
+      html += '<span class="mode">' + $.trans(hook.mode) + '</span>';
-      if(hook.color) {
+      if (hook.color) {
-        html += '<span class="color s16 '+hook.color+'"></span>';
+        html += '<span class="color s16 ' + hook.color + '"></span>';
       }
-      if(hook.engine && hook.action == 'join') {
+      if (hook.engine && hook.action == 'join') {
         html += '<span class="s16 engine"></span>';
       }
-      if (hook.action == "cancel") {
-        html += '<a class="action socket-link" data-msg="cancel"><span></span></a>';
-      } else {
-        html += '<a class="action socket-link" data-msg="join" data-data="' + hook.id + '"><span></span></a>';
-      }
       if (hook.variant == 'Chess960') {
         html += '<span class="chess960">Chess 960</span>';
       }
-      html += '</div>';
+      return html;
-      var $hook = $(html).data('hook', hook);
-      if (hook.variant == "Chess960" && !$.cookie('c960')) {
-        $hook.find('a.join').click(function() {
-          var c = confirm("This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?");
-          if (c) $.cookie('c960', 1);
-          return c;
-        });
-      }
-      return $hook;
     }
 
     $('#hooks_chart').append(
       _.map([1000, 1200, 1300, 1400, 1600, 1800, 2000], function(v) {
-        return '<span class="y label" style="bottom:' + (eloY(v) + 4) + 'px">' + v + '</span>';
+      return '<span class="y label" style="bottom:' + (eloY(v) + 4) + 'px">' + v + '</span>';
-      }).join('') +
+    }).join('') +
-      _.map([1, 2, 3, 5, 10, 15, 20, 30], function(v) {
+      _.map([1, 2, 3, 5, 7, 10, 15, 20, 30], function(v) {
-        return '<span class="x label" style="left:' + (clockX(v+"+0")) + 'px">' + v + '</span>';
+      return '<span class="x label" style="left:' + (clockX(v + "+0")) + 'px">' + v + '</span>';
-      }).join('') 
+    }).join(''));
-    );
 
-    $wrap.on('mouseenter', '.plot, div.hook', function() {
+    function confirm960(hook) {
-      $wrap.find('.' + $(this).data('id')).addClass('hover');
+      if (hook.variant == "Chess960" && !$.cookie('c960')) {
-    }).on('mouseleave', '.plot, div.hook', function(e) {
+        var c = confirm("This is a Chess960 game!\n\nThe starting position of the pieces on the players' home ranks is randomized.\nRead more: http://wikipedia.org/wiki/Chess960\n\nDo you want to play Chess960?");
-      $wrap.find('.' + $(this).data('id')).removeClass('hover');
+        if (c) $.cookie('c960', 1);
-    });
+        return c;
-    $wrap.on('click', '.plot', function() {
+      }
-      $hooks.find('.' + $(this).data('id')).click();
+      else return true;
-    });
+    }
-    $hooks.on('click', 'div.hook a.opponent', function(e) {
+
-      e.stopPropagation();
+    $canvas.on('click', '>span.plot:not(.hiding)', function() {
-      return true;
+      var hook = $(this).data('hook');
-    });
+      if (confirm960(hook)) {
-    $hooks.on('click', 'div.hook:not(.hiding)', function() {
+        if (hook.action == 'cancel') lichess.socket.send('cancel');
-      var $a = $(this).find('a.action');
+        else lichess.socket.send('join', hook.id);
-      lichess.socket.send($a.data('msg'), $a.data('data'));
+      }
     });
     $noHook.click(function() {
       $('#start_buttons a.config_hook').click();

public/stylesheets/common.css

@@ -210,6 +210,104 @@ ul.ui-autocomplete li a.ui-state-focus {
 .ui-slider-vertical .ui-slider-range-max {
   top: 0;
 }
+#powerTip {
+  width: 240px;
+  min-height: 6em;
+  cursor: default;
+  background-color: #f0f0f0;
+  border: 1px solid #c0c0c0;
+  border-radius: 4px;
+  display: none;
+  position: absolute;
+  z-index: 2147483647;
+}
+#powerTip > .title {
+  padding: 8px;
+  border-bottom: 1px solid #c0c0c0;
+}
+#powerTip > .content {
+  text-align: right;
+  padding: 16px 8px;
+}
+#powerTip:before {
+  content:"";
+  position: absolute;
+}
+#powerTip.n:before, #powerTip.s:before {
+  border-right: 5px solid transparent;
+  border-left: 5px solid transparent;
+  left: 50%;
+  margin-left: -5px;
+}
+#powerTip.e:before, #powerTip.w:before {
+  border-bottom: 5px solid transparent;
+  border-top: 5px solid transparent;
+  margin-top: -5px;
+  top: 50%;
+}
+#powerTip.n:before {
+  border-top: 10px solid #acacac;
+  border-top: 10px solid rgba(172, 172, 172, 0.8);
+  bottom: -10px;
+}
+#powerTip.e:before {
+  border-right: 10px solid #acacac;
+  border-right: 10px solid rgba(172, 172, 172, 0.8);
+  left: -10px;
+}
+#powerTip.s:before {
+  border-bottom: 10px solid #acacac;
+  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
+  top: -10px;
+}
+#powerTip.w:before {
+  border-left: 10px solid #acacac;
+  border-left: 10px solid rgba(172, 172, 172, 0.8);
+  right: -10px;
+}
+#powerTip.ne:before, #powerTip.se:before {
+  border-right: 10px solid transparent;
+  border-left: 0;
+  left: 10px;
+}
+#powerTip.nw:before, #powerTip.sw:before {
+  border-left: 10px solid transparent;
+  border-right: 0;
+  right: 10px;
+}
+#powerTip.ne:before, #powerTip.nw:before {
+  border-top: 10px solid #acacac;
+  border-top: 10px solid rgba(172, 172, 172, 0.8);
+  bottom: -10px;
+}
+#powerTip.se:before, #powerTip.sw:before {
+  border-bottom: 10px solid #acacac;
+  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
+  top: -10px;
+}
+#powerTip.nw-alt:before, #powerTip.ne-alt:before, #powerTip.sw-alt:before, #powerTip.se-alt:before {
+  border-top: 10px solid #acacac;
+  border-top: 10px solid rgba(172, 172, 172, 0.8);
+  bottom: -10px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  left: 10px;
+}
+#powerTip.ne-alt:before {
+  left: auto;
+  right: 10px;
+}
+#powerTip.sw-alt:before, #powerTip.se-alt:before {
+  border-top: none;
+  border-bottom: 10px solid #acacac;
+  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
+  bottom: auto;
+  top: -10px;
+}
+#powerTip.se-alt:before {
+  left: auto;
+  right: 10px;
+}
 .clearfix:after {
   content:".";
   display:block;
@@ -1359,29 +1457,31 @@ div.game_config div.color_submits button.random span {
 }
 #hooks_chart {
   position: absolute;
-  top: 128px;
+  top: 0;
-  left: 128px;
+  left: 0;
-  width: 256px;
+  width: 512px;
-  height: 256px;
+  height: 512px;
-  background: rgba(255, 255, 255, 0.5);
 }
 #hooks_chart > span.label {
   font-size: 8px;
   position: absolute;
   left: 3px;
-  bottom: 3px;
+  bottom: -13px;
+  text-shadow: 0 0 3px #fff;
+  font-weight: bold;
 }
 #hooks_chart .canvas {
   position: relative;
-  width: 256px;
+  width: 512px;
-  height: 256px;
+  height: 512px;
 }
 #hooks_chart .plot {
   position: absolute;
-  width: 13px;
+  width: 17px;
-  height: 13px;
+  height: 17px;
   background: #d0d0d0;
   border: 3px solid #666;
+  box-shadow: 0 0 5px #777;
   cursor: pointer;
   z-index: 1;
 }
@@ -1398,20 +1498,20 @@ div.game_config div.color_submits button.random span {
   -o-transform:rotate(45deg);
   -webkit-transform:rotate(45deg);
   -ms-transform:rotate(45deg);
-  width: 11px;
+  width: 15px;
-  height: 11px;
+  height: 15px;
 }
 #hooks_chart .plot.chess960 {
   border-style: double;
   border-width: 5px;
 }
 #hooks_chart .plot.casual.chess960 {
-  width: 9px;
+  width: 13px;
-  height: 9px;
+  height: 13px;
 }
 #hooks_chart .plot.rated.chess960 {
-  width: 7px;
+  width: 11px;
-  height: 7px;
+  height: 11px;
 }
 #hooks_chart .plot.cancel {
   background: #666;
@@ -1432,45 +1532,24 @@ div.game_config div.color_submits button.random span {
   box-shadow:0 0 5px #333;
   text-decoration: none;
 }
-#hooks > div {
+#powerTip.hook {
-  position: absolute;
+  display: block;
-  width: 128px;
-  height: 128px;
-  background: none;
-}
-#hooks div.hook {
-  display: none;
-  position: relative;
   width: 120px;
   height: 120px;
-  z-index: 9;
-  margin: 4px;
-  border-radius: 3px;
-  cursor: pointer;
   color: #444;
   text-align: center;
+  border: none;
+  box-shadow:0 0 9px #333;
   background: #d0d0d0 url(../images/play128.png) -4px -4px;
-  box-shadow:0 0 5px #333;
 }
-#hooks div.hook.cancel {
+#hooks_chart .plot:hover {
-  background-position: -4px -132px;
-}
-#hooks_chart .plot.hover,
-#hooks div.hook.hover {
   background-color: #f6f6f6;
 }
-#hooks_chart .plot.hover,
+#hooks_chart .plot:hover,
-#hooks div.hook.hover,
 #hooks_wrap > a.no_hook:hover {
-  box-shadow: 0 0 9px #d85000;
+  box-shadow: 0 0 9px #d85000 !important;
 }
-#hooks div.hook a {
+#powerTip.hook .opponent {
-  color: #444;
-}
-#hooks a.action {
-  display: none;
-}
-#hooks div.hook .opponent {
   border-radius: 3px 3px 0 0;
   display: block;
   height: 20px;
@@ -1481,14 +1560,14 @@ div.game_config div.color_submits button.random span {
   overflow: hidden;
   text-decoration: none;
 }
-#hooks div.hook a.opponent:hover {
+#powerTip.hook a.opponent:hover {
   text-decoration: underline;
 }
-#hooks .clearfix {
+#powerTip.hook .clearfix {
   width: 100%;
   height: 30px;
 }
-#hooks .elo, #hooks .clock {
+#powerTip.hook .elo, #powerTip.hook .clock {
   display: block;
   width: 60px;
   height: 20px;
@@ -1496,31 +1575,31 @@ div.game_config div.color_submits button.random span {
   font-size: 1.25em;
   font-weight: bold;
 }
-#hooks .elo {
+#powerTip.hook .elo {
   float: right;
   color: #bbb;
   background: #666;
 }
-#hooks .clock {
+#powerTip.hook .clock {
   float: left;
   color: #555;
 }
-#hooks .clock > span {
+#powerTip.hook .clock > span {
   color: #909090;
 }
-#hooks .clock.nope {
+#powerTip.hook .clock.nope {
   font-size: 2.3em;
   padding-top: 3px;
   line-height: 20px;
 }
-#hooks .mode {
+#powerTip.hook .mode {
   margin-top: 40px;
 }
-#hooks .mode, #hooks .chess960 {
+#powerTip.hook .mode, #powerTip.hook .chess960 {
   font-size: 1.25em;
   display: block;
 }
-#hooks .color {
+#powerTip.hook .color {
   position: absolute;
   bottom: 5px;
   left: 5px;
@@ -1529,10 +1608,10 @@ div.game_config div.color_submits button.random span {
   height: 16px;
   background-position: 0 -240px;
 }
-#hooks .color.black {
+#powerTip.hook .color.black {
   background-position: 0 -256px;
 }
-#hooks .engine {
+#powerTip.hook .engine {
   position: absolute;
   bottom: 0px;
   right: 0px;
@@ -1794,104 +1873,6 @@ div.relation_actions .icon span {
   width: 16px;
   height: 16px;
 }
-#powerTip {
-  width: 240px;
-  min-height: 6em;
-  cursor: default;
-  background-color: #f0f0f0;
-  border: 1px solid #c0c0c0;
-  border-radius: 4px;
-  display: none;
-  position: absolute;
-  z-index: 2147483647;
-}
-#powerTip > .title {
-  padding: 8px;
-  border-bottom: 1px solid #c0c0c0;
-}
-#powerTip > .content {
-  text-align: right;
-  padding: 16px 8px;
-}
-#powerTip:before {
-  content:"";
-  position: absolute;
-}
-#powerTip.n:before, #powerTip.s:before {
-  border-right: 5px solid transparent;
-  border-left: 5px solid transparent;
-  left: 50%;
-  margin-left: -5px;
-}
-#powerTip.e:before, #powerTip.w:before {
-  border-bottom: 5px solid transparent;
-  border-top: 5px solid transparent;
-  margin-top: -5px;
-  top: 50%;
-}
-#powerTip.n:before {
-  border-top: 10px solid #acacac;
-  border-top: 10px solid rgba(172, 172, 172, 0.8);
-  bottom: -10px;
-}
-#powerTip.e:before {
-  border-right: 10px solid #acacac;
-  border-right: 10px solid rgba(172, 172, 172, 0.8);
-  left: -10px;
-}
-#powerTip.s:before {
-  border-bottom: 10px solid #acacac;
-  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
-  top: -10px;
-}
-#powerTip.w:before {
-  border-left: 10px solid #acacac;
-  border-left: 10px solid rgba(172, 172, 172, 0.8);
-  right: -10px;
-}
-#powerTip.ne:before, #powerTip.se:before {
-  border-right: 10px solid transparent;
-  border-left: 0;
-  left: 10px;
-}
-#powerTip.nw:before, #powerTip.sw:before {
-  border-left: 10px solid transparent;
-  border-right: 0;
-  right: 10px;
-}
-#powerTip.ne:before, #powerTip.nw:before {
-  border-top: 10px solid #acacac;
-  border-top: 10px solid rgba(172, 172, 172, 0.8);
-  bottom: -10px;
-}
-#powerTip.se:before, #powerTip.sw:before {
-  border-bottom: 10px solid #acacac;
-  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
-  top: -10px;
-}
-#powerTip.nw-alt:before, #powerTip.ne-alt:before, #powerTip.sw-alt:before, #powerTip.se-alt:before {
-  border-top: 10px solid #acacac;
-  border-top: 10px solid rgba(172, 172, 172, 0.8);
-  bottom: -10px;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  left: 10px;
-}
-#powerTip.ne-alt:before {
-  left: auto;
-  right: 10px;
-}
-#powerTip.sw-alt:before, #powerTip.se-alt:before {
-  border-top: none;
-  border-bottom: 10px solid #acacac;
-  border-bottom: 10px solid rgba(172, 172, 172, 0.8);
-  bottom: auto;
-  top: -10px;
-}
-#powerTip.se-alt:before {
-  left: auto;
-  right: 10px;
-}
 #powerTip.messages {
   width: 400px;
   padding: 1em;

public/stylesheets/dark.css

@@ -264,8 +264,7 @@ body.dark #lichess_forum div.post .message,
 body.dark #lichess_message div.thread_message div.thread_message_body,
 body.dark #GameText a.move,
 body.dark form.translation_form div.message label,
-body.dark div.content_box h1,
+body.dark div.content_box h1
-body.dark #hooks a
 {
   color: #b0b0b0;
 }
@@ -369,8 +368,14 @@ body.dark #top a.goto_nav.current {
   background: -ms-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
   background: -o-linear-gradient(top , #808080, #606060) repeat scroll 0 0 #606060;
 }
-body.dark #hooks_chart {
+body.dark #hooks_chart .plot {
-  background: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0 5px #000;
+}
+body.dark #hooks_chart > span.label {
+  text-shadow: 0 0 3px #000;
+}
+body.dark #powerTip.hook {
+  background: #d0d0d0 url(../images/play128.png) -4px -4px;
 }
 body.dark .s16.ddown {
   background-position: right -368px;

todo

@@ -68,6 +68,7 @@ show friend games in homepage board
 allow to filter anon
 add fast tooltips to plots
 replace plot with watch plot when game starts
+real rematch against AI
 
 ---