@scrabble-solver/scrabble-solver 2.17.0 → 2.18.0

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -3,8 +3,9 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
-import { LOCALE_FEATURES } from '@/i18n';
+import { Radio } from '@/components/Radio';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { LOCALE_ICONS } from '@/i18n/localeIcons';
 import { selectLocale, settingsSlice, useTypedSelector } from '@/state';
 
 import styles from './LocaleSetting.module.scss';
@@ -27,25 +28,27 @@ export const LocaleSetting: FunctionComponent<Props> = ({ className, disabled })
 
   return (
     <div className={className}>
-      {OPTIONS.map(({ Icon, ...option }) => (
-        <Radio
-          checked={locale === option.locale}
-          className={classNames(styles.option, className, {
-            [styles.checked]: locale === option.locale,
-          })}
-          disabled={disabled}
-          key={option.locale}
-          name="locale"
-          value={option.locale}
-          onChange={handleChange}
-        >
-          <span className={styles.label}>
-            <Icon aria-hidden="true" className={styles.flag} role="img" />
-
-            <span>{option.label}</span>
-          </span>
-        </Radio>
-      ))}
+      {OPTIONS.map((option) => {
+        const Icon = LOCALE_ICONS[option.locale];
+
+        return (
+          <Radio
+            checked={locale === option.locale}
+            className={classNames(styles.option, className)}
+            disabled={disabled}
+            key={option.locale}
+            name="locale"
+            value={option.locale}
+            onChange={handleChange}
+          >
+            <span className={styles.label}>
+              <Icon aria-hidden="true" className={styles.flag} role="img" />
+
+              <span>{option.label}</span>
+            </span>
+          </Radio>
+        );
+      })}
     </div>
   );
 };

package/src/modals/SettingsModal/components/RemoveCellFiltersSetting/RemoveCellFiltersSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/RemoveCellFiltersSetting/RemoveCellFiltersSetting.tsx

@@ -1,7 +1,7 @@
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectRemoveCellFilters, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import { parseValue } from './lib';

package/src/modals/SettingsModal/components/ShowCoordinatesSetting/ShowCoordinatesSetting.module.scss.d.ts

@@ -0,0 +1,7 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly label: string;
+  readonly option: string;
+};
+
+export default styles;

package/src/modals/SettingsModal/components/ShowCoordinatesSetting/ShowCoordinatesSetting.tsx

@@ -2,7 +2,7 @@ import { type ShowCoordinates } from '@scrabble-solver/types';
 import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Radio } from '@/components';
+import { Radio } from '@/components/Radio';
 import { selectShowCoordinates, settingsSlice, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './ShowCoordinatesSetting.module.scss';
@@ -18,10 +18,6 @@ export const ShowCoordinatesSetting: FunctionComponent<Props> = ({ className, di
   const value = useTypedSelector(selectShowCoordinates);
 
   const options = [
-    {
-      label: translate('settings.showCoordinates.hidden'),
-      value: 'hidden',
-    },
     {
       label: translate('settings.showCoordinates.original'),
       value: 'original',

package/src/modals/WordsModal/WordsModal.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly badge: string;
+  readonly icon: string;
+  readonly invalid: string;
+  readonly title: string;
+  readonly valid: string;
+  readonly word: string;
+};
+
+export default styles;

package/src/modals/WordsModal/WordsModal.tsx

@@ -1,8 +1,10 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { Badge, Modal } from '@/components';
-import { Check, Cross } from '@/icons';
+import { Badge } from '@/components/Badge';
+import { Modal } from '@/components/Modal';
+import Check from '@/icons/Check.svg';
+import Cross from '@/icons/Cross.svg';
 import { selectInvalidWords, selectLocale, selectValidWords, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './WordsModal.module.scss';

package/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/src/pages/_app.tsx

@@ -4,8 +4,7 @@ import Head from 'next/head';
 import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
-import { AppLayoutProvider } from '@/app-layout';
-import { SeoMessage } from '@/components';
+import { SeoMessage } from '@/components/SeoMessage';
 import { store } from '@/state';
 
 import '../styles/global.scss';
@@ -77,13 +76,11 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
     </Head>
 
     <Provider store={store}>
-      <AppLayoutProvider>
-        <SeoMessage />
+      <SeoMessage />
 
-        <FloatingDelayGroup delay={0}>
-          <Component {...pageProps} />
-        </FloatingDelayGroup>
-      </AppLayoutProvider>
+      <FloatingDelayGroup delay={0}>
+        <Component {...pageProps} />
+      </FloatingDelayGroup>
     </Provider>
   </>
 );

package/src/pages/_document.tsx

@@ -1,11 +1,75 @@
+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';
 
-class MyDocument extends Document {
+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 lang="en">
-        <Head>
+      <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 rel="apple-touch-icon-precomposed" sizes="57x57" href="icons/apple-touch-icon-57x57.png" />
           <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114.png" />
           <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72.png" />
@@ -27,7 +91,7 @@ class MyDocument extends Document {
           <meta name="msapplication-square150x150logo" content="icons/mstile-150x150.png" />
           <meta name="msapplication-wide310x150logo" content="icons/mstile-310x150.png" />
           <meta name="msapplication-square310x310logo" content="icons/mstile-310x310.png" />
-        </Head>
+        </InlineCssHead>
 
         <body>
           <Main />
@@ -38,4 +102,26 @@ class MyDocument extends Document {
   }
 }
 
-export default MyDocument;
+/**
+ * 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/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;

package/src/pages/index.module.scss

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

package/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/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/src/pages/not-found.tsx

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