@scrabble-solver/scrabble-solver 2.11.0 → 2.11.2

package/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,10 +1,10 @@
 import { FunctionComponent } from 'react';
 
-import { Key, Modal } from 'components';
-import { selectConfig, useTranslate, useTypedSelector } from 'state';
+import { Modal } from 'components';
+import { useTranslate } from 'state';
 
 import { Mapping } from './components';
-import { ARROWS, BACKSPACE, CTRL, DEL, ENTER, SPACE } from './keys';
+import { ARROWS, BACKSPACE, DEL, ENTER, SPACE } from './keys';
 
 interface Props {
   className?: string;
@@ -14,7 +14,6 @@ interface Props {
 
 const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
@@ -22,26 +21,11 @@ const KeyMapModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =
         <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[ARROWS]} />
         <Mapping description={translate('keyMap.board-and-rack.remove-tile')} mapping={[DEL, BACKSPACE]} />
         <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[ENTER]} />
-        {config.twoCharacterTiles.length > 0 && (
-          <Mapping
-            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
-            mapping={[
-              [
-                CTRL,
-                <>
-                  {config.twoCharacterTiles.map(([firstLetter]) => (
-                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
-                  ))}
-                </>,
-              ],
-            ]}
-          />
-        )}
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE, [CTRL, <Key key="b">B</Key>]]} />
-        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[[CTRL, ARROWS]]} />
+        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[SPACE]} />
+        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[ARROWS]} />
       </Modal.Section>
 
       <Modal.Section title={translate('keyMap.rack')}>

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

@@ -29,6 +29,10 @@
 }
 
 .group {
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
   &:first-child {
     margin-left: 0;
   }

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

@@ -4,6 +4,13 @@
   width: 100%;
   text-transform: none;
 
+  &,
+  &:active,
+  &:focus,
+  &:hover {
+    box-shadow: 0px 1px 1px 0px var(--box-shadow--color);
+  }
+
   & + & {
     margin-top: var(--spacing--l);
   }

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

@@ -19,6 +19,7 @@
         width: 100%;
         height: 100%;
         content: ' ';
+        border-radius: inherit;
         box-shadow: var(--box-shadow--error);
       }
     }

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

@@ -9,14 +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);
-  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 
   @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 } 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(
@@ -43,7 +38,24 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, 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={onClose}
+        >
+          {translate('results.insert')}
+        </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

@@ -21,6 +21,8 @@
   $height: 32px;
 
   height: $height;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
   transition: var(--transition);
 
   &.de {

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

@@ -37,5 +37,12 @@
 
   width: $size;
   height: $size;
-  margin-right: var(--spacing--s);
+
+  [dir='ltr'] & {
+    margin-right: var(--spacing--s);
+  }
+
+  [dir='rtl'] & {
+    margin-left: var(--spacing--s);
+  }
 }

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

@@ -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;
   }
 };
 

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/createAppStore.ts

@@ -1,21 +1,37 @@
-import { applyMiddleware, compose, createStore } from 'redux';
+import { configureStore } from '@reduxjs/toolkit';
 import reduxSaga from 'redux-saga';
 
-import rootReducer from './rootReducer';
 import { rootSaga } from './sagas';
-import { RootState } from './types';
+import {
+  boardSlice,
+  cellFilterSlice,
+  dictionarySlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
 
 const sagaMiddleware = reduxSaga();
-const initialState: Partial<RootState> | undefined = undefined;
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-// eslint-disable-next-line no-underscore-dangle
-const composeEnhancers = globalThis.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+const createAppStore = () => {
+  const store = configureStore({
+    reducer: {
+      board: boardSlice.reducer,
+      cellFilter: cellFilterSlice.reducer,
+      dictionary: dictionarySlice.reducer,
+      rack: rackSlice.reducer,
+      results: resultsSlice.reducer,
+      settings: settingsSlice.reducer,
+      solve: solveSlice.reducer,
+      verify: verifySlice.reducer,
+    },
+    middleware: [sagaMiddleware],
+  });
 
-const createAppStore = (): ReturnType<typeof createStore> => {
-  const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(sagaMiddleware)));
   sagaMiddleware.run(rootSaga);
+
   return store;
 };
 

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,

package/src/state/slices/dictionaryInitialState.ts

