@scrabble-solver/scrabble-solver 2.8.7 → 2.8.9

package/src/icons/BookHalf.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/book-half/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z" fill="currentColor" />
+</svg>

package/src/icons/Check.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/check/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" fill="currentColor" />
+</svg>

package/src/icons/Cross.svg

@@ -1,4 +1,4 @@
-<!-- https://icons.getbootstrap.com/icons/x-square-fill/ -->
+<!-- https://icons.getbootstrap.com/icons/x/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" fill="currentColor" />
+  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"  fill="currentColor" />
 </svg>

package/src/icons/CrossFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/x-square-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm3.354 4.646L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 1 1 .708-.708z" fill="currentColor" />
+</svg>

package/src/icons/Flag.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+</svg>

package/src/icons/Star.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/star-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -2,12 +2,16 @@ export { default as ArrowDown } from './ArrowDown.svg';
 export { default as ArrowLeft } from './ArrowLeft.svg';
 export { default as ArrowRight } from './ArrowRight.svg';
 export { default as ArrowUp } from './ArrowUp.svg';
+export { default as BookHalf } from './BookHalf.svg';
+export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
+export { default as CrossFill } from './CrossFill.svg';
 export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
+export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFr } from './FlagFr.svg';
 export { default as FlagGb } from './FlagGb.svg';
@@ -20,3 +24,4 @@ export { default as Play } from './Play.svg';
 export { default as Sack } from './Sack.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
+export { default as Star } from './Star.svg';

package/src/pages/api/solve.ts

@@ -2,7 +2,7 @@ import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
-import Solver from '@scrabble-solver/solver';
+import { solve as solveScrabble } from '@scrabble-solver/solver';
 import { Board, Config, isBoardJson, isLocale, Locale, Tile } from '@scrabble-solver/types';
 import { NextApiRequest, NextApiResponse } from 'next';
 
@@ -36,8 +36,7 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
 
     const trie = await dictionaries.get(locale);
     const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
-    const solver = new Solver(config, trie);
-    const results = solver.solve(board, tiles);
+    const results = solveScrabble(trie, config, board, tiles);
     response.status(200).send(results.map((result) => result.toJson()));
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/src/pages/api/verify.ts

@@ -0,0 +1,71 @@
+import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import logger from '@scrabble-solver/logger';
+import { Board, Config, isBoardJson, isLocale, Locale } from '@scrabble-solver/types';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { getServerLoggingData, isBoardValid } from 'api';
+
+interface RequestData {
+  board: Board;
+  config: Config;
+  locale: Locale;
+}
+
+const verify = async (request: NextApiRequest, response: NextApiResponse): Promise<void> => {
+  const meta = getServerLoggingData(request);
+
+  try {
+    const { board, locale } = parseRequest(request);
+
+    logger.info('verify - request', {
+      meta,
+      payload: {
+        board: board.toString(),
+        boardBlanksCount: board.getBlanksCount(),
+        boardTilesCount: board.getTilesCount(),
+        configId: request.body.configId,
+        locale,
+      },
+    });
+
+    const trie = await dictionaries.get(locale);
+    const words = board.getWords().sort((a, b) => a.localeCompare(b));
+    const invalidWords = words.filter((word) => !trie.has(word));
+    const validWords = words.filter((word) => trie.has(word));
+    response.status(200).send({ invalidWords, validWords });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    logger.error('verify - error', { error, meta });
+    response.status(500).send({ error: 'Server error', message });
+    throw error;
+  }
+};
+
+const parseRequest = (request: NextApiRequest): RequestData => {
+  const { board: boardJson, configId, locale } = request.body;
+
+  if (!isLocale(locale)) {
+    throw new Error('Invalid "locale" parameter');
+  }
+
+  if (!isConfigId(configId)) {
+    throw new Error('Invalid "configId" parameter');
+  }
+
+  const config = getLocaleConfig(configId, locale);
+
+  if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
+    throw new Error('Invalid "board" parameter');
+  }
+
+  const board = Board.fromJson(boardJson);
+
+  return {
+    board,
+    config,
+    locale,
+  };
+};
+
+export default verify;

