style engine error dialog, and use it everywhere

Author: schlawg

ui/ceval/css/_ctrl.scss

@@ -182,3 +182,39 @@
     animation: bar-anim 1000s linear infinite;
   }
 }
+
+.engine-error {
+  @extend %flex-column;
+  align-items: center;
+  row-gap: 1em;
+  padding: 3em;
+  text-align: left;
+  max-width: 60vw;
+
+  @media (max-width: $mq-width-medium) {
+    max-width: 80vw;
+  }
+  @media (max-width: $mq-width-xx-small) {
+    max-width: unset;
+    width: 96vw;
+  }
+
+  h2 {
+    font-family: 'Noto Sans';
+    font-size: 1.3em;
+  }
+  li {
+    margin: 0 2em;
+    line-height: 1.5em;
+    list-style: disc;
+  }
+  pre {
+    width: 100%;
+    border: 1px solid #888;
+    box-shadow: inset 0 0 2px $c-font-dim;
+    padding: 1em;
+    margin-bottom: 1em;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+  }
+}

ui/ceval/src/ctrl.ts

@@ -11,7 +11,7 @@ import { hasFeature } from 'common/device';
 import { Result } from '@badrap/result';
 import { storedIntProp } from 'common/storage';
 import { Rules } from 'chessops';
-import { domDialog } from 'common/dialog';
+import { type Dialog, domDialog } from 'common/dialog';
 
 const cevalDisabledSentinel = '1';
 
