@scrabble-solver/scrabble-solver 2.11.1 → 2.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.1",
+  "version": "2.11.2",
   "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.2",
+    "@scrabble-solver/constants": "^2.11.2",
+    "@scrabble-solver/dictionaries": "^2.11.2",
+    "@scrabble-solver/logger": "^2.11.2",
+    "@scrabble-solver/solver": "^2.11.2",
+    "@scrabble-solver/types": "^2.11.2",
+    "@scrabble-solver/word-definitions": "^2.11.2",
     "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": "b7ac80ab2a6c0af218756953e354d1e0c7f1e58a"
 }

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/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

@@ -120,3 +120,15 @@
   padding: var(--spacing--l);
   overflow: auto;
 }
+
+.footer {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing--l);
+  box-shadow: var(--box-shadow);
+
+  @include media('>s') {
+    display: none;
+  }
+}

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/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);

package/src/components/Solver/Solver.tsx

@@ -11,9 +11,8 @@ import {
   selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
+  selectResults,
   selectSolveError,
-  selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
   useTranslate,
   useTypedSelector,
@@ -41,18 +40,16 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+  const { columnWidth, componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
     useAppLayout();
-  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
-  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const allResults = useTypedSelector(selectSortedResults);
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const results = useTypedSelector(selectResults);
+  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
   const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
@@ -117,8 +114,8 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.column} ref={columnRef}>
-            <Results callbacks={callbacks} />
+          <div className={styles.column}>
+            <Results callbacks={callbacks} className={styles.results} />
 
             <div className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />
@@ -145,7 +142,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
                 </Alert>
               )}
 
-              {allResults && allResults.length === 0 && !isOutdated && (
+              {results && results.length === 0 && !isOutdated && (
                 <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
                 </Alert>

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -10,7 +10,7 @@ import {
   selectIsLoading,
   selectLocale,
   selectResultCandidate,
-  selectSortedResults,
+  selectResults,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -31,13 +31,12 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const locale = useTypedSelector(selectLocale);
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const sortedResults = useTypedSelector(selectSortedResults);
-  const results = sortedResults || [];
+  const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = resultCandidate ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
+  const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
   const disabled = isOutdated || !resultCandidate;
-  const isPreviousDisabled = index <= 0 || disabled;
-  const isNextDisabled = index >= results.length - 1 || disabled;
+  const isPreviousDisabled = !results || index <= 0 || disabled;
+  const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
   const { showFloatingSolveButton } = useAppLayout();