lobby sort and reactivity improvements - resolves #170

public/stylesheets/dark.css

@@ -100,7 +100,7 @@ body.dark #powerTip > .title,
 body.dark #hooks_wrap .table_wrap th,
 body.dark #hooks_wrap .table_wrap td,
 body.dark #hooks_wrap,
-body.dark #hooks_wrap > div.tabs > a,
+body.dark #hooks_wrap div.tabs a,
 body.dark #hooks_wrap .hooks_chart > div.grid,
 body.dark div.vstext,
 body.dark div.user_show div.content_box_inter.tabs,
@@ -149,7 +149,7 @@ body.dark #translation_call div.progressbar,
 body.dark #themepicker div.theme:hover {
   background-color: #505050;
 }
-body.dark #hooks_wrap > div.tabs > a,
+body.dark #hooks_wrap div.tabs a,
 body.dark #top div.auth .links a:hover,
 body.dark #top ul.language_links a:hover,
 body.dark #top ul.language_links a.current,
@@ -213,14 +213,14 @@ body.dark #hooks_wrap .hook_filter .checkable {
   color: #c0c0c0;
 }
 body.dark #hooks_wrap,
-body.dark #hooks_wrap > div.tabs > a:hover,
-body.dark #hooks_wrap > div.tabs > a.active {
+body.dark #hooks_wrap div.tabs a:hover,
+body.dark #hooks_wrap div.tabs a.active {
   background-color: #303030;
 }
-body.dark #hooks_wrap > div.tabs > a:hover {
+body.dark #hooks_wrap div.tabs a:hover {
   border-top-color: #808080;
 }
-body.dark #hooks_wrap > div.tabs > a.active {
+body.dark #hooks_wrap div.tabs a.active {
   border-bottom-color: #303030;
   border-top-color: #d85000;
 }

public/stylesheets/home.css

@@ -32,14 +32,17 @@ div.lobby_and_ground {
   background: #f0f0f0 url(../images/wN-bg.svg);
   background-size: 100% 100%;
 }
-#hooks_wrap > .tabs {
+#hooks_wrap .lobby_box {
+  position: relative;
+}
+#hooks_wrap .tabs {
   position: absolute;
   top: -22px;
   left: 0px;
   height: 20px;
   line-height: 20px;
 }
-#hooks_wrap > .tabs > a {
+#hooks_wrap .tabs a {
   display: inline-block;
   text-decoration: none;
   padding: 0px 8px;
@@ -48,43 +51,40 @@ div.lobby_and_ground {
   background: #dadada;
   transition: 0.13s;
 }
-#hooks_wrap > .tabs > a:hover,
-#hooks_wrap > .tabs > a.active {
+#hooks_wrap .tabs a:hover {
   background: #f0f0f0;
-}
-#hooks_wrap > .tabs > a:hover {
   border-top: 2px solid #808080;
 }
-#hooks_wrap > .tabs > a.active {
+#hooks_wrap .tabs a.active {
+  background: #f0f0f0;
   font-weight: bold;
   border-bottom-color: #f0f0f0;
   border-top: 2px solid #d85000;
 }
-#hooks_wrap > .tabs .unread {
+#hooks_wrap .tabs .unread {
   margin-left: 3px;
 }
-#hooks_wrap .toggles {
+#hooks_wrap .mode_toggle,
+#hooks_wrap .filter_toggle {
   position: absolute;
-  top: 13px;
-  left: 15px;
-  width: 483px;
+  top: 10px;
+  cursor: pointer;
   z-index: 2;
+  font-size: 1.3em;
+  opacity: 0.7;
+  transition: 0.13s;
 }
 #hooks_wrap .mode_toggle {
-  float: left;
-  cursor: pointer;
+  left: 15px;
 }
 #hooks_wrap .filter_toggle {
-  float: right;
-  cursor: pointer;
-  font-size: 1.2em;
-  opacity: 0.8;
-  transition: 0.13s;
+  right: 15px;
 }
 #hooks_wrap .filter_toggle .number {
   margin-left: 3px;
   font-size: 0.8em;
 }
+#hooks_wrap .mode_toggle:hover,
 #hooks_wrap .filter_toggle:hover {
   opacity: 1;
 }
@@ -127,21 +127,23 @@ div.lobby_and_ground {
   min-height: 78px;
   overflow: hidden;
 }
-#hooks_wrap .table_wrap thead th {
+#hooks_wrap .table_wrap th {
   padding: 14px 12px;
   font-weight: lighter;
   border-bottom: transparent;
 }
