Merge branch 'master' of github.com:lichess-org/lila

* 'master' of github.com:lichess-org/lila:
  Remove hopscotch dependency, use shepherd.js

ui/@types/lichess/index.d.ts

@@ -39,7 +39,6 @@ interface Site {
     jsModule(name: string): string;
     loadIife(path: string, opts?: AssetUrlOpts): Promise<void>;
     loadEsm<T, ModuleOpts = any>(name: string, opts?: { init?: ModuleOpts; url?: AssetUrlOpts }): Promise<T>;
-    hopscotch: any;
     userComplete(opts: UserCompleteOpts): Promise<UserComplete>;
   };
   idleTimer(delay: number, onIdle: () => void, onWakeUp: () => void): void;
@@ -303,7 +302,6 @@ interface Window {
   $as<T>(cash: Cash): T;
   readonly chrome?: unknown;
   readonly moment: any;
-  readonly hopscotch: any;
   readonly stripeHandler: any;
   readonly Stripe: any;
   readonly Textcomplete: any;

ui/pagelets/package.json

@@ -30,7 +30,6 @@
     "debounce-promise": "^3.1.2",
     "emoji-mart": "^5.5.2",
     "flatpickr": "^4.6.13",
-    "hopscotch": "^0.3.1",
     "lichess-pgn-viewer": "^2.0.1",
     "prop-types": "^15.8.1",
     "tablesort": "^5.3.0",
@@ -82,10 +81,6 @@
         "src": "node_modules/cropperjs/dist/cropper.min.css",
         "dest": "../../public/npm"
       },
-      {
-        "src": "node_modules/hopscotch/dist/**",
-        "dest": "../../public/npm/hopscotch/dist"
-      },
       {
         "src": "../../node_modules/chessground/dist/chessground.min.js",
         "dest": "../../public/npm"

ui/pagelets/src/user.ts

@@ -41,30 +41,6 @@ export function initModule(opts: { i18n: I18nDict }): void {
     });
   });
 
-  if ($('#perfStat.correspondence .view_games').length && site.once('user-correspondence-view-games'))
-    site.asset.hopscotch().then(() => {
-      window.hopscotch
-        .configure({
-          i18n: {
-            nextBtn: 'OK, got it',
-          },
-        })
-        .startTour({
-          id: 'correspondence-games',
-          showPrevButton: true,
-          isTourBubble: false,
-          steps: [
-            {
-              title: 'Recently finished games',
-              content:
-                'Would you like to display the list of your correspondence games, sorted by completion date?',
-              target: $('#perfStat.correspondence .view_games')[0],
-              placement: 'bottom',
-            },
-          ],
-        });
-    });
-
   $('.user-show .angles').each(function (this: HTMLElement) {
     const $angles = $(this),
       $content = $('.angle-content'),

ui/round/package.json

@@ -20,13 +20,15 @@
     "voice": "workspace:*",
     "nvui": "workspace:*",
     "board": "workspace:*",
+    "shepherd.js": "^11.2.0",
     "snabbdom": "3.5.1"
   },
   "lichess": {
     "modules": {
       "esm": {
         "src/main.ts": "round",
-        "src/plugins/nvui.ts": "round.nvui"
+        "src/plugins/nvui.ts": "round.nvui",
+        "src/plugins/tour.ts": "round.tour"
       }
     }
   }

ui/round/src/ctrl.ts

@@ -46,6 +46,7 @@ import {
   MoveMetadata,
   Position,
   NvuiPlugin,
+  RoundTour,
 } from './interfaces';
 import { defined, Toggle, toggle } from 'common';
 import { Redraw } from 'common/snabbdom';
@@ -593,27 +594,15 @@ export default class RoundController implements MoveRootCtrl {
   challengeRematch = async () => {
     await xhr.challengeRematch(this.data.game.id);
     site.pubsub.emit('challenge-app.open');
-    if (site.once('rematch-challenge'))
-      setTimeout(() => {
-        site.asset.hopscotch(function () {
-          window.hopscotch
-            .configure({
-              i18n: { doneBtn: 'OK, got it' },
-            })
-            .startTour({
-              id: 'rematch-challenge',
-              showPrevButton: true,
-              steps: [
-                {
-                  title: 'Challenged to a rematch',
-                  content: 'Your opponent is offline, but they can accept this challenge later!',
-                  target: '#challenge-app',
-                  placement: 'bottom',
-                },
-              ],
-            });
-        });
+    if (site.once('rematch-challenge')) {
+      setTimeout(async () => {
+        const [tour] = await Promise.all([
+          site.asset.loadEsm<RoundTour>('round.tour'),
+          site.asset.loadCssPath('shepherd'),
+        ]);
+        tour.corresRematchOffline();
       }, 1000);
+    }
   };
 
   private makeCorrespondenceClock = (): void => {

ui/round/src/interfaces.ts

@@ -187,3 +187,7 @@ export interface MoveMetadata {
 }
 
 export type Position = 'top' | 'bottom';
+
+export interface RoundTour {
+  corresRematchOffline: () => void;
+}

ui/round/src/plugins/tour.ts

@@ -0,0 +1,31 @@
+import { RoundTour } from '../interfaces';
+import Shepherd from 'shepherd.js';
+
+export function initModule(): RoundTour {
+  return {
+    corresRematchOffline,
+  };
+
+  function corresRematchOffline() {
+    const tour = new Shepherd.Tour();
+
+    tour.addStep({
+      title: 'Challenged to a rematch',
+      text: 'Your opponent is offline, but they can accept this challenge later!',
+      attachTo: {
+        element: 'button.rematch',
+        on: 'bottom',
+      },
+      buttons: [
+        {
+          action() {
+            return this.next();
+          },
+          text: 'Ok, got it',
+        },
+      ],
+    });
+
+    tour.start();
+  }
+}

ui/site/src/assets.ts

@@ -84,15 +84,6 @@ export const userComplete = async (opts: UserCompleteOpts): Promise<UserComplete
   return userComplete as UserComplete;
 };
 
-export const hopscotch = () => {
-  return Promise.all([
-    loadCss('npm/hopscotch/dist/css/hopscotch.min.css'),
-    loadIife('npm/hopscotch/dist/js/hopscotch.min.js', {
-      noVersion: true,
-    }),
-  ]);
-};
-
 export function embedChessground() {
   return import(url('npm/chessground.min.js'));
 }