@scrabble-solver/scrabble-solver 2.10.0 → 2.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.6",
-    "@scrabble-solver/configs": "^2.10.0",
-    "@scrabble-solver/constants": "^2.10.0",
-    "@scrabble-solver/dictionaries": "^2.10.0",
-    "@scrabble-solver/logger": "^2.10.0",
-    "@scrabble-solver/solver": "^2.10.0",
-    "@scrabble-solver/types": "^2.10.0",
-    "@scrabble-solver/word-definitions": "^2.10.0",
+    "@scrabble-solver/configs": "^2.10.1",
+    "@scrabble-solver/constants": "^2.10.1",
+    "@scrabble-solver/dictionaries": "^2.10.1",
+    "@scrabble-solver/logger": "^2.10.1",
+    "@scrabble-solver/solver": "^2.10.1",
+    "@scrabble-solver/types": "^2.10.1",
+    "@scrabble-solver/word-definitions": "^2.10.1",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -74,5 +74,5 @@
     "sass": "^1.55.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "7fd0f6bf536fca88c18ce02e320da71b0c6d6f61"
+  "gitHead": "506586e8bb9e71f9f784dabffae2229c587c5e5a"
 }

package/src/components/Board/hooks/useGrid.ts

@@ -17,8 +17,9 @@ import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
 import { AnyAction } from 'redux';
 
+import { LOCALE_FEATURES } from 'i18n';
 import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { boardSlice, selectConfig, useTypedSelector } from 'state';
+import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction } from 'types';
 
 import { getPositionInGrid } from '../lib';
