scrabble-solver 2.16.7 → 2.18.0

package/packages/scrabble-solver/src/pages/api/dictionary/[locale]/[word].ts

@@ -30,8 +30,8 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
       },
     });
 
-    const trie = await dictionaries.get(locale);
-    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word, trie.has(word))));
+    const gaddag = await dictionaries.get(locale);
+    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word, gaddag.has(word))));
     response.status(200).send(results.map((result) => result.toJson()));
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/api/dictionary/[locale]/index.ts

@@ -1,7 +1,10 @@
+import { type Gaddag } from '@kamilmielnik/gaddag';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
 import { isLocale, type Locale } from '@scrabble-solver/types';
 import { type NextApiRequest, type NextApiResponse } from 'next';
+import { promisify } from 'util';
+import { gzip } from 'zlib';
 
 import { getServerLoggingData } from '@/api';
 
@@ -22,8 +25,21 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
       },
     });
 
-    const trie = await dictionaries.get(locale);
-    response.status(200).send(trie.serialize());
+    const gaddag = await dictionaries.get(locale);
+    const isGzip = acceptsGzip(request);
+    const body = isGzip ? await getCompressedDictionary(gaddag) : getSerializedDictionary(gaddag);
+
+    // no-cache makes clients store the payload but revalidate it, so unchanged
+    // re-downloads become 304s, answered by Next's built-in ETag handling.
+    response.setHeader('Cache-Control', 'no-cache');
+    response.setHeader('Content-Type', 'application/octet-stream');
+    response.setHeader('Vary', 'Accept-Encoding');
+
+    if (isGzip) {
+      response.setHeader('Content-Encoding', 'gzip');
+    }
+
+    response.status(200).send(body);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
@@ -43,9 +59,70 @@ const parseRequest = (request: NextApiRequest): RequestData => {
   };
 };
 
+const acceptsGzip = (request: NextApiRequest): boolean => {
+  const acceptEncoding = request.headers['accept-encoding'];
+  const header = Array.isArray(acceptEncoding) ? acceptEncoding.join(',') : acceptEncoding;
+
+  if (typeof header !== 'string') {
+    return false;
+  }
+
+  let wildcardAccepts = false;
+
+  for (const entry of header.split(',')) {
+    const [encoding, ...parameters] = entry.split(';').map((token) => token.trim().toLowerCase());
+    const isRefused = parameters.some((parameter) => {
+      const [name, quality] = parameter.split('=').map((token) => token.trim());
+      return name === 'q' && parseFloat(quality) === 0;
+    });
+
+    if (encoding === 'gzip' || encoding === 'x-gzip') {
+      return !isRefused;
+    }
+
+    if (encoding === '*') {
+      wildcardAccepts = !isRefused;
+    }
+  }
+
+  return wildcardAccepts;
+};
+
+// Dictionaries rebuild at most daily, so each response variant is produced
+// once and lives exactly as long as the in-memory dictionary it was made from.
+const serializedCache = new WeakMap<Gaddag, Buffer>();
+const compressedCache = new WeakMap<Gaddag, Promise<Buffer>>();
+
+const getSerializedDictionary = (gaddag: Gaddag): Buffer => {
+  let serialized = serializedCache.get(gaddag);
+
+  if (!serialized) {
+    // serialize() returns freshly allocated bytes, so the Buffer wraps them without copying.
+    const bytes = gaddag.serialize();
+    serialized = Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    serializedCache.set(gaddag, serialized);
+  }
+
+  return serialized;
+};
+
+const gzipAsync = promisify(gzip);
+
+const getCompressedDictionary = (gaddag: Gaddag): Promise<Buffer> => {
+  let compressed = compressedCache.get(gaddag);
+
+  if (!compressed) {
+    compressed = gzipAsync(gaddag.serialize());
+    compressedCache.set(gaddag, compressed);
+    compressed.catch(() => compressedCache.delete(gaddag));
+  }
+
+  return compressed;
+};
+
 export const config = {
   api: {
-    responseLimit: '25mb',
+    responseLimit: '50mb',
   },
 };
 

package/packages/scrabble-solver/src/pages/api/solve.ts

@@ -16,7 +16,7 @@ import {
 import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid, isCharacterValid } from '@/api';
-import { isStringArray } from '@/lib';
+import { isStringArray } from '@/lib/isStringArray';
 
 interface RequestData {
   board: Board;
@@ -45,9 +45,9 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
       },
     });
 
-    const trie = await dictionaries.get(locale);
+    const gaddag = await dictionaries.get(locale);
     const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
