opening explorer UI WIP

ui/analyse/css/explorer/_config.scss

@@ -72,6 +72,8 @@
   }
 
   &__player__choice {
+    max-width: 70ch !important;
+
     > div {
       // for user complete
       overflow: visible !important;
@@ -83,7 +85,14 @@
       position: relative;
       display: inline-block;
 
-      padding-top: 2em;
+      padding: 2em 0;
+    }
+    .previous {
+      @extend %flex-wrap;
+      .button {
+        margin: 0.3em 0.2em;
+        text-transform: none;
+      }
     }
   }
 }

ui/analyse/src/explorer/explorerConfig.ts

@@ -36,7 +36,8 @@ export function controller(game: Game, onClose: () => void, trans: Trans, redraw
     },
     playerName: {
       open: prop(false),
-      value: storedProp<string | undefined>('explorer.player.name', document.body.dataset['user'] || ''),
+      value: storedProp<string>('explorer.player.name', document.body.dataset['user'] || ''),
+      previous: storedJsonProp<string[]>('explorer.player.name.previous', () => []),
     },
   };
 
@@ -134,10 +135,20 @@ const playerDb = (ctrl: ExplorerConfigCtrl) => {
         name ? 'Change' : 'Select a Lichess player'
       ),
     ]),
+    speedSection(ctrl),
   ]);
 };
 
 const playerModal = (ctrl: ExplorerConfigCtrl) => {
+  const myName = document.body.dataset['user'];
+  const onSelect = (name: string) => {
+    const previous = ctrl.data.playerName.previous().filter(n => n !== name);
+    previous.unshift(name);
+    ctrl.data.playerName.previous(previous.slice(0, 20));
+    ctrl.data.playerName.value(name);
+    ctrl.data.playerName.open(false);
+    ctrl.redraw();
+  };
   return snabModal({
     class: 'explorer__config__player__choice',
     onClose() {
@@ -154,17 +165,25 @@ const playerModal = (ctrl: ExplorerConfigCtrl) => {
               uac({
                 input,
                 tag: 'span',
-                onSelect(v) {
-                  ctrl.data.playerName.value(v.name);
-                  ctrl.data.playerName.open(false);
-                  ctrl.redraw();
-                },
+                onSelect: v => onSelect(v.name),
               });
               input.focus();
             })
           ),
         }),
       ]),
+      h(
+        'div.previous',
+        [...(myName ? [myName] : []), ...ctrl.data.playerName.previous()].map(name =>
+          h(
+            'button.button',
+            {
+              hook: bind('click', () => onSelect(name)),
+            },
+            name
+          )
+        )
+      ),
     ],
   });
 };
@@ -195,22 +214,25 @@ const lichessDb = (ctrl: ExplorerConfigCtrl) =>
         )
       ),
     ]),
-    h('section.speed', [
-      h('label', ctrl.trans.noarg('timeControl')),
-      h(
-        'div.choices',
-        ctrl.data.speed.available.map(s =>
-          h(
-            'button',
-            {
-              attrs: {
-                'aria-pressed': `${ctrl.data.speed.selected().includes(s)}`,
-              },
-              hook: bind('click', _ => ctrl.toggleSpeed(s), ctrl.redraw),
-            },
-            s
-          )
-        )
-      ),
-    ]),
+    speedSection(ctrl),
+  ]);
+
+const speedSection = (ctrl: ExplorerConfigCtrl) =>
+  h('section.speed', [
+    h('label', ctrl.trans.noarg('timeControl')),
+    h(
+      'div.choices',
+      ctrl.data.speed.available.map(s =>
+        h(
+          'button',
+          {
+            attrs: {
+              'aria-pressed': `${ctrl.data.speed.selected().includes(s)}`,
+            },
+            hook: bind('click', _ => ctrl.toggleSpeed(s), ctrl.redraw),
+          },
+          s
+        )
+      )
+    ),
   ]);

ui/analyse/src/explorer/explorerXhr.ts

@@ -34,6 +34,7 @@ export function opening(opts: OpeningXhrOpts, processData: (data: ExplorerData)
     params.set('player', opts.personal.player);
     params.set('color', opts.personal.color);
     params.set('update', 'true');
+    if (opts.speeds) params.set('speeds', opts.speeds.join(','));
   }
   if (!opts.withGames) {
     params.set('topGames', '0');

ui/analyse/src/explorer/interfaces.ts

@@ -37,6 +37,7 @@ export interface ExplorerConfigData {
   playerName: {
     open: Prop<boolean>;
     value: StoredProp<string>;
+    previous: StoredJsonProp<string[]>;
   };
 }