@scrabble-solver/scrabble-solver 2.15.10 → 2.15.12

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,13 +1,14 @@
-import { FunctionComponent, memo } from 'react';
+import { type FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
 import { getTileSizes } from 'lib';
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
-import { selectLocale, selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import { Character } from './components';
 import styles from './RemainingTilesModal.module.scss';
+import { selectRemainingTilesGroups } from './selectors';
 
 interface Props {
   className?: string;

package/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -1,12 +1,12 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 
 import { Progress, Tile } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
 import { selectCharacterPoints, selectLocale, useTypedSelector } from 'state';
-import { RemainingTile } from 'types';
+import { type RemainingTile } from 'types';
 
 import styles from './Character.module.scss';
 
@@ -18,6 +18,11 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
   const { character, count, usedCount } = tile;
+
+  if (typeof count === 'undefined') {
+    throw new Error('Remaining tiles not supported for this config');
+  }
+
   const remainingCount = count - usedCount;
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const current = direction === 'ltr' ? remainingCount : count;

package/src/{lib/getRemainingTilesGroups.ts → modals/RemainingTilesModal/lib.ts}

@@ -1,9 +1,6 @@
 import { BLANK, CONSONANTS, VOWELS } from '@scrabble-solver/constants';
 
-import { RemainingTile, RemainingTilesGroup } from 'types';
-
-import { getRemainingTilesCount } from './getRemainingTilesCount';
-import { getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
+import { type RemainingTile, type RemainingTilesGroup } from 'types';
 
 export const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): RemainingTilesGroup[] => {
   const consonants = remainingTiles.filter(isConsonant);
@@ -15,21 +12,21 @@ export const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): Remain
     remainingCount: getRemainingTilesCount(vowels),
     tiles: vowels,
     translationKey: 'common.vowels',
-    totalCount: getTotalRemainingTilesCount(vowels),
+    totalCount: getTotalTilesCount(vowels),
   });
 
   groups.push({
     remainingCount: getRemainingTilesCount(consonants),
     tiles: consonants,
     translationKey: 'common.consonants',
-    totalCount: getTotalRemainingTilesCount(consonants),
+    totalCount: getTotalTilesCount(consonants),
   });
 
   groups.push({
     remainingCount: getRemainingTilesCount(other),
     tiles: other,
     translationKey: 'common.tiles',
-    totalCount: getTotalRemainingTilesCount(other),
+    totalCount: getTotalTilesCount(other),
   });
 
   const twoCharacterTiles = remainingTiles.filter(isTwoCharacter);
@@ -39,14 +36,14 @@ export const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): Remain
     remainingCount: getRemainingTilesCount(twoCharacterTiles),
     tiles: twoCharacterTiles,
     translationKey: 'common.two-letter-tiles',
-    totalCount: getTotalRemainingTilesCount(twoCharacterTiles),
+    totalCount: getTotalTilesCount(twoCharacterTiles),
   });
 
   groups.push({
     remainingCount: getRemainingTilesCount(blanks),
     tiles: blanks,
     translationKey: 'common.blanks',
-    totalCount: getTotalRemainingTilesCount(blanks),
+    totalCount: getTotalTilesCount(blanks),
   });
 
   return groups.filter(({ totalCount }) => totalCount > 0);
@@ -62,3 +59,23 @@ const isBlank = (tile: RemainingTile): boolean => tile.character === BLANK;
 
 const isOther = (tile: RemainingTile) =>
   !isConsonant(tile) && !isVowel(tile) && !isBlank(tile) && !isTwoCharacter(tile);
+
+const getRemainingTilesCount = (remainingTiles: RemainingTile[]): number => {
+  return remainingTiles.reduce((sum, { count, usedCount }) => {
+    if (typeof count === 'undefined') {
+      return sum;
+    }
+
+    return sum + count - usedCount;
+  }, 0);
+};
+
+const getTotalTilesCount = (remainingTiles: RemainingTile[]): number => {
+  return remainingTiles.reduce((sum, { count }) => {
+    if (typeof count === 'undefined') {
+      return sum;
+    }
+
+    return sum + count;
+  }, 0);
+};

