@scrabble-solver/scrabble-solver 2.11.4 → 2.11.6

package/src/i18n/constants.ts

@@ -7,7 +7,6 @@ import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
   direction: 'ltr' | 'rtl';
-  fontFamily: string;
   consonants: boolean;
   vowels: boolean;
 }
@@ -15,43 +14,36 @@ interface LocaleFeatures {
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
   [Locale.EN_GB]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
   [Locale.EN_US]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
   [Locale.ES_ES]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
   [Locale.FA_IR]: {
     direction: 'rtl',
-    fontFamily: 'Vazirmatn',
     consonants: false,
     vowels: false,
   },
   [Locale.FR_FR]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
   [Locale.PL_PL]: {
     direction: 'ltr',
-    fontFamily: 'Open Sans',
     consonants: true,
     vowels: true,
   },
@@ -66,6 +58,13 @@ interface Flag {
 }
 
 export const LOCALE_FLAGS: Record<Locale, Flag> = {
+  [Locale.DE_DE]: {
+    className: styles.de,
+    Icon: FlagDe,
+    label: 'Deutsch',
+    name: 'German',
+    value: Locale.DE_DE,
+  },
   [Locale.EN_GB]: {
     className: styles.gb,
     Icon: FlagGb,
@@ -80,6 +79,13 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'English (US)',
     value: Locale.EN_US,
   },
+  [Locale.ES_ES]: {
+    className: styles.es,
+    Icon: FlagEs,
+    label: 'Español',
+    name: 'Spanish',
+    value: Locale.ES_ES,
+  },
   [Locale.FA_IR]: {
     className: styles.fa,
     Icon: FlagFa,
@@ -94,13 +100,6 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'French',
     value: Locale.FR_FR,
   },
-  [Locale.DE_DE]: {
-    className: styles.de,
-    Icon: FlagDe,
-    label: 'Deutsch',
-    name: 'German',
-    value: Locale.DE_DE,
-  },
   [Locale.PL_PL]: {
     className: styles.pl,
     Icon: FlagPl,
@@ -108,11 +107,4 @@ export const LOCALE_FLAGS: Record<Locale, Flag> = {
     name: 'Polish',
     value: Locale.PL_PL,
   },
-  [Locale.ES_ES]: {
-    className: styles.es,
-    Icon: FlagEs,
-    label: 'Español',
-    name: 'Spanish',
-    value: Locale.ES_ES,
-  },
 };

package/src/lib/arrayEquals.ts

@@ -0,0 +1,5 @@
+const arrayEquals = <T>(array1: T[], array2: T[]): boolean => {
+  return array1.length === array2.length && array1.every((value, index) => value === array2[index]);
+};
+
+export default arrayEquals;

package/src/lib/index.ts

@@ -1,3 +1,4 @@
+export { default as arrayEquals } from './arrayEquals';
 export { default as canUseDom } from './canUseDom';
 export { default as createArray } from './createArray';
 export { default as createComparator } from './createComparator';

package/src/lib/zipCharactersAndTiles.ts

@@ -1,12 +1,14 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile } from '@scrabble-solver/types';
 
+import { Rack } from 'types';
+
 interface CharacterTilePair {
   character: string | null;
   tile: Tile | null;
 }
 
-const zipCharactersAndTiles = (characters: (string | null)[], tiles: Tile[]): CharacterTilePair[] => {
+const zipCharactersAndTiles = (characters: Rack, tiles: Tile[]): CharacterTilePair[] => {
   let remainingTiles = [...tiles];
 
   return characters.map((character) => {

package/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Dictionary, DictionaryInput, Modal } from 'components';
 import { useTranslate } from 'state';
@@ -24,4 +24,4 @@ const DictionaryModal: FunctionComponent<Props> = ({ className, isOpen, onClose
   );
 };
 
-export default DictionaryModal;
+export default memo(DictionaryModal);

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Modal } from 'components';
 import { useTranslate } from 'state';
@@ -35,4 +35,4 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
   );
 };
 
-export default KeyMapModal;
+export default memo(KeyMapModal);

package/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -9,7 +9,6 @@
 .description {
   margin-bottom: var(--spacing--m);
   font-size: var(--font--size--h3);
-  font-family: var(--font--family--title);
   font-weight: 300;
 }
 

package/src/modals/KeyMapModal/keys.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Key } from 'components';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 import { isMac } from 'lib';

package/src/modals/MenuModal/MenuModal.module.scss

