scrabble-solver 2.18.0 → 2.18.2

package/packages/scrabble-solver/src/lib/createKeyComparator.ts

@@ -3,10 +3,7 @@ import { type Comparator } from '@/types';
 import { createStringComparator } from './createStringComparator';
 import { numberComparator } from './numberComparator';
 
-export const createKeyComparator = <T extends Record<keyof T, unknown>>(
-  key: keyof T,
-  locale: string,
-): Comparator<T> => {
+export const createKeyComparator = <T extends object>(key: keyof T, locale: string): Comparator<T> => {
   const stringComparator = createStringComparator(locale);
 
   return (a: T, b: T): number => {

package/packages/scrabble-solver/src/lib/createSortComparator.ts

@@ -0,0 +1,22 @@
+import { type ShowCoordinates } from '@scrabble-solver/types';
+
+import { type Comparator, type ComparatorFactory, type Sort, SortDirection } from '@/types';
+
+import { reverseComparator } from './reverseComparator';
+
+interface Parameters<Item, Id extends string> {
+  comparators: Record<Id, ComparatorFactory<Item>>;
+  locale: string;
+  showCoordinates: ShowCoordinates;
+  sort: Sort<Id>;
+}
+
+export function createSortComparator<Item, Id extends string>({
+  comparators,
+  locale,
+  showCoordinates,
+  sort,
+}: Parameters<Item, Id>): Comparator<Item> {
+  const comparator = comparators[sort.column](locale, showCoordinates);
+  return sort.direction === SortDirection.Descending ? reverseComparator(comparator) : comparator;
+}

package/packages/scrabble-solver/src/lib/getCoordinates.test.ts

@@ -0,0 +1,21 @@
+import { getCoordinates } from './getCoordinates';
+
+describe('getCoordinates', () => {
+  const point = { x: 3, y: 5 };
+
+  it('encodes a horizontal word as row number followed by column letter in original mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: true }, 'original')).toBe('6D');
+  });
+
+  it('encodes a vertical word as column letter followed by row number in original mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: false }, 'original')).toBe('D6');
+  });
+
+  it('encodes a horizontal word as row letter followed by column number in alternative mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: true }, 'alternative')).toBe('F4');
+  });
+
+  it('encodes a vertical word as column number followed by row letter in alternative mode', () => {
+    expect(getCoordinates({ ...point, isHorizontal: false }, 'alternative')).toBe('4F');
+  });
+});

package/packages/scrabble-solver/src/lib/getCoordinates.ts

@@ -0,0 +1,16 @@
+import { type ShowCoordinates } from '@scrabble-solver/types';
+
+import { getCoordinate } from './getCoordinate';
+
+interface Parameters {
+  isHorizontal: boolean;
+  x: number;
+  y: number;
+}
+
+export const getCoordinates = ({ isHorizontal, x, y }: Parameters, showCoordinates: ShowCoordinates): string => {
+  const xCoordinate = getCoordinate(x, showCoordinates === 'original' ? 'letter' : 'number');
+  const yCoordinate = getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter');
+
+  return isHorizontal ? `${yCoordinate}${xCoordinate}` : `${xCoordinate}${yCoordinate}`;
+};

package/packages/scrabble-solver/src/lib/getNextSort.ts

@@ -0,0 +1,12 @@
+import { type Sort, SortDirection } from '@/types';
+
+export const getNextSort = <Id extends string>(sort: Sort<Id>, column: Id): Sort<Id> => {
+  return {
+    column,
+    direction: sort.column === column ? toggleDirection(sort.direction) : sort.direction,
+  };
+};
+
+const toggleDirection = (direction: SortDirection): SortDirection => {
+  return direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;
+};

package/packages/scrabble-solver/src/lib/waitForIdleOrFirstIntent.ts

@@ -1,21 +1,32 @@
 export function waitForIdleOrFirstIntent(): Promise<void> {
   return new Promise((resolve) => {
-    const settle = () => {
-      window.removeEventListener('pointerdown', settle);
-      window.removeEventListener('keydown', settle);
-      resolve();
-    };
-
-    window.addEventListener('pointerdown', settle, { once: true });
-    window.addEventListener('keydown', settle, { once: true });
+    const settle = onFirstIntent(resolve);
     whenIdle(settle);
   });
 }
 
+export function waitForFirstIntent(): Promise<void> {
+  return new Promise((resolve) => {
+    onFirstIntent(resolve);
+  });
+}
+
 export function waitForIdle(): Promise<void> {
   return new Promise((resolve) => whenIdle(resolve));
 }
 
