scrabble-solver 2.11.0 → 2.11.2

package/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Dictionary/Dictionary.module.scss

@@ -1,4 +1,8 @@
+@import 'styles/mixins';
+
 .dictionary {
+  @include scrollbars;
+
   position: relative;
   max-height: var(--dictionary--height);
   height: var(--dictionary--height);

package/packages/scrabble-solver/src/components/DictionaryInput/DictionaryInput.module.scss

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

package/packages/scrabble-solver/src/components/EmptyState/EmptyState.module.scss

@@ -8,7 +8,8 @@
 
 .tiles {
   display: inline-block;
+  max-width: 100%;
   margin-bottom: var(--spacing--m);
-  height: 40px;
+  height: 48px;
   overflow: visible;
 }

package/packages/scrabble-solver/src/components/EmptyState/EmptyState.tsx

@@ -41,8 +41,7 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant })
   return (
     <div className={classNames(styles.emptyState, className)}>
       <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
-
-      <div className={styles.content}>{children}</div>
+      <div>{children}</div>
     </div>
   );
 };

package/packages/scrabble-solver/src/components/Loading/Loading.module.scss

@@ -30,6 +30,6 @@
 }
 
 .tiles {
-  width: 298px;
+  width: 100% * 2 / 3;
   height: 100%;
 }

package/packages/scrabble-solver/src/components/Logo/Logo.tsx

@@ -1,3 +1,8 @@
+/**
+ * This component is unused, but it serves as a blueprint for the Logo.svg.
+ * Logo.svg is what this component generates with all the text nodes transformed
+ * into paths (manually with Inkscape), and corner radius removed from tiles.
+ */
 import { CSSProperties, FunctionComponent } from 'react';
 
 import PlainTiles from '../PlainTiles';

package/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Modal/Modal.module.scss

@@ -112,9 +112,23 @@
 }
 
 .content {
+  @include scrollbars;
+
   position: relative;
   flex: 1;
   min-height: 0;
   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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/PlainTiles/PlainTiles.module.scss

@@ -20,5 +20,5 @@ $duration: 750ms;
 }
 
 .dropShadow {
-  filter: drop-shadow(0 0 4px rgba(#000, 0.4));
+  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
 }

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/ResultsInput/ResultsInput.module.scss

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

package/packages/scrabble-solver/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%;
 }