@scrabble-solver/scrabble-solver 2.11.1 → 2.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.1",
+  "version": "2.11.3",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.1",
-    "@scrabble-solver/constants": "^2.11.1",
-    "@scrabble-solver/dictionaries": "^2.11.1",
-    "@scrabble-solver/logger": "^2.11.1",
-    "@scrabble-solver/solver": "^2.11.1",
-    "@scrabble-solver/types": "^2.11.1",
-    "@scrabble-solver/word-definitions": "^2.11.1",
+    "@scrabble-solver/configs": "^2.11.3",
+    "@scrabble-solver/constants": "^2.11.3",
+    "@scrabble-solver/dictionaries": "^2.11.3",
+    "@scrabble-solver/logger": "^2.11.3",
+    "@scrabble-solver/solver": "^2.11.3",
+    "@scrabble-solver/types": "^2.11.3",
+    "@scrabble-solver/word-definitions": "^2.11.3",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -72,5 +72,5 @@
     "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "8dea3cee4e6f902ab8d1ae2339dd1e48b11db39d"
+  "gitHead": "693e06a0f1375268d31d12c1a24924bf5ca3c267"
 }

package/src/api/index.ts

@@ -1,4 +1,5 @@
 export { default as getServerLoggingData } from './getServerLoggingData';
 export { default as isBoardValid } from './isBoardValid';
 export { default as isCellValid } from './isCellValid';
+export { default as isCharacterValid } from './isCharacterValid';
 export { default as isRowValid } from './isRowValid';

package/src/api/isCellValid.ts

@@ -1,6 +1,7 @@
-import { BLANK } from '@scrabble-solver/constants';
 import { CellJson, Config } from '@scrabble-solver/types';
 
+import isCharacterValid from './isCharacterValid';
+
 const isCellValid = (cell: CellJson, config: Config): boolean => {
   const { isEmpty, tile, x, y } = cell;
 
@@ -16,7 +17,7 @@ const isCellValid = (cell: CellJson, config: Config): boolean => {
     return false;
   }
 
-  if (tile !== null && !config.hasCharacter(tile.character) && tile.character !== BLANK) {
+  if (tile !== null && !isCharacterValid(tile.character)) {
     return false;
   }
 

package/src/api/isCharacterValid.ts

@@ -0,0 +1,13 @@
+const TWO_TILE_CHARACTER_LENGTH = 2;
+const MAX_CHARACTER_LENGTH = TWO_TILE_CHARACTER_LENGTH;
+
+const isCharacterValid = (character: string): boolean => {
+  /*
+   * We could be strict here and check whether config.hasCharacter(character) || character === BLANK
+   * but since this case won't really affect/break solving, we don't need to worry about it.
+   * It's better to display an empty state than error state in UI, so this is a sanity check only.
+   */
+  return character.length !== 0 && character.length <= MAX_CHARACTER_LENGTH;
+};
+
+export default isCharacterValid;

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

@@ -6,6 +6,7 @@
 
   position: relative;
   display: table-cell;
+  vertical-align: middle;
   background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
@@ -35,42 +36,49 @@
 
   &.bonusStart {
     &::before {
+      content: '';
       background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character-multiplier--3);
     }
   }
@@ -91,7 +99,7 @@
 
   &.filtered {
     &::before {
-      content: ' ';
+      content: '';
       background-color: var(--color--foreground--secondary);
     }
   }
@@ -113,7 +121,6 @@
     font-weight: bold;
     color: var(--color--white);
     transition: var(--transition);
-    content: ' ';
 
     [lang='fa-IR'] & {
       font-family: var(--font--family--latin);
@@ -166,6 +173,7 @@
     }
   }
 }
