@scrabble-solver/scrabble-solver 2.17.0 → 2.18.1

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,88 +4,49 @@ 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 { SITE_DESCRIPTION, SITE_URL } from '@/parameters';
 import { store } from '@/state';
 
 import '../styles/global.scss';
 
-const DESCRIPTION =
-  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble, Scrabble Duel, Super Scrabble, Letter League, Crossplay, Literaki and Kelimelik. Quickly find top scoring words using given letters and board state. Available in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.';
-
-const KEYWORDS = [
-  'Scrabble Solver',
-  'Scrabble',
-  'Scrabble Duel',
-  'Solver',
-  'Super Scrabble',
-  'Kelimelik',
-  'Letter League',
-  'Crossplay',
-  'NYT Crossplay',
-  'Literaki',
-  'Board',
-  'Open-source',
-  'Open',
-  'Source',
-  'Word',
-  'Finder',
-  'Cheating',
-  'Word',
-  'English',
-  'Français',
-  'French',
-  'Deutsch',
-  'German',
-  'Polski',
-  'Polish',
-  'فارسی',
-  'Farsi',
-  'Español',
-  'Spanish',
-  'Română',
-  'Romanian',
-  'Türkçe',
-  'Turkish',
-  'SOWPODS',
-  'TWL06',
-  'SJP',
-  'FISE-2017',
-  'FISE-2',
-  'CNRTL',
-  'Kamil Mielnik',
-].join(',');
-
-const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
-  <>
-    <Head>
-      <title>Scrabble Solver 2</title>
-      <meta charSet="utf-8" />
-      <meta name="author" content="Kamil Mielnik" />
-      <meta name="description" content={DESCRIPTION} />
-      <meta name="keywords" content={KEYWORDS} />
-      <meta name="robots" content="index, follow, notranslate, noimageindex" />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta property="og:title" content={DESCRIPTION} />
-      <meta property="og:type" content="website" />
-      <meta property="og:url" content="https://scrabble-solver.org" />
-      <meta property="og:image" content="https://scrabble-solver.org/og.png" />
-      <meta property="og:image:type" content="image/png" />
-      <meta property="og:image:width" content="1200" />
-      <meta property="og:image:height" content="630" />
-      <meta property="og:image:alt" content={DESCRIPTION} />
-    </Head>
-
-    <Provider store={store}>
-      <AppLayoutProvider>
-        <SeoMessage />
-
+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 name="author" content="Kamil Mielnik" />
+        <meta name="description" content={SITE_DESCRIPTION} />
+        {isIndexable ? <link rel="canonical" href={`${SITE_URL}/`} /> : <meta name="robots" content="noindex" />}
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta property="og:site_name" content="Scrabble Solver" />
+        <meta property="og:title" content={TITLE} />
+        <meta property="og:description" content={SITE_DESCRIPTION} />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={`${SITE_URL}/`} />
+        <meta property="og:locale" content="en_US" />
+        <meta property="og:image" content={`${SITE_URL}/og.png`} />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:image:alt" content="Scrabble tiles spelling out Scrabble Solver 2" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:title" content={TITLE} />
+        <meta name="twitter:description" content={SITE_DESCRIPTION} />
+        <meta name="twitter:image" content={`${SITE_URL}/og.png`} />
+      </Head>
+
+      <Provider store={store}>
         <FloatingDelayGroup delay={0}>
           <Component {...pageProps} />
         </FloatingDelayGroup>
-      </AppLayoutProvider>
-    </Provider>
-  </>
-);
+      </Provider>
+    </>
+  );
+};
 
 export default App;

package/src/pages/_document.tsx

@@ -1,33 +1,99 @@
+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>
-          <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" />
-          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="icons/apple-touch-icon-144x144.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="60x60" href="icons/apple-touch-icon-60x60.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="120x120" href="icons/apple-touch-icon-120x120.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="76x76" href="icons/apple-touch-icon-76x76.png" />
-          <link rel="apple-touch-icon-precomposed" sizes="152x152" href="icons/apple-touch-icon-152x152.png" />
-          <link rel="icon" type="image/png" href="icons/favicon-196x196.png" sizes="196x196" />
-          <link rel="icon" type="image/png" href="icons/favicon-96x96.png" sizes="96x96" />
-          <link rel="icon" type="image/png" href="icons/favicon-32x32.png" sizes="32x32" />
-          <link rel="icon" type="image/png" href="icons/favicon-16x16.png" sizes="16x16" />
-          <link rel="icon" type="image/png" href="icons/favicon-128.png" sizes="128x128" />
-          <link rel="icon" href="icons/favicon.svg" />
+      <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" />
+          <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icons/apple-touch-icon-144x144.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icons/apple-touch-icon-60x60.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icons/apple-touch-icon-120x120.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icons/apple-touch-icon-76x76.png" />
+          <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icons/apple-touch-icon-152x152.png" />
+          <link rel="icon" type="image/png" href="/icons/favicon-196x196.png" sizes="196x196" />
+          <link rel="icon" type="image/png" href="/icons/favicon-96x96.png" sizes="96x96" />
+          <link rel="icon" type="image/png" href="/icons/favicon-32x32.png" sizes="32x32" />
+          <link rel="icon" type="image/png" href="/icons/favicon-16x16.png" sizes="16x16" />
+          <link rel="icon" type="image/png" href="/icons/favicon-128.png" sizes="128x128" />
+          <link rel="icon" href="/icons/favicon.svg" />
+          <link rel="manifest" href="/site.webmanifest" />
           <meta name="application-name" content="Scrabble Solver" />
+          <meta name="theme-color" content="#EFE3AE" />
           <meta name="msapplication-TileColor" content="#EFE3AE" />
-          <meta name="msapplication-TileImage" content="icons/mstile-144x144.png" />
-          <meta name="msapplication-square70x70logo" content="icons/mstile-70x70.png" />
-          <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>
+          <meta name="msapplication-TileImage" content="/icons/mstile-144x144.png" />
+          <meta name="msapplication-square70x70logo" content="/icons/mstile-70x70.png" />
+          <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" />
+        </InlineCssHead>
 
         <body>
           <Main />
@@ -38,4 +104,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;