Lobby improvements and fixes

Filter and chart for correspondence, improve sorting, many fixes

app/views/setup/filter.scala

@@ -13,7 +13,6 @@ object filter {
 
   def apply(form: Form[_])(implicit ctx: Context) =
     frag(
-      cssTag("lobby.setup"),
       st.form(novalidate)(
         table(
           tbody(
@@ -27,11 +26,11 @@ object filter {
                 )
               )
             ),
-            tr(
+            tr(cls := "f-real_time")(
               td(trans.timeControl()),
               td(renderCheckboxes(form, "speed", translatedSpeedChoices))
             ),
-            tr(cls := "inline")(
+            tr(cls := "inline f-real_time")(
               td(trans.byoyomi()),
               td(
                 renderCheckboxes(
@@ -41,7 +40,7 @@ object filter {
                 )
               )
             ),
-            tr(cls := "inline")(
+            tr(cls := "inline f-real_time")(
               td(trans.increment()),
               td(
                 renderCheckboxes(
@@ -51,6 +50,10 @@ object filter {
                 )
               )
             ),
+            tr(cls := "f-seeks days")(
+              td(trans.daysPerTurn()),
+              td(renderCheckboxes(form, "days", translatedCorresDaysChoices))
+            ),
             ctx.isAuth option tr(cls := "inline")(
               td(trans.mode()),
               td(renderCheckboxes(form, "mode", translatedModeChoices))

ui/lobby/css/app/_app.scss

@@ -66,5 +66,14 @@
     &:hover {
       color: $c-accent-dim;
     }
+    i {
+      margin-left: 0.2rem;
+      font-size: 11px;
+    }
   }
 }
+
+.hook__filters {
+  // will be overridden by _hook-filter.scss once it's loaded
+  display: none;
+}

ui/lobby/css/app/_hook-filter.scss

@@ -3,6 +3,7 @@
   background: fade-out($c-bg-high, 0.5);
   height: 100%;
   white-space: nowrap;
+  display: block;
   td {
     padding: 1em 0;
   }
@@ -26,12 +27,15 @@
   .regular-checkbox {
     @extend %checkbox;
   }
-  tr.variant td:last-child {
-    display: flex;
-    flex-flow: row wrap;
-  }
-  tr.variant .checkable {
-    width: 33.3%;
+  tr.variant,
+  tr.days {
+    td:last-child {
+      display: flex;
+      flex-flow: row wrap;
+    }
+    .checkable {
+      width: 33.3%;
+    }
   }
   tr.inline .checkable {
     display: inline-block;

ui/lobby/css/app/_hook-list.scss

@@ -22,7 +22,7 @@
     }
     &.variants td {
       text-align: center;
-      padding: 3px 0;
+      padding: 4px 0;
       background: none;
       text-transform: uppercase;
       letter-spacing: 3px;
@@ -34,16 +34,23 @@
     padding: 1em;
     &.sortable {
       cursor: pointer;
+      padding-left: 0;
     }
     &.sortable:hover,
     &.sort {
       font-weight: normal;
     }
-    &.sort .is:before {
-      opacity: 0.7;
+    &.sortable .is:before {
+      opacity: 0;
       margin-right: 3px;
       content: 'R';
     }
+    &.sortable.reverse .is:before {
+      content: 'S';
+    }
+    &.sort .is:before {
+      opacity: 0.7;
+    }
     &.player {
       width: 110px;
     }
@@ -78,7 +85,7 @@
 .lseeks .create {
   margin-top: 20px;
   text-align: center;
-  a {
+  a.accent {
     background: $c-accent;
     &:hover {
       background: $c-accent;

ui/lobby/src/boot.ts

@@ -10,7 +10,7 @@ export default function boot(cfg, element) {
       var gameId = getParameterByName('hook_like');
       if (!gameId) return;
       $.post(`/setup/hook/${window.lishogi.sri}/like/${gameId}?rr=${lobby.setup.ratingRange() || ''}`);
-      lobby.setTab('presets');
+      lobby.setTab('real_time', false);
       history.replaceState(null, '', '/');
     };
   window.lishogi.socket = window.lishogi.StrongSocket('/lobby/socket/v4', false, {

ui/lobby/src/ctrl.ts

@@ -5,6 +5,7 @@ import * as seekRepo from './seekRepo';
 import Setup from './setup';
 import LobbySocket from './socket';
 import { Stores, make as makeStores } from './store';
+import { action } from './util';
 import variantConfirm from './variant';
 import * as xhr from './xhr';
 
@@ -47,11 +48,10 @@ export default class LobbyController {
       rating: opts.data.me?.rating && parseInt(opts.data.me.rating),
       ratingDiff: 300,
     };
-    this.filter = new Filter(li.storage.make('lobby.filter'), this);
+    this.filter = new Filter(li.storage.make('lobby.filter2'), this);
     this.setup = new Setup(li.storage.make, this);
     this.initAllPresets();
 
-    seekRepo.sort(this);
     this.socket = new LobbySocket(opts.socketSend, this);
 
     this.stores = makeStores(this.data.me ? this.data.me.username.toLowerCase() : null);
@@ -149,8 +149,9 @@ export default class LobbyController {
     this.filter.open = false;
   };
 
-  setSort = (sort: Sort) => {
-    this.sort = this.stores.sort.set(sort);
+  setSort = (sort: Extract<'rating' | 'time', Sort>) => {
+    if (sort === this.sort) this.sort = this.stores.sort.set(sort + '-reverse');
+    else this.sort = this.stores.sort.set(sort);
   };
 
   onSetFilter = () => {
@@ -161,22 +162,21 @@ export default class LobbyController {
   clickHook = (id: string) => {
     const hook = hookRepo.find(this, id);
     if (!hook || hook.disabled || this.stepping || this.redirecting) return;
-    const action = hookRepo.action(hook);
-    if (action === 'cancel' || variantConfirm(hook.variant || 'standard', this.trans.noarg))
-      this.socket.send(action, hook.id);
+    const act = action(hook);
+    if (act === 'cancel' || variantConfirm(hook.variant || 'standard', this.trans.noarg))
+      this.socket.send(act, hook.id);
   };
 
   clickSeek = (id: string) => {
     const seek = seekRepo.find(this, id);
     if (!seek || this.redirecting) return;
-    const action = seekRepo.action(seek, this);
-    if (action === 'cancelSeek' || variantConfirm(seek.variant || 'standard', this.trans.noarg))
-      this.socket.send(action, seek.id);
+    const act = action(seek);
+    if (act === 'cancel' || variantConfirm(seek.variant || 'standard', this.trans.noarg))
+      this.socket.send(act + 'Seek', seek.id);
   };
 
   setSeeks = (seeks: Seek[]) => {
     this.data.seeks = seeks;
-    seekRepo.sort(this);
     this.redraw();
   };
 

ui/lobby/src/filter.ts

@@ -1,7 +1,7 @@
 import LobbyController from './ctrl';
 import { FormLines, FormObject, FormStore, makeStore, toFormLines, toFormObject } from './form';
-import { action } from './hookRepo';
-import { Hook } from './interfaces';
+import { Hook, Seek } from './interfaces';
+import { action } from './util';
 
 interface FilterData {
   form: FormLines;
@@ -13,6 +13,11 @@ interface Filtered {
   hidden: number;
 }
 
+interface FilteredSeeks {
+  visible: Seek[];
+  hidden: number;
+}
+
 export default class Filter {
   store: FormStore;
   data: FilterData | null;
@@ -37,9 +42,10 @@ export default class Filter {
     };
   };
 
-  save = (form: HTMLFormElement) => {
-    const lines = toFormLines(form);
-    this.store.set(lines);
+  save = (form: HTMLFormElement | null) => {
+    const lines = form && toFormLines(form);
+    if (lines) this.store.set(lines);
+    else this.store.remove();
     this.set(lines);
     this.root.onSetFilter();
   };
@@ -48,7 +54,6 @@ export default class Filter {
     if (!this.data) return { visible: hooks, hidden: 0 };
     const f = this.data.filter,
       ratingRange = f.ratingRange?.split('-').map(r => parseInt(r, 10)),
-      seen: string[] = [],
       visible: Hook[] = [];
     let variant: string,
       hidden = 0;
@@ -66,9 +71,7 @@ export default class Filter {
         ) {
           hidden++;
         } else {
-          const hash = hook.ra + variant + hook.t + hook.rating;
-          if (!seen.includes(hash)) visible.push(hook);
-          seen.push(hash);
+          visible.push(hook);
         }
       }
     });
@@ -77,4 +80,32 @@ export default class Filter {
       hidden: hidden,
     };
   };
+
+  filterSeeks = (seeks: Seek[]): FilteredSeeks => {
+    if (!this.data) return { visible: seeks, hidden: 0 };
+    const f = this.data.filter,
+      ratingRange = f.ratingRange?.split('-').map(r => parseInt(r, 10)),
+      visible: Seek[] = [];
+    let variant: string,
+      hidden = 0;
+
+    seeks.forEach(seek => {
+      variant = seek.variant || 'standard';
+      if (action(seek) === 'cancel') visible.push(seek);
+      else {
+        if (
+          !f.variant?.includes(variant) ||
+          (f.mode?.length == 1 && f.mode[0] != (seek.mode || 0).toString()) ||
+          (seek.days && !f.days?.includes(seek.days.toString())) ||
+          (ratingRange && (seek.rating < ratingRange[0] || seek.rating > ratingRange[1]))
+        ) {
+          hidden++;
+        } else visible.push(seek);
+      }
+    });
+    return {
+      visible: visible,
+      hidden: hidden,
+    };
+  };
 }

ui/lobby/src/form.ts

@@ -7,6 +7,7 @@ export interface FormObject {
 export interface FormStore {
   get: () => FormLines | null;
   set: (lines: FormLines) => void;
+  remove: () => void;
 }
 
 export const toFormLines = (form: HTMLFormElement): FormLines =>
@@ -22,4 +23,5 @@ export const toFormObject = (lines: FormLines): FormObject =>
 export const makeStore = (storage: LishogiStorage): FormStore => ({
   get: () => JSON.parse(storage.get() || 'null') as FormLines,
   set: lines => storage.set(JSON.stringify(lines)),
+  remove: () => storage.remove(),
 });

ui/lobby/src/hookRepo.ts

@@ -3,20 +3,19 @@ import { Hook, Tab } from './interfaces';
 
 export const tabs: Tab[] = ['real_time', 'presets'];
 
-function ratingOrder(a: Hook, b: Hook) {
-  return (a.rating || 0) > (b.rating || 0) ? -1 : 1;
-}
+const ratingOrder =
+  (reverse: boolean) =>
+  (a: Hook, b: Hook): number =>
+    ((a.rating || 0) > (b.rating || 0) ? -1 : 1) * (reverse ? -1 : 1);
 
-function timeOrder(a: Hook, b: Hook) {
-  return a.t < b.t ? -1 : 1;
-}
+const timeOrder =
+  (reverse: boolean) =>
+  (a: Hook, b: Hook): number =>
+    (a.t > b.t ? -1 : 1) * (reverse ? -1 : 1);
 
 export function sort(ctrl: LobbyController, hooks: Hook[]) {
-  hooks.sort(ctrl.sort === 'time' ? timeOrder : ratingOrder);
-}
-
-export function action(hook: Hook): 'cancel' | 'join' {
-  return hook.sri === window.lishogi.sri ? 'cancel' : 'join';
+  const s = ctrl.sort;
+  hooks.sort(s.startsWith('time') ? timeOrder(s !== 'time') : ratingOrder(s !== 'rating'));
 }
 
 export function add(ctrl: LobbyController, hook: Hook) {

ui/lobby/src/interfaces.ts

@@ -1,4 +1,4 @@
-export type Sort = 'rating' | 'time';
+export type Sort = 'rating' | 'time' | 'rating-reverse' | 'time-reverse';
 export type Mode = 'list' | 'chart';
 export type Tab = 'presets' | 'real_time' | 'seeks' | 'now_playing';
 

ui/lobby/src/seekRepo.ts

@@ -1,16 +1,19 @@
 import LobbyController from './ctrl';
 import { Seek } from './interfaces';
 
-function order(a: Seek, b: Seek) {
-  return a.rating > b.rating ? -1 : 1;
-}
+const ratingOrder =
+  (reverse: boolean) =>
+  (a: Seek, b: Seek): number =>
+    (a.rating > b.rating ? -1 : 1) * (reverse ? -1 : 1);
 
-export function sort(ctrl: LobbyController) {
-  ctrl.data.seeks.sort(order);
-}
+const timeOrder =
+  (reverse: boolean) =>
+  (a: Seek, b: Seek): number =>
+    ((a.days || 365) > (b.days || 365) ? -1 : 1) * (reverse ? -1 : 1);
 
-export function action(seek: Seek, ctrl: LobbyController): 'cancelSeek' | 'joinSeek' {
-  return ctrl.data.me && seek.username === ctrl.data.me.username ? 'cancelSeek' : 'joinSeek';
+export function sort(ctrl: LobbyController, seeks: Seek[]) {
+  const s = ctrl.sort;
+  seeks.sort(s.startsWith('time') ? timeOrder(s !== 'time') : ratingOrder(s !== 'rating'));
 }
 
 export function find(ctrl: LobbyController, id: string) {

ui/lobby/src/setup.ts

@@ -258,9 +258,10 @@ export default class Setup {
       }
       const ajaxSubmit = color => {
         $.modal.close();
+        const isSeeks = $timeModeSelect.val() === '2';
         this.root.setTab($timeModeSelect.val() === '1' ? 'real_time' : 'seeks');
         $.ajax({
-          url: $form.attr('action').replace(/sri-placeholder/, li.sri),
+          url: $form.attr('action').replace(/sri-placeholder/, li.sri) + (isSeeks ? '?noAutoPairing=1' : ''),
           data: $form.serialize() + '&color=' + color,
           type: 'post',
         });

ui/lobby/src/socket.ts

@@ -1,6 +1,7 @@
 import LobbyController from './ctrl';
 import * as hookRepo from './hookRepo';
 import { Hook } from './interfaces';
+import { action } from './util';
 import * as xhr from './xhr';
 
 interface Handlers {
@@ -21,7 +22,7 @@ export default class LobbySocket {
     this.handlers = {
       had(hook: Hook) {
         hookRepo.add(ctrl, hook);
-        if (hookRepo.action(hook) === 'cancel') ctrl.flushHooks(true);
+        if (action(hook) === 'cancel') ctrl.flushHooks(true);
         ctrl.redraw();
       },
       hrm(ids: string) {