@@ -23,11 +23,35 @@
   justify-content: space-between;
 }
 
-.flag {
-  --height: var(--button--icon--size);
+.settingsLabel {
+  @include ellipsis;
+
+  --quatar-flag-aspect-ratio: 2.545;
+  --highest-flag-aspect-ratio: var(--quatar-flag-aspect-ratio);
+  --aspect-ratio: var(--highest-flag-aspect-ratio);
+  --padding: calc(var(--spacing--l) + var(--button--icon--size) * var(--aspect-ratio));
+
+  [dir='ltr'] & {
+    padding-right: var(--padding);
+  }
+
+  [dir='rtl'] & {
+    padding-left: var(--padding);
+  }
+}
 
-  width: calc(var(--height) * var(--aspect--ratio));
-  height: var(--height);
+.flag {
+  position: fixed;
+  width: calc(var(--button--icon--size) * var(--aspect-ratio));
+  height: var(--button--icon--size);
   border-radius: var(--border--radius);
   box-shadow: 0 0 0 1px var(--box-shadow--color);
+
+  [dir='ltr'] & {
+    right: calc(2 * var(--spacing--l));
+  }
+
+  [dir='rtl'] & {
+    left: calc(2 * var(--spacing--l));
+  }
 }

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Button, Modal } from 'components';
 import { LOCALE_FLAGS } from 'i18n';
@@ -18,7 +18,7 @@ interface Props {
   onShowWords: () => void;
 }
 