+
 .icon {
   $size: 40%;
 

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

@@ -19,10 +19,9 @@ import { useLatest } from 'react-use';
 import { LOCALE_FEATURES } from 'i18n';
 import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
-import { Direction } from 'types';
+import { Direction, Point } from 'types';
 
 import { getPositionInGrid } from '../lib';
-import { Point } from '../types';
 
 const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
 

package/src/components/Board/lib/getPositionInGrid.ts

@@ -1,4 +1,4 @@
-import { Point } from '../types';
+import { Point } from 'types';
 
 const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => boolean): Point | undefined => {
   for (let y = 0; y < grid.length; ++y) {

package/src/components/Button/Button.module.scss

@@ -60,16 +60,29 @@
 .content {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: var(--spacing--l);
+
 }
 
 .icon {
+  flex: 0 0 auto;
   width: var(--button--icon--size);
   height: var(--button--icon--size);
   transition: var(--transition);
 }
 
 .label {
+  @include ellipsis;
+
+  flex: 1;
   font-size: var(--font--size--h3);
   transition: var(--transition);
+
+  [dir='ltr'] & {
+    text-align: left;
+  }
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
 }

package/src/components/LogoSplashScreen/LogoSplashScreen.module.scss

@@ -2,7 +2,7 @@
 
 $loading-duration: 250ms;
 $loaded-duration: 100ms;
-$hiding-duration: 200ms;
+$hiding-duration: 150ms;
 
 .logoSplashScreen {
   display: flex;
@@ -16,18 +16,21 @@ $hiding-duration: 200ms;
     animation-delay: $loading-duration + $loaded-duration;
     animation-duration: $hiding-duration;
     animation-fill-mode: forwards;
+    animation-timing-function: linear;
 
     .logos {
       animation: pulse;
       animation-delay: $loading-duration + $loaded-duration;
       animation-duration: $hiding-duration;
       animation-fill-mode: forwards;
+      animation-timing-function: linear;
     }
 
     .logoColor {
       animation: progress;
       animation-duration: $loading-duration;
       animation-fill-mode: forwards;
+      animation-timing-function: linear;
     }
   }
 }

package/src/components/Modal/Modal.module.scss

@@ -89,6 +89,7 @@
   z-index: 1;
   flex: 0 0 auto;
   padding: var(--spacing--l);
+  padding-bottom: 0;
   background-color: var(--color--background);
 }
 
@@ -117,6 +118,25 @@
   position: relative;
   flex: 1;
   min-height: 0;
-  padding: var(--spacing--l);
   overflow: auto;
+  padding: var(--spacing--l);
+}
+
+.footer {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  gap: var(--spacing--l);
+  padding: var(--spacing--l);
+  padding-top: 0;
+
+  @include media('>s') {
+    display: none;
+  }
+
+  > * {
+    min-width: 0;
+    flex: 1;
+  }
 }

package/src/components/Modal/Modal.tsx

@@ -15,12 +15,13 @@ import styles from './Modal.module.scss';
 export interface Props {
   children: ReactNode;
   className?: string;
+  footer?: ReactNode;
   isOpen: boolean;
   title: string;
   onClose: () => void;
 }
 
-const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
+const Modal: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -68,6 +69,8 @@ const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, o
         </div>
 
         <div className={styles.content}>{children}</div>
+
+        {footer && <div className={styles.footer}>{footer}</div>}
       </div>
     </ReactModal>
   );

package/src/components/NotFound/NotFound.module.scss

@@ -1,3 +1,5 @@
+@import 'styles/mixins';
+
 .notFound {
   display: flex;
   align-items: center;
@@ -11,18 +13,25 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
-  padding: var(--spacing--xxl);
+  padding: var(--spacing--l);
 }
 
 .icon {
-  $size: 204px;
+  --size: 200px;
 
-  height: $size;
-  width: $size;
+  height: var(--size);
+  width: var(--size);
   margin-bottom: var(--spacing--xxl);
   color: var(--color--red);
+
+  @include media('<xs') {
+    --size: 50%;
+
+    margin-bottom: var(--spacing--xl);
+  }
 }
 
 .tiles {
+  max-width: 100%;
   height: 60px;
 }