+function onFirstIntent(callback: () => void): () => void {
+  const settle = () => {
+    window.removeEventListener('pointerdown', settle);
+    window.removeEventListener('keydown', settle);
+    callback();
+  };
+
+  window.addEventListener('pointerdown', settle, { once: true });
+  window.addEventListener('keydown', settle, { once: true });
+  return settle;
+}
+
 function whenIdle(callback: () => void): void {
   const requestIdle = () => {
     if ('requestIdleCallback' in window) {

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -2,6 +2,7 @@ import { type FunctionComponent, memo } from 'react';
 
 import { Badge } from '@/components/Badge';
 import { Modal } from '@/components/Modal';
+import { useMediaQuery } from '@/hooks/useMediaQuery';
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
@@ -17,6 +18,7 @@ interface Props {
 
 const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const coversViewport = useMediaQuery('<s');
   const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
   const { direction } = LOCALE_FEATURES[locale];
@@ -44,7 +46,7 @@ const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen,
               {tiles.map((tile) => {
                 return (
                   <div className={styles.character} key={tile.character}>
-                    <Character tile={tile} />
+                    <Character canHighlight={!coversViewport} tile={tile} />
                   </div>
                 );
               })}

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -18,10 +18,11 @@ import { type RemainingTile } from '@/types';
 import styles from './Character.module.scss';
 
 interface Props {
+  canHighlight: boolean;
   tile: RemainingTile;
 }
 
-export const Character: FunctionComponent<Props> = ({ tile }) => {
+export const Character: FunctionComponent<Props> = ({ canHighlight, tile }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
   const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
@@ -37,14 +38,12 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
   const current = direction === 'ltr' ? remainingCount : count;
   const total = direction === 'ltr' ? count : remainingCount;
   const isUsed = usedCount > 0;
-  const isHovered = isUsed && hoveredCharacter === character;
+  const isHighlightable = canHighlight && isUsed;
+  const isHighlighted = isHighlightable && hoveredCharacter === character;
 
   const handleMouseEnter = useCallback(() => {
-    if (!isUsed) {
-      return;
-    }
     dispatch(hoveredTileSlice.actions.set(character));
-  }, [character, dispatch, isUsed]);
+  }, [character, dispatch]);
 
   const handleMouseLeave = useCallback(() => {
     dispatch(hoveredTileSlice.actions.clear());
@@ -64,15 +63,15 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
         [styles.unused]: !isUsed,
       })}
       data-testid={character === BLANK ? 'remaining-tile-blank' : `remaining-tile-${character}`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
+      onMouseEnter={isHighlightable ? handleMouseEnter : undefined}
+      onMouseLeave={isHighlightable ? handleMouseLeave : undefined}
     >
       <Tile
         aria-label={character}
         character={character}
         className={styles.tile}
         disabled
-        highlighted={isHovered}
+        highlighted={isHighlighted}
         isBlank={character === BLANK}
         isValid={remainingCount >= 0}
         locale={locale}

package/packages/scrabble-solver/src/modals/ResultsModal/ResultsModal.tsx

@@ -6,10 +6,17 @@ import { Button } from '@/components/Button';
 import { Dictionary } from '@/components/Dictionary';
 import { Modal } from '@/components/Modal';
 import { Results } from '@/components/Results';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
 import Check from '@/icons/Check.svg';
 import EyeFill from '@/icons/EyeFill.svg';
-import { resultsSlice, selectProcessedResults, selectResultCandidate, useTranslate, useTypedSelector } from '@/state';
+import {
+  resultsSlice,
+  selectResultCandidate,
+  selectResultCandidateIndex,
+  useTranslate,
+  useTypedSelector,
+} from '@/state';
 
 import styles from './ResultsModal.module.scss';
 
@@ -22,25 +29,22 @@ interface Props {
 const ResultsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const showResultsInModal = useMediaQuery('<l');
-  const results = useTypedSelector(selectProcessedResults);
+  const showResultsInModal = useIsCompactLayout();
+  const previewsOnRepeatedClick = useIsTouchDevice();
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
-  const highlightedIndex = index === -1 ? undefined : index;
+  const highlightedIndex = useTypedSelector(selectResultCandidateIndex);
 
   const callbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        const isSelected = result === resultCandidate;
-
-        if (isSelected) {
+        if (previewsOnRepeatedClick && result === resultCandidate) {
           onClose();
         } else {
           dispatch(resultsSlice.actions.changeResultCandidate(result));
         }
       },
     }),
-    [dispatch, onClose, resultCandidate],
+    [dispatch, onClose, previewsOnRepeatedClick, resultCandidate],
   );
 
   const handleInsert = () => {

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.module.scss

@@ -1,35 +1,24 @@
-.title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
+@use 'styles/mixins' as *;
 
-.badge {
-  margin-inline-start: var(--spacing--m);
-}
-
-.word {
+.content {
+  position: relative;
   display: flex;
-  align-items: center;
-
-  & + & {
-    margin-top: var(--spacing--s);
-  }
-}
-
-.invalid {
-  color: var(--color--error);
+  flex-direction: column;
+  height: 100%;
+  gap: var(--spacing--l);
 }
 
-.valid {
-  color: var(--color--success);
+.words {
+  flex: 1 1 auto;
 }
 
-.icon {
-  $size: 24px;
+.dictionary {
+  flex: 0 0 var(--dictionary--height--mobile);
+  background-color: var(--color--background--element);
+  border: var(--border);
+  border-radius: var(--border--radius);
 
-  width: $size;
-  height: $size;
-  margin-inline-end: var(--spacing--s);
+  @include media('desktop') {
+    display: none;
+  }
 }

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.module.scss.d.ts

@@ -1,11 +1,8 @@
 // Generated by scripts/generate-scss-types.ts - do not edit.
 declare const styles: {
-  readonly badge: string;
-  readonly icon: string;
-  readonly invalid: string;
-  readonly title: string;
-  readonly valid: string;
-  readonly word: string;
+  readonly content: string;
+  readonly dictionary: string;
+  readonly words: string;
 };
 
 export default styles;

package/packages/scrabble-solver/src/modals/WordsModal/WordsModal.tsx

@@ -1,59 +1,73 @@
-import classNames from 'classnames';
-import { type FunctionComponent, memo } from 'react';
+import { type FunctionComponent, memo, useCallback, useEffect, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 
-import { Badge } from '@/components/Badge';
+import { Button } from '@/components/Button';
+import { Dictionary } from '@/components/Dictionary';
 import { Modal } from '@/components/Modal';
-import Check from '@/icons/Check.svg';
-import Cross from '@/icons/Cross.svg';
-import { selectInvalidWords, selectLocale, selectValidWords, useTranslate, useTypedSelector } from '@/state';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
+import EyeFill from '@/icons/EyeFill.svg';
+import { hoveredWordSlice, selectHoveredWord, useTranslate, useTypedSelector } from '@/state';
 
+import { WordsTable } from './components';
 import styles from './WordsModal.module.scss';
 
 interface Props {
   className?: string;
   isOpen: boolean;
   onClose: () => void;
+  onPreview: () => void;
 }
 
-const WordsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+const WordsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose, onPreview }) => {
+  const dispatch = useDispatch();
   const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const invalidWords = useTypedSelector(selectInvalidWords);
-  const validWords = useTypedSelector(selectValidWords);
+  const hoveredWord = useTypedSelector(selectHoveredWord);
+  const showsPreviewButton = useIsCompactLayout();
+  const keepsHighlightOnClose = useRef(false);
+
+  const handlePreview = useCallback(() => {
+    keepsHighlightOnClose.current = true;
+    onPreview();
+  }, [onPreview]);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    return () => {
+      if (!keepsHighlightOnClose.current) {
+        dispatch(hoveredWordSlice.actions.clear());
+      }
+
+      keepsHighlightOnClose.current = false;
+    };
+  }, [dispatch, isOpen]);
 
   return (
-    <Modal className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
-      <Modal.Section
-        label={translate('words.invalid')}
-        title={
-          <span className={styles.title}>
-            <span>{translate('words.invalid')}</span>
-            <Badge className={styles.badge}>{invalidWords.length.toLocaleString(locale)}</Badge>
-          </span>
-        }
-      >
-        {invalidWords.map((word, index) => (
-          <div className={styles.word} key={index}>
-            <Cross aria-hidden="true" className={classNames(styles.icon, styles.invalid)} role="img" /> {word}
-          </div>
-        ))}
-      </Modal.Section>
-
-      <Modal.Section
-        label={translate('words.valid')}
-        title={
-          <span className={styles.title}>
-            <span>{translate('words.valid')}</span>
-            <Badge className={styles.badge}>{validWords.length.toLocaleString(locale)}</Badge>
-          </span>
-        }
-      >
-        {validWords.map((word, index) => (
-          <div className={styles.word} key={index}>
-            <Check aria-hidden="true" className={classNames(styles.icon, styles.valid)} role="img" /> {word}
-          </div>
-        ))}
-      </Modal.Section>
+    <Modal
+      className={className}
+      footer={
+        showsPreviewButton && (
+          <Button
+            aria-label={translate('words.preview')}
+            disabled={!hoveredWord}
+            Icon={EyeFill}
+            tooltip={translate('words.preview')}
+            onClick={handlePreview}
+          >
+            {translate('words.preview')}
+          </Button>
+        )
+      }
+      isOpen={isOpen}
+      title={translate('words')}
+      onClose={onClose}
+    >
+      <div className={styles.content}>
+        <WordsTable className={styles.words} isOpen={isOpen} onPreview={handlePreview} />
+        <Dictionary className={styles.dictionary} />
+      </div>
     </Modal>
   );
 };

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/WordRow.tsx

@@ -0,0 +1,92 @@
+import classNames from 'classnames';
+import { type ReactElement } from 'react';
+import Highlighter from 'react-highlight-words';
+import { useDispatch } from 'react-redux';
+import { type RowComponentProps } from 'react-window';
+
+import { Cell, Row } from '@/components/Table';
+import Check from '@/icons/Check.svg';
+import Cross from '@/icons/Cross.svg';
+import {
+  hoveredWordSlice,
+  selectIsWordMatching,
+  selectWordCoordinates,
+  selectWordsQuery,
+  useTranslate,
+  useTypedSelector,
+} from '@/state';
+import { type VerifiedWord } from '@/types';
+
+import styles from './WordsTable.module.scss';
+
+export interface WordRowData {
+  highlightFollowsPointer: boolean;
+  highlightedIndex: number;
+  isTouchDevice: boolean;
+  words: VerifiedWord[];
+  onPreview: () => void;
+}
+
+export const WordRow = ({
+  highlightFollowsPointer,
+  highlightedIndex,
+  index,
+  isTouchDevice,
+  style,
+  words,
+  onPreview,
+}: RowComponentProps<WordRowData>): ReactElement => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const isSelected = index === highlightedIndex;
+  const word = words[index];
+  const coordinates = useTypedSelector((state) => selectWordCoordinates(state, index));
+  const isMatching = useTypedSelector((state) => selectIsWordMatching(state, index));
+  const query = useTypedSelector(selectWordsQuery);
+  const validityLabel = translate(word.isValid ? 'words.valid' : 'words.invalid');
+  const Icon = word.isValid ? Check : Cross;
+
+  const handleSet = () => {
+    dispatch(hoveredWordSlice.actions.set(word));
+  };
+
+  const handleClear = () => {
+    dispatch(hoveredWordSlice.actions.clear());
+  };
+
+  const handleClick = () => {
+    if (!isSelected) {
+      handleSet();
+    } else if (isTouchDevice) {
+      onPreview();
+    }
+  };
+
+  return (
+    <Row
+      aria-label={word.word}
+      data-testid={`word-${word.x}-${word.y}-${word.direction}`}
+      highlighted={isSelected}
+      inactive={!isMatching}
+      style={style}
+      onBlur={highlightFollowsPointer ? handleClear : undefined}
+      onClick={highlightFollowsPointer ? undefined : handleClick}
+      onFocus={highlightFollowsPointer ? handleSet : undefined}
+      onMouseEnter={highlightFollowsPointer ? handleSet : undefined}
+    >
+      <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
+
+      <Cell primary translationKey="common.word" value={word.word}>
+        <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={word.word} />
+      </Cell>
+
+      <Cell className={styles.stat} value={validityLabel}>
+        <Icon
+          aria-label={validityLabel}
+          className={classNames(styles.icon, word.isValid ? styles.valid : styles.invalid)}
+          role="img"
+        />
+      </Cell>
+    </Row>
+  );
+};

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/WordsTable.module.scss

@@ -0,0 +1,69 @@
+@use 'styles/mixins' as *;
+
+.words {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--color--background--element);
+  border: var(--border);
+  border-radius: var(--border--radius);
+}
+
+.content {
+  flex: 1;
+  position: relative;
+  height: 100%;
+}
+
+.listContainer {
+  position: absolute;
+  inset: 0;
+}
+
+.list {
+  @include scrollbars;
+}
+
+.stat {
+  $width: 55px;
+
+  flex: 0 0 $width;
+  max-width: $width;
+  justify-content: center;
+}
+
+.coordinates {
+  $width: 55px;
+
+  flex: 0 0 $width;
+  max-width: $width;
+}
+
+.invalid {
+  color: var(--color--error);
+}
+
+.valid {
+  color: var(--color--success);
+}
+
+.icon {
+  $size: 24px;
+
+  display: block;
+  width: $size;
+  height: $size;
+}
+
+.input {
+  border-top: var(--border);
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
+}
+
+.highlight {
+  background-color: var(--color--mark);
+  color: var(--color--foreground);
+  border-radius: var(--border--radius);
+}

package/packages/scrabble-solver/src/modals/WordsModal/components/WordsTable/WordsTable.module.scss.d.ts

@@ -0,0 +1,16 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly coordinates: string;
+  readonly highlight: string;
+  readonly icon: string;
+  readonly input: string;
+  readonly invalid: string;
+  readonly list: string;
+  readonly listContainer: string;
+  readonly stat: string;
+  readonly valid: string;
+  readonly words: string;
+};
+
+export default styles;