@@ -239,11 +239,22 @@ export default class CevalCtrl {
 
   engineFailed(msg: string) {
     domDialog({
-      show: 'modal',
+      class: 'engine-error',
       htmlText:
-        `<div><p>${this.engines.active?.name ?? 'Engine'} failed:</p><hr><code>${msg}</code><hr>` +
-        '<p>Things you can try:</p><p>Decrease memory slider in engine settings. Update your browser. ' +
-        'Clear site settings for lichess.org. Or select another engine</p></div>',
+        `<h2>${lichess.escapeHtml(this.engines.active?.name ?? 'Engine')} <bad>error</bad></h2>` +
+        `<pre tabindex="0" class="err">${lichess.escapeHtml(msg)}</pre><h2>Things to try</h2><ul>` +
+        '<li>Decrease memory slider in engine settings</li><li>Clear site settings for lichess.org</li>' +
+        '<li>Select another engine</li><li>Update your browser</li></ul>',
+    }).then((dlg: Dialog) => {
+      const select = () =>
+        setTimeout(() => {
+          const range = document.createRange();
+          range.selectNodeContents(dlg.view.querySelector('.err')!);
+          window.getSelection()?.removeAllRanges();
+          window.getSelection()?.addRange(range);
+        }, 0);
+      dlg.view.querySelector('.err')?.addEventListener('focus', select);
+      dlg.showModal();
     });
   }
 

ui/ceval/src/engines/engines.ts

@@ -24,13 +24,13 @@ export class Engines {
     this.selectProp = storedStringProp('ceval.engine', this.localEngines[0].id);
   }
 
-  makeEngineMap() {
-    const progress = (download?: { bytes: number; total: number }, error?: string) => {
-      if (this.ctrl.enabled()) this.ctrl.download = download;
-      if (error) this.ctrl.engineFailed(error);
-      this.ctrl.opts.redraw();
-    };
+  status = (status: { download?: { bytes: number; total: number }; error?: string } = {}) => {
+    if (this.ctrl.enabled()) this.ctrl.download = status.download;
+    if (status.error) this.ctrl.engineFailed(status.error);
+    this.ctrl.opts.redraw();
+  };
 
+  makeEngineMap() {
     return new Map<string, WithMake>(
       [
         {
@@ -47,7 +47,7 @@ export class Engines {
               js: 'linrock-nnue-7.js',
             },
           },
-          make: (e: BrowserEngineInfo) => new StockfishWebEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new StockfishWebEngine(e, this.status),
         },
         {
           info: {
@@ -63,7 +63,7 @@ export class Engines {
               js: 'sf-nnue-40.js',
             },
           },
-          make: (e: BrowserEngineInfo) => new StockfishWebEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new StockfishWebEngine(e, this.status),
         },
         {
           info: {
@@ -80,7 +80,7 @@ export class Engines {
               wasm: 'stockfish.wasm',
             },
           },
-          make: (e: BrowserEngineInfo) => new ThreadedEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new ThreadedEngine(e, this.status),
         },
         {
           info: {
@@ -105,7 +105,7 @@ export class Engines {
             },
           },
           make: (e: BrowserEngineInfo) =>
-            new StockfishWebEngine(e, progress, v => (v === 'threeCheck' ? '3check' : v.toLowerCase())),
+            new StockfishWebEngine(e, this.status, v => (v === 'threeCheck' ? '3check' : v.toLowerCase())),
         },
         {
           info: {
@@ -131,7 +131,7 @@ export class Engines {
             },
           },
           make: (e: BrowserEngineInfo) =>
-            new ThreadedEngine(e, progress, (v: VariantKey) =>
+            new ThreadedEngine(e, this.status, (v: VariantKey) =>
               v === 'antichess' ? 'giveaway' : lichessRules(v),
             ),
         },
@@ -149,7 +149,7 @@ export class Engines {
               wasm: 'stockfish.wasm',
             },
           },
-          make: (e: BrowserEngineInfo) => new ThreadedEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new ThreadedEngine(e, this.status),
         },
         {
           info: {
@@ -166,7 +166,7 @@ export class Engines {
               js: 'stockfish.wasm.js',
             },
           },
-          make: (e: BrowserEngineInfo) => new SimpleEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new SimpleEngine(e, this.status),
         },
         {
           info: {
@@ -182,7 +182,7 @@ export class Engines {
               js: 'stockfish.js',
             },
           },
-          make: (e: BrowserEngineInfo) => new SimpleEngine(e, progress),
+          make: (e: BrowserEngineInfo) => new SimpleEngine(e, this.status),
         },
       ]
         .filter(
@@ -249,7 +249,7 @@ export class Engines {
 
     return e.tech !== 'EXTERNAL'
       ? this.localEngineMap.get(e.id)!.make(e as BrowserEngineInfo)
-      : new ExternalEngine(e as ExternalEngineInfo, this.ctrl.opts.redraw);
+      : new ExternalEngine(e as ExternalEngineInfo, this.status);
   }
 }
 

ui/ceval/src/engines/externalEngine.ts

@@ -1,4 +1,4 @@
-import { Work, ExternalEngineInfo, CevalEngine, CevalState } from '../types';
+import { Work, ExternalEngineInfo, CevalEngine, CevalState, EngineNotifier } from '../types';
 import { randomToken } from 'common/random';
 import { readNdJson } from 'common/ndjson';
 import throttle from 'common/throttle';
@@ -22,7 +22,7 @@ export class ExternalEngine implements CevalEngine {
 
   constructor(
     private opts: ExternalEngineInfo,
-    private progress?: (download?: { bytes: number; total: number }) => void,
+    private status?: EngineNotifier,
   ) {}
 
   getState() {
@@ -84,16 +84,16 @@ export class ExternalEngine implements CevalEngine {
       });
 
       this.state = CevalState.Initial;
+      this.status?.();
     } catch (err: unknown) {
       if ((err as Error).name !== 'AbortError') {
         console.error(err);
         this.state = CevalState.Failed;
+        this.status?.({ error: String(err) });
       } else {
         this.state = CevalState.Initial;
       }
     }
-
-    this.progress?.();
   }
 
   stop() {

ui/ceval/src/engines/simpleEngine.ts

@@ -1,15 +1,15 @@
 import { Protocol } from '../protocol';
-import { Work, CevalState, CevalEngine, BrowserEngineInfo } from '../types';
+import { Work, CevalState, CevalEngine, BrowserEngineInfo, EngineNotifier } from '../types';
 
 export class SimpleEngine implements CevalEngine {
-  private failed = false;
+  private failed: Error;
   private protocol = new Protocol();
   private worker: Worker | undefined;
   url: string;
 
   constructor(
     readonly info: BrowserEngineInfo,
-    readonly progress?: (download?: { bytes: number; total: number }) => void,
+    readonly status?: EngineNotifier,
   ) {
     this.url = `${info.assets.root}/${info.assets.js}`;
   }
@@ -40,8 +40,8 @@ export class SimpleEngine implements CevalEngine {
         'error',
         err => {
           console.error(err);
-          this.failed = true;
-          this.progress?.();
+          this.failed = err.error;
+          this.status?.({ error: String(this.failed) });
         },
         true,
       );

ui/ceval/src/engines/stockfishWebEngine.ts

@@ -1,4 +1,4 @@
-import { Work, CevalEngine, CevalState, BrowserEngineInfo } from '../types';
+import { Work, CevalEngine, CevalState, BrowserEngineInfo, EngineNotifier } from '../types';
 import { Protocol } from '../protocol';
 import { objectStorage } from 'common/objectStorage';
 import { sharedWasmMemory } from '../util';
@@ -11,14 +11,14 @@ export class StockfishWebEngine implements CevalEngine {
 
   constructor(
     readonly info: BrowserEngineInfo,
-    readonly progress?: (download?: { bytes: number; total: number }, error?: string) => void,
+    readonly status?: EngineNotifier,
     readonly variantMap?: (v: string) => string,
   ) {
     this.protocol = new Protocol(variantMap);
     this.boot().catch(e => {
       console.error(e);
       this.failed = e;
-      progress?.(undefined, e.message);
+      this.status?.({ error: String(e) });
     });
   }
 
@@ -56,7 +56,7 @@ export class StockfishWebEngine implements CevalEngine {
           }, 2000);
         } else {
           console.error(msg);
-          this.progress?.(undefined, msg);
+          this.status?.({ error: msg });
         }
       };
       let nnueBuffer = await nnueStore?.get(nnueFilename).catch(() => undefined);
@@ -66,7 +66,7 @@ export class StockfishWebEngine implements CevalEngine {
 
         req.open('get', lichess.assetUrl(`lifat/nnue/${nnueFilename}`, { noVersion: true }), true);
         req.responseType = 'arraybuffer';
-        req.onprogress = e => this.progress?.({ bytes: e.loaded, total: e.total });
+        req.onprogress = e => this.status?.({ download: { bytes: e.loaded, total: e.total } });
 
         nnueBuffer = await new Promise((resolve, reject) => {
           req.onerror = () => reject(new Error(`NNUE download failed: ${req.status}`));
@@ -76,7 +76,7 @@ export class StockfishWebEngine implements CevalEngine {
           };
           req.send();
         });
-        this.progress?.();
+        this.status?.();
         nnueStore?.put(nnueFilename, nnueBuffer!).catch(() => console.warn('IDB store failed'));
       }
       module.setNnueBuffer(nnueBuffer!);

ui/ceval/src/engines/threadedEngine.ts

@@ -1,5 +1,5 @@
 import { Protocol } from '../protocol';
-import { Work, CevalEngine, CevalState, BrowserEngineInfo } from '../types';
+import { Work, CevalEngine, CevalState, BrowserEngineInfo, EngineNotifier } from '../types';
 import { sharedWasmMemory } from '../util';
 import { Cache } from '../cache';
 
@@ -8,6 +8,8 @@ interface WasmModule {
     wasmBinary?: ArrayBuffer;
     locateFile(path: string): string;
     wasmMemory: WebAssembly.Memory;
+    printErr(msg: string): void;
+    onError(err: Error): void;
   }): Promise<Stockfish>;
 }
 
