@scrabble-solver/scrabble-solver 2.11.0 → 2.11.2

package/src/components/PlainTiles/Tile.tsx

@@ -14,12 +14,12 @@ interface Props {
 
 const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
-    <rect fill={color} height={size} width={size} x={x} y={y} />
+    <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
       fontFamily={fontFamily}
-      fontSize={0.6 * size}
+      fontSize={size * 0.6}
       fontWeight="bold"
       textAnchor="middle"
       x={x + size / 2}
@@ -32,7 +32,7 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamil
       <text
         dominantBaseline="text-after-edge"
         fontFamily={fontFamily}
-        fontSize={0.25 * size}
+        fontSize={size * 0.25}
         fontWeight="bold"
         textAnchor="end"
         x={x + size * 0.9}

package/src/components/Rack/Rack.module.scss

@@ -3,6 +3,7 @@
 .rack {
   display: flex;
   box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 }
 
 .tile {
@@ -15,3 +16,27 @@
     z-index: 2;
   }
 }
+
+.sharpLeft {
+  [dir='ltr'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.sharpRight {
+  [dir='ltr'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/src/components/Rack/Rack.tsx

@@ -8,7 +8,6 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
-  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -99,9 +98,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          changeActiveIndex(1);
-        } else if (event.currentTarget.value === event.key) {
+        if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();
@@ -118,6 +115,10 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         <RackTile
           activeIndexRef={activeIndexRef}
           character={character}
+          className={classNames({
+            [styles.sharpLeft]: index !== 0,
+            [styles.sharpRight]: index !== tiles.length - 1,
+          })}
           index={index}
           inputRef={tilesRefs[index]}
           key={index}

package/src/components/Rack/RackTile.tsx

@@ -1,5 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
+import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
@@ -12,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -30,6 +31,7 @@ import styles from './Rack.module.scss';
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
   character: string | null;
+  className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
   size: number;
@@ -41,6 +43,7 @@ interface Props {
 const RackTile: FunctionComponent<Props> = ({
   activeIndexRef,
   character,
+  className,
   index,
   inputRef,
   size,
@@ -77,17 +80,7 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          event.preventDefault();
-          event.stopPropagation();
-          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
-        }
-
-        onKeyDown(event);
-      },
+      onKeyDown,
     });
   }, [index, onKeyDown]);
 
@@ -97,7 +90,7 @@ const RackTile: FunctionComponent<Props> = ({
         index: (index + 1).toLocaleString(locale),
       })}
       autoFocus={index === 0}
-      className={styles.tile}
+      className={classNames(styles.tile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}

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

@@ -9,7 +9,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   height: 100%;
   background: var(--color--background--element);
   border: var(--border);
-  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
   font-family: var(--font--family--title);
 }
 
@@ -29,6 +29,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  @include scrollbars;
+
+  scrollbar-gutter: stable;
   transition: var(--transition);
 
   &.outdated {
@@ -44,6 +47,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   justify-content: space-between;
   font-weight: 700;
   border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .headerButton {
@@ -60,6 +65,26 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &:first-child {
+    [dir='ltr'] & {
+      border-top-left-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: inherit;
+    }
+  }
+
+  &:last-child {
+    [dir='ltr'] & {
+      border-top-right-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: inherit;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -89,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 {
@@ -175,4 +213,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .input {
   border-top: var(--border);
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }

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/ResultsInput/ResultsInput.module.scss

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

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);
@@ -70,16 +74,21 @@
   flex-direction: column;
   background-color: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
 }
 
 .dictionary {
   flex: 1;
   border-bottom: var(--border);
+  border-top-left-radius: var(--border--radius);
+  border-top-right-radius: var(--border--radius);
 }
 
 .dictionaryInput {
   flex: 0 0 auto;
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }
 
 .bottomContainer {
@@ -97,10 +106,6 @@
   min-width: 0;
 }
 
-.rack {
-  border: var(--border);
-}
-
 .controls {
   width: 100%;
 }

package/src/components/Solver/Solver.tsx

@@ -11,21 +11,21 @@ import {
   selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
+  selectResults,
   selectSolveError,
-  selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
   useTranslate,
   useTypedSelector,
 } from 'state';
 
+import Alert from '../Alert';
 import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { EmptyState, FloatingSolveButton, ResultCandidatePicker } from './components';
+import { FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -40,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;
@@ -111,13 +109,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
     <div className={classNames(styles.solver, className)}>
       <div className={styles.container}>
         <div className={styles.content}>
-          <form id="a" className={styles.boardContainer} onSubmit={handleSubmit}>
+          <form className={styles.boardContainer} onSubmit={handleSubmit}>
             <Board cellSize={cellSizeSafe} className={styles.board} />
             <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} />
@@ -129,7 +127,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form id="b" onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
@@ -139,15 +137,15 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
               <ResultCandidatePicker onResultClick={onShowResults} />
 
               {error && (
-                <EmptyState className={styles.emptyState} variant="error">
+                <Alert className={styles.emptyState} variant="error">
                   {error.message}
-                </EmptyState>
+                </Alert>
               )}
 
-              {allResults && allResults.length === 0 && !isOutdated && (
-                <EmptyState className={styles.emptyState} variant="warning">
+              {results && results.length === 0 && !isOutdated && (
+                <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
-                </EmptyState>
+                </Alert>
               )}
             </div>
           )}

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

package/src/components/Solver/components/index.ts

@@ -1,4 +1,3 @@
-export { default as EmptyState } from './EmptyState';
 export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';