scrabble-solver 2.18.10-alpha.0 → 2.18.10-alpha.2

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/WordsTable.tsx

@@ -0,0 +1,137 @@
+import { isSameBoardWord } from '@scrabble-solver/types';
+import classNames from 'classnames';
+import { type FunctionComponent, useCallback, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { List } from 'react-window';
+
+import { EmptyState } from '@/components/EmptyState';
+import { Header, HeaderButton, Search } from '@/components/Table';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import QuestionSquare from '@/icons/QuestionSquare.svg';
+import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
+import {
+  hoveredWordSlice,
+  selectHoveredWord,
+  selectLocale,
+  selectProcessedWords,
+  selectWordsQuery,
+  selectWordsSort,
+  useTranslate,
+  useTypedSelector,
+  verifySlice,
+} from '@/state';
+import { WordColumnId } from '@/types';
+
+import { type WordRowData, WordRow } from './WordRow';
+import styles from './WordsTable.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onPreview: () => void;
+}
+
+export const WordsTable: FunctionComponent<Props> = ({ className, isOpen, onPreview }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
+  const isCompactLayout = useMediaQuery('<l');
+  const highlightFollowsPointer = !isTouchDevice && !isCompactLayout;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const words = useTypedSelector(selectProcessedWords);
+  const query = useTypedSelector(selectWordsQuery);
+  const sort = useTypedSelector(selectWordsSort);
+  const hoveredWord = useTypedSelector(selectHoveredWord);
+  const highlightedIndex = hoveredWord ? words.findIndex((word) => isSameBoardWord(word, hoveredWord)) : -1;
+  const rowProps = useMemo<WordRowData>(
+    () => ({ highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview }),
+    [highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview],
+  );
+
+  const handleSort = useCallback(
+    (columnId: WordColumnId) => {
+      dispatch(verifySlice.actions.sort(columnId));
+    },
+    [dispatch],
+  );
+
+  const handleQueryChange = useCallback(
+    (newQuery: string) => {
+      dispatch(verifySlice.actions.changeQuery(newQuery));
+    },
+    [dispatch],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    dispatch(hoveredWordSlice.actions.clear());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isOpen && isCompactLayout && words.length > 0 && highlightedIndex === -1) {
+      dispatch(hoveredWordSlice.actions.set(words[0]));
+    }
+  }, [dispatch, highlightedIndex, isOpen, isCompactLayout, words]);
+
+  return (
+    <div
+      aria-label={translate('words')}
+      className={classNames(styles.words, className)}
+      data-testid="words"
+      role="region"
+    >
+      <Header>
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={WordColumnId.Coordinates}
+          sort={sort}
+          translationKey="settings.showCoordinates"
+          onSort={handleSort}
+        />
+
+        <HeaderButton id={WordColumnId.Word} primary sort={sort} translationKey="common.word" onSort={handleSort} />
+
+        <HeaderButton
+          className={styles.stat}
+          Icon={QuestionSquare}
+          id={WordColumnId.Validity}
+          sort={sort}
+          translationKey="words.validity"
+          onSort={handleSort}
+        />
+      </Header>
+
+      <div aria-live="polite" className={styles.content}>
+        {words.length === 0 && <EmptyState variant="info">{translate('words.empty-state.no-words')}</EmptyState>}
+
+        {words.length > 0 && (
+          <div className={styles.listContainer}>
+            <List
+              className={styles.list}
+              dir={direction}
+              overscanCount={RESULTS_OVERSCAN_COUNT}
+              rowComponent={WordRow}
+              rowCount={words.length}
+              rowHeight={RESULTS_ITEM_HEIGHT}
+              rowProps={rowProps}
+              onMouseLeave={highlightFollowsPointer ? handleMouseLeave : undefined}
+            />
+          </div>
+        )}
+      </div>
+
+      {words.length > 0 && (
+        <Search
+          className={styles.input}
+          placeholder={translate('words.input.placeholder')}
+          value={query}
+          onChange={handleQueryChange}
+        />
+      )}
+    </div>
+  );
+};

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/index.ts

@@ -0,0 +1 @@
+export { WordsTable } from './WordsTable';

package/packages/scrabble-solver/src/modals/WordsModal/components/index.ts

@@ -0,0 +1 @@
+export { WordsTable } from './WordsTable';

package/packages/scrabble-solver/src/modals/WordsModal/index.ts

@@ -0,0 +1 @@
+export { WordsModal } from './WordsModal';

package/packages/scrabble-solver/src/modals/preload.ts