package/src/pages/index.tsx

@@ -19,6 +19,7 @@ import {
   Settings,
   Splash,
   Well,
+  Words,
 } from 'components';
 import { useIsTablet, useLocalStorage } from 'hooks';
 import { getCellSize } from 'lib';
@@ -39,6 +40,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showRemainingTiles, setShowRemainingTiles] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
+  const [showWords, setShowWords] = useState(false);
   const [boardRef, { height: boardHeight }] = useMeasure<HTMLDivElement>();
   const [contentRef, { height: contentHeight, width: contentWidth }] = useMeasure<HTMLDivElement>();
   const [resultsContainerRef, { height: resultsContainerHeight, width: resultsContainerWidth }] =
@@ -85,6 +87,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
             onShowKeyMap={() => setShowKeyMap(true)}
             onShowRemainingTiles={() => setShowRemainingTiles(true)}
             onShowSettings={() => setShowSettings(true)}
+            onShowWords={() => setShowWords(true)}
           />
         </div>
 
@@ -122,6 +125,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
       <KeyMap isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
 
+      <Words isOpen={showWords} onClose={() => setShowWords(false)} />
+
       <RemainingTiles isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
 
       <Splash forceShow={!isInitialized} onAnimationEnd={handleSplashAnimationEnd} />

package/src/sdk/index.ts

@@ -1,3 +1,4 @@
 export { default as findWordDefinitions } from './findWordDefinitions';
 export { default as solve } from './solve';
+export { default as verify } from './verify';
 export { default as visit } from './visit';

package/src/sdk/verify.ts

@@ -0,0 +1,24 @@
+import { BoardJson, Locale } from '@scrabble-solver/types';
+
+interface Payload {
+  board: BoardJson;
+  configId: string;
+  locale: Locale;
+}
+
+interface Response {
+  invalidWords: string[];
+  validWords: string[];
+}
+
+const verify = ({ board, configId, locale }: Payload): Promise<Response> => {
+  return fetch('/api/verify', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ board, configId, locale }),
+  }).then((response) => response.json());
+};
+
+export default verify;

package/src/state/rootReducer.ts

@@ -1,14 +1,25 @@
 import { combineReducers } from 'redux';
 