package/src/components/NotFound/NotFound.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link';
 import { FunctionComponent } from 'react';
 
 import { DashCircleFill } from 'icons';
@@ -11,12 +10,10 @@ const CONTENT = [['HTTP', '404']];
 
 const NotFound: FunctionComponent = () => (
   <div className={styles.notFound}>
-    <Link href="/">
-      <a className={styles.link}>
-        <DashCircleFill className={styles.icon} />
-        <PlainTiles className={styles.tiles} content={CONTENT} />
-      </a>
-    </Link>
+    <a className={styles.link} href="/">
+      <DashCircleFill className={styles.icon} />
+      <PlainTiles className={styles.tiles} content={CONTENT} />
+    </a>
   </div>
 );
 

package/src/components/Rack/Rack.tsx

@@ -8,6 +8,7 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
+  getTileSizes,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -31,6 +32,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const tilesRefs = useMemo(() => createArray(tilesCount).map(() => createRef<HTMLInputElement>()), [tilesCount]);
   const activeIndexRef = useRef<number>();
   const { direction } = LOCALE_FEATURES[locale];
+  const { tileFontSize } = getTileSizes(tileSize);
 
   const changeActiveIndex = useCallback(
     (offset: number) => {
@@ -110,7 +112,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   }, [changeActiveIndex, config, direction]);
 
   return (
-    <div className={classNames(styles.rack, className)} onPaste={handlePaste}>
+    <div className={classNames(styles.rack, className)} style={{ fontSize: tileFontSize }} onPaste={handlePaste}>
       {tiles.map(({ character, tile }, index) => (
         <RackTile
           activeIndexRef={activeIndexRef}

package/src/components/Results/HeaderButton.tsx

@@ -3,13 +3,7 @@ import { ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
-import {
-  resultsSlice,
-  selectResultsSortColumn,
-  selectResultsSortDirection,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
 import { ResultColumn, SortDirection } from 'types';
 
 import { useTooltip } from '../Tooltip';
@@ -24,8 +18,7 @@ interface Props {
 const HeaderButton = ({ column }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const sortColumn = useTypedSelector(selectResultsSortColumn);
-  const sortDirection = useTypedSelector(selectResultsSortDirection);
+  const sort = useTypedSelector(selectResultsSort);
   const triggerProps = useTooltip(translate(column.translationKey));
 
   const handleOrderChange = (columnId: ResultColumn) => {
@@ -44,10 +37,10 @@ const HeaderButton = ({ column }: Props): ReactElement => {
       <span className={styles.cell}>
         <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
 
-        {sortColumn === column.id && (
+        {sort.column === column.id && (
           <>
-            {sortDirection === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
-            {sortDirection === SortDirection.Descending && <SortDown className={styles.sortIcon} />}
+            {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
+            {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}
           </>
         )}
       </span>

package/src/components/Results/Result.tsx

@@ -3,7 +3,7 @@ import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useR
 
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
-import { selectLocale, useTypedSelector } from 'state';
+import { selectIsResultMatching, selectLocale, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
 
 import Cell from './Cell';
@@ -20,7 +20,7 @@ interface Props {
 const Result = ({ data, index, style }: Props): ReactElement => {
   const {
     highlightedIndex,
-    results,
+    results = [],
     onBlur = noop,
     onClick = noop,
     onFocus = noop,
@@ -28,11 +28,12 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     onMouseLeave = noop,
   } = data;
   const ref = useRef<HTMLButtonElement>(null);
+  const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
   const { consonants, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
+  const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
-  const columns = useColumns();
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -46,6 +47,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
+        [styles.notMatching]: !isMatching,
       })}
       ref={ref}
       style={style}

package/src/components/Results/Results.module.scss

@@ -10,7 +10,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   background: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
 
@@ -115,6 +114,19 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
       color: var(--color--primary--opposite);
     }
   }
+
+  &.notMatching {
+    color: var(--color--inactive);
+
+    &:focus,
+    &:hover,
+    &.highlighted {
+      &:not(:disabled) {
+        background-color: var(--color--primary--light);
+        color: var(--color--primary--opposite);
+      }
+    }
+  }
 }
 
 .resultContent {

package/src/components/Results/Results.tsx

@@ -9,9 +9,8 @@ import {
   selectAreResultsOutdated,
   selectIsLoading,
   selectLocale,
+  selectResults,
   selectSolveError,
-  selectSortedFilteredResults,
-  selectSortedResults,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -38,9 +37,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
-  const allResults = useTypedSelector(selectSortedResults);
-  const filteredResults = useTypedSelector(selectSortedFilteredResults);
-  const results = filteredResults || [];
+  const results = useTypedSelector(selectResults);
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
@@ -50,8 +47,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
-  const hasResults =
-    typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined';
+  const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
 
   useEffect(() => {
     // without setTimeout, the initial scrolling offset is calculated
@@ -65,7 +61,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
     return () => {
       globalThis.clearTimeout(timeout);
     };
-  }, [allResults, listRef, scrollToIndexRef]);
+  }, [results, listRef, scrollToIndexRef]);
 
   return (
     <div className={classNames(styles.results, className)}>
@@ -84,7 +80,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
           </EmptyState>
         )}
 
-        {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
+        {typeof error === 'undefined' && typeof results === 'undefined' && (
           <EmptyState className={styles.emptyState} variant="info">
             {translate('results.empty-state.uninitialized')}
 
@@ -102,45 +98,35 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
               </EmptyState>
             )}
 
-            {!isOutdated && (
-              <>
-                {allResults.length === 0 && (
-                  <EmptyState className={styles.emptyState} variant="warning">
-                    {translate('results.empty-state.no-results')}
-                  </EmptyState>
-                )}
-
-                {allResults.length > 0 && filteredResults.length === 0 && (
-                  <EmptyState className={styles.emptyState} variant="info">
-                    {translate('results.empty-state.no-filtered-results')}
-                  </EmptyState>
-                )}
-
-                {allResults.length > 0 && filteredResults.length > 0 && (
-                  <div className={styles.listContainer}>
-                    <FixedSizeList
-                      className={classNames(styles.list, {
-                        [styles.outdated]: isOutdated,
-                      })}
-                      direction={direction}
-                      height={height}
-                      itemCount={filteredResults.length}
-                      itemData={itemData}
-                      itemSize={RESULTS_ITEM_HEIGHT}
-                      ref={setListRef}
-                      width={width}
-                    >
-                      {Result}
-                    </FixedSizeList>
-                  </div>
-                )}
-              </>
+            {!isOutdated && results.length === 0 && (
+              <EmptyState className={styles.emptyState} variant="warning">
+                {translate('results.empty-state.no-results')}
+              </EmptyState>
+            )}
+
+            {!isOutdated && results.length > 0 && (
+              <div className={styles.listContainer}>
+                <FixedSizeList
+                  className={classNames(styles.list, {
+                    [styles.outdated]: isOutdated,
+                  })}
+                  direction={direction}
+                  height={height}
+                  itemCount={results.length}
+                  itemData={itemData}
+                  itemSize={RESULTS_ITEM_HEIGHT}
+                  ref={setListRef}
+                  width={width}
+                >
+                  {Result}
+                </FixedSizeList>
+              </div>
             )}
           </>
         )}
       </div>
 
-      {hasResults && allResults.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
+      {hasResults && results.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

package/src/components/Results/types.ts

@@ -19,5 +19,5 @@ export interface ResultCallbacks {
 
 export interface ResultData extends ResultCallbacks {
   highlightedIndex?: number;
-  results: Result[];
+  results: Result[] | undefined;
 }

package/src/components/Solver/Solver.module.scss

@@ -63,6 +63,10 @@
   }
 }
 
+.results {
+  box-shadow: var(--box-shadow);
+}
+
 .dictionaryContainer {
   flex: 0 0 auto;
   height: var(--dictionary--height);