@scrabble-solver/scrabble-solver 2.18.1 → 2.18.2

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;