@scrabble-solver/scrabble-solver 2.16.7 → 2.17.0

package/.next/trace-build

@@ -1 +1 @@
-[{"name":"run-typescript","duration":158871,"timestamp":7220131342,"id":13,"parentId":1,"tags":{},"startTime":1785617459374,"traceId":"5804b27c59cf8ea7"},{"name":"run-webpack","duration":5673692,"timestamp":7220292828,"id":15,"parentId":1,"tags":{},"startTime":1785617459536,"traceId":"5804b27c59cf8ea7"},{"name":"static-check","duration":212429,"timestamp":7226033524,"id":2053,"parentId":1,"tags":{},"startTime":1785617465276,"traceId":"5804b27c59cf8ea7"},{"name":"static-generation","duration":242167,"timestamp":7226254581,"id":2071,"parentId":1,"tags":{},"startTime":1785617465497,"traceId":"5804b27c59cf8ea7"},{"name":"collect-build-traces","duration":4209754,"timestamp":7226246405,"id":2068,"parentId":1,"tags":{},"startTime":1785617465489,"traceId":"5804b27c59cf8ea7"},{"name":"telemetry-flush","duration":25,"timestamp":7230457410,"id":2078,"parentId":1,"tags":{},"startTime":1785617469700,"traceId":"5804b27c59cf8ea7"},{"name":"next-build","duration":10563371,"timestamp":7219894069,"id":1,"tags":{"buildMode":"default","version":"16.3.0-preview.10","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1785617459137,"traceId":"5804b27c59cf8ea7"}]
+[{"name":"run-typescript","duration":169366,"timestamp":26528773671,"id":13,"parentId":1,"tags":{},"startTime":1786055166126,"traceId":"c15733d8168a03e3"},{"name":"run-webpack","duration":6699896,"timestamp":26528944927,"id":15,"parentId":1,"tags":{},"startTime":1786055166298,"traceId":"c15733d8168a03e3"},{"name":"static-check","duration":225589,"timestamp":26535727438,"id":2014,"parentId":1,"tags":{},"startTime":1786055173080,"traceId":"c15733d8168a03e3"},{"name":"static-generation","duration":240386,"timestamp":26535961329,"id":2032,"parentId":1,"tags":{},"startTime":1786055173314,"traceId":"c15733d8168a03e3"},{"name":"collect-build-traces","duration":4253048,"timestamp":26535953473,"id":2029,"parentId":1,"tags":{},"startTime":1786055173306,"traceId":"c15733d8168a03e3"},{"name":"telemetry-flush","duration":19,"timestamp":26540207730,"id":2039,"parentId":1,"tags":{},"startTime":1786055177561,"traceId":"c15733d8168a03e3"},{"name":"next-build","duration":11677867,"timestamp":26528529886,"id":1,"tags":{"buildMode":"default","version":"16.3.0","bundler":"webpack","has-custom-webpack-config":"true","use-build-worker":"false"},"startTime":1786055165883,"traceId":"c15733d8168a03e3"}]

package/next.config.js

@@ -4,12 +4,6 @@ const path = require('path');
 const WorkboxPlugin = require('workbox-webpack-plugin');
 
 module.exports = {
-  compress: false,
-  experimental: {
-    // TypeScript 7 dropped the JS compiler API that Next.js's built-in type checker uses,
-    // Remove the flag once Next.js integrates with TS7 out of the box.
-    useTypeScriptCli: true,
-  },
   reactStrictMode: true,
   sassOptions: {
     loadPaths: ['./src', path.join(__dirname, '../../node_modules/include-media/dist')],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.16.7",
+  "version": "2.17.0",
   "description": "Scrabble Solver 2 - App",
   "repository": {
     "type": "git",
@@ -27,20 +27,20 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.20",
-    "@kamilmielnik/trie": "^5.1.0",
+    "@kamilmielnik/gaddag": "^2.0.0",
     "@reduxjs/toolkit": "^2.12.0",
-    "@scrabble-solver/configs": "^2.16.7",
-    "@scrabble-solver/constants": "^2.16.7",
-    "@scrabble-solver/dictionaries": "^2.16.7",
-    "@scrabble-solver/logger": "^2.16.7",
-    "@scrabble-solver/solver": "^2.16.7",
-    "@scrabble-solver/types": "^2.16.7",
-    "@scrabble-solver/word-definitions": "^2.16.7",
+    "@scrabble-solver/configs": "^2.17.0",
+    "@scrabble-solver/constants": "^2.17.0",
+    "@scrabble-solver/dictionaries": "^2.17.0",
+    "@scrabble-solver/logger": "^2.17.0",
+    "@scrabble-solver/solver": "^2.17.0",
+    "@scrabble-solver/types": "^2.17.0",
+    "@scrabble-solver/word-definitions": "^2.17.0",
     "classnames": "^2.5.1",
     "env-cmd": "^11.0.0",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^16.3.0-preview.10",
+    "next": "^16.3.0",
     "normalize.css": "^8.0.1",
     "react": "^19.2.8",
     "react-cool-onclickoutside": "^1.7.0",
@@ -68,5 +68,5 @@
     "@types/react-portal": "^4.0.7",
     "sass": "^1.102.0"
   },
-  "gitHead": "1e8a372cabe4bb977bbd0528851104bcad27d545"
+  "gitHead": "32234a6340029d39dde134edc9e71ff913836931"
 }

package/src/components/Board/components/Cell/Cell.tsx

@@ -5,6 +5,7 @@ import {
   type ChangeEventHandler,
   type FocusEventHandler,
   type FunctionComponent,
+  memo,
   type MouseEventHandler,
   type RefObject,
   type TouchEventHandler,
@@ -41,7 +42,7 @@ interface Props {
   onFocus: (x: number, y: number) => void;
 }
 
-export const Cell: FunctionComponent<Props> = ({
+const CellBase: FunctionComponent<Props> = ({
   cell,
   cellBottom,
   cellLeft,
@@ -135,3 +136,5 @@ export const Cell: FunctionComponent<Props> = ({
     />
   );
 };
+
+export const Cell = memo(CellBase);

package/src/components/Board/hooks/useGrid.ts

@@ -53,6 +53,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
   const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
   const [direction, setLastDirection] = useState<Direction>('horizontal');
   const directionRef = useLatest(direction);
+  const rowsRef = useLatest(rows);
 
   const safeActiveIndex = useMemo(
     () => ({
@@ -94,7 +95,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
       const actions: PayloadAction<unknown>[] = [];
-      let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
+      let board = new Board({ rows: rowsRef.current.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
       const scheduleMoveFocus = () => {
@@ -188,7 +189,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
       moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
       actions.forEach(dispatch);
     },
-    [config, directionRef, dispatch, height, moveFocus, rows, width],
+    [config, directionRef, dispatch, height, moveFocus, rowsRef, width],
   );
 
   const onChange = useCallback(
@@ -209,7 +210,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       if (value === EMPTY_CELL) {
         const { x, y } = position;
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (cell.hasTile()) {
           dispatch(boardSlice.actions.toggleCellIsBlank(position));
@@ -219,7 +220,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       insertValue(position, value);
     },
-    [dispatch, insertValue, moveFocus, rows, getInputRefPosition],
+    [dispatch, insertValue, moveFocus, rowsRef, getInputRefPosition],
   );
 
   const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
@@ -308,7 +309,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (isCtrl(event) && character === 'g') {
           event.preventDefault();
@@ -347,7 +348,17 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, direction, dispatch, getInputRefPosition, locale, moveFocus, onDirectionToggle, rows]);
+  }, [
+    changeActiveIndex,
+    config,
+    direction,
+    dispatch,
+    getInputRefPosition,
+    locale,
+    moveFocus,
+    onDirectionToggle,
+    rowsRef,
+  ]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

package/src/components/Dictionary/Dictionary.module.scss

@@ -2,17 +2,8 @@
 
 .dictionary {
   position: relative;
-  transition: var(--transition);
   word-break: break-word;
 
-  &.isAllowed {
-    background-color: var(--color--green--light);
-  }
-
-  &.isNotAllowed {
-    background-color: var(--color--red--light);
-  }
-
   &:focus-within {
     @include focus-effect;
   }
@@ -21,6 +12,8 @@
 .content {
   @include scrollbars;
 
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   border-radius: inherit;
@@ -31,26 +24,18 @@
 }
 
 .result {
-  transition: var(--transition);
+  flex-shrink: 0;
+
+  &:last-child {
+    flex-grow: 1;
+  }
 
   &.isAllowed {
     background-color: var(--color--green--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 
   &.isNotAllowed {
     background-color: var(--color--red--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 }
 

package/src/components/Dictionary/Dictionary.tsx

@@ -25,16 +25,9 @@ export const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const results = useTypedSelector(selectDictionaryResults);
   const isLoading = useTypedSelector(selectDictionaryIsLoading);
   const error = useTypedSelector(selectDictionaryError);
-  const isLastAllowed = results.at(-1)?.isAllowed;
 
   return (
-    <div
-      className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isLastAllowed === true,
-        [styles.isNotAllowed]: isLastAllowed === false,
-      })}
-      style={{ height: dictionaryResultsHeight }}
-    >
+    <div className={classNames(styles.dictionary, className)} style={{ height: dictionaryResultsHeight }}>
       <div className={styles.content}>
         {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 

package/src/components/Results/Result.tsx

@@ -28,7 +28,6 @@ export const Result = ({
   onClick = noop,
   onFocus = noop,
   onMouseEnter = noop,
-  onMouseLeave = noop,
   style,
 }: RowComponentProps<ResultData>): ReactElement => {
   const { resultWordWidth } = useAppLayout();
@@ -44,7 +43,6 @@ export const Result = ({
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
   const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
-  const handleMouseLeave: MouseEventHandler = (event) => onMouseLeave(result, event);
   const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
   const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
 
@@ -65,7 +63,6 @@ export const Result = ({
       onClick={handleClick}
       onFocus={handleFocus}
       onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
         {columns[ResultColumnId.Coordinates] && (

package/src/components/Results/Results.module.scss

@@ -93,7 +93,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   @include button-reset;
 
   user-select: none;
-  transition: var(--transition);
   cursor: pointer;
   font-weight: 400;
 

package/src/components/Results/Results.tsx

@@ -44,7 +44,14 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo<ResultData>(
-    () => ({ ...callbacks, highlightedIndex, results }),
+    () => ({
+      highlightedIndex,
+      results,
+      onBlur: callbacks.onBlur,
+      onClick: callbacks.onClick,
+      onFocus: callbacks.onFocus,
+      onMouseEnter: callbacks.onMouseEnter,
+    }),
     [callbacks, highlightedIndex, results],
   );
   const listRef = useListRef(null);
@@ -74,6 +81,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
       aria-busy={isLoadingDebounced}
       aria-label={translate('results')}
       className={classNames(styles.results, className)}
+      data-outdated={isOutdated}
       data-testid="results"
       role="region"
     >
@@ -111,7 +119,7 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
             )}
 
             {!isOutdated && results.length > 0 && (
-              <div className={styles.listContainer}>
+              <div className={styles.listContainer} onMouseLeave={callbacks.onMouseLeave}>
                 <List
                   className={classNames(styles.list, {
                     [styles.outdated]: isOutdated,

package/src/components/Results/types.ts

@@ -1,15 +1,15 @@
 import { type Result } from '@scrabble-solver/types';
-import { type FocusEvent, type MouseEvent } from 'react';
+import { type FocusEvent, type MouseEvent, type MouseEventHandler } from 'react';
 
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;
   onClick?: (result: Result, event: MouseEvent) => void;
   onFocus?: (result: Result, event: FocusEvent) => void;
   onMouseEnter?: (result: Result, event: MouseEvent) => void;
-  onMouseLeave?: (result: Result, event: MouseEvent) => void;
+  onMouseLeave?: MouseEventHandler;
 }
 
-export interface ResultData extends ResultCallbacks {
+export interface ResultData extends Omit<ResultCallbacks, 'onMouseLeave'> {
   highlightedIndex?: number;
   results: Result[] | undefined;
 }

package/src/components/Solver/Solver.tsx

@@ -14,6 +14,7 @@ import {
   solveSlice,
   useTranslate,
   useTypedSelector,
+  useTypedStore,
 } from '@/state';
 
 import { Alert } from '../Alert';
@@ -38,13 +39,13 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const { maxControlsWidth, showCompactControls, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const resultCandidate = useTypedSelector(selectResultCandidate);
   const results = useTypedSelector(selectProcessedResults);
+  const store = useTypedStore();
   const [bestResult] = results || [];
   const touchCallbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        const isSelected = result === resultCandidate;
+        const isSelected = result === selectResultCandidate(store.getState());
 
         if (isSelected) {
           dispatch(resultsSlice.actions.applyResult(result));
@@ -53,7 +54,7 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
         }
       },
     }),
-    [dispatch, resultCandidate],
+    [dispatch, store],
   );
   const mouseCallbacks = useMemo(
     () => ({

package/src/components/Tooltip/useTooltip.ts

@@ -37,7 +37,7 @@ export const useTooltip = ({ placement = 'top' }: TooltipOptions = {}) => {
   const { delay } = useDelayGroup(context);
   const hover = useHover(context, { move: false, delay });
   const focus = useFocus(context);
-  const dismiss = useDismiss(context);
+  const dismiss = useDismiss(context, { ancestorScroll: true });
   const role = useRole(context, { role: 'tooltip' });
   const interactions = useInteractions([hover, focus, dismiss, role]);
 

package/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/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/src/pages/api/solve.ts

@@ -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/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/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/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),
+    })
+  );
 };