@scrabble-solver/scrabble-solver 2.11.1 → 2.11.2

package/src/state/selectors.ts

@@ -1,17 +1,29 @@
+/* eslint-disable max-lines */
+
 import { createSelector } from '@reduxjs/toolkit';
 import { getLocaleConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
-import { Cell, Config, isError, Result, Tile } from '@scrabble-solver/types';
+import { Cell, Config, isError, Tile } from '@scrabble-solver/types';
 
 import i18n, { LOCALE_FEATURES } from 'i18n';
-import { findCell, getRemainingTiles, getRemainingTilesGroups, sortResults, unorderedArraysEqual } from 'lib';
-import { Translations } from 'types';
+import {
+  createRegExp,
+  findCell,
+  getRemainingTiles,
+  getRemainingTilesGroups,
+  groupResults,
+  sortResults,
+  unorderedArraysEqual,
+} from 'lib';
+import { Point, Translations } from 'types';
 
 import { RootState } from './types';
 
 const selectCell = (_: unknown, cell: Cell): Cell => cell;
 
-const selectPoint = (_: unknown, point: { x: number; y: number }): { x: number; y: number } => point;
+const selectPoint = (_: unknown, point: Point): Point => point;
+
+const selectResultIndex = (_: unknown, index: number): number => index;
 
 const selectCharacter = (_: unknown, character: string | null): string | null => character;
 
@@ -71,54 +83,42 @@ export const selectCellIsValid = createSelector([selectConfig, selectCell], (con
   return config.tiles.some((tile) => tile.character === cell.tile.character);
 });
 
-export const selectResults = createSelector([selectResultsRoot], (results) => results.results);
+export const selectResultsRaw = createSelector([selectResultsRoot], (results) => results.results);
 
 export const selectResultsQuery = createSelector([selectResultsRoot], (results) => results.query);
 
-export const selectResultsSortColumn = createSelector([selectResultsRoot], (results) => results.sort.column);
+export const selectResultsSort = createSelector([selectResultsRoot], (results) => results.sort);
 
-export const selectResultsSortDirection = createSelector([selectResultsRoot], (results) => results.sort.direction);
+export const selectSortedResults = createSelector([selectResultsRaw, selectResultsSort, selectLocale], sortResults);
 
-export const selectSortedResults = createSelector(
-  [selectResults, selectResultsSortColumn, selectResultsSortDirection, selectLocale],
-  sortResults,
+export const selectGroupedResults = createSelector(
+  [selectSortedResults, selectResultsQuery, selectCellFilter],
+  groupResults,
 );
 
-const filterResultsByQuery = (results: Result[], query: string): Result[] => {
-  if (query.trim().length === 0) {
-    return results;
-  }
-
-  let regExp: RegExp | undefined;
-
-  try {
-    regExp = new RegExp(query, 'gi');
-  } catch {
-    return results;
-  }
-
-  return results.filter((result) => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    return regExp!.test(result.word);
-  });
-};
+export const selectResults = createSelector([selectGroupedResults], (groupedResults) => {
+  return groupedResults ? [...groupedResults.matching, ...groupedResults.other] : groupedResults;
+});
 
-export const selectSortedFilteredResults = createSelector(
-  [selectSortedResults, selectResultsQuery, selectCellFilter],
-  (results, query, cellFilter) => {
+export const selectIsResultMatching = createSelector(
+  [selectResults, selectResultsQuery, selectCellFilter, selectResultIndex],
+  (results, query, cellFilter, index) => {
     if (!results) {
-      return results;
+      return false;
     }
 
-    const filteredByQuery = filterResultsByQuery(results, query);
+    const result = results[index];
+    const regExp = createRegExp(query);
 
-    if (!cellFilter) {
-      return filteredByQuery;
+    if (!regExp.test(result.word)) {
+      return false;
     }
 
-    return filteredByQuery.filter((result) => {
+    if (cellFilter) {
       return cellFilter.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
-    });
+    }
+
+    return true;
   },
 );
 

package/src/state/slices/boardInitialState.ts

@@ -3,9 +3,11 @@ import { Board } from '@scrabble-solver/types';
 
 import settingsInitialState from './settingsInitialState';
 
+export type BoardState = Board;
+
 const { configId, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
-const boardInitialState: Board = Board.create(boardWidth, boardHeight);
+const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/slices/cellFilterInitialState.ts

@@ -1,7 +1,7 @@
-import { Cell } from '@scrabble-solver/types';
+import { Point } from 'types';
 
-export type Point = Pick<Cell, 'x' | 'y'>;
+export type CellFilterState = Point[];
 
-const cellFilterInitialState: Point[] = [];
+const cellFilterInitialState: CellFilterState = [];
 
 export default cellFilterInitialState;

package/src/state/slices/cellFilterSlice.ts

@@ -1,6 +1,8 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import cellFilterInitialState, { Point } from './cellFilterInitialState';
+import { Point } from 'types';
+
+import cellFilterInitialState from './cellFilterInitialState';
 
 const cellFilterSlice = createSlice({
   initialState: cellFilterInitialState,

package/src/state/slices/dictionaryInitialState.ts

@@ -1,13 +1,13 @@
 import { WordDefinition } from '@scrabble-solver/types';
 
-interface DictionaryInitialState {
+export interface DictionaryState {
   error: unknown | undefined;
   input: string;
   isLoading: boolean;
   results: WordDefinition[];
 }
 
-const dictionaryInitialState: DictionaryInitialState = {
+const dictionaryInitialState: DictionaryState = {
   error: undefined,
   input: '',
   isLoading: false,

package/src/state/slices/rackInitialState.ts

@@ -1,3 +1,5 @@
-const rackInitialState: (string | null)[] = [null, null, null, null, null, null, null];
+export type RackState = (string | null)[];
+
+const rackInitialState: RackState = [null, null, null, null, null, null, null];
 
 export default rackInitialState;

package/src/state/slices/resultsInitialState.ts

@@ -1,11 +1,18 @@
 import { Result } from '@scrabble-solver/types';
 
-import { ResultColumn, SortDirection } from 'types';
+import { ResultColumn, Sort, SortDirection } from 'types';
 
-const resultsInitialState = {
-  candidate: null as Result | null,
+export interface ResultsState {
+  candidate: Result | null;
+  query: string;
+  results: Result[] | undefined;
+  sort: Sort;
+}
+
+const resultsInitialState: ResultsState = {
+  candidate: null,
   query: '',
-  results: undefined as Result[] | undefined,
+  results: undefined,
   sort: {
     column: ResultColumn.Points,
     direction: SortDirection.Descending,

package/src/state/slices/settingsInitialState.ts

@@ -1,29 +1,18 @@
-import { scrabble } from '@scrabble-solver/configs';
+import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
-const getInitialLocale = (): Locale => {
-  if (!globalThis.navigator) {
-    return Locale.EN_US;
-  }
+import { guessLocale } from 'lib';
 
-  const locales = Object.values(Locale);
-  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+export interface SettingsState {
+  autoGroupTiles: 'left' | 'right' | null;
+  configId: typeof literaki.id | typeof scrabble.id;
+  locale: Locale;
+}
 
-  if (exactMatch) {
-    return exactMatch;
-  }
-
-  const partialMatch = locales.find((locale) => {
-    return globalThis.navigator.language === locale.substring(0, 2);
-  });
-
-  return partialMatch || Locale.EN_US;
-};
-
-const settingsInitialState = {
-  autoGroupTiles: 'left' as 'left' | 'right' | null,
+const settingsInitialState: SettingsState = {
+  autoGroupTiles: 'left',
   configId: scrabble.id,
-  locale: getInitialLocale(),
+  locale: guessLocale(),
 };
 
 export default settingsInitialState;

package/src/state/slices/solveInitialState.ts

@@ -2,7 +2,7 @@ import { Board } from '@scrabble-solver/types';
 
 import boardInitialState from './boardInitialState';
 
-interface SolveInitialState {
+export interface SolveState {
   error: unknown | undefined;
   isLoading: boolean;
   lastSolvedParameters: {
@@ -11,7 +11,7 @@ interface SolveInitialState {
   };
 }
 
-const solveInitialState: SolveInitialState = {
+const solveInitialState: SolveState = {
   error: undefined,
   isLoading: false,
   lastSolvedParameters: {

package/src/state/slices/solveSlice.ts

@@ -12,6 +12,8 @@ const solveSlice = createSlice({
   initialState: solveInitialState,
   name: 'solve',
   reducers: {
+    reset: () => solveInitialState,
+
     submit: (state) => {
       const error = solveInitialState.error;
       return { ...state, error, isLoading: true };

package/src/state/slices/verifyInitialState.ts

@@ -1,12 +1,21 @@
-import boardInitialState from './boardInitialState';
+import boardInitialState, { BoardState } from './boardInitialState';
 
-const verifyInitialState = {
+export interface VerifyState {
+  isLoading: boolean;
+  lastSolvedParameters: {
+    board: BoardState;
+  };
+  invalidWords: string[];
+  validWords: string[];
+}
+
+const verifyInitialState: VerifyState = {
   isLoading: false,
   lastSolvedParameters: {
     board: boardInitialState,
   },
-  invalidWords: [] as string[],
-  validWords: [] as string[],
+  invalidWords: [],
+  validWords: [],
 };
 
 export default verifyInitialState;

package/src/styles/mixins.scss

@@ -43,7 +43,6 @@ $media-expressions: (
   position: relative;
 
   &::after {
-    content: '';
     position: absolute;
     top: 0;
     right: 0;
@@ -63,6 +62,7 @@ $media-expressions: (
     }
 
     &::after {
+      content: '';
       box-shadow: 0 0 0 var(--focus-effect--size) var(--color--focus);
     }
   }
@@ -151,6 +151,7 @@ $media-expressions: (
     &:nth-child(3) {
       input {
         left: -200%;
+        right: 0;
         clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
       }
     }
@@ -160,6 +161,7 @@ $media-expressions: (
     &:nth-last-child(3) {
       input {
         left: 0;
+        right: -200%;
         clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
       }
     }

package/src/styles/variables.scss

@@ -41,6 +41,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--success: #00a900;
   --color--warning: hsl(35, 90%, 60%);
   --color--primary: var(--color--violet);
+  --color--primary--light: var(--color--violet--light);
   --color--primary--opposite: var(--color--white);
 
   --color--bonus--character--1: var(--color--yellow--light);

package/src/types/index.ts

@@ -2,6 +2,16 @@ export type Comparator<T> = (a: T, B: T) => number;
 
 export type Direction = 'horizontal' | 'vertical';
 
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Sort {
+  column: ResultColumn;
+  direction: SortDirection;
+}
+
 export enum SortDirection {
   Ascending = 'ascending',
   Descending = 'descending',
@@ -30,7 +40,6 @@ export enum ResultColumn {
   Word = 'word',
   WordsCount = 'words-count',
 }
-
 export type TranslationKey =
   | 'cell.filter-cell'
   | 'cell.set-blank'
@@ -78,7 +87,6 @@ export type TranslationKey =
   | 'rack.tile.location'
   | 'remaining-tiles'
   | 'results'
-  | 'results.empty-state.no-filtered-results'
   | 'results.empty-state.no-results'
   | 'results.empty-state.outdated'
   | 'results.empty-state.uninitialized'