package/src/modals/RemainingTilesModal/selectors.ts

@@ -0,0 +1,7 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+import { selectRemainingTiles } from 'state';
+
+import { getRemainingTilesGroups } from './lib';
+
+export const selectRemainingTilesGroups = createSelector([selectRemainingTiles], getRemainingTilesGroups);

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -1,11 +1,11 @@
-import { Result } from '@scrabble-solver/types';
-import { FunctionComponent, memo, useEffect, useMemo } from 'react';
+import { type Result } from '@scrabble-solver/types';
+import { type 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';
+import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from 'state';
 
 import styles from './ResultsModal.module.scss';
 
@@ -19,7 +19,7 @@ const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose
   const dispatch = useDispatch();
   const translate = useTranslate();
   const { showResultsInModal } = useAppLayout();
-  const results = useTypedSelector(selectResults);
+  const results = useTypedSelector(selectProcessedResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
   const highlightedIndex = index === -1 ? undefined : index;

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent, memo } from 'react';
+import { type FunctionComponent, memo } from 'react';
 
 import { Modal } from 'components';
 import { useIsTouchDevice } from 'hooks';
@@ -10,6 +10,7 @@ import {
   InputModeSetting,
   LocaleSetting,
   ShowCoordinatesSetting,
+  RemoveCellFiltersSetting,
 } from './components';
 
 interface Props {
@@ -45,6 +46,10 @@ const SettingsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClos
       <Modal.Section label={translate('settings.autoGroupTiles')} title={translate('settings.autoGroupTiles')}>
         <AutoGroupTilesSetting disabled={!isOpen} />
       </Modal.Section>
+
+      <Modal.Section label={translate('settings.removeCellFilters')} title={translate('settings.removeCellFilters')}>
+        <RemoveCellFiltersSetting disabled={!isOpen} />
+      </Modal.Section>
     </Modal>
   );
 };

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, FunctionComponent } from 'react';
+import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';

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

@@ -1,4 +1,4 @@
-import { AutoGroupTiles } from 'types';
+import { type AutoGroupTiles } from 'types';
 
 import { NULL_VALUE } from './constants';
 

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

@@ -1,5 +1,5 @@
 import { isGame } from '@scrabble-solver/types';