@@ -0,0 +1,24 @@
+import { waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
+
+let isScheduled = false;
+
+export function schedulePreloadModals(): void {
+  if (isScheduled || typeof window === 'undefined') {
+    return;
+  }
+
+  isScheduled = true;
+
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+  waitForIdleOrFirstIntent().then(() =>
+    Promise.all([
+      import('./DictionaryModal'),
+      import('./KeyMapModal'),
+      import('./MenuModal'),
+      import('./RemainingTilesModal'),
+      import('./ResultsModal'),
+      import('./SettingsModal'),
+      import('./WordsModal'),
+    ]),
+  );
+}

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

@@ -0,0 +1,52 @@
+import { FloatingDelayGroup } from '@floating-ui/react';
+import { type AppProps } from 'next/app';
+import Head from 'next/head';
+import { type FunctionComponent } from 'react';
+import { Provider } from 'react-redux';
+
+import { SITE_DESCRIPTION, SITE_URL } from '@/parameters';
+import { store } from '@/state';
+
+import '../styles/global.scss';
+
+const TITLE = 'Scrabble Solver 2 - Board Solver & Word Finder';
+
+const App: FunctionComponent<AppProps> = ({ Component, pageProps, router }) => {
+  const isIndexable = router.pathname === '/';
+
+  return (
+    <>
+      <Head>
+        <title>{TITLE}</title>
+        <meta charSet="utf-8" />
+        <meta content="Kamil Mielnik" name="author" />
+        <meta content={SITE_DESCRIPTION} name="description" />
+        {isIndexable ? <link href={`${SITE_URL}/`} rel="canonical" /> : <meta content="noindex" name="robots" />}
+        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        <meta content="Scrabble Solver" property="og:site_name" />
+        <meta content={TITLE} property="og:title" />
+        <meta content={SITE_DESCRIPTION} property="og:description" />
+        <meta content="website" property="og:type" />
+        <meta content={`${SITE_URL}/`} property="og:url" />
+        <meta content="en_US" property="og:locale" />
+        <meta content={`${SITE_URL}/og.png`} property="og:image" />
+        <meta content="image/png" property="og:image:type" />
+        <meta content="1200" property="og:image:width" />
+        <meta content="630" property="og:image:height" />
+        <meta content="Scrabble tiles spelling out Scrabble Solver 2" property="og:image:alt" />
+        <meta content="summary_large_image" name="twitter:card" />
+        <meta content={TITLE} name="twitter:title" />
+        <meta content={SITE_DESCRIPTION} name="twitter:description" />
+        <meta content={`${SITE_URL}/og.png`} name="twitter:image" />
+      </Head>
+
+      <Provider store={store}>
+        <FloatingDelayGroup delay={0}>
+          <Component {...pageProps} />
+        </FloatingDelayGroup>
+      </Provider>
+    </>
+  );
+};
+
+export default App;

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

@@ -0,0 +1,129 @@
+import { games } from '@scrabble-solver/configs';
+import { Game, Locale } from '@scrabble-solver/types';
+import fs from 'fs';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+import path from 'path';
+import { type ReactElement } from 'react';
+
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { CONFIG_PENDING_CLASS } from '@/parameters';
+
+const GAME_DIMENSIONS = Object.fromEntries(
+  Object.values(games).map(({ boardHeight, boardWidth, game, rackSize }) => [
+    game,
+    [boardWidth, boardHeight, rackSize],
+  ]),
+);
+
+const LOCALE_DIRECTIONS = Object.fromEntries(
+  Object.entries(LOCALE_FEATURES).map(([locale, { direction }]) => [locale, direction]),
+);
+
+/**
+ * The SSR HTML is always an English Scrabble board. This runs before first paint
+ * so a returning user's persisted board dimensions and text direction apply without a flash.
+ * The board itself cannot be reshaped pre-hydration, so it is hidden (CONFIG_PENDING_CLASS,
+ * see global.scss) until hydration applies the persisted config.
+ */
+const preHydrationScript = `(function () {
+  try {
+    var settings = JSON.parse(localStorage.getItem('scrabble-solver.settings'));
+
+    if (!settings) {
+      return;
+    }
+
+    var dimensions = ${JSON.stringify(GAME_DIMENSIONS)}[settings.game];
+    var direction = ${JSON.stringify(LOCALE_DIRECTIONS)}[settings.locale];
+    var root = document.documentElement;
+
+    if (dimensions) {
+      root.style.setProperty('--board-cols', dimensions[0]);
+      root.style.setProperty('--board-rows', dimensions[1]);
+      root.style.setProperty('--rack-size', dimensions[2]);
+
+      if (settings.game !== ${JSON.stringify(Game.Scrabble)}) {
+        root.classList.add(${JSON.stringify(CONFIG_PENDING_CLASS)});
+      }
+    }
+
+    if (direction) {
+      root.dir = direction;
+      root.lang = settings.locale;
+    }
+  } catch (error) {}
+})()`;
+
+export default class MyDocument extends Document {
+  render(): ReactElement {
+    return (
+      <Html
+        /**
+         * dir must be present pre-hydration
+         */
+        dir="ltr"
+        /**
+         * lang must match the default locale
+         */
+        lang={Locale.EN_US}
+      >
+        <InlineCssHead>
+          {/* eslint-disable-next-line react/no-danger */}
+          <script dangerouslySetInnerHTML={{ __html: preHydrationScript }} />
+          <link href="/icons/apple-touch-icon-57x57.png" rel="apple-touch-icon-precomposed" sizes="57x57" />
+          <link href="/icons/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114" />
+          <link href="/icons/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72" />
+          <link href="/icons/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144" />
+          <link href="/icons/apple-touch-icon-60x60.png" rel="apple-touch-icon-precomposed" sizes="60x60" />
+          <link href="/icons/apple-touch-icon-120x120.png" rel="apple-touch-icon-precomposed" sizes="120x120" />
+          <link href="/icons/apple-touch-icon-76x76.png" rel="apple-touch-icon-precomposed" sizes="76x76" />
+          <link href="/icons/apple-touch-icon-152x152.png" rel="apple-touch-icon-precomposed" sizes="152x152" />
+          <link href="/icons/favicon-196x196.png" rel="icon" sizes="196x196" type="image/png" />
+          <link href="/icons/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png" />
+          <link href="/icons/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
+          <link href="/icons/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
+          <link href="/icons/favicon-128.png" rel="icon" sizes="128x128" type="image/png" />
+          <link href="/icons/favicon.svg" rel="icon" />
+          <link href="/site.webmanifest" rel="manifest" />
+          <meta content="Scrabble Solver" name="application-name" />
+          <meta content="#EFE3AE" name="theme-color" />
+          <meta content="#EFE3AE" name="msapplication-TileColor" />
+          <meta content="/icons/mstile-144x144.png" name="msapplication-TileImage" />
+          <meta content="/icons/mstile-70x70.png" name="msapplication-square70x70logo" />
+          <meta content="/icons/mstile-150x150.png" name="msapplication-square150x150logo" />
+          <meta content="/icons/mstile-310x150.png" name="msapplication-wide310x150logo" />
+          <meta content="/icons/mstile-310x310.png" name="msapplication-square310x310logo" />
+        </InlineCssHead>
+
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+/**
+ * Removes render-blocking CSS requests from the critical path.
+ */
+class InlineCssHead extends Head {
+  getCssLinks(files: Parameters<Head['getCssLinks']>[0]): ReactElement[] | null {
+    try {
+      const cssFiles = files.allFiles.filter((file) => file.endsWith('.css'));
+
+      return cssFiles.map((file) => (
+        <style
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: fs.readFileSync(path.join(process.cwd(), '.next', file), 'utf-8'),
+          }}
+          data-href={`/_next/${file}`}
+          key={file}
+        />
+      ));
+    } catch {
+      return super.getCssLinks(files);
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import { games } from '@scrabble-solver/configs';
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import { logEvent } from '@scrabble-solver/logger';
+import { type Locale, isLocale } from '@scrabble-solver/types';
+import { getWordDefinition } from '@scrabble-solver/word-definitions';
+import { type NextApiRequest, type NextApiResponse } from 'next';
+
+import { type ApiContext, BadRequestError, withApiLog } from '@/api';
+
+interface RequestData {
+  locale: Locale;
+  words: string[];
+}
+
+const MAXIMUM_COLLISIONS_COUNT = Object.values(games).reduce((result, game) => Math.max(result, game.rackSize), 0);
+const MAXIMUM_WORDS_COUNT = MAXIMUM_COLLISIONS_COUNT + 1;
+
+export default withApiLog('definition', dictionary);
+
+async function dictionary(request: NextApiRequest, response: NextApiResponse, { ip, getElapsedMs }: ApiContext) {
+  const { locale, words } = parseRequest(request);
+  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()));
+
+  logEvent({
+    type: 'definition',
+    ip,
+    ms: getElapsedMs(),
+    locale,
+    words: words.join(','),
+    found: results.filter((result) => result.definitions.length > 0).length,
+  });
+}
+
+function parseRequest(request: NextApiRequest): RequestData {
+  const { locale, word } = request.query;
+
+  if (!isLocale(locale)) {
+    throw new BadRequestError('Invalid "locale" parameter');
+  }
+
+  if (typeof word !== 'string' || word.length === 0) {
+    throw new BadRequestError('Invalid "word" parameter');
+  }
+
+  const words = Array.from(
+    new Set(
+      word
+        .replaceAll(COMMA_ARABIC, COMMA_LATIN)
+        .split(COMMA_LATIN)
+        .map((part) => part.trim())
+        .filter(Boolean),
+    ),
+  );
+
+  if (words.length > MAXIMUM_WORDS_COUNT) {
+    throw new BadRequestError('Invalid "word" parameter');
+  }
+
+  return {
+    locale,
+    words,
+  };
+}

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

@@ -0,0 +1,123 @@
+import { type Gaddag } from '@kamilmielnik/gaddag';
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import { logEvent } from '@scrabble-solver/logger';
+import { type Locale, isLocale } from '@scrabble-solver/types';
+import { type NextApiRequest, type NextApiResponse } from 'next';
+import { promisify } from 'util';
+import { gzip } from 'zlib';
+
+import { type ApiContext, BadRequestError, withApiLog } from '@/api';
+
+interface RequestData {
+  locale: Locale;
+}
+
+export default withApiLog('download', dictionary);
+
+async function dictionary(request: NextApiRequest, response: NextApiResponse, { ip, getElapsedMs }: ApiContext) {
+  const { locale } = parseRequest(request);
+  const gaddag = await dictionaries.get(locale);
+  const encoding = acceptsGzip(request) ? 'gzip' : 'identity';
+  const body = encoding === 'gzip' ? 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 (encoding === 'gzip') {
+    response.setHeader('Content-Encoding', 'gzip');
+  }
+
+  response.status(200).send(body);
+
+  logEvent({
+    type: 'download',
+    ip,
+    ms: getElapsedMs(),
+    locale,
+    status: response.statusCode,
+    encoding,
+    bytes: response.statusCode === 304 ? 0 : body.byteLength,
+  });
+}
+
+function parseRequest(request: NextApiRequest): RequestData {
+  const { locale } = request.query;
+
+  if (!isLocale(locale)) {
+    throw new BadRequestError('Invalid "locale" parameter');
+  }
+
+  return {
+    locale,
+  };
+}
+
+function 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>>();
+
+function 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);
+
+function 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: '50mb',
+  },
+};

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