-    const results = solveScrabble(trie, config, board, tiles);
+    const results = solveScrabble(gaddag, config, board, tiles);
     response.status(200).send(results);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/api/verify.ts

@@ -30,10 +30,19 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
       },
     });
 
-    const trie = await dictionaries.get(locale);
+    const gaddag = await dictionaries.get(locale);
     const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-    const invalidWords = words.filter((word) => !trie.has(word));
-    const validWords = words.filter((word) => trie.has(word));
+    const invalidWords: string[] = [];
+    const validWords: string[] = [];
+
+    for (const word of words) {
+      if (gaddag.has(word)) {
+        validWords.push(word);
+      } else {
+        invalidWords.push(word);
+      }
+    }
+
     response.status(200).send({ invalidWords, validWords });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/index.module.scss

@@ -22,6 +22,7 @@
 
 .logo {
   height: var(--logo--height);
+  width: auto;
   user-select: none;
 }
 

package/packages/scrabble-solver/src/pages/index.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly logo: string;
+  readonly logoContainer: string;
+  readonly nav: string;
+  readonly navContent: string;
+  readonly navLogo: string;
+  readonly solver: string;
+};
+
+export default styles;

package/packages/scrabble-solver/src/pages/index.tsx

@@ -1,31 +1,53 @@
-/* eslint-disable max-statements */
+/* eslint-disable max-lines, max-statements */
 
+import { games } from '@scrabble-solver/configs';
 import { isObject } from '@scrabble-solver/types';
 import { execSync } from 'child_process';
 import fs from 'fs';
+import dynamic from 'next/dynamic';
 import path from 'path';
-import { type FunctionComponent, useCallback, useState } from 'react';
-import ReactModal from 'react-modal';
+import { type FunctionComponent, useCallback, useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Logo, NavButtons, Solver } from '@/components';
-import { useDirection, useEffectOnce, useLanguage, useLocalStorage } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import {
-  DictionaryModal,
-  KeyMapModal,
-  MenuModal,
-  RemainingTilesModal,
-  ResultsModal,
-  SettingsModal,
-  WordsModal,
-} from '@/modals';
+import { Logo } from '@/components/Logo';
+import { NavButtons } from '@/components/NavButtons';
+import { Solver } from '@/components/Solver';
+import { useDirection } from '@/hooks/useDirection';
+import { useEffectOnce } from '@/hooks/useEffectOnce';
+import { useLanguage } from '@/hooks/useLanguage';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { schedulePreloadModals } from '@/modals/preload';
+import { CONFIG_PENDING_CLASS } from '@/parameters';
 import { registerServiceWorker } from '@/serviceWorkerManager';
-import { initialize, reset, selectConfig, selectLocale, useTypedSelector } from '@/state';
+import { initialize, reset, selectConfig, selectIsHydrated, selectLocale, useTypedSelector } from '@/state';
 
 import styles from './index.module.scss';
 
