Merge branch 'search-rank' of git://github.com/370417/lila into 370417-search-rank

* 'search-rank' of git://github.com/370417/lila:
  Search for players by rank in tournaments

ui/tournament/src/ctrl.ts

@@ -1,6 +1,6 @@
 import makeSocket from './socket';
 import * as xhr from './xhr';
-import { myPage, players } from './pagination';
+import { maxPerPage, myPage, players } from './pagination';
 import * as sound from './sound';
 import * as tour from './tournament';
 import { TournamentData, TournamentOpts, Pages, PlayerInfo, TeamInfo, Standing, Player } from './interfaces';
@@ -111,6 +111,19 @@ export default class TournamentController {
     });
   };
 
+  jumpToRank = (rank: number) => {
+    if (!Number.isInteger(rank) || rank < 1) return;
+    const page = 1 + Math.floor((rank - 1) / maxPerPage);
+    const row = (rank - 1) % maxPerPage;
+    xhr.loadPage(this, page, () => {
+      if (!this.pages[page] || row >= this.pages[page].length) return;
+      this.page = page;
+      this.searching = false;
+      this.focusOnMe = false;
+      this.showPlayerInfo(this.pages[page][row]);
+    });
+  };
+
   userSetPage = (page: number) => {
     this.focusOnMe = false;
     this.setPage(page);

ui/tournament/src/pagination.ts

@@ -4,7 +4,7 @@ import { MaybeVNodes, Pagination } from './interfaces';
 import { bind } from './view/util';
 import * as search from './search';
 
-const maxPerPage = 10;
+export const maxPerPage = 10;
 
 function button(text: string, icon: string, click: () => void, enable: boolean, ctrl: TournamentController): VNode {
   return h('button.fbt.is', {

ui/tournament/src/search.ts

@@ -17,7 +17,7 @@ export function input(ctrl: TournamentController): VNode {
   return h(
     'div.search',
     h('input', {
-      hook: onInsert((el: HTMLInputElement) =>
+      hook: onInsert((el: HTMLInputElement) => {
         lichess.userComplete().then(uac => {
           uac({
             input: el,
@@ -30,8 +30,17 @@ export function input(ctrl: TournamentController): VNode {
             },
           });
           el.focus();
-        })
-      ),
+        });
+        $(el).on('keydown', e => {
+          if (e.code === 'Enter' && el.value.startsWith('#')) {
+            ctrl.jumpToRank(Number(el.value.slice(1)));
+          }
+          if (e.code === 'Escape') {
+            ctrl.toggleSearch();
+            ctrl.redraw();
+          }
+        });
+      }),
     })
   );
 }

ui/tournament/src/xhr.ts

@@ -32,9 +32,10 @@ export const withdraw = throttle(1000, (ctrl: TournamentController) =>
     .catch(onFail)
 );
 
-export const loadPage = throttle(1000, (ctrl: TournamentController, p: number) =>
+export const loadPage = throttle(1000, (ctrl: TournamentController, p: number, callback?: () => void) =>
   xhr.json(`/tournament/${ctrl.data.id}/standing/${p}`).then(data => {
     ctrl.loadPage(data);
+    callback?.();
     ctrl.redraw();
   }, onFail)
 );