@@ -0,0 +1,103 @@
+import { getConfig, hasConfig } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import { logEvent } from '@scrabble-solver/logger';
+import { solve as solveScrabble } from '@scrabble-solver/solver';
+import {
+  type Config,
+  type Game,
+  type Locale,
+  Board,
+  isBoardJson,
+  isGame,
+  isLocale,
+  Tile,
+} from '@scrabble-solver/types';
+import { type NextApiRequest, type NextApiResponse } from 'next';
+
+import { type ApiContext, BadRequestError, isBoardValid, isCharacterValid, withApiLog } from '@/api';
+import { isStringArray } from '@/lib/isStringArray';
+
+interface RequestData {
+  board: Board;
+  characters: string[];
+  config: Config;
+  game: Game;
+  locale: Locale;
+}
+
+export default withApiLog('solve', solve);
+
+async function solve(request: NextApiRequest, response: NextApiResponse, { ip, getElapsedMs }: ApiContext) {
+  const { board, characters, config, game, locale } = parseRequest(request);
+  const gaddag = await dictionaries.get(locale);
+  const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
+  const results = solveScrabble(gaddag, config, board, tiles);
+  response.status(200).send(results);
+
+  logEvent({
+    type: 'solve',
+    ip,
+    ms: getElapsedMs(),
+    locale,
+    game,
+    tiles: board.getTilesCount(),
+    blanks: board.getBlanksCount(),
+    rack: characters.join(','),
+    results: results.length,
+  });
+}
+
+function parseRequest(request: NextApiRequest): RequestData {
+  const { board: boardJson, characters, game, locale } = request.body;
+
+  if (!isLocale(locale)) {
+    throw new BadRequestError('Invalid "locale" parameter');
+  }
+
+  if (!isGame(game)) {
+    throw new BadRequestError('Invalid "game" parameter');
+  }
+
+  if (!isStringArray(characters) || characters.length === 0) {
+    throw new BadRequestError('Invalid "characters" parameter');
+  }
+
+  if (!hasConfig(game, locale)) {
+    throw new BadRequestError(`No game "${game}" in "${locale}"`);
+  }
+
+  const config = getConfig(game, locale);
+
+  for (const character of characters) {
+    if (!isCharacterValid(character)) {
+      throw new BadRequestError('Invalid "characters" parameter');
+    }
+  }
+
+  const blanksCount = characters.filter((character) => character === BLANK).length;
+
+  if (blanksCount > config.blanksCount) {
+    throw new BadRequestError('Too many blank tiles passed');
+  }
+
+  if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
+    throw new BadRequestError('Invalid "board" parameter');
+  }
+
+  const board = Board.fromJson(boardJson);
+
+  return {
+    board,
+    characters,
+    config,
+    game,
+    locale,
+  };
+}
+
+export const config = {
+  api: {
+    responseLimit: '25mb',
+  },
+};