-import { ChangeEvent, FunctionComponent, useMemo } from 'react';
+import { type ChangeEvent, type FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';

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

@@ -1,5 +1,5 @@
 import { games, hasConfig, languages } from '@scrabble-solver/configs';
-import { Locale } from '@scrabble-solver/types';
+import { type Locale } from '@scrabble-solver/types';
 
 export const getOptions = (locale: Locale) => {
   const gameConfigs = Object.values(games);

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

@@ -1,4 +1,4 @@
-import { ChangeEvent, FunctionComponent } from 'react';
+import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';

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

@@ -1,4 +1,4 @@
-import { InputMode } from 'types';
+import { type InputMode } from 'types';
 
 export const parseValue = (value: string): InputMode => {
   if (value === 'keyboard') {

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

@@ -1,6 +1,6 @@
-import { Locale } from '@scrabble-solver/types';
+import { type Locale } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { ChangeEvent, FunctionComponent } from 'react';
+import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';

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

@@ -0,0 +1,12 @@
+.option {
+  margin-bottom: var(--spacing--m);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}

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

@@ -0,0 +1,53 @@
+import { type ChangeEvent, type FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Radio } from 'components';
+import { selectRemoveCellFilters, settingsSlice, useTranslate, useTypedSelector } from 'state';
+
+import { parseValue } from './lib';
+import styles from './RemoveCellFiltersSetting.module.scss';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+}
+
+export const RemoveCellFiltersSetting: FunctionComponent<Props> = ({ className, disabled }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const value = useTypedSelector(selectRemoveCellFilters);
+
+  const options = [
+    {
+      label: translate('settings.removeCellFilters.always'),
+      value: 'always',
+    },
+    {
+      label: translate('settings.removeCellFilters.never'),
+      value: 'never',
+    },
+  ];
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const removeTileFilter = parseValue(event.target.value);
+    dispatch(settingsSlice.actions.changeRemoveCellFilters(removeTileFilter));
+  };
+
+  return (
+    <div className={className}>
+      {options.map((option) => (
+        <Radio
+          checked={value === option.value}
+          className={styles.option}
+          disabled={disabled}
+          key={option.value}
+          name="removeCellFilters"
+          value={option.value}
+          onChange={handleChange}
+        >
+          <div className={styles.label}>{option.label}</div>
+        </Radio>
+      ))}
+    </div>
+  );
+};

package/src/modals/SettingsModal/components/RemoveCellFiltersSetting/index.ts

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

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

@@ -0,0 +1,13 @@
+import { type RemoveCellFilters } from 'types';
+
+export const parseValue = (value: string): RemoveCellFilters => {
+  if (value === 'always') {
+    return 'always';
+  }
+
+  if (value === 'never') {
+    return 'never';
+  }
+
+  throw new Error(`"${value}" is not valid. Should be "always" or "never"`);
+};

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

@@ -1,5 +1,5 @@
-import { ShowCoordinates } from '@scrabble-solver/types';
-import { ChangeEvent, FunctionComponent } from 'react';
+import { type ShowCoordinates } from '@scrabble-solver/types';
+import { type ChangeEvent, type FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';

package/src/modals/SettingsModal/components/index.ts

@@ -3,3 +3,4 @@ export { ConfigSetting } from './ConfigSetting';
 export { InputModeSetting } from './InputModeSetting';
 export { LocaleSetting } from './LocaleSetting';
 export { ShowCoordinatesSetting } from './ShowCoordinatesSetting';
+export { RemoveCellFiltersSetting } from './RemoveCellFiltersSetting';

package/src/modals/WordsModal/WordsModal.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { FunctionComponent, memo } from 'react';
+import { type FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { Check, Cross } from 'icons';
-import { selectLocale, selectVerify, useTranslate, useTypedSelector } from 'state';
+import { selectInvalidWords, selectLocale, selectValidWords, useTranslate, useTypedSelector } from 'state';
 
 import styles from './WordsModal.module.scss';
 
@@ -16,7 +16,8 @@ interface Props {
 const WordsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const { invalidWords, validWords } = useTypedSelector(selectVerify);
+  const invalidWords = useTypedSelector(selectInvalidWords);
+  const validWords = useTypedSelector(selectValidWords);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>

package/src/pages/_app.tsx

@@ -1,7 +1,7 @@
 import { FloatingDelayGroup } from '@floating-ui/react';
-import { AppProps } from 'next/app';
+import { type AppProps } from 'next/app';
 import Head from 'next/head';
-import { FunctionComponent } from 'react';
+import { type FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { SeoMessage } from 'components';
@@ -11,7 +11,7 @@ import 'styles/global.scss';
 
 const DESCRIPTION =
   // eslint-disable-next-line max-len
-  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble, Scrabble Duel, Super Scrabble & Literaki. Quickly find top scoring words using given letters and board state. Available in English, French, German, Persian, Polish, Romanian, Spanish, and Turkish.';
+  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble, Scrabble Duel, Super Scrabble, Letter League & Literaki. 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',
@@ -20,6 +20,7 @@ const KEYWORDS = [
   'Solver',
   'Super Scrabble',
   'Kelimelik',
+  'Letter League',
   'Literaki',
   'Board',
   'Open-source',

package/src/pages/_document.tsx

@@ -1,5 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import { ReactElement } from 'react';
+import { type ReactElement } from 'react';
 
 class MyDocument extends Document {
   render(): ReactElement {

package/src/pages/api/dictionary/[locale]/[word].ts

@@ -2,9 +2,9 @@ import { games } from '@scrabble-solver/configs';
 import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
-import { Locale, isLocale } from '@scrabble-solver/types';
+import { type Locale, isLocale } from '@scrabble-solver/types';
 import { getWordDefinition } from '@scrabble-solver/word-definitions';
-import { NextApiRequest, NextApiResponse } from 'next';
+import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData } from 'api';
 

package/src/pages/api/dictionary/[locale]/index.ts

@@ -1,7 +1,7 @@
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
-import { isLocale, Locale } from '@scrabble-solver/types';
-import { NextApiRequest, NextApiResponse } from 'next';
+import { isLocale, type Locale } from '@scrabble-solver/types';
+import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData } from 'api';
 

package/src/pages/api/solve.ts

@@ -3,8 +3,17 @@ import { BLANK } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
 import { solve as solveScrabble } from '@scrabble-solver/solver';
-import { Board, Config, Game, Locale, Tile, isBoardJson, isGame, isLocale } from '@scrabble-solver/types';
-import { NextApiRequest, NextApiResponse } from 'next';
+import {
+  Board,
+  type Config,
+  type Game,
+  type Locale,
+  Tile,
+  isBoardJson,
+  isGame,
+  isLocale,
+} from '@scrabble-solver/types';
+import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid, isCharacterValid } from 'api';
 import { isStringArray } from 'lib';

package/src/pages/api/verify.ts

@@ -1,8 +1,8 @@
 import { getConfig, hasConfig } from '@scrabble-solver/configs';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
-import { Board, Config, Game, Locale, isBoardJson, isGame, isLocale } from '@scrabble-solver/types';
-import { NextApiRequest, NextApiResponse } from 'next';
+import { Board, type Config, type Game, type Locale, isBoardJson, isGame, isLocale } from '@scrabble-solver/types';
+import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid } from 'api';
 

package/src/pages/api/visit.ts

@@ -1,5 +1,5 @@
 import { logger } from '@scrabble-solver/logger';
-import { NextApiRequest, NextApiResponse } from 'next';
+import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData } from 'api';
 

package/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import { isObject } from '@scrabble-solver/types';
 import fs from 'fs';
 import path from 'path';
-import { FunctionComponent, useCallback, useState } from 'react';
+import { type FunctionComponent, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
 
@@ -18,7 +18,7 @@ import {
   WordsModal,
 } from 'modals';
 import { registerServiceWorker } from 'serviceWorkerManager';
-import { initialize, reset, selectLocale, useTypedSelector } from 'state';
+import { initialize, reset, selectConfig, selectLocale, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
 
@@ -28,34 +28,26 @@ interface Props {
   version: string;
 }
 
-// eslint-disable-next-line max-statements
+type Modal = 'dictionary' | 'keyMap' | 'menu' | 'remainingTiles' | 'results' | 'settings' | 'words';
+
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
+  const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
-  const [showDictionary, setShowDictionary] = useState(false);
-  const [showKeyMap, setShowKeyMap] = useState(false);
-  const [showMenu, setShowMenu] = useState(false);
-  const [showRemainingTiles, setShowRemainingTiles] = useState(false);
-  const [showResults, setShowResults] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
-  const [showWords, setShowWords] = useState(false);
   const [isClient, setIsClient] = useState(false);
+  const [modals, setModals] = useState<Record<Modal, boolean>>({
+    dictionary: false,
+    keyMap: false,
+    menu: false,
+    remainingTiles: false,
+    results: false,
+    settings: false,
+    words: false,
+  });
 
-  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), []);
+  const patchModals = (patch: Partial<Record<Modal, boolean>>) => {
+    setModals((current) => ({ ...current, ...patch }));
+  };
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
@@ -86,38 +78,40 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           </div>
 
           <NavButtons
-            onClear={handleClear}
-            onShowKeyMap={handleShowKeyMap}
-            onShowMenu={handleShowMenu}
-            onShowRemainingTiles={handleShowRemainingTiles}
-            onShowSettings={handleShowSettings}
-            onShowWords={handleShowWords}
+            onClear={() => dispatch(reset())}
+            onShowKeyMap={() => patchModals({ keyMap: true })}
+            onShowMenu={() => patchModals({ menu: true })}
+            onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
+            onShowSettings={() => patchModals({ settings: true })}
+            onShowWords={() => patchModals({ words: true })}
           />
         </div>
       </nav>
 
-      <Solver className={styles.solver} onShowResults={handleShowResults} />
+      <Solver className={styles.solver} onShowResults={() => patchModals({ results: true })} />
 
       <MenuModal
-        isOpen={showMenu}
-        onClose={handleHideMenu}
-        onShowDictionary={handleShowDictionary}
-        onShowRemainingTiles={handleShowRemainingTiles}
-        onShowSettings={handleShowSettings}
-        onShowWords={handleShowWords}
+        isOpen={modals.menu}
+        onClose={() => patchModals({ menu: false })}
+        onShowDictionary={() => patchModals({ dictionary: true })}
+        onShowRemainingTiles={() => patchModals({ remainingTiles: true })}
+        onShowSettings={() => patchModals({ settings: true })}
+        onShowWords={() => patchModals({ words: true })}
       />
 
-      <SettingsModal isOpen={showSettings} onClose={handleHideSettings} />
+      <SettingsModal isOpen={modals.settings} onClose={() => patchModals({ settings: false })} />
 
-      <KeyMapModal isOpen={showKeyMap} onClose={handleHideKeyMap} />
+      <KeyMapModal isOpen={modals.keyMap} onClose={() => patchModals({ keyMap: false })} />
 
-      <WordsModal isOpen={showWords} onClose={handleHideWords} />
+      <WordsModal isOpen={modals.words} onClose={() => patchModals({ words: false })} />
 
-      <RemainingTilesModal isOpen={showRemainingTiles} onClose={handleHideRemainingTiles} />
+      {config.supportsRemainingTiles && (
+        <RemainingTilesModal isOpen={modals.remainingTiles} onClose={() => patchModals({ remainingTiles: false })} />
+      )}
 
-      <ResultsModal isOpen={showResults} onClose={handleHideResults} />
+      <ResultsModal isOpen={modals.results} onClose={() => patchModals({ results: false })} />
 
-      <DictionaryModal isOpen={showDictionary} onClose={handleHideDictionary} />
+      <DictionaryModal isOpen={modals.dictionary} onClose={() => patchModals({ dictionary: false })} />
     </>
   );
 };

package/src/parameters/index.ts

@@ -91,6 +91,7 @@ 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 PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;

package/src/sdk/findWordDefinitions.ts

@@ -1,4 +1,4 @@
-import { Locale, WordDefinition, WordDefinitionJson } from '@scrabble-solver/types';
+import { type Locale, WordDefinition, type WordDefinitionJson } from '@scrabble-solver/types';
 
 import { fetchJson } from './fetchJson';
 

package/src/sdk/getDictionary.ts

@@ -1,5 +1,5 @@
 import { Trie } from '@kamilmielnik/trie';
-import { Locale } from '@scrabble-solver/types';
+import { type Locale } from '@scrabble-solver/types';
 
 import { fetchJson } from './fetchJson';
 

package/src/sdk/solve.ts

@@ -1,4 +1,4 @@
-import { BoardJson, Locale, Result, ResultJson } from '@scrabble-solver/types';
+import { type BoardJson, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
 
 import { fetchJson } from './fetchJson';
 

package/src/sdk/verify.ts

@@ -1,4 +1,4 @@
-import { BoardJson, Locale } from '@scrabble-solver/types';
+import { type BoardJson, type Locale } from '@scrabble-solver/types';
 
 import { fetchJson } from './fetchJson';
 

package/src/service-worker/dictionaries/getDictionary.ts

@@ -1,4 +1,4 @@
-import { Locale } from '@scrabble-solver/types';
+import { type Locale } from '@scrabble-solver/types';
 
 import { DICTIONARY_CACHE } from './constants';
 import { expirationManager } from './expirationManager';

package/src/service-worker/dictionaries/getDictionaryUrl.ts

@@ -1,4 +1,4 @@
-import { Locale } from '@scrabble-solver/types';
+import { type Locale } from '@scrabble-solver/types';
 
 export const getDictionaryUrl = (locale: Locale): string => {
   return `/api/dictionary/${locale}`;