@@ -24,16 +26,22 @@ declare global {
 }
 
 export class ThreadedEngine implements CevalEngine {
-  failed: boolean;
+  failed: Error;
   protocol: Protocol;
   module?: Stockfish;
 
   constructor(
     readonly info: BrowserEngineInfo,
-    readonly progress?: (download?: { bytes: number; total: number }) => void,
+    readonly status?: EngineNotifier,
     readonly variantMap?: (v: string) => string,
   ) {}
 
+  onError = (err: Error) => {
+    console.error(err);
+    this.failed = err;
+    this.status?.({ error: String(err) });
+  };
+
   getInfo() {
     return this.info;
   }
@@ -76,9 +84,9 @@ export class ThreadedEngine implements CevalEngine {
           req.open('GET', lichess.assetUrl(wasmPath, { version }), true);
           req.responseType = 'arraybuffer';
           req.onerror = event => reject(event);
-          req.onprogress = event => this.progress?.({ bytes: event.loaded, total: event.total });
+          req.onprogress = event => this.status?.({ download: { bytes: event.loaded, total: event.total } });
           req.onload = _ => {
-            this.progress?.();
+            this.status?.();
             resolve(req.response);
           };
           req.send();
@@ -95,6 +103,8 @@ export class ThreadedEngine implements CevalEngine {
     await lichess.loadIife(`${root}/${js}`, { version });
     const sf = await window[this.info.id === '__sf11mv' ? 'StockfishMv' : 'Stockfish']!({
       wasmBinary,
+      printErr: (msg: string) => this.onError(new Error(msg)),
+      onError: this.onError,
       locateFile: (path: string) =>
         lichess.assetUrl(`${root}/${path}`, { version, sameDomain: path.endsWith('.worker.js') }),
       wasmMemory: sharedWasmMemory(this.info.minMem!),
@@ -108,11 +118,7 @@ export class ThreadedEngine implements CevalEngine {
   async start(work: Work) {
     if (!this.protocol) {
       this.protocol = new Protocol(this.variantMap);
-      this.boot().catch(err => {
-        console.error(err);
-        this.failed = true;
-        this.progress?.();
-      });
+      this.boot().catch(this.onError);
     }
     this.protocol.compute(work);
   }

ui/ceval/src/types.ts

@@ -47,6 +47,11 @@ export interface BrowserEngineInfo extends EngineInfo {
   assets: { root?: string; js?: string; wasm?: string; version?: string };
 }
 
+export type EngineNotifier = (status?: {
+  download?: { bytes: number; total: number };
+  error?: string;
+}) => void;
+
 export enum CevalState {
   Initial,
   Loading,