-const Menu: FunctionComponent<Props> = ({
+const MenuModal: FunctionComponent<Props> = ({
   className,
   isOpen,
   onClose,
@@ -63,7 +63,7 @@ const Menu: FunctionComponent<Props> = ({
 
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
         <div className={styles.settings}>
-          <span>{translate('settings')}</span>
+          <div className={styles.settingsLabel}>{translate('settings')}</div>
           <Flag.Icon className={styles.flag} />
         </div>
       </Button>
@@ -71,4 +71,4 @@ const Menu: FunctionComponent<Props> = ({
   );
 };
 
-export default Menu;
+export default memo(MenuModal);

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
@@ -56,4 +56,4 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
   );
 };
 
-export default RemainingTilesModal;
+export default memo(RemainingTilesModal);

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -13,12 +13,8 @@
 }
 
 .dictionary {
-  flex: 0 1 calc(var(--dictionary--height) - var(--text-input--height));
+  flex: 0 0 var(--dictionary--height--mobile);
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-
-  @media (max-height: 600px) {
-    display: none;
-  }
 }

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -1,8 +1,9 @@
 import { Result } from '@scrabble-solver/types';
-import { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, Dictionary, Modal, Results } from 'components';
+import { useAppLayout } from 'hooks';
 import { Check, EyeFill } from 'icons';
 import { resultsSlice, selectResultCandidate, selectResults, useTranslate, useTypedSelector } from 'state';
 
@@ -17,6 +18,7 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const { showResultsInModal } = useAppLayout();
   const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
@@ -49,6 +51,12 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
     onClose();
   };
 
+  useEffect(() => {
+    if (isOpen && !showResultsInModal) {
+      onClose();
+    }
+  }, [isOpen, onClose, showResultsInModal]);
+
   return (
     <Modal
       className={className}
@@ -88,4 +96,4 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default ResultsModal;
+export default memo(ResultsModal);

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Modal } from 'components';
 import { useTranslate } from 'state';
@@ -31,4 +31,4 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default SettingsModal;
+export default memo(SettingsModal);

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/lib.ts

@@ -1,6 +1,8 @@
+import { AutoGroupTiles } from 'types';
+
 import { NULL_VALUE } from './constants';
 
-export const parseValue = (value: string): 'left' | 'right' | null => {
+export const parseValue = (value: string): AutoGroupTiles => {
   if (value === 'left' || value === 'right') {
     return value;
   }

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,5 +9,4 @@
 .label {
   display: flex;
   align-items: center;
-  font-family: var(--font--family--latin);
 }

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -10,17 +10,12 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-  font-family: var(--font--family--latin);
-
-  &.fa {
-    font-family: var(--font--family--arabic);
-  }
 }
 
 .flag {
   --height: 32px;
 
-  width: calc(var(--height) * var(--aspect--ratio));
+  width: calc(var(--height) * var(--aspect-ratio));
   height: var(--height);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);

package/src/modals/WordsModal/WordsModal.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { Check, Cross } from 'icons';
@@ -53,4 +53,4 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
   );
 };
 
-export default WordsModal;
+export default memo(WordsModal);

package/src/pages/index.module.scss

@@ -1,18 +1,3 @@
-@import 'styles/mixins';
-
-.index {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  opacity: 0;
-  overflow: auto;
-  transition: var(--transition--long);
-
-  &.initialized {
-    opacity: 1;
-  }
-}
-
 .nav {
   position: relative;
   z-index: 1;
@@ -23,7 +8,7 @@
   width: 100%;
   display: flex;
   align-items: flex-start;
-  padding: var(--spacing--l);
+  padding: var(--nav--padding);
 }
 
 .navLogo {
@@ -36,12 +21,9 @@
 }
 
 .logo {
-  height: 60px;
+  width: calc(var(--logo--aspect-ratio) * var(--logo--height));
+  height: var(--logo--height);
   user-select: none;
-
-  @include media('<l') {
-    height: 48px;
-  }
 }
 
 .solver {

package/src/pages/index.tsx

@@ -1,13 +1,11 @@
-import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce, useMeasure } from 'react-use';
 
-import { Logo, LogoSplashScreen, NavButtons, Solver, SvgFontFix } from 'components';
-import { useAppLayout, useDirection, useLanguage, useLocalStorage } from 'hooks';
+import { Logo, NavButtons, Solver } from 'components';
+import { useDirection, useEffectOnce, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import {
   DictionaryModal,
@@ -33,7 +31,6 @@ interface Props {
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
-  const { showResultsInModal } = useAppLayout();
   const [showDictionary, setShowDictionary] = useState(false);
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
@@ -41,38 +38,36 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [showResults, setShowResults] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
-  const [navRef, { height: navHeight }] = useMeasure<HTMLElement>();
-  const solverHeight = indexHeight - navHeight;
-  const solverWidth = indexWidth;
   const [isClient, setIsClient] = useState(false);
 
-  const handleClear = () => {
-    dispatch(reset());
-  };
+  const handleShowResults = useCallback(() => setShowResults(true), []);
+  const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
+  const handleHideDictionary = useCallback(() => setShowDictionary(false), []);
+  const handleHideKeyMap = useCallback(() => setShowKeyMap(false), []);
+  const handleHideMenu = useCallback(() => setShowMenu(false), []);
+  const handleHideRemainingTiles = useCallback(() => setShowRemainingTiles(false), []);
+  const handleHideResults = useCallback(() => setShowResults(false), []);
+  const handleHideSettings = useCallback(() => setShowSettings(false), []);
+  const handleHideWords = useCallback(() => setShowWords(false), []);
+  const handleShowDictionary = useCallback(() => setShowDictionary(true), []);
+  const handleShowKeyMap = useCallback(() => setShowKeyMap(true), []);
+  const handleShowMenu = useCallback(() => setShowMenu(true), []);
+  const handleShowRemainingTiles = useCallback(() => setShowRemainingTiles(true), []);
+  const handleShowSettings = useCallback(() => setShowSettings(true), []);
+  const handleShowWords = useCallback(() => setShowWords(true), []);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
   useLocalStorage();
 
   useEffectOnce(() => {
-    setIsClient(true);
-    dispatch(initialize());
-    setIsInitialized(true);
-  });
-
-  useEffect(() => {
-    if (!showResultsInModal) {
-      setShowResults(false);
-    }
-  }, [showResultsInModal]);
-
-  useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       registerServiceWorker();
     }
-  }, []);
+
+    setIsClient(true);
+    dispatch(initialize());
+  });
 
   if (!isClient) {
     return null;
@@ -80,60 +75,47 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
   return (
     <>
-      <SvgFontFix />
-
-      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
-        <nav className={styles.nav} ref={navRef}>
-          <div className={styles.navContent}>
-            <div className={styles.navLogo}>
-              <a className={styles.logoContainer} href="/" title={version}>
-                <Logo className={styles.logo} />
-              </a>
-            </div>
-
-            <NavButtons
-              onClear={handleClear}
-              onShowKeyMap={() => setShowKeyMap(true)}
-              onShowMenu={() => setShowMenu(true)}
-              onShowRemainingTiles={() => setShowRemainingTiles(true)}
-              onShowSettings={() => setShowSettings(true)}
-              onShowWords={() => setShowWords(true)}
-            />
+      <nav className={styles.nav}>
+        <div className={styles.navContent}>
+          <div className={styles.navLogo}>
+            <a className={styles.logoContainer} href="/" title={version}>
+              <Logo className={styles.logo} />
+            </a>
           </div>
-        </nav>
-
-        {solverHeight > 0 && solverWidth > 0 && (
-          <Solver
-            className={styles.solver}
-            height={solverHeight}
-            width={solverWidth}
-            onShowResults={() => setShowResults(true)}
+
+          <NavButtons
+            onClear={handleClear}
+            onShowKeyMap={handleShowKeyMap}
+            onShowMenu={handleShowMenu}
+            onShowRemainingTiles={handleShowRemainingTiles}
+            onShowSettings={handleShowSettings}
+            onShowWords={handleShowWords}
           />
-        )}
-      </div>
+        </div>
+      </nav>
+
+      <Solver className={styles.solver} onShowResults={handleShowResults} />
 
       <MenuModal
         isOpen={showMenu}
-        onClose={() => setShowMenu(false)}
-        onShowDictionary={() => setShowDictionary(true)}
-        onShowRemainingTiles={() => setShowRemainingTiles(true)}
-        onShowSettings={() => setShowSettings(true)}
-        onShowWords={() => setShowWords(true)}
+        onClose={handleHideMenu}
+        onShowDictionary={handleShowDictionary}
+        onShowRemainingTiles={handleShowRemainingTiles}
+        onShowSettings={handleShowSettings}
+        onShowWords={handleShowWords}
       />
 
-      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
-
-      <KeyMapModal isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
+      <SettingsModal isOpen={showSettings} onClose={handleHideSettings} />
 
-      <WordsModal isOpen={showWords} onClose={() => setShowWords(false)} />
+      <KeyMapModal isOpen={showKeyMap} onClose={handleHideKeyMap} />
 
-      <RemainingTilesModal isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
+      <WordsModal isOpen={showWords} onClose={handleHideWords} />
 
-      <ResultsModal isOpen={showResults} onClose={() => setShowResults(false)} />
+      <RemainingTilesModal isOpen={showRemainingTiles} onClose={handleHideRemainingTiles} />
 
-      <DictionaryModal isOpen={showDictionary} onClose={() => setShowDictionary(false)} />
+      <ResultsModal isOpen={showResults} onClose={handleHideResults} />
 
-      <LogoSplashScreen forceShow={!isInitialized} />
+      <DictionaryModal isOpen={showDictionary} onClose={handleHideDictionary} />
     </>
   );
 };

