@scrabble-solver/scrabble-solver 2.10.0 → 2.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.0",
+  "version": "2.10.2",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,27 +30,27 @@
   "dependencies": {
     "@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",
+    "@reduxjs/toolkit": "^1.9.2",
+    "@scrabble-solver/configs": "^2.10.2",
+    "@scrabble-solver/constants": "^2.10.2",
+    "@scrabble-solver/dictionaries": "^2.10.2",
+    "@scrabble-solver/logger": "^2.10.2",
+    "@scrabble-solver/solver": "^2.10.2",
+    "@scrabble-solver/types": "^2.10.2",
+    "@scrabble-solver/word-definitions": "^2.10.2",
     "classnames": "^2.3.2",
-    "next": "^12.3.1",
+    "next": "^13.1.6",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
-    "react-redux": "^8.0.4",
+    "react-redux": "^8.0.5",
     "react-use": "^17.4.0",
-    "react-window": "^1.8.7",
-    "redux": "^4.2.0",
-    "redux-saga": "^1.2.1",
+    "react-window": "^1.8.8",
+    "redux": "^4.2.1",
+    "redux-saga": "^1.2.2",
     "store2": "^2.14.2",
     "uuid": "^9.0.0",
     "workbox-expiration": "^6.5.4",
@@ -59,20 +59,20 @@
     "workbox-window": "^6.5.4"
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.5.0",
+    "@svgr/webpack": "^6.5.1",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
-    "@types/react-redux": "^7.1.24",
+    "@types/react-redux": "^7.1.25",
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "env-cmd": "^10.1.0",
-    "sass": "^1.55.0",
+    "sass": "^1.57.1",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "7fd0f6bf536fca88c18ce02e320da71b0c6d6f61"
+  "gitHead": "4feaabfad2a10079c28e04f446c98dbf0383d520"
 }

package/src/components/Board/Board.module.scss

