@scrabble-solver/scrabble-solver 2.17.0 → 2.18.1

package/src/pages/index.tsx

@@ -1,31 +1,77 @@
-/* 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, GITHUB_PROJECT_URL, NPM_PACKAGE_URL, SITE_DESCRIPTION, SITE_URL } 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,
+});
+
+const WEB_APPLICATION_JSON_LD = JSON.stringify({
+  '@context': 'https://schema.org',
+  '@type': 'WebApplication',
+  name: 'Scrabble Solver',
+  alternateName: 'Scrabble Solver 2',
+  url: `${SITE_URL}/`,
+  description: SITE_DESCRIPTION,
+  applicationCategory: 'GameApplication',
+  operatingSystem: 'Any',
+  browserRequirements: 'Requires JavaScript',
+  image: `${SITE_URL}/og.png`,
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: ['en-US', 'en-GB', 'de-DE', 'es-ES', 'fa-IR', 'fr-FR', 'pl-PL', 'ro-RO', 'tr-TR'],
+  featureList: [
+    'Finds the highest-scoring words for a given board and rack',
+    'Supports Scrabble, Super Scrabble, Scrabble Duel, Letter League, Crossplay, Literaki, and Kelimelik',
+    'Dictionaries and word definitions in 8 languages',
+    'Works offline once a dictionary is cached',
+    'Free, open source, no ads, no sign-up',
+  ],
+  sameAs: [GITHUB_PROJECT_URL, NPM_PACKAGE_URL],
+  author: { '@type': 'Person', name: 'Kamil Mielnik', url: 'https://kamilmielnik.com' },
+});
 
 interface Props {
   version: string;
@@ -37,7 +83,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 +93,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,29 +136,48 @@ 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}>
         <div className={styles.navContent}>
-          <div className={styles.navLogo}>
+          <h1 className={styles.navLogo}>
             <a className={styles.logoContainer} href="/" title={version}>
               <Logo className={styles.logo} />
             </a>
-          </div>
+          </h1>
 
           <NavButtons
             onClear={handleClear}
@@ -112,28 +194,33 @@ 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}
-      />
+      {/* eslint-disable-next-line react/no-danger */}
+      <script dangerouslySetInnerHTML={{ __html: WEB_APPLICATION_JSON_LD }} type="application/ld+json" />
+
+      {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/src/pages/not-found.tsx

@@ -1,5 +1,16 @@
-'use-client';
+import Head from 'next/head';
+import { type FunctionComponent } from 'react';
 
-import { NotFound } from '@/components';
+import { NotFound } from '@/components/NotFound';
 
-export default NotFound;
+const NotFoundPage: FunctionComponent = () => (
+  <>
+    <Head>
+      <title>Page not found - Scrabble Solver</title>
+    </Head>
+
+    <NotFound />
+  </>
+);
+
+export default NotFoundPage;

package/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,59 @@ 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);
+export const NPM_PACKAGE_URL = 'https://www.npmjs.com/package/scrabble-solver';
+
+export const SITE_URL = 'https://scrabble-solver.org';
+
+export const SITE_DESCRIPTION =
+  'Free, open-source board solver and word finder for Scrabble, Letter League, and Literaki. Enter your letters and board to get the highest-scoring words.';
+
+// 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 +74,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/src/serviceWorkerManager.ts

@@ -1,9 +1,12 @@
-import { Workbox } from 'workbox-window';
+import { waitForIdle } from '@/lib/waitForIdleOrFirstIntent';
 
 export const registerServiceWorker = async () => {
   if (!globalThis.navigator || !('serviceWorker' in globalThis.navigator)) {
     return;
   }
 
-  await new Workbox('/service-worker.js').register({ immediate: true });
+  // Registration waits for load+idle so the install's precache downloads never compete with page resources
+  await waitForIdle();
+  const { Workbox } = await import('workbox-window');
+  await new Workbox('/service-worker.js').register();
 };

package/src/state/actions.ts

@@ -1,5 +1,5 @@
 import { createAction } from '@reduxjs/toolkit';
 
-export const initialize = createAction('initialize');
+export const initialize = createAction<{ version: string }>('initialize');
 
 export const reset = createAction('reset');

package/src/state/app/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';

package/src/state/app/initialState.ts

@@ -0,0 +1,6 @@
+import type { AppState } from './types';
+
+export const appInitialState: AppState = {
+  isHydrated: false,
+  version: '',
+};

package/src/state/app/selectors.ts

@@ -0,0 +1,5 @@
+import type { RootState } from '../types';
+
+export const selectIsHydrated = (state: RootState): boolean => state.app.isHydrated;
+
+export const selectVersion = (state: RootState): string => state.app.version;

package/src/state/app/slice.ts

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+import { initialize } from '../actions';
+
+import { appInitialState } from './initialState';
+
+export const appSlice = createSlice({
+  initialState: appInitialState,
+  name: 'app',
+  reducers: {
+    hydrated: (state) => {
+      state.isHydrated = true;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(initialize, (state, action) => {
+      state.version = action.payload.version;
+    });
+  },
+});

package/src/state/app/types.ts

@@ -0,0 +1,4 @@
+export interface AppState {
+  isHydrated: boolean;
+  version: string;
+}

package/src/state/board/initialState.ts

@@ -1,7 +1,6 @@
 import { getConfig } from '@scrabble-solver/configs';
 import { Board } from '@scrabble-solver/types';
 
-import { localStorage } from '../localStorage';
 import { settingsInitialState } from '../settings';
 
 import type { BoardState } from './types';
@@ -9,7 +8,7 @@ import type { BoardState } from './types';
 const { game, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getConfig(game, locale);
 
-export const boardInitialState: BoardState = localStorage.getBoard() ?? Board.create(boardWidth, boardHeight);
+export const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/i18n/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';

package/src/state/i18n/initialState.ts

@@ -0,0 +1,5 @@
+import type { I18nState } from './types';
+
+export const i18nInitialState: I18nState = {
+  translations: {},
+};

package/src/state/i18n/selectors.ts

@@ -0,0 +1,3 @@
+import type { RootState } from '../types';
+
+export const selectLoadedTranslations = (state: RootState) => state.i18n.translations;

package/src/state/i18n/slice.ts

@@ -0,0 +1,16 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import { type Locale } from '@scrabble-solver/types';
+
+import type { Translations } from '@/types';
+
+import { i18nInitialState } from './initialState';
+
+export const i18nSlice = createSlice({
+  initialState: i18nInitialState,
+  name: 'i18n',
+  reducers: {
+    loaded: (state, action: PayloadAction<{ locale: Locale; translations: Translations }>) => {
+      state.translations[action.payload.locale] = action.payload.translations;
+    },
+  },
+});

package/src/state/i18n/types.ts

@@ -0,0 +1,7 @@
+import { type Locale } from '@scrabble-solver/types';
+
+import type { Translations } from '@/types';
+
+export interface I18nState {
+  translations: Partial<Record<Locale, Translations>>;
+}

package/src/state/index.ts

@@ -1,8 +1,10 @@
 export * from './actions';
+export * from './app';
 export * from './board';
 export * from './cellFilters';
 export * from './dictionary';
 export * from './hoveredTile';
+export * from './i18n';
 export * from './localStorage';
 export * from './rack';
 export * from './results';

package/src/state/lib.ts

@@ -1,7 +1,7 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { type Board, type Config } from '@scrabble-solver/types';
 
-import { createKeyComparator } from '@/lib';
+import { createKeyComparator } from '@/lib/createKeyComparator';
 import { type RemainingTile } from '@/types';
 
 export const getRemainingTiles = (