@scrabble-solver/scrabble-solver 2.11.1 → 2.11.3

package/src/lib/index.ts

@@ -5,6 +5,7 @@ export { default as createGridOf } from './createGridOf';
 export { default as createKeyboardNavigation } from './createKeyboardNavigation';
 export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
+export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
@@ -14,8 +15,10 @@ export { default as getCellSize } from './getCellSize';
 export { default as getRemainingTiles } from './getRemainingTiles';
 export { default as getRemainingTilesCount } from './getRemainingTilesCount';
 export { default as getRemainingTilesGroups } from './getRemainingTilesGroups';
-export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
 export { default as getTileSizes } from './getTileSizes';
+export { default as getTotalRemainingTilesCount } from './getTotalRemainingTilesCount';
+export { default as groupResults } from './groupResults';
+export { default as guessLocale } from './guessLocale';
 export { default as inverseDirection } from './inverseDirection';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';

package/src/lib/sortResults.ts

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 
-import { Comparator, ResultColumn, SortDirection } from 'types';
+import { Comparator, ResultColumn, Sort, SortDirection } from 'types';
 
 import createKeyComparator from './createKeyComparator';
 import reverseComparator from './reverseComparator';
@@ -15,20 +15,16 @@ const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>>
   [ResultColumn.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
-const sortResults = (
-  results: Result[] | undefined,
-  column: ResultColumn,
-  sortDirection: SortDirection,
-  locale: string,
-): Result[] | undefined => {
+const sortResults = (results: Result[] | undefined, sort: Sort, locale: string): Result[] | undefined => {
   if (typeof results === 'undefined') {
     return results;
   }
 
-  const createComparator = comparators[column];
+  const createComparator = comparators[sort.column];
   const comparator = createComparator(locale);
-  const finalComparator = sortDirection === SortDirection.Descending ? reverseComparator(comparator) : comparator;
-  return [...results].sort(finalComparator);
+  const finalComparator = sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
+  const sortedResults = [...results].sort(finalComparator);
+  return sortedResults;
 };
 
 export default sortResults;

package/src/modals/DictionaryModal/DictionaryModal.module.scss

@@ -5,7 +5,6 @@
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
 }
 
 .dictionary {

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

@@ -4,7 +4,30 @@
   width: 100%;
   text-transform: none;
 
+  &,
+  &:active,
+  &:focus,
+  &:hover {
+    box-shadow: 0 1px 1px 0 var(--box-shadow--color);
+  }
+
   & + & {
     margin-top: var(--spacing--l);
   }
 }
+
+.settings {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.flag {
+  --height: var(--button--icon--size);
+
+  width: calc(var(--height) * var(--aspect--ratio));
+  height: var(--height);
+  border-radius: var(--border--radius);
+  box-shadow: 0 0 0 1px var(--box-shadow--color);
+}

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,9 +1,10 @@
 import { FunctionComponent } from 'react';
 
 import { Button, Modal } from 'components';
+import { LOCALE_FLAGS } from 'i18n';
 import { BookHalf, CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { useTranslate } from 'state';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './MenuModal.module.scss';
 
@@ -27,6 +28,8 @@ const Menu: FunctionComponent<Props> = ({
   onShowWords,
 }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const Flag = LOCALE_FLAGS[locale];
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
@@ -59,7 +62,10 @@ const Menu: FunctionComponent<Props> = ({
       </Button.Link>
 
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
-        {translate('settings')}
+        <div className={styles.settings}>
+          <span>{translate('settings')}</span>
+          <Flag.Icon className={styles.flag} />
+        </div>
       </Button>
     </Modal>
   );

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -2,6 +2,8 @@ import { FunctionComponent } 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 { Character } from './components';
@@ -17,6 +19,7 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
+  const { tileFontSize } = getTileSizes(REMAINING_TILES_TILE_SIZE);
   const { direction } = LOCALE_FEATURES[locale];
 
   return (
@@ -37,7 +40,7 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
               </span>
             }
           >
-            <div className={styles.content}>
+            <div className={styles.content} style={{ fontSize: tileFontSize }}>
               {tiles.map((tile) => {
                 return (
                   <div className={styles.character} key={tile.character}>

package/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -1,3 +1,5 @@
+@import 'styles/mixins';
+
 .character {
   display: flex;
   flex-direction: column;
@@ -29,9 +31,15 @@
 .remaining {
   height: 6px;
   margin-top: var(--spacing--m);
+  box-shadow: var(--box-shadow--raised);
+
+  @include media('<xs') {
+    box-shadow: var(--box-shadow--raised--subtle);
+  }
 }
 
 .count {
   padding: var(--spacing--xs) 0;
+  font-size: var(--font--size--m);
   white-space: nowrap;
 }

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

@@ -9,15 +9,14 @@
 }
 
 .results {
-  flex: 1;
+  flex: 1 1 auto;
 }
 
 .dictionary {
-  flex: 0 0 calc(var(--dictionary--height) - var(--text-input--height));
+  flex: 0 1 calc(var(--dictionary--height) - var(--text-input--height));
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
 
   @media (max-height: 600px) {
     display: none;

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -2,14 +2,9 @@ import { Result } from '@scrabble-solver/types';
 import { FunctionComponent, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Dictionary, Modal, Results } from 'components';
-import {
-  resultsSlice,
-  selectResultCandidate,
-  selectSortedFilteredResults,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { Button, Dictionary, Modal, Results } from 'components';
+import { Check, EyeFill } from 'icons';
+import { resultsSlice, selectResultCandidate, selectResults, useTranslate, useTypedSelector } from 'state';
 
 import styles from './ResultsModal.module.scss';
 
@@ -22,9 +17,9 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = (results || []).findIndex((result) => result.id === resultCandidate?.id);
+  const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
   const highlightedIndex = index === -1 ? undefined : index;
 
   const callbacks = useMemo(
@@ -42,8 +37,49 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
     [dispatch, onClose, resultCandidate],
   );
 
+  const handleInsert = () => {
+    if (resultCandidate) {
+      dispatch(resultsSlice.actions.applyResult(resultCandidate));
+    }
+
+    onClose();
+  };
+
+  const handlePreview = () => {
+    onClose();
+  };
+
   return (
-    <Modal className={className} isOpen={isOpen} title={translate('results')} onClose={onClose}>
+    <Modal
+      className={className}
+      footer={
+        <>
+          <Button
+            aria-label={translate('results.insert')}
+            disabled={!resultCandidate}
+            Icon={Check}
+            tooltip={translate('results.insert')}
+            variant="primary"
+            onClick={handleInsert}
+          >
+            {translate('results.insert')}
+          </Button>
+
+          <Button
+            aria-label={translate('results.preview')}
+            disabled={!resultCandidate}
+            Icon={EyeFill}
+            tooltip={translate('results.preview')}
+            onClick={handlePreview}
+          >
+            {translate('results.preview')}
+          </Button>
+        </>
+      }
+      isOpen={isOpen}
+      title={translate('results')}
+      onClose={onClose}
+    >
       <div className={styles.content}>
         <Results callbacks={callbacks} className={styles.results} highlightedIndex={highlightedIndex} />
         <Dictionary className={styles.dictionary} />

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

@@ -18,52 +18,11 @@
 }
 
 .flag {
-  $height: 32px;
+  --height: 32px;
 
-  height: $height;
+  width: calc(var(--height) * var(--aspect--ratio));
+  height: var(--height);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   transition: var(--transition);
-
-  &.de {
-    $aspect-ratio: 1.6;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.es {
-    $aspect-ratio: 1.5;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.fa {
-    $aspect-ratio: 1.75;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.fr {
-    $aspect-ratio: 1.6;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.gb {
-    $aspect-ratio: 2;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.pl {
-    $aspect-ratio: 1.6;
-
-    width: $height * $aspect-ratio;
-  }
-
-  &.us {
-    $aspect-ratio: 1.9;
-
-    width: $height * $aspect-ratio;
-  }
 }

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

@@ -4,16 +4,18 @@ import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';
+import { LOCALE_FLAGS } from 'i18n';
 import { selectLocale, settingsSlice, useTypedSelector } from 'state';
 
 import styles from './LocaleSetting.module.scss';
-import options from './options';
 
 interface Props {
   className?: string;
   disabled: boolean;
 }
 
+const OPTIONS = Object.values(LOCALE_FLAGS).sort((a, b) => a.name.localeCompare(b.name));
+
 const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
@@ -25,7 +27,7 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map(({ Icon, ...option }) => (
+      {OPTIONS.map(({ Icon, ...option }) => (
         <Radio
           checked={locale === option.value}
           className={classNames(styles.option, className, {

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

@@ -37,7 +37,6 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

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

@@ -28,7 +28,6 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/solve.ts

@@ -6,7 +6,7 @@ import { solve as solveScrabble } from '@scrabble-solver/solver';
 import { Board, Config, isBoardJson, isLocale, Locale, Tile } from '@scrabble-solver/types';
 import { NextApiRequest, NextApiResponse } from 'next';
 
-import { getServerLoggingData, isBoardValid } from 'api';
+import { getServerLoggingData, isBoardValid, isCharacterValid } from 'api';
 import { isStringArray } from 'lib';
 
 interface RequestData {
@@ -42,7 +42,6 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('solve - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 
@@ -64,10 +63,11 @@ const parseRequest = (request: NextApiRequest): RequestData => {
   const config = getLocaleConfig(configId, locale);
 
   for (const character of characters) {
-    if (!config.hasCharacter(character) && character !== BLANK) {
+    if (!isCharacterValid(character)) {
       throw new Error('Invalid "characters" parameter');
     }
   }
+
   const blanksCount = characters.filter((character) => character === BLANK).length;
 
   if (blanksCount > config.blanksCount) {

package/src/pages/api/verify.ts

@@ -38,7 +38,6 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('verify - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/api/visit.ts

@@ -13,7 +13,6 @@ const visit = async (request: NextApiRequest, response: NextApiResponse): Promis
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('visit - error', { error, meta });
     response.status(500).send({ error: 'Server error', message });
-    throw error;
   }
 };
 

package/src/pages/index.tsx

@@ -18,7 +18,6 @@ import {
   SettingsModal,
   WordsModal,
 } from 'modals';
-import { INITIALIZATION_DURATION } from 'parameters';
 import { registerServiceWorker } from 'serviceWorkerManager';
 import { initialize, reset, selectLocale, useTypedSelector } from 'state';
 
@@ -44,7 +43,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [showWords, setShowWords] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
-  const [navRef, { height: navHeight }] = useMeasure<HTMLDivElement>();
+  const [navRef, { height: navHeight }] = useMeasure<HTMLElement>();
   const solverHeight = indexHeight - navHeight;
   const solverWidth = indexWidth;
   const [isClient, setIsClient] = useState(false);
@@ -60,10 +59,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useEffectOnce(() => {
     setIsClient(true);
     dispatch(initialize());
-
-    globalThis.setTimeout(() => {
-      setIsInitialized(true);
-    }, INITIALIZATION_DURATION);
+    setIsInitialized(true);
   });
 
   useEffect(() => {
@@ -87,7 +83,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
       <SvgFontFix />
 
       <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
-        <div className={styles.nav} ref={navRef}>
+        <nav className={styles.nav} ref={navRef}>
           <div className={styles.navContent}>
             <div className={styles.navLogo}>
               <a className={styles.logoContainer} href="/" title={version}>
@@ -104,14 +100,16 @@ const Index: FunctionComponent<Props> = ({ version }) => {
               onShowWords={() => setShowWords(true)}
             />
           </div>
-        </div>
-
-        <Solver
-          className={styles.solver}
-          height={solverHeight}
-          width={solverWidth}
-          onShowResults={() => setShowResults(true)}
-        />
+        </nav>
+
+        {solverHeight > 0 && solverWidth > 0 && (
+          <Solver
+            className={styles.solver}
+            height={solverHeight}
+            width={solverWidth}
+            onShowResults={() => setShowResults(true)}
+          />
+        )}
       </div>
 
       <MenuModal

package/src/parameters/index.ts

@@ -11,8 +11,6 @@ export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
-export const INITIALIZATION_DURATION = 100;
-
 export const TRANSITION_DURATION = 100;
 export const TRANSITION_DURATION_LONG = 250;
 
@@ -71,6 +69,8 @@ export const REMAINING_TILES_TILE_SIZE = 50;
 
 export const RESULTS_ITEM_HEIGHT = 40;
 
+export const SOLVER_COLUMN_WIDTH = 580;
+
 export const TILE_APPEAR_DURATION = 200;
 
 export const TILE_APPEAR_KEYFRAMES = [

package/src/state/sagas.ts

@@ -116,6 +116,7 @@ function* onReset(): AnyGenerator {
   yield put(dictionarySlice.actions.reset());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
+  yield put(solveSlice.actions.reset());
   yield put(verifySlice.actions.submit());
 }
 

package/src/state/selectors.ts

@@ -1,17 +1,29 @@
+/* eslint-disable max-lines */
+
 import { createSelector } from '@reduxjs/toolkit';
 import { getLocaleConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
-import { Cell, Config, isError, Result, Tile } from '@scrabble-solver/types';
+import { Cell, Config, isError, Tile } from '@scrabble-solver/types';
 
 import i18n, { LOCALE_FEATURES } from 'i18n';
-import { findCell, getRemainingTiles, getRemainingTilesGroups, sortResults, unorderedArraysEqual } from 'lib';
-import { Translations } from 'types';
+import {
+  createRegExp,
+  findCell,
+  getRemainingTiles,
+  getRemainingTilesGroups,
+  groupResults,
+  sortResults,
+  unorderedArraysEqual,
+} from 'lib';
+import { Point, Translations } from 'types';
 
 import { RootState } from './types';
 
 const selectCell = (_: unknown, cell: Cell): Cell => cell;
 
-const selectPoint = (_: unknown, point: { x: number; y: number }): { x: number; y: number } => point;
+const selectPoint = (_: unknown, point: Point): Point => point;
+
+const selectResultIndex = (_: unknown, index: number): number => index;
 
 const selectCharacter = (_: unknown, character: string | null): string | null => character;
 
@@ -71,54 +83,42 @@ export const selectCellIsValid = createSelector([selectConfig, selectCell], (con
   return config.tiles.some((tile) => tile.character === cell.tile.character);
 });
 
-export const selectResults = createSelector([selectResultsRoot], (results) => results.results);
+export const selectResultsRaw = createSelector([selectResultsRoot], (results) => results.results);
 
 export const selectResultsQuery = createSelector([selectResultsRoot], (results) => results.query);
 
-export const selectResultsSortColumn = createSelector([selectResultsRoot], (results) => results.sort.column);
+export const selectResultsSort = createSelector([selectResultsRoot], (results) => results.sort);
 
-export const selectResultsSortDirection = createSelector([selectResultsRoot], (results) => results.sort.direction);
+export const selectSortedResults = createSelector([selectResultsRaw, selectResultsSort, selectLocale], sortResults);
 
-export const selectSortedResults = createSelector(
-  [selectResults, selectResultsSortColumn, selectResultsSortDirection, selectLocale],
-  sortResults,
+export const selectGroupedResults = createSelector(
+  [selectSortedResults, selectResultsQuery, selectCellFilter],
+  groupResults,
 );
 
-const filterResultsByQuery = (results: Result[], query: string): Result[] => {
-  if (query.trim().length === 0) {
-    return results;
-  }
-
-  let regExp: RegExp | undefined;
-
-  try {
-    regExp = new RegExp(query, 'gi');
-  } catch {
-    return results;
-  }
-
-  return results.filter((result) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return regExp!.test(result.word);
-  });
-};
+export const selectResults = createSelector([selectGroupedResults], (groupedResults) => {
+  return groupedResults ? [...groupedResults.matching, ...groupedResults.other] : groupedResults;
+});
 
-export const selectSortedFilteredResults = createSelector(
-  [selectSortedResults, selectResultsQuery, selectCellFilter],
-  (results, query, cellFilter) => {
+export const selectIsResultMatching = createSelector(
+  [selectResults, selectResultsQuery, selectCellFilter, selectResultIndex],
+  (results, query, cellFilter, index) => {
     if (!results) {
-      return results;
+      return false;
     }
 
-    const filteredByQuery = filterResultsByQuery(results, query);
+    const result = results[index];
+    const regExp = createRegExp(query);
 
-    if (!cellFilter) {
-      return filteredByQuery;
+    if (!regExp.test(result.word)) {
+      return false;
     }
 
-    return filteredByQuery.filter((result) => {
+    if (cellFilter) {
       return cellFilter.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
-    });
+    }
+
+    return true;
   },
 );
 

package/src/state/slices/boardInitialState.ts

@@ -3,9 +3,11 @@ import { Board } from '@scrabble-solver/types';
 
 import settingsInitialState from './settingsInitialState';
 
+export type BoardState = Board;
+
 const { configId, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
-const boardInitialState: Board = Board.create(boardWidth, boardHeight);
+const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/slices/cellFilterInitialState.ts

@@ -1,7 +1,7 @@
-import { Cell } from '@scrabble-solver/types';
+import { Point } from 'types';
 
-export type Point = Pick<Cell, 'x' | 'y'>;
+export type CellFilterState = Point[];
 
-const cellFilterInitialState: Point[] = [];
+const cellFilterInitialState: CellFilterState = [];
 
 export default cellFilterInitialState;

package/src/state/slices/cellFilterSlice.ts

@@ -1,6 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import cellFilterInitialState, { Point } from './cellFilterInitialState';
+import { Point } from 'types';
+
+import cellFilterInitialState from './cellFilterInitialState';
 
 const cellFilterSlice = createSlice({
   initialState: cellFilterInitialState,