-import { boardSlice, dictionarySlice, rackSlice, resultsSlice, settingsSlice, solveSlice } from './slices';
+import {
+  boardSlice,
+  dictionarySlice,
+  cellFilterSlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
 
 const rootReducer = combineReducers({
   board: boardSlice.reducer,
+  cellFilter: cellFilterSlice.reducer,
   dictionary: dictionarySlice.reducer,
   rack: rackSlice.reducer,
   results: resultsSlice.reducer,
   settings: settingsSlice.reducer,
   solve: solveSlice.reducer,
+  verify: verifySlice.reducer,
 });
 
 export default rootReducer;

package/src/state/sagas.ts

@@ -3,18 +3,28 @@ import { Result } from '@scrabble-solver/types';
 import { call, delay, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
 import { memoize } from 'lib';
-import { findWordDefinitions, solve, visit } from 'sdk';
+import { findWordDefinitions, solve, verify, visit } from 'sdk';
 
 import { initialize, reset } from './actions';
 import {
   selectAutoGroupTiles,
   selectBoard,
+  selectCellIsFiltered,
   selectCharacters,
   selectConfig,
   selectDictionary,
   selectLocale,
 } from './selectors';
-import { boardSlice, dictionarySlice, rackSlice, resultsSlice, settingsSlice, solveSlice } from './slices';
+import {
+  boardSlice,
+  cellFilterSlice,
+  dictionarySlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+  verifySlice,
+} from './slices';
 
 const SUBMIT_DELAY = 150;
 
@@ -26,6 +36,7 @@ const memoizedFindWordDefinitions = memoize(findWordDefinitions);
 type AnyGenerator = Generator<any, any, any>;
 
 export function* rootSaga(): AnyGenerator {
+  yield takeEvery(boardSlice.actions.changeCellValue.type, onCellValueChange);
   yield takeEvery(resultsSlice.actions.applyResult.type, onApplyResult);
   yield takeEvery(resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
   yield takeEvery(settingsSlice.actions.changeConfigId.type, onConfigIdChange);
@@ -33,19 +44,33 @@ export function* rootSaga(): AnyGenerator {
   yield takeLatest(dictionarySlice.actions.submit.type, onDictionarySubmit);
   yield takeLatest(initialize.type, onInitialize);
   yield takeLatest(reset.type, onReset);
-  yield takeLatest(solveSlice.actions.submit.type, onSubmit);
+  yield takeLatest(solveSlice.actions.submit.type, onSolve);
+  yield takeLatest(verifySlice.actions.submit.type, onVerify);
+}
+
+function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: number; y: number }>): AnyGenerator {
+  const isFiltered = yield select((state) => selectCellIsFiltered(state, payload));
+
+  if (isFiltered) {
+    yield put(cellFilterSlice.actions.toggle(payload));
+  }
+
+  yield put(verifySlice.actions.submit());
 }
 
 function* onApplyResult({ payload: result }: PayloadAction<Result>): AnyGenerator {
   const autoGroupTiles = yield select(selectAutoGroupTiles);
   yield put(boardSlice.actions.applyResult(result));
+  yield put(cellFilterSlice.actions.reset());
   yield put(rackSlice.actions.removeTiles(result.tiles));
   yield put(rackSlice.actions.groupTiles(autoGroupTiles));
+  yield put(verifySlice.actions.submit());
 }
 
 function* onConfigIdChange(): AnyGenerator {
   yield put(resultsSlice.actions.reset());
   yield put(solveSlice.actions.submit());
+  yield put(verifySlice.actions.submit());
   yield* ensureProperTilesCount();
 }
 
@@ -72,15 +97,18 @@ function* onInitialize(): AnyGenerator {
 
 function* onReset(): AnyGenerator {
   yield put(boardSlice.actions.reset());
+  yield put(cellFilterSlice.actions.reset());
   yield put(dictionarySlice.actions.reset());
   yield put(rackSlice.actions.reset());
   yield put(resultsSlice.actions.reset());
+  yield put(verifySlice.actions.submit());
 }
 
 function* onLocaleChange(): AnyGenerator {
-  yield put(solveSlice.actions.submit());
-  yield put(resultsSlice.actions.changeResultCandidate(null));
   yield put(dictionarySlice.actions.reset());
+  yield put(resultsSlice.actions.changeResultCandidate(null));
+  yield put(solveSlice.actions.submit());
+  yield put(verifySlice.actions.submit());
 }
 
 function* onResultCandidateChange({ payload: result }: PayloadAction<Result | null>): AnyGenerator {
@@ -90,7 +118,7 @@ function* onResultCandidateChange({ payload: result }: PayloadAction<Result | nu
   }
 }
 
-function* onSubmit(): AnyGenerator {
+function* onSolve(): AnyGenerator {
   const board = yield select(selectBoard);
   const { config } = yield select(selectConfig);
   const locale = yield select(selectLocale);
@@ -109,14 +137,33 @@ function* onSubmit(): AnyGenerator {
       configId: config.id,
       locale,
     });
-    yield put(solveSlice.actions.submitSuccess({ board, characters }));
     yield put(resultsSlice.actions.changeResults(results.map(Result.fromJson)));
+    yield put(solveSlice.actions.submitSuccess({ board, characters }));
   } catch (error) {
     yield put(resultsSlice.actions.changeResults([]));
     yield put(solveSlice.actions.submitFailure());
   }
 }
 
+function* onVerify(): AnyGenerator {
+  yield delay(SUBMIT_DELAY);
+
+  const board = yield select(selectBoard);
+  const { config } = yield select(selectConfig);
+  const locale = yield select(selectLocale);
+
+  try {
+    const { invalidWords, validWords } = yield call(verify, {
+      board: board.toJson(),
+      configId: config.id,
+      locale,
+    });
+    yield put(verifySlice.actions.submitSuccess({ board, invalidWords, validWords }));
+  } catch (error) {
+    yield put(verifySlice.actions.submitFailure());
+  }
+}
+
 function* ensureProperTilesCount(): AnyGenerator {
   const { config } = yield select(selectConfig);
   const characters = yield select(selectCharacters);

package/src/state/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { getLocaleConfig } from '@scrabble-solver/configs';
-import { Cell, Config, Tile } from '@scrabble-solver/types';
+import { Cell, Config, Result, Tile } from '@scrabble-solver/types';
 
 import i18n from 'i18n';
 import { findCell, getRemainingTiles, getRemainingTilesGroups, sortResults, unorderedArraysEqual } from 'lib';
@@ -10,6 +10,8 @@ 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 selectCharacter = (_: unknown, character: string | null): string | null => character;
 
 const selectTile = (_: unknown, tile: Tile | null): Tile | null => tile;
@@ -18,6 +20,8 @@ const selectBoardRoot = (state: RootState): RootState['board'] => state.board;
 
 const selectDictionaryRoot = (state: RootState): RootState['dictionary'] => state.dictionary;
 
+const selectCellFilterRoot = (state: RootState): RootState['cellFilter'] => state.cellFilter;
+
 const selectRackRoot = (state: RootState): RootState['rack'] => state.rack;
 
 const selectResultsRoot = (state: RootState): RootState['results'] => state.results;
@@ -26,6 +30,8 @@ const selectSettingsRoot = (state: RootState): RootState['settings'] => state.se
 
 const selectSolveRoot = (state: RootState): RootState['solve'] => state.solve;
 
+const selectVerifyRoot = (state: RootState): RootState['verify'] => state.verify;
+
 export const selectDictionary = selectDictionaryRoot;
 
 export const selectAutoGroupTiles = createSelector([selectSettingsRoot], (settings) => settings.autoGroupTiles);
@@ -38,6 +44,12 @@ export const selectConfigId = createSelector([selectSettingsRoot], (settings) =>
 
 export const selectConfig = createSelector([selectConfigId, selectLocale], getLocaleConfig);
 
+export const selectCellFilter = selectCellFilterRoot;
+
+export const selectCellIsFiltered = createSelector([selectCellFilter, selectPoint], (cellFilter, { x, y }) => {
+  return cellFilter.some((cell) => cell.x === x && cell.y === y);
+});
+
 export const selectResults = createSelector([selectResultsRoot], (results) => results.results);
 
 export const selectResultsQuery = createSelector([selectResultsRoot], (results) => results.query);
@@ -51,20 +63,40 @@ export const selectSortedResults = createSelector(
   sortResults,
 );
 
+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 selectSortedFilteredResults = createSelector(
-  [selectSortedResults, selectResultsQuery],
-  (results, query) => {
-    if (!results || query.trim().length === 0) {
+  [selectSortedResults, selectResultsQuery, selectCellFilter],
+  (results, query, cellFilter) => {
+    if (!results) {
       return results;
     }
 
-    return results.filter((result) => {
-      try {
-        const regExp = new RegExp(query, 'gi');
-        return regExp.test(result.word);
-      } catch {
-        return false;
-      }
+    const filteredByQuery = filterResultsByQuery(results, query);
+
+    if (!cellFilter) {
+      return filteredByQuery;
+    }
+
+    return filteredByQuery.filter((result) => {
+      return cellFilter.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
     });
   },
 );
@@ -153,3 +185,9 @@ export const selectHasOverusedTiles = createSelector([selectRemainingTiles], (re
 });
 
 export const selectRemainingTilesGroups = createSelector([selectRemainingTiles], getRemainingTilesGroups);
+
+export const selectVerify = selectVerifyRoot;
+
+export const selectHasInvalidWords = createSelector([selectVerify], ({ invalidWords }) => {
+  return invalidWords.length > 0;
+});

package/src/state/slices/cellFilterInitialState.ts

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

package/src/state/slices/cellFilterSlice.ts

@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import cellFilterInitialState, { Point } from './cellFilterInitialState';
+
+const cellFilterSlice = createSlice({
+  initialState: cellFilterInitialState,
+  name: 'cellFilter',
+  reducers: {
+    toggle: (state, action: PayloadAction<Point>) => {
+      const { x, y } = action.payload;
+      const has = state.some((point) => point.x === x && point.y === y);
+
+      if (has) {
+        return state.filter((point) => point.x !== x || point.y !== y);
+      }
+
+      return [...state, action.payload];
+    },
+
+    reset: () => cellFilterInitialState,
+  },
+});
+
+export default cellFilterSlice;

package/src/state/slices/index.ts

@@ -1,5 +1,7 @@
 export { default as boardInitialState } from './boardInitialState';
 export { default as boardSlice } from './boardSlice';
+export { default as cellFilterInitialState } from './cellFilterInitialState';
+export { default as cellFilterSlice } from './cellFilterSlice';
 export { default as dictionaryInitialState } from './dictionaryInitialState';
 export { default as dictionarySlice } from './dictionarySlice';
 export { default as rackInitialState } from './rackInitialState';
@@ -10,3 +12,5 @@ export { default as settingsInitialState } from './settingsInitialState';
 export { default as settingsSlice } from './settingsSlice';
 export { default as solveInitialState } from './solveInitialState';
 export { default as solveSlice } from './solveSlice';
+export { default as verifyInitialState } from './verifyInitialState';
+export { default as verifySlice } from './verifySlice';

package/src/state/slices/verifyInitialState.ts

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

package/src/state/slices/verifySlice.ts

@@ -0,0 +1,31 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { Board } from '@scrabble-solver/types';
+
+import verifyInitialState from './verifyInitialState';
+
+interface VerifyParameters {
+  board: Board;
+  invalidWords: string[];
+  validWords: string[];
+}
+
+const verifySlice = createSlice({
+  initialState: verifyInitialState,
+  name: 'verify',
+  reducers: {
+    submit: (state) => {
+      return { ...state, isLoading: true };
+    },
+
+    submitFailure: (state) => {
+      return { ...state, isLoading: false };
+    },
+
+    submitSuccess: (state, action: PayloadAction<VerifyParameters>) => {
+      const { board, invalidWords, validWords } = action.payload;
+      return { ...state, isLoading: false, lastSolvedParameters: { board }, invalidWords, validWords };
+    },
+  },
+});
+
+export default verifySlice;

package/src/styles/variables.scss

@@ -26,7 +26,8 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--background: #f4f4f4;
   --color--background--secondary: #111;
   --color--background--overlay: rgba(255, 255, 255, 0.65);
-  --color--error: rgba(255, 0, 0, 0.75);
+  --color--error: #fc3d3d;
+  --color--success: #00a900;
   --color--focus: #{rgba(#268fff, 0.5)};
   --color--foreground: black;
   --color--foreground--secondary: #444;

package/src/types/index.ts

@@ -30,6 +30,7 @@ export enum ResultColumn {
 }
 
 export type TranslationKey =
+  | 'cell.filter-cell'
   | 'cell.set-blank'
   | 'cell.set-not-blank'
   | 'cell.toggle-direction'
@@ -79,7 +80,10 @@ export type TranslationKey =
   | 'settings.autoGroupTiles.right'
   | 'settings.autoGroupTiles.null'
   | 'settings.game'
-  | 'settings.language';
+  | 'settings.language'
+  | 'words'
+  | 'words.invalid'
+  | 'words.valid';
 
 export type Translate = (key: TranslationKey) => string;