@scrabble-solver/scrabble-solver 2.18.1 → 2.18.3

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

package/src/modals/WordsModal/components/WordsTable/WordsTable.tsx

@@ -0,0 +1,137 @@
+import { isSameBoardWord } from '@scrabble-solver/types';
+import classNames from 'classnames';
+import { type FunctionComponent, useCallback, useEffect, useMemo } from 'react';
+import { useDispatch } from 'react-redux';
+import { List } from 'react-window';
+
+import { EmptyState } from '@/components/EmptyState';
+import { Header, HeaderButton, Search } from '@/components/Table';
+import { useIsCompactLayout } from '@/hooks/useIsCompactLayout';
+import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import GeoAlt from '@/icons/GeoAlt.svg';
+import QuestionSquare from '@/icons/QuestionSquare.svg';
+import { RESULTS_ITEM_HEIGHT, RESULTS_OVERSCAN_COUNT } from '@/parameters';
+import {
+  hoveredWordSlice,
+  selectHoveredWord,
+  selectLocale,
+  selectProcessedWords,
+  selectWordsQuery,
+  selectWordsSort,
+  useTranslate,
+  useTypedSelector,
+  verifySlice,
+} from '@/state';
+import { WordColumnId } from '@/types';
+
+import { WordRow, type WordRowData } from './WordRow';
+import styles from './WordsTable.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onPreview: () => void;
+}
+
+export const WordsTable: FunctionComponent<Props> = ({ className, isOpen, onPreview }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
+  const isCompactLayout = useIsCompactLayout();
+  const highlightFollowsPointer = !isTouchDevice && !isCompactLayout;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const words = useTypedSelector(selectProcessedWords);
+  const query = useTypedSelector(selectWordsQuery);
+  const sort = useTypedSelector(selectWordsSort);
+  const hoveredWord = useTypedSelector(selectHoveredWord);
+  const highlightedIndex = hoveredWord ? words.findIndex((word) => isSameBoardWord(word, hoveredWord)) : -1;
+  const rowProps = useMemo<WordRowData>(
+    () => ({ highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview }),
+    [highlightFollowsPointer, highlightedIndex, isTouchDevice, words, onPreview],
+  );
+
+  const handleSort = useCallback(
+    (columnId: WordColumnId) => {
+      dispatch(verifySlice.actions.sort(columnId));
+    },
+    [dispatch],
+  );
+
+  const handleQueryChange = useCallback(
+    (newQuery: string) => {
+      dispatch(verifySlice.actions.changeQuery(newQuery));
+    },
+    [dispatch],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    dispatch(hoveredWordSlice.actions.clear());
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (isOpen && isCompactLayout && words.length > 0 && highlightedIndex === -1) {
+      dispatch(hoveredWordSlice.actions.set(words[0]));
+    }
+  }, [dispatch, highlightedIndex, isOpen, isCompactLayout, words]);
+
+  return (
+    <div
+      aria-label={translate('words')}
+      className={classNames(styles.words, className)}
+      data-testid="words"
+      role="region"
+    >
+      <Header>
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={WordColumnId.Coordinates}
+          sort={sort}
+          translationKey="settings.showCoordinates"
+          onSort={handleSort}
+        />
+
+        <HeaderButton id={WordColumnId.Word} primary sort={sort} translationKey="common.word" onSort={handleSort} />
+
+        <HeaderButton
+          className={styles.stat}
+          Icon={QuestionSquare}
+          id={WordColumnId.Validity}
+          sort={sort}
+          translationKey="words.validity"
+          onSort={handleSort}
+        />
+      </Header>
+
+      <div aria-live="polite" className={styles.content}>
+        {words.length === 0 && <EmptyState variant="info">{translate('words.empty-state.no-words')}</EmptyState>}
+
+        {words.length > 0 && (
+          <div className={styles.listContainer}>
+            <List
+              className={styles.list}
+              dir={direction}
+              overscanCount={RESULTS_OVERSCAN_COUNT}
+              rowComponent={WordRow}
+              rowCount={words.length}
+              rowHeight={RESULTS_ITEM_HEIGHT}
+              rowProps={rowProps}
+              onMouseLeave={highlightFollowsPointer ? handleMouseLeave : undefined}
+            />
+          </div>
+        )}
+      </div>
+
+      {words.length > 0 && (
+        <Search
+          className={styles.input}
+          placeholder={translate('words.input.placeholder')}
+          value={query}
+          onChange={handleQueryChange}
+        />
+      )}
+    </div>
+  );
+};

package/src/modals/WordsModal/components/WordsTable/index.ts

@@ -0,0 +1 @@
+export { WordsTable } from './WordsTable';

package/src/modals/WordsModal/components/index.ts

@@ -0,0 +1 @@
+export { WordsTable } from './WordsTable';

package/src/pages/api/verify.ts

@@ -5,6 +5,7 @@ import { Board, type Config, type Game, type Locale, isBoardJson, isGame, isLoca
 import { type NextApiRequest, type NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid } from '@/api';
+import { type VerifiedWord } from '@/types';
 
 interface RequestData {
   board: Board;
@@ -31,15 +32,15 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
     });
 
     const gaddag = await dictionaries.get(locale);
-    const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-    const invalidWords: string[] = [];
-    const validWords: string[] = [];
+    const words = board.getWords().sort((a, b) => a.word.localeCompare(b.word, locale));
+    const invalidWords: VerifiedWord[] = [];
+    const validWords: VerifiedWord[] = [];
 
     for (const word of words) {
-      if (gaddag.has(word)) {
-        validWords.push(word);
+      if (gaddag.has(word.word)) {
+        validWords.push({ ...word, isValid: true });
       } else {
-        invalidWords.push(word);
+        invalidWords.push({ ...word, isValid: false });
       }
     }