package/src/parameters/index.ts

@@ -19,8 +19,14 @@ export const COLOR_GREEN = '#bae3ba';
 export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
-export const COMPONENTS_SPACING = 40;
-export const COMPONENTS_SPACING_SMALL = 20;
+export const SPACING_XS = 2;
+export const SPACING_S = 5;
+export const SPACING_M = 10;
+export const SPACING_L = 20;
+export const SPACING_XL = 40;
+
+export const COMPONENTS_SPACING = SPACING_XL;
+export const COMPONENTS_SPACING_SMALL = SPACING_L;
 
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
 export const BOARD_CELL_BORDER_WIDTH = 1;
@@ -36,6 +42,23 @@ export const BOARD_TILE_SIZE_MIN = 20;
 
 export const BORDER_WIDTH = 1;
 
+export const BUTTON_ICON_SIZE = 24;
+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 = 260;
+export const DICTIONARY_HEIGHT_MOBILE = 110;
+
+export const LOGO_ASPECT_RATIO = 682 / 166;
+export const LOGO_HEIGHT = 60;
+export const LOGO_HEIGHT_SMALL = 48;
+export const LOGO_SRC = '/logo.svg';
+
+export const MODAL_WIDTH = 370;
+export const MODAL_HEADER_HEIGHT = 45;
+
+export const NAV_PADDING = SPACING_L;
+
 export const TILE_SIZE = 80;
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
@@ -67,10 +90,14 @@ export const RACK_TILE_SIZE_MAX = 80;
 
 export const REMAINING_TILES_TILE_SIZE = 50;
 
+export const RESULTS_HEADER_HEIGHT = 35;
+
 export const RESULTS_ITEM_HEIGHT = 40;
 
 export const SOLVER_COLUMN_WIDTH = 580;
 
+export const TEXT_INPUT_HEIGHT = 40;
+
 export const TILE_APPEAR_DURATION = 200;
 
 export const TILE_APPEAR_KEYFRAMES = [