-#hooks_wrap .table_wrap th.sorting-asc,
-#hooks_wrap .table_wrap th.sorting-desc {
+#hooks_wrap .table_wrap th.sortable {
+  cursor: pointer;
+}
+#hooks_wrap .table_wrap th.sortable:hover,
+#hooks_wrap .table_wrap th.sort {
   font-weight: normal;
 }
-#hooks_wrap .table_wrap th.sorting-desc .is:before {
+#hooks_wrap .table_wrap th.sort .is:before {
+  opacity: 0.7;
+  margin-right: 3px;
   content: "R";
 }
-#hooks_wrap .table_wrap th.sorting-asc .is:before {
-  content: "S";
-}
 #hooks_wrap .table_wrap th.player {
   width: 110px;
 }

ui/lobby/src/ctrl.js

@@ -18,9 +18,8 @@ module.exports = function(env) {
   this.vm = {
     tab: store.tab.get(),
     mode: store.mode.get(),
-    filter: {
-      open: false
-    },
+    sort: store.sort.get(),
+    filterOpen: false,
     stepHooks: this.data.hooks.slice(0),
     stepping: false,
     redirecting: false
@@ -44,7 +43,7 @@ module.exports = function(env) {
         doFlushHooks();
       }.bind(this), 500);
     }
-    flushHooksSchedule();
+    flushHooksTimeout = flushHooksSchedule();
   }.bind(this);
 
   var flushHooksSchedule = util.partial(setTimeout, this.flushHooks, 8000);