@@ -44,6 +45,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const width = rows[0].length;
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
+  const locale = useTypedSelector(selectLocale);
   const refs = useMemo(
     () => createGridOf<RefObject<HTMLInputElement>>(width, height, () => createRef()),
     [width, height],
@@ -235,8 +237,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
-          const isRtl = document.body.parentElement?.dir === 'rtl';
-          changeActiveIndex(isRtl ? 1 : -1, 0);
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 1, 0);
         }
       },
       onArrowRight: (event) => {
@@ -245,8 +246,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
-          const isRtl = document.body.parentElement?.dir === 'rtl';
-          changeActiveIndex(isRtl ? -1 : 1, 0);
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 1 : -1, 0);
         }
       },
       onArrowUp: (event) => {
@@ -333,7 +333,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, dispatch, locale, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

package/src/components/Rack/Rack.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { ChangeEvent, ClipboardEvent, createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { LOCALE_FEATURES } from 'i18n';
 import {
   createArray,
   createKeyboardNavigation,
@@ -10,7 +11,7 @@ import {
   isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
-import { rackSlice, selectConfig, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
+import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
 
 import styles from './Rack.module.scss';
 import RackTile from './RackTile';
@@ -22,12 +23,14 @@ interface Props {
 const Rack: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
+  const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
   const resultCandidateTiles = useTypedSelector(selectResultCandidateTiles);
   const tiles = useMemo(() => zipCharactersAndTiles(rack, resultCandidateTiles), [rack, resultCandidateTiles]);
   const tilesCount = tiles.length;
   const tilesRefs = useMemo(() => createArray(tilesCount).map(() => createRef<HTMLInputElement>()), [tilesCount]);
   const activeIndexRef = useRef<number>();
+  const { direction } = LOCALE_FEATURES[locale];
 
   const changeActiveIndex = useCallback(
     (offset: number) => {
@@ -73,18 +76,27 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
     return createKeyboardNavigation({
       onArrowLeft: (event) => {
         event.preventDefault();
-        const direction = document.body.parentElement?.dir || 'ltr';
         changeActiveIndex(direction === 'ltr' ? -1 : 1);
       },
       onArrowRight: (event) => {
         event.preventDefault();
-        const direction = document.body.parentElement?.dir || 'ltr';
         changeActiveIndex(direction === 'ltr' ? 1 : -1);
       },
       onBackspace: (event) => {
         event.preventDefault();
         changeActiveIndex(-1);
       },
+      onDelete: (event) => {
+        const index = activeIndexRef.current;
+
+        if (typeof index === 'undefined') {
+          return;
+        }
+
+        event.preventDefault();
+        dispatch(rackSlice.actions.changeCharacters({ characters: [null], index }));
+        changeActiveIndex(1);
+      },
       onKeyDown: (event) => {
         if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
           changeActiveIndex(1);
@@ -97,7 +109,7 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
         }
       },
     });
-  }, [changeActiveIndex, config]);
+  }, [changeActiveIndex, config, direction]);
 
   return (
     <div className={classNames(styles.rack, className)} onPaste={handlePaste}>

package/src/components/Results/Results.tsx

@@ -61,7 +61,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         </EmptyState>
       )}
 
-      {typeof results === 'undefined' && typeof error === 'undefined' && (
+      {typeof error === 'undefined' && typeof results === 'undefined' && (
         <EmptyState className={styles.emptyState} type="info">
           {translate('results.empty-state.uninitialized')}
 
@@ -69,7 +69,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         </EmptyState>
       )}
 
-      {typeof results !== 'undefined' && typeof allResults !== 'undefined' && typeof error === 'undefined' && (
+      {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
         <>
           {isOutdated && (
             <EmptyState className={styles.emptyState} type="info">

package/src/components/Settings/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -17,7 +17,7 @@ interface Props {
 const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const configId = useTypedSelector(selectAutoGroupTiles);
+  const value = useTypedSelector(selectAutoGroupTiles);
 
   const options = [
     {
@@ -43,7 +43,7 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
     <div className={className}>
       {options.map((option) => (
         <Radio
-          checked={configId === parseValue(option.value)}
+          checked={value === parseValue(option.value)}
           className={styles.option}
           disabled={disabled}
           id="autoGroupTiles"

package/src/components/Settings/components/LocaleSetting/options.ts

@@ -9,6 +9,7 @@ interface Option {
   className: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
   label: string;
+  name: string;
   value: Locale;
 }
 
@@ -17,44 +18,51 @@ const options: Option[] = [
     className: styles.gb,
     Icon: FlagGb,
     label: 'English (GB)',
+    name: 'English (GB)',
     value: Locale.EN_GB,
   },
   {
     className: styles.us,
     Icon: FlagUs,
     label: 'English (US)',
+    name: 'English (US)',
     value: Locale.EN_US,
   },
   {
     className: styles.fa,
     Icon: FlagFa,
     label: 'فارسی',
+    name: 'Persian',
     value: Locale.FA_IR,
   },
   {
     className: styles.fr,
     Icon: FlagFr,
     label: 'Français',
+    name: 'French',
     value: Locale.FR_FR,
   },
   {
     className: styles.de,
     Icon: FlagDe,
     label: 'Deutsch',
+    name: 'German',
     value: Locale.DE_DE,
   },
   {
     className: styles.pl,
     Icon: FlagPl,
     label: 'Polski',
+    name: 'Polish',
     value: Locale.PL_PL,
   },
   {
     className: styles.es,
     Icon: FlagEs,
     label: 'Español',
+    name: 'Spanish',
     value: Locale.ES_ES,
   },
-];
+].sort((a, b) => a.name.localeCompare(b.name));
 
 export default options;

package/src/i18n/fr.json

@@ -40,7 +40,7 @@
   "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
-  "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
+  "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
   "results.solve": "Résoudre",
   "settings": "Options",

package/src/lib/getRemainingTilesGroups.ts

@@ -8,32 +8,29 @@ import getTotalRemainingTilesCount from './getTotalRemainingTilesCount';
 const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): RemainingTilesGroup[] => {
   const consonants = remainingTiles.filter(isConsonant);
   const vowels = remainingTiles.filter(isVowel);
+  const other = remainingTiles.filter(isOther);
   const groups: RemainingTilesGroup[] = [];
 
-  if (consonants.length + vowels.length > 0) {
-    groups.push({
-      remainingCount: getRemainingTilesCount(vowels),
-      tiles: vowels,
-      translationKey: 'common.vowels',
-      totalCount: getTotalRemainingTilesCount(vowels),
-    });
-
-    groups.push({
-      remainingCount: getRemainingTilesCount(consonants),
-      tiles: consonants,
-      translationKey: 'common.consonants',
-      totalCount: getTotalRemainingTilesCount(consonants),
-    });
-  } else {
-    const tiles = remainingTiles.filter(isLetter);
-
-    groups.push({
-      remainingCount: getRemainingTilesCount(tiles),
-      tiles,
-      translationKey: 'common.tiles',
-      totalCount: getTotalRemainingTilesCount(tiles),
-    });
-  }
+  groups.push({
+    remainingCount: getRemainingTilesCount(vowels),
+    tiles: vowels,
+    translationKey: 'common.vowels',
+    totalCount: getTotalRemainingTilesCount(vowels),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(consonants),
+    tiles: consonants,
+    translationKey: 'common.consonants',
+    totalCount: getTotalRemainingTilesCount(consonants),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(other),
+    tiles: other,
+    translationKey: 'common.tiles',
+    totalCount: getTotalRemainingTilesCount(other),
+  });
 
   const twoCharacterTiles = remainingTiles.filter(isTwoCharacter);
   const blanks = remainingTiles.filter(isBlank);
@@ -59,10 +56,11 @@ const isConsonant = (tile: RemainingTile): boolean => CONSONANTS.includes(tile.c
 
 const isVowel = (tile: RemainingTile): boolean => VOWELS.includes(tile.character);
 
-const isLetter = (tile: RemainingTile): boolean => !isBlank(tile) && !isTwoCharacter(tile);
-
 const isTwoCharacter = (tile: RemainingTile): boolean => tile.character.length === 2;
 
 const isBlank = (tile: RemainingTile): boolean => tile.character === BLANK;
 
+const isOther = (tile: RemainingTile) =>
+  !isConsonant(tile) && !isVowel(tile) && !isBlank(tile) && !isTwoCharacter(tile);
+
 export default getRemainingTilesGroups;

package/src/sdk/findWordDefinitions.ts

@@ -3,7 +3,7 @@ import { Locale, WordDefinition, WordDefinitionJson } from '@scrabble-solver/typ
 import fetchJson from './fetchJson';
 
 const findWordDefinitions = async (locale: Locale, word: string): Promise<WordDefinition[]> => {
-  const json = await fetchJson<WordDefinitionJson[]>(`/api/dictionary/${locale}/${word}`);
+  const json = await fetchJson<WordDefinitionJson[]>(`/api/dictionary/${locale}/${encodeURIComponent(word)}`);
   return json.map(WordDefinition.fromJson);
 };
 

package/src/state/sagas.ts

@@ -7,13 +7,13 @@ import { findWordDefinitions, solve, verify, visit } from 'sdk';
 
 import { initialize, reset } from './actions';
 import {
-  selectAutoGroupTiles,
   selectBoard,
   selectCellIsFiltered,
   selectCharacters,
   selectConfig,
   selectDictionary,
   selectLocale,
+  selectLocaleAutoGroupTiles,
 } from './selectors';
 import {
   boardSlice,
@@ -65,7 +65,7 @@ function* onRackValueChange(): AnyGenerator {
 }
 
 function* onApplyResult({ payload: result }: PayloadAction<Result>): AnyGenerator {
-  const autoGroupTiles = yield select(selectAutoGroupTiles);
+  const autoGroupTiles = yield select(selectLocaleAutoGroupTiles);
   yield put(boardSlice.actions.applyResult(result));
   yield put(cellFilterSlice.actions.reset());
   yield put(rackSlice.actions.removeTiles(result.tiles));
@@ -74,8 +74,15 @@ function* onApplyResult({ payload: result }: PayloadAction<Result>): AnyGenerato
 }
 
 function* onConfigIdChange(): AnyGenerator {
+  const characters = yield select(selectCharacters);
+
+  if (characters.length > 0) {
+    yield put(solveSlice.actions.submit());
+  } else {
+    yield put(resultsSlice.actions.reset());
+  }
+
   yield put(resultsSlice.actions.reset());
-  yield put(solveSlice.actions.submit());
   yield put(verifySlice.actions.submit());
   yield* ensureProperTilesCount();
 }
@@ -112,9 +119,16 @@ function* onReset(): AnyGenerator {
 }
 
 function* onLocaleChange(): AnyGenerator {
+  const characters = yield select(selectCharacters);
+
+  if (characters.length > 0) {
+    yield put(solveSlice.actions.submit());
+  } else {
+    yield put(resultsSlice.actions.reset());
+  }
+
   yield put(dictionarySlice.actions.reset());
   yield put(resultsSlice.actions.changeResultCandidate(null));
-  yield put(solveSlice.actions.submit());
   yield put(verifySlice.actions.submit());
 }
 
@@ -181,7 +195,7 @@ function* ensureProperTilesCount(): AnyGenerator {
   } else if (config.maximumCharactersCount < characters.length) {
     const nonNulls = characters.filter(Boolean).slice(0, config.maximumCharactersCount);
     const differenceCount = Math.abs(config.maximumCharactersCount - nonNulls.length);
-    const autoGroupTiles = yield select(selectAutoGroupTiles);
+    const autoGroupTiles = yield select(selectLocaleAutoGroupTiles);
     yield put(rackSlice.actions.init([...nonNulls, ...Array(differenceCount).fill(null)]));
     yield put(rackSlice.actions.groupTiles(autoGroupTiles));
   }

package/src/state/selectors.ts

@@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { getLocaleConfig } from '@scrabble-solver/configs';
 import { Cell, Config, isError, Result, Tile } from '@scrabble-solver/types';
 
-import i18n from 'i18n';
+import i18n, { LOCALE_FEATURES } from 'i18n';
 import { findCell, getRemainingTiles, getRemainingTilesGroups, sortResults, unorderedArraysEqual } from 'lib';
 import { Translations } from 'types';
 
@@ -38,9 +38,17 @@ export const selectDictionaryError = createSelector([selectDictionaryRoot], (dic
   return isError(dictionary.error) ? dictionary.error : undefined;
 });
 
+export const selectLocale = createSelector([selectSettingsRoot], (settings) => settings.locale);
+
 export const selectAutoGroupTiles = createSelector([selectSettingsRoot], (settings) => settings.autoGroupTiles);
 
-export const selectLocale = createSelector([selectSettingsRoot], (settings) => settings.locale);
+export const selectLocaleAutoGroupTiles = createSelector([selectLocale, selectSettingsRoot], (locale, settings) => {
+  if (LOCALE_FEATURES[locale].direction === 'ltr' || settings.autoGroupTiles === null) {
+    return settings.autoGroupTiles;
+  }
+
+  return settings.autoGroupTiles === 'left' ? 'right' : 'left';
+});
 
 export const selectBoard = selectBoardRoot;