@@ -1,8 +1,7 @@
 .board {
   display: table;
   box-shadow: var(--box-shadow);
-  border-top: var(--border);
-  border-left: var(--border);
+  border: var(--border);
 }
 
 .row {

package/src/components/Board/BoardPure.tsx

@@ -53,7 +53,9 @@ const BoardPure: FunctionComponent<Props> = ({
             cell={cell}
             direction={direction}
             inputRef={refs[y][x]}
+            isBottom={y === rows.length - 1}
             isCenter={center.x === x && center.y === y}
+            isRight={x === cells.length - 1}
             key={x}
             size={cellSize}
             onChange={onChange}

package/src/components/Board/components/Cell/Cell.module.scss

@@ -8,104 +8,102 @@ $icon-size: 16px;
   position: relative;
   display: table-cell;
   background-color: white;
-  border-right: var(--border);
-  border-bottom: var(--border);
+  border-right: var(--border--width) dotted var(--border--color--light);
+  border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
 
-  &.bonusWord2,
-  &.bonusWord3 {
-    position: relative;
+  &.bottom {
+    border-bottom: none;
+  }
 
-    &:before {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      font-weight: bold;
-      pointer-events: none;
-    }
+  &.right {
+    border-right: none;
   }
 
   &.bonusStart {
-    background-color: var(--color--violet--light);
+    &:before {
+      background-color: var(--color--violet--light);
+    }
   }
 
   &.bonusCharacter1 {
-    background-color: var(--color--yellow--light);
+    &:before {
+      background-color: var(--color--yellow--light);
+    }
   }
 
   &.bonusCharacter2 {
-    background-color: var(--color--green--light);
+    &:before {
+      background-color: var(--color--green--light);
+    }
   }
 
   &.bonusCharacter3 {
-    background-color: var(--color--blue--light);
+    &:before {
+      background-color: var(--color--blue--light);
+    }
   }
 
   &.bonusCharacter5 {
-    background-color: var(--color--red--light);
+    &:before {
+      background-color: var(--color--red--light);
+    }
   }
 
   &.bonusCharacterMultiplier2 {
-    background-color: var(--color--light-blue--light);
+    &:before {
+      background-color: var(--color--light-blue--light);
+    }
   }
 
   &.bonusCharacterMultiplier3 {
-    background-color: var(--color--dark-blue--light);
-  }
-
-  &.bonusWord2,
-  &.bonusWord3 {
-    background-color: var(--color--inactive);
-
     &:before {
-      font-size: 75%;
-      color: white;
-
-      [lang='fa-IR'] & {
-        font-family: 'Open Sans', sans-serif;
-      }
+      background-color: var(--color--dark-blue--light);
     }
   }
 
   &.bonusWord2 {
     &:before {
       content: 'x2';
+      background-color: var(--color--orange);
     }
   }
 
   &.bonusWord3 {
     &:before {
       content: 'x3';
+      background-color: var(--color--pink);
     }
   }
 
-  &.characterPoints1 {
-    background-color: var(--color--yellow);
-  }
-
-  &.characterPoints2 {
-    background-color: var(--color--green);
-  }
-
-  &.characterPoints3 {
-    background-color: var(--color--blue);
-  }
-
-  &.characterPoints5 {
-    background-color: var(--color--red);
+  &.candidate {
+    &:before {
+      content: ' ';
+      background-color: var(--color--primary);
+    }
   }
 
-  &.candidate {
-    background-color: var(--color--primary);
+  &:before {
+    $size: 80%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    top: (100% - $size) / 2;
+    left: (100% - $size) / 2;
+    width: $size;
+    height: $size;
+    border-radius: var(--border--radius);
+    pointer-events: none;
+    font-size: 60%;
+    font-weight: bold;
+    color: white;
+    content: ' ';
 
-    &:before {
-      display: none;
+    [lang='fa-IR'] & {
+      font-family: 'Open Sans', sans-serif;
     }
   }
 
@@ -207,6 +205,8 @@ $icon-size: 16px;
 }
 
 .toggleDirection {
+  transition: var(--transition);
+
   &.right {
     transform: rotate(-90deg);
 
@@ -249,9 +249,19 @@ $icon-size: 16px;
 
 .flag,
 .star {
+  color: white;
+}
+
+.star {
+  $size: 40%;
+
+  width: $size;
+  height: $size;
+}
+
+.flag {
   $size: 50%;
 
   width: $size;
   height: $size;
-  color: white;
 }

package/src/components/Board/components/Cell/Cell.tsx

@@ -9,6 +9,7 @@ import {
   cellFilterSlice,
   selectCellBonus,
   selectCellIsFiltered,
+  selectCellIsValid,
   selectTilePoints,
   useTranslate,
   useTypedSelector,
@@ -21,7 +22,9 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isBottom: boolean;
   isCenter: boolean;
+  isRight: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
@@ -33,7 +36,9 @@ const Cell: FunctionComponent<Props> = ({
   className,
   direction,
   inputRef,
+  isBottom,
   isCenter,
+  isRight,
   size,
   onChange,
   onDirectionToggle,
@@ -45,6 +50,7 @@ const Cell: FunctionComponent<Props> = ({
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+  const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
   const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
@@ -82,9 +88,12 @@ const Cell: FunctionComponent<Props> = ({
       className={className}
       direction={direction}
       inputRef={inputRef}
+      isBottom={isBottom}
       isCenter={isCenter}
+      isRight={isRight}
       isEmpty={isEmpty}
       isFiltered={isFiltered}
+      isValid={isValid}
       points={points}
       size={size}
       style={style}

package/src/components/Board/components/Cell/CellPure.tsx

@@ -25,9 +25,12 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isBottom: boolean;
   isCenter: boolean;
+  isRight: boolean;
   isEmpty: boolean;
   isFiltered: boolean;
+  isValid: boolean;
   points?: number;
   size: number;
   style?: CSSProperties;
@@ -46,9 +49,12 @@ const CellPure: FunctionComponent<Props> = ({
   className,
   direction,
   inputRef,
+  isBottom,
   isCenter,
+  isRight,
   isEmpty,
   isFiltered,
+  isValid,
   points,
   size,
   style,
@@ -61,12 +67,14 @@ const CellPure: FunctionComponent<Props> = ({
   onToggleFilterCellClick,
 }) => (
   <div
-    className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
+    className={classNames(styles.cell, className, getBonusClassname(cell, bonus, isCenter), {
+      [styles.bottom]: isBottom,
       [styles.candidate]: cell.isCandidate(),
+      [styles.right]: isRight,
     })}
     style={style}
   >
-    {isCenter && (
+    {isCenter && isEmpty && (
       <div className={classNames(styles.iconContainer)}>
         <Star className={styles.star} />
       </div>
@@ -84,6 +92,7 @@ const CellPure: FunctionComponent<Props> = ({
       highlighted={cell.isCandidate()}
       inputRef={inputRef}
       isBlank={tile.isBlank}
+      isValid={isValid}
       points={points}
       raised={!isEmpty}
       size={size}

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/NavButtons/NavButtons.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { useIsTouchDevice } from 'hooks';
 import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
@@ -27,6 +28,7 @@ const NavButtons: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
+  const isTouchDevice = useIsTouchDevice();
 
   return (
     <div className={styles.navButtons}>
@@ -72,7 +74,15 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
+        {!isTouchDevice && (
+          <SquareButton
+            className={styles.button}
+            Icon={Keyboard}
+            tooltip={translate('keyMap')}
+            onClick={onShowKeyMap}
+          />
+        )}
+
         <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
       </div>
     </div>

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/Rack/RackTile.tsx

@@ -14,7 +14,14 @@ import { useDispatch } from 'react-redux';
 
 import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { TILE_SIZE } from 'parameters';
-import { rackSlice, selectCharacterPoints, selectConfig, useTranslate, useTypedSelector } from 'state';
+import {
+  rackSlice,
+  selectCharacterIsValid,
+  selectCharacterPoints,
+  selectConfig,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Tile from '../Tile';
 
@@ -43,6 +50,7 @@ const RackTile: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
+  const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
 
   const handleFocus = useCallback(() => {
     activeIndexRef.current = index;
@@ -88,6 +96,7 @@ const RackTile: FunctionComponent<Props> = ({
       highlighted={tile !== null}
       inputRef={inputRef}
       isBlank={character === BLANK}
+      isValid={isValid}
       key={index}
       placeholder={translate('rack.placeholder')[index]}
       points={points}

package/src/components/RemainingTiles/Character.module.scss

@@ -9,7 +9,6 @@
   }
 
   &.overused {
-    color: red;
     opacity: 1;
 
     .tile {

package/src/components/RemainingTiles/Character.tsx

@@ -37,6 +37,7 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
         className={styles.tile}
         disabled
         isBlank={character === BLANK}
+        isValid={remainingCount >= 0}
         points={points}
         raised
         size={REMAINING_TILES_TILE_SIZE}

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;