@@ -53,20 +52,26 @@ module.exports = function(env) {
   this.setTab = function(tab) {
     if (tab === 'seeks' && tab !== this.vm.tab) xhr.seeks().then(this.setSeeks);
     this.vm.tab = store.tab.set(tab);
-    this.vm.filter.open = false;
+    this.vm.filterOpen = false;
   }.bind(this);
 
   this.setMode = function(mode) {
     this.vm.mode = store.mode.set(mode);
-    this.vm.filter.open = false;
+    this.vm.filterOpen = false;
+  }.bind(this);
+
+  this.setSort = function(sort) {
+    this.vm.sort = store.sort.set(sort);
   }.bind(this);
 
   this.toggleFilter = function() {
-    this.vm.filter.open = !this.vm.filter.open;
+    this.vm.filterOpen = !this.vm.filterOpen;
   }.bind(this);
 
   this.setFilter = function(filter) {
     this.data.filter = filter;
+    this.flushHooks(true);
+    if (this.vm.tab !== 'real_time') m.redraw();
   }.bind(this);
 
   this.clickHook = function(id) {

ui/lobby/src/hookRepo.js

@@ -1,9 +1,21 @@
-function order(a, b) {
+function ratingOrder(a, b) {
   return a.rating > b.rating ? -1 : 1;
 }
 
-function sort(ctrl) {
-  ctrl.data.hooks.sort(order);
+function timeOrder(a, b) {
+  return a.time < b.time ? -1 : 1;
+}
+
+function sort(ctrl, hooks) {
+  var order;
+  switch(ctrl.vm.sort) {
+    case 'time':
+      order = timeOrder;
+      break;
+    default:
+      order = ratingOrder;
+  }
+  hooks.sort(order);
 }
 
 function init(hook) {
@@ -12,7 +24,6 @@ function init(hook) {
 
 function initAll(ctrl) {
   ctrl.data.hooks.forEach(init);
-  sort(ctrl);
 }
 
 module.exports = {
@@ -22,7 +33,6 @@ module.exports = {
   add: function(ctrl, hook) {
     init(hook);
     ctrl.data.hooks.push(hook);
-    sort(ctrl);
   },
   remove: function(ctrl, id) {
     ctrl.data.hooks = ctrl.data.hooks.filter(function(h) {

ui/lobby/src/store.js

@@ -12,26 +12,29 @@ var mode = {
     return m;
   }
 };
+var sort = {
+  key: 'lichess.lobby.sort',
+  fix: function(m) {
+    if (['rating', 'time'].indexOf(m) === -1) m = 'rating';
+    return m;
+  }
+};
 
-module.exports = {
-  tab: {
+function makeStore(conf) {
+  return {
     set: function(t) {
-      t = tab.fix(t);
-      lichess.storage.set(tab.key, t);
+      t = conf.fix(t);
+      lichess.storage.set(conf.key, t);
       return t;
     },
     get: function() {
-      return tab.fix(lichess.storage.get(tab.key));
+      return conf.fix(lichess.storage.get(conf.key));
     }
-  },
-  mode: {
-    set: function(m) {
-      m = mode.fix(m);
-      lichess.storage.set(mode.key, m);
-      return m;
-    },
-    get: function() {
-      return mode.fix(lichess.storage.get(mode.key));
-    }
-  }
+  };
+}
+
+module.exports = {
+  tab: makeStore(tab),
+  mode: makeStore(mode),
+  sort: makeStore(sort)
 };

ui/lobby/src/view/main.js

@@ -20,6 +20,6 @@ module.exports = function(ctrl) {
   }
   return [
     m('div.tabs', renderTabs(ctrl)),
-    body
+    m('div.lobby_box', body)
   ];
 };

ui/lobby/src/view/realTime/filter.js

@@ -56,10 +56,10 @@ function initialize(ctrl, el) {
 module.exports = {
   toggle: function(ctrl, nbFiltered) {
     return m('span', {
-      class: 'filter_toggle' + (ctrl.vm.filter.open ? ' active' : ''),
+      class: 'filter_toggle' + (ctrl.vm.filterOpen ? ' active' : ''),
       onclick: util.partial(ctrl.toggleFilter)
     }, [
-      ctrl.vm.filter.open ? m('span[data-icon=L]') : m('span', {
+      ctrl.vm.filterOpen ? m('span[data-icon=L]') : m('span', {
         class: 'hint--bottom-left',
         'data-hint': ctrl.trans('filterGames'),
       }, m('span[data-icon=%]')),

ui/lobby/src/view/realTime/list.js

@@ -1,6 +1,7 @@
 var m = require('mithril');
 var util = require('chessground').util;
 var tds = require('../util').tds;
+var hookRepo = require('../../hookRepo');
 
 function renderHook(ctrl, hook) {
   return m('tr', {
@@ -41,15 +42,29 @@ module.exports = {
     var hooks = allHooks.slice(0, max);
     var render = util.partial(renderHook, ctrl);
     var standards = hooks.filter(isStandard(true));
+    hookRepo.sort(ctrl, standards);
     var variants = hooks.filter(isStandard(false))
       .slice(0, Math.max(0, max - standards.length - 1));
+    hookRepo.sort(ctrl, variants);
     return m('table.table_wrap', [
       m('thead',
         m('tr', [
           m('th'),
           m('th', ctrl.trans('player')),
-          m('th', 'Rating'),
-          m('th', ctrl.trans('time')),
+          m('th', {
+            class: util.classSet({
+              sortable: true,
+              sort: ctrl.vm.sort === 'rating'
+            }),
+            onclick: util.partial(ctrl.setSort, 'rating')
+          }, [m('i.is'), 'Rating']),
+          m('th', {
+            class: util.classSet({
+              sortable: true,
+              sort: ctrl.vm.sort === 'time'
+            }),
+            onclick: util.partial(ctrl.setSort, 'time')
+          }, [m('i.is'), ctrl.trans('time')]),
           m('th', ctrl.trans('mode'))
         ])
       ),

ui/lobby/src/view/realTime/main.js

@@ -7,26 +7,26 @@ var filterView = require('./filter');
 
 module.exports = function(ctrl) {
   var filterBody, body, nbFiltered, modeToggle;
-  if (ctrl.vm.filter.open) filterBody = filterView.render(ctrl);
+  if (ctrl.vm.filterOpen) filterBody = filterView.render(ctrl);
   switch (ctrl.vm.mode) {
     case 'chart':
-      var res = filter(ctrl, ctrl.data.hooks), hooks = res.visible;
+      var res = filter(ctrl, ctrl.data.hooks),
+        hooks = res.visible;
       nbFiltered = res.hidden;
       body = filterBody || chart.render(ctrl, hooks);
-      modeToggle = ctrl.vm.filter.open ? null : chart.toggle(ctrl);
+      modeToggle = ctrl.vm.filterOpen ? null : chart.toggle(ctrl);
       break;
     default:
-      var res = filter(ctrl, ctrl.vm.stepHooks), hooks = res.visible;
+      var res = filter(ctrl, ctrl.vm.stepHooks),
+        hooks = res.visible;
       nbFiltered = res.hidden;
       body = filterBody || list.render(ctrl, hooks);
-      modeToggle = ctrl.vm.filter.open ? null : list.toggle(ctrl);
+      modeToggle = ctrl.vm.filterOpen ? null : list.toggle(ctrl);
   }
   var filterToggle = filterView.toggle(ctrl, nbFiltered);
   return [
-    m('div.toggles', [
-      filterToggle,
-      modeToggle
-    ]),
+    filterToggle,
+    modeToggle,
     body
   ];
 }