@@ -1,13 +1,13 @@
 import { WordDefinition } from '@scrabble-solver/types';
 
-interface DictionaryInitialState {
+export interface DictionaryState {
   error: unknown | undefined;
   input: string;
   isLoading: boolean;
   results: WordDefinition[];
 }
 
-const dictionaryInitialState: DictionaryInitialState = {
+const dictionaryInitialState: DictionaryState = {
   error: undefined,
   input: '',
   isLoading: false,

package/src/state/slices/rackInitialState.ts

@@ -1,3 +1,5 @@
-const rackInitialState: (string | null)[] = [null, null, null, null, null, null, null];
+export type RackState = (string | null)[];
+
+const rackInitialState: RackState = [null, null, null, null, null, null, null];
 
 export default rackInitialState;

package/src/state/slices/resultsInitialState.ts

@@ -1,11 +1,18 @@
 import { Result } from '@scrabble-solver/types';
 
-import { ResultColumn, SortDirection } from 'types';
+import { ResultColumn, Sort, SortDirection } from 'types';
 
-const resultsInitialState = {
-  candidate: null as Result | null,
+export interface ResultsState {
+  candidate: Result | null;
+  query: string;
+  results: Result[] | undefined;
+  sort: Sort;
+}
+
+const resultsInitialState: ResultsState = {
+  candidate: null,
   query: '',
-  results: undefined as Result[] | undefined,
+  results: undefined,
   sort: {
     column: ResultColumn.Points,
     direction: SortDirection.Descending,

package/src/state/slices/settingsInitialState.ts

@@ -1,29 +1,18 @@
-import { scrabble } from '@scrabble-solver/configs';
+import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
-const getInitialLocale = (): Locale => {
-  if (!globalThis.navigator) {
-    return Locale.EN_US;
-  }
+import { guessLocale } from 'lib';
 
-  const locales = Object.values(Locale);
-  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+export interface SettingsState {
+  autoGroupTiles: 'left' | 'right' | null;
+  configId: typeof literaki.id | typeof scrabble.id;
+  locale: Locale;
+}
 
-  if (exactMatch) {
-    return exactMatch;
-  }
-
-  const partialMatch = locales.find((locale) => {
-    return globalThis.navigator.language === locale.substring(0, 2);
-  });
-
-  return partialMatch || Locale.EN_US;
-};
-
-const settingsInitialState = {
-  autoGroupTiles: 'left' as 'left' | 'right' | null,
+const settingsInitialState: SettingsState = {
+  autoGroupTiles: 'left',
   configId: scrabble.id,
-  locale: getInitialLocale(),
+  locale: guessLocale(),
 };
 
 export default settingsInitialState;

package/src/state/slices/solveInitialState.ts

@@ -2,7 +2,7 @@ import { Board } from '@scrabble-solver/types';
 
 import boardInitialState from './boardInitialState';
 
-interface SolveInitialState {
+export interface SolveState {
   error: unknown | undefined;
   isLoading: boolean;
   lastSolvedParameters: {
@@ -11,7 +11,7 @@ interface SolveInitialState {
   };
 }
 
-const solveInitialState: SolveInitialState = {
+const solveInitialState: SolveState = {
   error: undefined,
   isLoading: false,
   lastSolvedParameters: {

package/src/state/slices/solveSlice.ts

@@ -12,6 +12,8 @@ const solveSlice = createSlice({
   initialState: solveInitialState,
   name: 'solve',
   reducers: {
+    reset: () => solveInitialState,
+
     submit: (state) => {
       const error = solveInitialState.error;
       return { ...state, error, isLoading: true };

package/src/state/slices/verifyInitialState.ts

@@ -1,12 +1,21 @@
-import boardInitialState from './boardInitialState';
+import boardInitialState, { BoardState } from './boardInitialState';
 
-const verifyInitialState = {
+export interface VerifyState {
+  isLoading: boolean;
+  lastSolvedParameters: {
+    board: BoardState;
+  };
+  invalidWords: string[];
+  validWords: string[];
+}
+
+const verifyInitialState: VerifyState = {
   isLoading: false,
   lastSolvedParameters: {
     board: boardInitialState,
   },
-  invalidWords: [] as string[],
-  validWords: [] as string[],
+  invalidWords: [],
+  validWords: [],
 };
 
 export default verifyInitialState;