-ReactModal.setAppElement('#__next');
+const DictionaryModal = dynamic(() => import('@/modals/DictionaryModal').then((module) => module.DictionaryModal), {
+  ssr: false,
+});
+const KeyMapModal = dynamic(() => import('@/modals/KeyMapModal').then((module) => module.KeyMapModal), {
+  ssr: false,
+});
+const MenuModal = dynamic(() => import('@/modals/MenuModal').then((module) => module.MenuModal), {
+  ssr: false,
+});
+const RemainingTilesModal = dynamic(
+  () => import('@/modals/RemainingTilesModal').then((module) => module.RemainingTilesModal),
+  {
+    ssr: false,
+  },
+);
+const ResultsModal = dynamic(() => import('@/modals/ResultsModal').then((module) => module.ResultsModal), {
+  ssr: false,
+});
+const SettingsModal = dynamic(() => import('@/modals/SettingsModal').then((module) => module.SettingsModal), {
+  ssr: false,
+});
+const WordsModal = dynamic(() => import('@/modals/WordsModal').then((module) => module.WordsModal), {
+  ssr: false,
+});
 
 interface Props {
   version: string;
@@ -37,7 +59,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
-  const [isClient, setIsClient] = useState(false);
+  const isHydrated = useTypedSelector(selectIsHydrated);
   const [modals, setModals] = useState<Record<Modal, boolean>>({
     dictionary: false,
     keyMap: false,
@@ -47,9 +69,26 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     settings: false,
     words: false,
   });
+  const [mountedModals, setMountedModals] = useState<Partial<Record<Modal, boolean>>>({});
 
   const patchModals = useCallback((patch: Partial<Record<Modal, boolean>>) => {
     setModals((current) => ({ ...current, ...patch }));
+    setMountedModals((current) => {
+      const newModals = Object.keys(patch) as Modal[];
+      const newOpenedModals = newModals.filter((modal) => patch[modal] && !current[modal]);
+
+      if (newOpenedModals.length === 0) {
+        return current;
+      }
+
+      const mounted = { ...current };
+
+      for (const modal of newOpenedModals) {
+        mounted[modal] = true;
+      }
+
+      return mounted;
+    });
   }, []);
 
   const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
@@ -73,20 +112,39 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useLanguage(locale);
   useLocalStorage();
 
+  useEffect(() => {
+    const root = document.documentElement;
+    const variables = [
+      { name: '--board-cols', value: config.boardWidth, defaultValue: games.scrabble.boardWidth },
+      { name: '--board-rows', value: config.boardHeight, defaultValue: games.scrabble.boardHeight },
+      { name: '--rack-size', value: config.rackSize, defaultValue: games.scrabble.rackSize },
+    ];
+
+    for (const { name, value, defaultValue } of variables) {
+      const current = root.style.getPropertyValue(name) || String(defaultValue);
+
+      if (current !== String(value)) {
+        root.style.setProperty(name, String(value));
+      }
+    }
+  }, [config.boardHeight, config.boardWidth, config.rackSize]);
+
+  useEffect(() => {
+    if (isHydrated) {
+      document.documentElement.classList.remove(CONFIG_PENDING_CLASS);
+    }
+  }, [isHydrated]);
+
   useEffectOnce(() => {
     if (process.env.NODE_ENV === 'production') {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       registerServiceWorker();
     }
 
-    setIsClient(true);
-    dispatch(initialize());
+    dispatch(initialize({ version }));
+    schedulePreloadModals();
   });
 
-  if (!isClient) {
-    return null;
-  }
-
   return (
     <>
       <nav className={styles.nav}>
@@ -112,28 +170,30 @@ const Index: FunctionComponent<Props> = ({ version }) => {
         <Solver className={styles.solver} onShowResults={handleShowResults} />
       </main>
 
-      <MenuModal
-        isOpen={modals.menu}
-        onClose={handleCloseMenu}
-        onShowDictionary={handleShowDictionary}
-        onShowRemainingTiles={handleShowRemainingTiles}
-        onShowSettings={handleShowSettings}
-        onShowWords={handleShowWords}
-      />
+      {mountedModals.menu && (
+        <MenuModal
+          isOpen={modals.menu}
+          onClose={handleCloseMenu}
+          onShowDictionary={handleShowDictionary}
+          onShowRemainingTiles={handleShowRemainingTiles}
+          onShowSettings={handleShowSettings}
+          onShowWords={handleShowWords}
+        />
+      )}
 
-      <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />
+      {mountedModals.settings && <SettingsModal isOpen={modals.settings} onClose={handleCloseSettings} />}
 
-      <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />
+      {mountedModals.keyMap && <KeyMapModal isOpen={modals.keyMap} onClose={handleCloseKeyMap} />}
 
-      <WordsModal isOpen={modals.words} onClose={handleCloseWords} />
+      {mountedModals.words && <WordsModal isOpen={modals.words} onClose={handleCloseWords} />}
 
-      {config.supportsRemainingTiles && (
+      {config.supportsRemainingTiles && mountedModals.remainingTiles && (
         <RemainingTilesModal isOpen={modals.remainingTiles} onClose={handleCloseRemainingTiles} />
       )}
 
-      <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />
+      {mountedModals.results && <ResultsModal isOpen={modals.results} onClose={handleCloseResults} />}
 
-      <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />
+      {mountedModals.dictionary && <DictionaryModal isOpen={modals.dictionary} onClose={handleCloseDictionary} />}
     </>
   );
 };

package/packages/scrabble-solver/src/pages/not-found.tsx

@@ -1,5 +1,5 @@
 'use-client';
 
-import { NotFound } from '@/components';
+import { NotFound } from '@/components/NotFound';
 
 export default NotFound;

package/packages/scrabble-solver/src/parameters/index.ts

@@ -1,5 +1,4 @@
 import variables from '@/styles/variables.module.scss';
-import { ResultColumnId } from '@/types';
 
 export const BREAKPOINTS = {
   xs: Number(variables.breakpointXs),
@@ -9,97 +8,52 @@ export const BREAKPOINTS = {
   xl: Number(variables.breakpointXl),
 };
 
-export const TRANSITION = 'var(--transition)';
-
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const TRANSITION_DURATION = Number(variables.transitionDuration);
+// Must match the class name in global.scss
+export const CONFIG_PENDING_CLASS = 'config-pending';
+
 export const TRANSITION_DURATION_LONG = Number(variables.transitionDurationLong);
 
-export const COLOR_BLUE = variables.colorBlue;
-export const COLOR_GREEN = variables.colorGreen;
-export const COLOR_RED = variables.colorRed;
-export const COLOR_YELLOW = variables.colorYellow;
-
-export const COLOR_BONUS_CHARACTER_1 = variables.colorYellowLight;
-export const COLOR_BONUS_CHARACTER_2 = variables.colorGreenLight;
-export const COLOR_BONUS_CHARACTER_3 = variables.colorBlueLight;
-export const COLOR_BONUS_CHARACTER_5 = variables.colorRedLight;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = variables.colorBonusCharacterMultiplier2;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = variables.colorBonusCharacterMultiplier3;
-export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = variables.colorBonusCharacterMultiplier4;
-export const COLOR_BONUS_START = variables.colorVioletLight;
-export const COLOR_BONUS_WORD_MULTIPLIER_2 = variables.colorBonusWordMultiplier2;
-export const COLOR_BONUS_WORD_MULTIPLIER_3 = variables.colorBonusWordMultiplier3;
-export const COLOR_BONUS_WORD_MULTIPLIER_4 = variables.colorBonusWordMultiplier4;
-export const COLOR_FILTERED = variables.colorForegroundSecondary;
+export const COLOR_BLUE = 'var(--color--blue)';
+export const COLOR_GREEN = 'var(--color--green)';
+export const COLOR_RED = 'var(--color--red)';
+export const COLOR_YELLOW = 'var(--color--yellow)';
+
 export const COLOR_BACKGROUND = variables.colorBackground;
+export const COLOR_BONUS_START = variables.colorVioletLight;
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
-  1: COLOR_BONUS_CHARACTER_1,
-  2: COLOR_BONUS_CHARACTER_2,
-  3: COLOR_BONUS_CHARACTER_3,
-  5: COLOR_BONUS_CHARACTER_5,
+  1: variables.colorYellowLight,
+  2: variables.colorGreenLight,
+  3: variables.colorBlueLight,
+  5: variables.colorRedLight,
 };
 
 export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
-  2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
-  3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
-  4: COLOR_BONUS_CHARACTER_MULTIPLIER_4,
+  2: variables.colorBonusCharacterMultiplier2,
+  3: variables.colorBonusCharacterMultiplier3,
+  4: variables.colorBonusCharacterMultiplier4,
 };
 
 export const COLOR_BONUS_WORD: Record<number, string> = {
-  2: COLOR_BONUS_WORD_MULTIPLIER_2,
-  3: COLOR_BONUS_WORD_MULTIPLIER_3,
-  4: COLOR_BONUS_WORD_MULTIPLIER_4,
+  2: variables.colorBonusWordMultiplier2,
+  3: variables.colorBonusWordMultiplier3,
+  4: variables.colorBonusWordMultiplier4,
 };
 
-export const SPACING_XS = Number(variables.spacingXs);
-export const SPACING_S = Number(variables.spacingS);
-export const SPACING_M = Number(variables.spacingM);
-export const SPACING_L = Number(variables.spacingL);
-export const SPACING_XL = Number(variables.spacingXl);
-
-export const COMPONENTS_SPACING = SPACING_XL;
-export const COMPONENTS_SPACING_SMALL = SPACING_L;
-
-export const RACK_TILE_SIZE_MAX = 80;
-
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
-export const BOARD_CELL_BORDER_WIDTH = 1;
-export const BOARD_TILE_FONT_SIZE_MIN = 14;
-export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
-export const BOARD_TILE_SIZE_MAX = RACK_TILE_SIZE_MAX;
 
-export const BORDER_COLOR = variables.borderColor;
 export const BORDER_COLOR_LIGHT = variables.borderColorLight;
-export const BORDER_RADIUS = Number(variables.borderRadius);
 export const BORDER_WIDTH = Number(variables.borderWidth);
 
-export const BUTTON_ICON_SIZE = Number(variables.buttonIconSize);
-export const BUTTON_PADDING_VERTICAL = SPACING_M;
-export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
-
-export const DICTIONARY_HEIGHT = Number(variables.dictionaryHeight);
-export const DICTIONARY_HEIGHT_MOBILE = Number(variables.dictionaryHeightMobile);
-
-export const LOGO_ASPECT_RATIO = 682 / 166;
-export const LOGO_HEIGHT = Number(variables.logoHeight);
-export const LOGO_HEIGHT_SMALL = Number(variables.logoHeightSmall);
+export const LOGO_HEIGHT = 166;
 export const LOGO_SRC = '/logo.svg';
+export const LOGO_WIDTH = 682;
 
-export const MODAL_WIDTH = Number(variables.modalWidth);
-export const MODAL_HEADER_HEIGHT = 45;
-
-export const NAV_PADDING = SPACING_L;
-
-export const TILE_SIZE = 80;
-
-export const TOOLTIP_DURATION = TRANSITION_DURATION;
+export const TOOLTIP_DURATION = Number(variables.transitionDuration);
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
-export const PLAIN_TILES_PADDING_HORIZONTAL = 0;
-export const PLAIN_TILES_PADDING_VERTICAL = 0;
 export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   1: COLOR_YELLOW,
   2: COLOR_GREEN,
@@ -113,31 +67,8 @@ export const PLAIN_TILES_POINTS_COLORS: Record<number, string> = {
   10: COLOR_RED,
 };
 export const PLAIN_TILES_TILE_MARGIN = 6;
-export const PLAIN_TILES_TILE_MAX_ROTATE = 0;
-export const PLAIN_TILES_TILE_MAX_SCATTER = 0;
 export const PLAIN_TILES_TILE_SIZE = 80;
-export const PLAIN_TILES_VERSION_TILE_COLOR = COLOR_GREEN;
-export const PLAIN_TILES_VERSION_TILE_SIZE = TILE_SIZE;
-
-export const PROGRESS_COLOR_VALUE = 'var(--color--violet--light)';
-export const PROGRESS_COLOR_BACKGROUND = 'var(--color--inactive)';
-
-export const REMAINING_TILES_TILE_SIZE = 50;
-
-export const RESULTS_COLUMN_WIDTH: Record<ResultColumnId, number | undefined> = {
-  [ResultColumnId.BlanksCount]: 55,
-  [ResultColumnId.ConsonantsCount]: 55,
-  [ResultColumnId.Coordinates]: 55,
-  [ResultColumnId.Points]: 80,
-  [ResultColumnId.TilesCount]: 55,
-  [ResultColumnId.VowelsCount]: 55,
-  [ResultColumnId.Word]: undefined,
-  [ResultColumnId.WordsCount]: 55,
-};
-export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
-
-export const SOLVER_COLUMN_WIDTH = Number(variables.solverColumnWidth);
+export const RESULTS_ITEM_HEIGHT = Number(variables.resultsItemHeight);
 
-export const TEXT_INPUT_HEIGHT = Number(variables.textInputHeight);
+export const RESULTS_OVERSCAN_COUNT = 10;

package/packages/scrabble-solver/src/sdk/solve.ts

@@ -1,19 +1,25 @@
-import { type BoardJson, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+import { Board, type BoardJson, type Game, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+
+import { solveLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
   characters: string[];
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
 export const solve = async ({ board, characters, game, locale }: Payload): Promise<Result[]> => {
-  const json = await fetchJson<ResultJson[]>('/api/solve', {
-    method: 'POST',
-    body: JSON.stringify({ board, characters, game, locale }),
-  });
+  const payload = { board, characters, game, locale };
+  const json =
+    (await solveLocally(payload)) ??
+    (await fetchJson<ResultJson[]>('/api/solve', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }));
 
-  return json.map(Result.fromJson);
+  const decodedBoard = Board.fromJson(board);
+  return json.map((result) => Result.fromJson(result, decodedBoard));
 };

package/packages/scrabble-solver/src/sdk/verify.ts

@@ -1,10 +1,12 @@
-import { type BoardJson, type Locale } from '@scrabble-solver/types';
+import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
+
+import { verifyLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
@@ -14,8 +16,12 @@ interface Response {
 }
 
 export const verify = async ({ board, game, locale }: Payload): Promise<Response> => {
-  return fetchJson<Response>('/api/verify', {
-    method: 'POST',
-    body: JSON.stringify({ board, game, locale }),
-  });
+  const payload = { board, game, locale };
+  return (
+    (await verifyLocally(payload)) ??
+    fetchJson<Response>('/api/verify', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+  );
 };