ui/cli WIP

public/stylesheets/cli.css

@@ -0,0 +1,4 @@
+#clinput .tt-menu .empty,
+#clinput .tt-menu .spinner {
+  display: none;
+}

public/stylesheets/common.css

@@ -547,10 +547,6 @@ body.offline #reconnecting,
 #clinput input:focus {
   outline: none;
 }
-#clinput .tt-menu .empty,
-#clinput .tt-menu .spinner {
-  display: none;
-}
 body.dark #clinput input {
   color: #aaa;
 }

ui/build

@@ -10,7 +10,7 @@ mkdir -p public/compiled
 
 ts_apps1="common chess"
 ts_apps2="ceval game tree chat"
-apps="site chat challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule simul perfStat dasher"
+apps="site chat cli challenge notify learn insight editor puzzle round analyse lobby tournament tournamentSchedule simul perfStat dasher"
 
 YARN_MUTEX="${TMPDIR-/tmp}/.yarn-mutex"
 build_ts() {

ui/cli/package.json

@@ -5,11 +5,9 @@
   "author": "Thibault Duplessis",
   "license": "AGPL-3.0",
   "dependencies": {
-    "snabbdom": "ornicar/snabbdom#lichess"
   },
   "devDependencies": {
     "@types/jquery": "^2.0",
-    "@types/jqueryui": "^1.11",
     "browserify": "^14",
     "gulp": "^3",
     "gulp-uglify": "^3",

ui/cli/src/main.ts

@@ -1 +1,28 @@
 /// <reference types="types/lichess" />
+
+export function app(wrap: HTMLElement, toggle: () => void) {
+  const $wrap = $(wrap), $input = $wrap.find('input');
+  window.lichess.userAutocomplete($input, {
+    focus: 1,
+    friend: true,
+    onSelect(q: any) {
+      execute(q.name || q);
+      $input.val('');
+    }
+  }).done(function() {
+    $input.on('blur', toggle);
+  });
+}
+
+function execute(q: string) {
+  if (!q) return;
+  if (q[0] === '/') command(q.slice(1));
+  else location.href = '/@/' + q;
+}
+
+function command(q: string) {
+  var parts = q.split(' '), exec = parts[0];
+  if (exec === 'tv' || exec === 'follow') location.href = '/@/' + parts[1] + '/tv';
+  else if (exec === 'play' || exec === 'challenge' || exec === 'match') location.href = '/?user=' + parts[1] + '#friend';
+  else alert('Unknown command: ' + q);
+}

ui/site/src/cli.js

@@ -1,39 +0,0 @@
-var $wrap = $('#clinput');
-if (!$wrap.length) return;
-
-function toggle() {
-  $wrap.toggleClass('shown');
-  var $input = $wrap.find('input');
-  if (!$wrap.hasClass('init')) {
-    $wrap.addClass('init');
-    lichess.userAutocomplete($input, {
-      focus: 1,
-      friend: true,
-      onSelect: function(q) {
-        execute(q);
-        $input.val('');
-      }
-    }).done(function() {
-      $input.on('blur', toggle);
-    });
-  }
-  if ($wrap.hasClass('shown')) $input.focus();
-}
-
-function execute(q) {
-  if (!q) return;
-  if (q[0] === '/') command(q.slice(1));
-  else location.href = '/@/' + (q.name || q);
-}
-
-function command(q) {
-  var parts = q.split(' '), exec = parts[0];
-  if (exec === 'tv' || exec === 'follow') location.href = '/@/' + parts[1] + '/tv';
-  else if (exec === 'play' || exec === 'challenge' || exec === 'match') location.href = '/?user=' + parts[1] + '#friend';
-  else alert('Unknown command: ' + q);
-}
-
-Mousetrap.bind('s', function() {
-  setTimeout(toggle, 150);
-});
-$wrap.find('a').on('click', toggle);

ui/site/src/index.js

@@ -3,4 +3,3 @@ require('./timeago');
 require('./trans');
 require('./socket');
 require('./main');
-require('./cli');

ui/site/src/main.js

@@ -514,6 +514,32 @@ lichess.topMenuIntent = function() {
         });
       })();
 
+      // cli
+      (function() {
+        var $wrap = $('#clinput');
+        if (!$wrap.length) return;
+        var booted;
+        var boot = function() {
+          if (booted) return;
+          booted = true;
+          lichess.loadCss('/assets/stylesheets/cli.css');
+          lichess.loadScript("/assets/compiled/lichess.cli" + ($('body').data('dev') ? '' : '.min') + '.js').done(function() {
+            LichessCli.app($wrap, toggle);
+          });
+        }
+        var toggle = function() {
+          boot();
+          $wrap.toggleClass('shown');
+          if ($wrap.hasClass('shown')) $wrap.find('input').focus();
+        };
+        $wrap.children('a').one('mouseover click', function(e) {
+          if (e.type === 'mouseover') boot(); else toggle();
+        });
+        Mousetrap.bind('s', function() {
+          setTimeout(toggle, 150);
+        });
+      })();
+
       $('input.user-autocomplete').each(function() {
         var opts = {
           focus: 1,