@scrabble-solver/scrabble-solver 2.18.0 → 2.18.2

package/src/state/results/selectors.ts

@@ -16,7 +16,7 @@ export const selectResultCandidate = createSelector([selectResults], (results) =
 
 export const selectResultsQuery = createSelector([selectResults], (results) => results.query);
 
-const selectResultsResults = createSelector([selectResults], (results) => results.results);
+export const selectResultsResults = createSelector([selectResults], (results) => results.results);
 
 export const selectResultsSort = createSelector([selectResults], (results) => results.sort);
 
@@ -44,6 +44,14 @@ export const selectProcessedResults = createSelector([selectGroupedSortedResults
   return results ? [...results.matching, ...results.other] : undefined;
 });
 
+export const selectResultCandidateIndex = createSelector(
+  [selectProcessedResults, selectResultCandidate],
+  (results, candidate) => {
+    const index = results && candidate ? results.findIndex((result) => result.id === candidate.id) : -1;
+    return index === -1 ? undefined : index;
+  },
+);
+
 export const selectIsResultMatching = createSelector(
   [selectProcessedResults, selectResultsQuery, selectCellFilters, selectResultIndex],
   (results, query, cellFilters, index) => {

package/src/state/results/slice.ts

@@ -1,14 +1,11 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Result } from '@scrabble-solver/types';
 
-import { type ResultColumnId, SortDirection } from '@/types';
+import { getNextSort } from '@/lib/getNextSort';
+import { type ResultColumnId } from '@/types';
 
 import { resultsInitialState } from './initialState';
 
-const toggleDirection = (direction: SortDirection): SortDirection => {
-  return direction === SortDirection.Ascending ? SortDirection.Descending : SortDirection.Ascending;
-};
-
 export const resultsSlice = createSlice({
   initialState: resultsInitialState,
   name: 'results',
@@ -24,7 +21,7 @@ export const resultsSlice = createSlice({
 
     changeResultCandidate: (state, action: PayloadAction<Result | null>) => {
       const candidate = action.payload;
-      return { ...state, candidate };
+      return candidate === state.candidate ? state : { ...state, candidate };
     },
 
     changeResults: (state, action: PayloadAction<Result[]>) => {
@@ -38,16 +35,7 @@ export const resultsSlice = createSlice({
     },
 
     sort: (state, action: PayloadAction<ResultColumnId>) => {
-      const columndId = action.payload;
-      const { column, direction } = state.sort;
-
-      return {
-        ...state,
-        sort: {
-          column: columndId,
-          direction: column === columndId ? toggleDirection(direction) : direction,
-        },
-      };
+      return { ...state, sort: getNextSort(state.sort, action.payload) };
     },
 
     reset: () => resultsInitialState,

package/src/state/sagas.ts

@@ -11,15 +11,17 @@ import { call, delay, put, select, spawn, takeEvery, takeLatest } from 'redux-sa
 import { LOCALE_FEATURES } from '@/i18n/constants';
 import { loadTranslations } from '@/i18n/i18n';
 import { memoize } from '@/lib/memoize';
-import { waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
+import { waitForFirstIntent, waitForIdleOrFirstIntent } from '@/lib/waitForIdleOrFirstIntent';
 import { findWordDefinitions, solve, verify, visit } from '@/sdk';
 import { prefetchDictionary } from '@/solver-worker';
+import { type VerifiedWord } from '@/types';
 
 import { initialize, reset } from './actions';
 import { appSlice, selectVersion } from './app';
 import { boardSlice, selectBoard } from './board';
 import { cellFiltersSlice, selectCellFilter } from './cellFilters';
 import { dictionarySlice, selectDictionary } from './dictionary';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice, selectLoadedTranslations } from './i18n';
 import { localStorage } from './localStorage';
 import { rackSlice, selectCharacters, selectRack } from './rack';
@@ -51,6 +53,7 @@ export function* rootSaga(): AnyGenerator {
   yield takeEvery([rackSlice.actions.changeCharacter.type, rackSlice.actions.changeCharacters.type], onRackValueChange);
   yield takeEvery(resultsSlice.actions.applyResult.type, onApplyResult);
   yield takeLatest(resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
+  yield takeLatest([hoveredWordSlice.actions.set.type, hoveredWordSlice.actions.clear.type], onHoveredWordChange);
   yield takeEvery(settingsSlice.actions.changeGame.type, onGameChange);
   yield takeEvery(settingsSlice.actions.changeLocale.type, onLocaleChange);
   yield takeLatest(dictionarySlice.actions.submit.type, onDictionarySubmit);
@@ -68,6 +71,7 @@ function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: numbe
   }
 
   yield put(resultsSlice.actions.changeResultCandidate(null));
+  yield put(hoveredWordSlice.actions.clear());
   yield put(verifySlice.actions.submit());
 }
 
@@ -99,6 +103,7 @@ function* onGameChange(): AnyGenerator {
   }
 
   yield put(resultsSlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield* resetRack();
   yield put(verifySlice.actions.submit());
 }
@@ -139,7 +144,7 @@ function* onInitialize({ payload }: PayloadAction<{ version: string }>): AnyGene
   const board = yield select(selectBoard);
   const locale = yield select(selectLocale);
 
-  yield spawn(prefetchDictionaryWhenIdle);
+  yield spawn(prefetchDictionaryOnFirstIntent);
   yield spawn(loadLocaleTranslations, locale);
   yield spawn(preloadTranslationsWhenIdle);
   yield spawn(visitWhenIdle);
@@ -202,8 +207,8 @@ function* visitWhenIdle(): AnyGenerator {
   yield call(visit);
 }
 
-function* prefetchDictionaryWhenIdle(): AnyGenerator {
-  yield call(waitForIdleOrFirstIntent);
+function* prefetchDictionaryOnFirstIntent(): AnyGenerator {
+  yield call(waitForFirstIntent);
   const locale = yield select(selectLocale);
   yield call(prefetchDictionary, locale);
 }
@@ -250,6 +255,7 @@ function* onReset(): AnyGenerator {
   yield put(boardSlice.actions.init(Board.create(config.boardWidth, config.boardHeight)));
   yield put(cellFiltersSlice.actions.reset());
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
   yield put(solveSlice.actions.reset());
@@ -280,6 +286,7 @@ function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerat
   }
 
   yield put(dictionarySlice.actions.reset());
+  yield put(hoveredWordSlice.actions.clear());
   yield put(resultsSlice.actions.changeResultCandidate(null));
   yield put(verifySlice.actions.submit());
 }
@@ -289,8 +296,26 @@ function* onResultCandidateChange({ payload: result }: PayloadAction<Result | nu
     return;
   }
 
+  yield put(hoveredWordSlice.actions.clear());
+  yield* searchDictionary(result.words);
+}
+
+function* onHoveredWordChange({ payload: word }: PayloadAction<VerifiedWord | undefined>): AnyGenerator {
+  if (!word) {
+    return;
+  }
+
+  yield put(resultsSlice.actions.changeResultCandidate(null));
+
+  const board: Board = yield select(selectBoard);
+  const collidingWords = board.getCollidingWords(word);
+
+  yield* searchDictionary([word.word, ...collidingWords.map((collidingWord) => collidingWord.word)]);
+}
+
+function* searchDictionary(words: string[]): AnyGenerator {
   const locale: Locale = yield select(selectLocale);
-  const uniqueWords = Array.from(new Set(result.words));
+  const uniqueWords = Array.from(new Set(words));
   const input = uniqueWords.join(LOCALE_FEATURES[locale].separator);
 
   if (!memoizedFindWordDefinitions.hasCache(locale, input)) {

package/src/state/selectors.ts

@@ -3,10 +3,13 @@ import { createSelector } from '@reduxjs/toolkit';
 import { unorderedArraysEqual } from '@/lib/unorderedArraysEqual';
 
 import { selectBoard } from './board';
+import { selectHoveredWord } from './hoveredWord';
 import { getRemainingTiles } from './lib';
 import { selectCharacters } from './rack';
+import { selectResultsResults } from './results';
 import { selectConfig, selectLocale } from './settings';
-import { selectLastSolvedParameters } from './solve';
+import { selectLastSolvedParameters, selectSolveError } from './solve';
+import { selectLastVerifiedBoard } from './verify';
 
 const selectHasBoardChanged = createSelector(
   [selectLastSolvedParameters, selectBoard],
@@ -29,6 +32,20 @@ export const selectAreResultsOutdated = createSelector(
   },
 );
 
+export const selectUpToDateResults = createSelector(
+  [selectResultsResults, selectAreResultsOutdated, selectSolveError],
+  (results, areResultsOutdated, solveError) => {
+    return results && !areResultsOutdated && !solveError ? results : null;
+  },
+);
+
+export const selectUpToDateHoveredWord = createSelector(
+  [selectHoveredWord, selectLastVerifiedBoard, selectBoard],
+  (hoveredWord, lastVerifiedBoard, board) => {
+    return hoveredWord && lastVerifiedBoard.equals(board) ? hoveredWord : null;
+  },
+);
+
 export const selectRemainingTiles = createSelector(
   [selectConfig, selectBoard, selectCharacters, selectLocale],
   getRemainingTiles,

package/src/state/store.ts

@@ -6,6 +6,7 @@ import { boardSlice } from './board';
 import { cellFiltersSlice } from './cellFilters';
 import { dictionarySlice } from './dictionary';
 import { hoveredTileSlice } from './hoveredTile';
+import { hoveredWordSlice } from './hoveredWord';
 import { i18nSlice } from './i18n';
 import { rackSlice } from './rack';
 import { resultsSlice } from './results';
@@ -23,6 +24,7 @@ export const store = configureStore({
     cellFilters: cellFiltersSlice.reducer,
     dictionary: dictionarySlice.reducer,
     hoveredTile: hoveredTileSlice.reducer,
+    hoveredWord: hoveredWordSlice.reducer,
     i18n: i18nSlice.reducer,
     rack: rackSlice.reducer,
     results: resultsSlice.reducer,

package/src/state/types.ts

@@ -3,6 +3,7 @@ import type { BoardState } from './board';
 import type { CellFiltersState } from './cellFilters';
 import type { DictionaryState } from './dictionary';
 import type { HoveredTileState } from './hoveredTile';
+import type { HoveredWordState } from './hoveredWord';
 import type { I18nState } from './i18n';
 import type { RackState } from './rack';
 import type { ResultsState } from './results';
@@ -16,6 +17,7 @@ export type RootState = {
   cellFilters: CellFiltersState;
   dictionary: DictionaryState;
   hoveredTile: HoveredTileState;
+  hoveredWord: HoveredWordState;
   i18n: I18nState;
   rack: RackState;
   results: ResultsState;

package/src/state/verify/initialState.ts

@@ -1,3 +1,5 @@
+import { SortDirection, WordColumnId } from '@/types';
+
 import { boardInitialState } from '../board';
 
 import type { VerifyState } from './types';
@@ -8,5 +10,10 @@ export const verifyInitialState: VerifyState = {
     board: boardInitialState,
   },
   invalidWords: [],
+  query: '',
+  sort: {
+    column: WordColumnId.Word,
+    direction: SortDirection.Ascending,
+  },
   validWords: [],
 };

package/src/state/verify/lib.test.ts

@@ -0,0 +1,55 @@
+import { SortDirection, type VerifiedWord, WordColumnId } from '../../types';
+
+import { getWordCoordinates, sortWords } from './lib';
+
+describe('getWordCoordinates', () => {
+  it('locates a horizontal word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ x: 3, y: 3 }), 'original')).toBe('4D');
+  });
+
+  it('locates a vertical word by its start cell', () => {
+    expect(getWordCoordinates(createWord({ direction: 'vertical', x: 3, y: 3 }), 'original')).toBe('D4');
+  });
+});
+
+describe('sortWords', () => {
+  const cat = createWord({ word: 'cat', x: 3, y: 3 });
+  const zvq = createWord({ isValid: false, word: 'zvq', x: 3, y: 5 });
+
+  it('sorts by word', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts by coordinates', () => {
+    const sort = { column: WordColumnId.Coordinates, direction: SortDirection.Ascending };
+
+    expect(sortWords([zvq, cat], sort, 'en-US', 'original')).toEqual([cat, zvq]);
+  });
+
+  it('sorts invalid words first by validity', () => {
+    const sort = { column: WordColumnId.Validity, direction: SortDirection.Ascending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('reverses the order when sorting descending', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Descending };
+
+    expect(sortWords([cat, zvq], sort, 'en-US', 'original')).toEqual([zvq, cat]);
+  });
+
+  it('does not modify the input', () => {
+    const sort = { column: WordColumnId.Word, direction: SortDirection.Ascending };
+    const words = [zvq, cat];
+
+    sortWords(words, sort, 'en-US', 'original');
+
+    expect(words).toEqual([zvq, cat]);
+  });
+});
+
+function createWord(overrides: Partial<VerifiedWord>): VerifiedWord {
+  return { direction: 'horizontal', isValid: true, word: 'cat', x: 0, y: 0, ...overrides };
+}

package/src/state/verify/lib.ts

@@ -0,0 +1,49 @@
+import { type BoardWord, type ShowCoordinates } from '@scrabble-solver/types';
+
+import { createCoordinatesComparator } from '@/lib/createCoordinatesComparator';
+import { createKeyComparator } from '@/lib/createKeyComparator';
+import { createRegExp } from '@/lib/createRegExp';
+import { createSortComparator } from '@/lib/createSortComparator';
+import { getCoordinates } from '@/lib/getCoordinates';
+import { numberComparator } from '@/lib/numberComparator';
+import { type ComparatorFactory, type GroupedWords, type Sort, type VerifiedWord, WordColumnId } from '@/types';
+
+export const getWordCoordinates = (word: BoardWord, showCoordinates: ShowCoordinates): string => {
+  return getCoordinates({ isHorizontal: word.direction === 'horizontal', x: word.x, y: word.y }, showCoordinates);
+};
+
+export const groupWords = (words: VerifiedWord[], query: string): GroupedWords => {
+  const regExp = createRegExp(query);
+
+  return words.reduce<GroupedWords>(
+    (groupedWords, word) => {
+      if (word.word.match(regExp)) {
+        groupedWords.matching.push(word);
+      } else {
+        groupedWords.other.push(word);
+      }
+
+      return groupedWords;
+    },
+    { matching: [], other: [] },
+  );
+};
+
+const comparators: Record<WordColumnId, ComparatorFactory<VerifiedWord>> = {
+  [WordColumnId.Coordinates]: (locale: string, showCoordinates: ShowCoordinates) => {
+    return createCoordinatesComparator({ getItemCoordinates: getWordCoordinates, locale, showCoordinates });
+  },
+  [WordColumnId.Validity]: () => (a, b) => {
+    return numberComparator(Number(a.isValid), Number(b.isValid));
+  },
+  [WordColumnId.Word]: (locale: string) => createKeyComparator('word', locale),
+};
+
+export const sortWords = (
+  words: VerifiedWord[],
+  sort: Sort<WordColumnId>,
+  locale: string,
+  showCoordinates: ShowCoordinates,
+): VerifiedWord[] => {
+  return [...words].sort(createSortComparator({ comparators, locale, showCoordinates, sort }));
+};

package/src/state/verify/selectors.ts

@@ -1,9 +1,46 @@
 import { createSelector } from '@reduxjs/toolkit';
 
+import { createRegExp } from '@/lib/createRegExp';
+
+import { selectLocale, selectShowCoordinates } from '../settings';
 import type { RootState } from '../types';
 
+import { getWordCoordinates, groupWords, sortWords } from './lib';
+
+const selectWordIndex = (_: unknown, index: number): number => index;
+
 export const selectVerify = (state: RootState) => state.verify;
 
+export const selectLastVerifiedBoard = createSelector([selectVerify], (verify) => verify.lastSolvedParameters.board);
+
 export const selectInvalidWords = createSelector([selectVerify], (verify) => verify.invalidWords);
 
 export const selectValidWords = createSelector([selectVerify], (verify) => verify.validWords);
+
+export const selectWordsQuery = createSelector([selectVerify], (verify) => verify.query);
+
+export const selectWordsSort = createSelector([selectVerify], (verify) => verify.sort);
+
+export const selectCreatedWords = createSelector([selectInvalidWords, selectValidWords], (invalidWords, validWords) => {
+  return [...invalidWords, ...validWords];
+});
+
+const selectSortedWords = createSelector(
+  [selectCreatedWords, selectWordsSort, selectLocale, selectShowCoordinates],
+  sortWords,
+);
+
+export const selectProcessedWords = createSelector([selectSortedWords, selectWordsQuery], (words, query) => {
+  const { matching, other } = groupWords(words, query);
+  return [...matching, ...other];
+});
+
+export const selectIsWordMatching = createSelector(
+  [selectProcessedWords, selectWordsQuery, selectWordIndex],
+  (words, query, index) => createRegExp(query).test(words[index].word),
+);
+
+export const selectWordCoordinates = createSelector(
+  [selectProcessedWords, selectShowCoordinates, selectWordIndex],
+  (words, showCoordinates, index) => getWordCoordinates(words[index], showCoordinates),
+);

package/src/state/verify/slice.ts

@@ -1,12 +1,15 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import { type Board } from '@scrabble-solver/types';
 
+import { getNextSort } from '@/lib/getNextSort';
+import { type VerifiedWord, type WordColumnId } from '@/types';
+
 import { verifyInitialState } from './initialState';
 
 interface VerifyParameters {
   board: Board;
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  validWords: VerifiedWord[];
 }
 
 export const verifySlice = createSlice({
@@ -17,10 +20,18 @@ export const verifySlice = createSlice({
       return { ...state, isLoading: true };
     },
 
+    changeQuery: (state, action: PayloadAction<string>) => {
+      return { ...state, query: action.payload };
+    },
+
     submitFailure: (state) => {
       return { ...state, isLoading: false };
     },
 
+    sort: (state, action: PayloadAction<WordColumnId>) => {
+      return { ...state, sort: getNextSort(state.sort, action.payload) };
+    },
+
     submitSuccess: (state, action: PayloadAction<VerifyParameters>) => {
       const { board, invalidWords, validWords } = action.payload;
       return { ...state, isLoading: false, lastSolvedParameters: { board }, invalidWords, validWords };

package/src/state/verify/types.ts

@@ -1,3 +1,5 @@
+import type { Sort, VerifiedWord, WordColumnId } from '@/types';
+
 import type { BoardState } from '../board';
 
 export interface VerifyState {
@@ -5,6 +7,8 @@ export interface VerifyState {
   lastSolvedParameters: {
     board: BoardState;
   };
-  invalidWords: string[];
-  validWords: string[];
+  invalidWords: VerifiedWord[];
+  query: string;
+  sort: Sort<WordColumnId>;
+  validWords: VerifiedWord[];
 }

package/src/styles/_tokens.scss

@@ -10,6 +10,8 @@ $breakpoint-m: 992px;
 $breakpoint-l: 1200px;
 $breakpoint-xl: 1400px;
 
+$breakpoint-height-l: 860px;
+
 $border-color: #cdcdcd;
 $border-color-light: #d9d9d9;
 $border-radius: 5px;

package/src/styles/mixins.scss

@@ -10,6 +10,11 @@
   ),
   $media-expressions: (
     touch: '(hover: none)',
+    /**
+     * Keep in sync with useIsCompactLayout
+     */
+    compact: '(max-width: #{$breakpoint-l - 1px}), (max-height: #{$breakpoint-height-l - 1px})',
+    desktop: '(min-width: #{$breakpoint-l}) and (min-height: #{$breakpoint-height-l})',
   )
 );
 

package/src/styles/variables.module.scss

@@ -6,6 +6,7 @@
   breakpointM: strip-unit($breakpoint-m);
   breakpointL: strip-unit($breakpoint-l);
   breakpointXl: strip-unit($breakpoint-xl);
+  breakpointHeightL: strip-unit($breakpoint-height-l);
 
   borderColorLight: $border-color-light;
   borderWidth: strip-unit($border-width);

package/src/styles/variables.module.scss.d.ts

@@ -2,6 +2,7 @@
 declare const styles: {
   readonly borderColorLight: string;
   readonly borderWidth: string;
+  readonly breakpointHeightL: string;
   readonly breakpointL: string;
   readonly breakpointM: string;
   readonly breakpointS: string;

package/src/styles/variables.scss

@@ -153,7 +153,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
     --components-spacing: var(--spacing--l);
   }
 
-  @include media('<l') {
+  @include media('compact') {
     --dictionary--height: var(--dictionary--height--mobile);
     --logo--height: #{$logo-height-small};
     --solver-column-total: 0px;

package/src/types/index.ts

@@ -1,8 +1,9 @@
-import { type Result } from '@scrabble-solver/types';
-import { type FunctionComponent, type SVGAttributes } from 'react';
+import { type BoardWord, type Result, type ShowCoordinates } from '@scrabble-solver/types';
 
 export type Comparator<T> = (a: T, B: T) => number;
 
+export type ComparatorFactory<T> = (locale: string, showCoordinates: ShowCoordinates) => Comparator<T>;
+
 export type AutoGroupTiles = 'left' | 'right' | null;
 
 export type CellFilterType = 'include' | 'exclude';
@@ -26,8 +27,8 @@ export interface Point {
 
 export type Rack = (string | null)[];
 
-export interface Sort {
-  column: ResultColumnId;
+export interface Sort<Id extends string = ResultColumnId> {
+  column: Id;
   direction: SortDirection;
 }
 
@@ -61,12 +62,10 @@ export enum ResultColumnId {
   WordsCount = 'words-count',
 }
 
-export interface ResultColumn {
-  className: string;
-  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  id: ResultColumnId;
-  translationKey: TranslationKey;
-  width?: number;
+export enum WordColumnId {
+  Coordinates = 'coordinates',
+  Validity = 'validity',
+  Word = 'word',
 }
 
 export interface GroupedResults {
@@ -74,6 +73,15 @@ export interface GroupedResults {
   other: Result[];
 }
 
+export interface GroupedWords {
+  matching: VerifiedWord[];
+  other: VerifiedWord[];
+}
+
+export interface VerifiedWord extends BoardWord {
+  isValid: boolean;
+}
+
 export type TranslationKey =
   | 'cell.enter-word'
   | 'cell.filter-cell.exclude'
@@ -135,6 +143,7 @@ export type TranslationKey =
   | 'results.input.placeholder'
   | 'results.insert'
   | 'results.preview'
+  | 'results.select'
   | 'results.solve'
   | 'settings'
   | 'settings.autoGroupTiles'
@@ -154,8 +163,12 @@ export type TranslationKey =
   | 'settings.showCoordinates.alternative'
   | 'settings.showCoordinates.original'
   | 'words'
+  | 'words.empty-state.no-words'
+  | 'words.input.placeholder'
   | 'words.invalid'
-  | 'words.valid';
+  | 'words.preview'
+  | 'words.valid'
+  | 'words.validity';
 
 export type Translate = (key: TranslationKey, replacements?: Record<string, string>) => string;