@scrabble-solver/scrabble-solver 2.13.8 → 2.13.9

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright (c) 2022 Kamil Mielnik <kamil@kamilmielnik.com>
+Copyright (c) 2024 Kamil Mielnik <kamil@kamilmielnik.com>
 
 Attribution-NonCommercial-NoDerivatives 4.0 International
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.8",
+  "version": "2.13.9",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
     "@floating-ui/react": "^0.26.17",
     "@kamilmielnik/trie": "^3.0.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.8",
-    "@scrabble-solver/constants": "^2.13.8",
-    "@scrabble-solver/dictionaries": "^2.13.8",
-    "@scrabble-solver/logger": "^2.13.8",
-    "@scrabble-solver/solver": "^2.13.8",
-    "@scrabble-solver/types": "^2.13.8",
-    "@scrabble-solver/word-definitions": "^2.13.8",
+    "@scrabble-solver/configs": "^2.13.9",
+    "@scrabble-solver/constants": "^2.13.9",
+    "@scrabble-solver/dictionaries": "^2.13.9",
+    "@scrabble-solver/logger": "^2.13.9",
+    "@scrabble-solver/solver": "^2.13.9",
+    "@scrabble-solver/types": "^2.13.9",
+    "@scrabble-solver/word-definitions": "^2.13.9",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
@@ -72,5 +72,5 @@
     "@types/redux-saga": "^0.10.5",
     "sass": "^1.77.5"
   },
-  "gitHead": "294a7a790843ef9d260be52a3144e323c8ac0641"
+  "gitHead": "d09676296f8fafadb7da0cf1e11fb240aaf309ee"
 }

package/src/components/Board/Board.tsx

@@ -9,7 +9,7 @@ import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { TRANSITION } from 'parameters';
+import { BORDER_WIDTH, TRANSITION } from 'parameters';
 import {
   boardSlice,
   cellFilterSlice,
@@ -176,8 +176,8 @@ const Board: FunctionComponent<Props> = ({ className }) => {
           ref={floatingFocus.refs.setFloating}
           style={{
             position: floatingFocus.strategy,
-            top: floatingFocus.y ? floatingFocus.y + cellSize : 0,
-            left: floatingFocus.x ?? 0,
+            top: (floatingFocus.y ? floatingFocus.y + cellSize : 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
+            left: (floatingFocus.x ?? 0) - (showCoordinates === 'hidden' ? 0 : BORDER_WIDTH),
             width: cellSize,
             height: cellSize,
             opacity: hasFocus ? 1 : 0,

package/src/components/Board/BoardPure.tsx

@@ -12,10 +12,10 @@ import {
   memo,
 } from 'react';
 
-import { FlagFill } from 'icons';
+import { Ban, FlagFill } from 'icons';
 import { getCoordinate } from 'lib';
 import { BORDER_WIDTH } from 'parameters';
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
@@ -26,7 +26,7 @@ interface Props {
   coordinatesFontSize: number;
   coordinatesSize: number;
   direction: 'ltr' | 'rtl';
-  filteredCells: Point[];
+  filteredCells: CellFilterEntry[];
   inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
   showCoordinates: ShowCoordinates;
@@ -87,22 +87,30 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
         </>
       )}
 
-      {filteredCells.map(({ x, y }) => (
-        <div
-          className={styles.iconContainer}
-          key={[x, y].join('-')}
-          style={{
-            height: cellSize,
-            width: cellSize,
-            left: direction === 'ltr' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
-            right: direction === 'rtl' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
-            top: coordinatesSize + y * (cellSize + BORDER_WIDTH),
-          }}
-        >
-          <div className={styles.iconBackground} />
-          <FlagFill className={styles.icon} />
-        </div>
-      ))}
+      {/* The dynamic changes to the board presentation need to be outside of useBackgroundImage
+        to prevent flickering on blob URL change (i.e. when flagging a field,
+        but not when changing game type since user's attention is not on the board
+        when that happens)*/}
+      {filteredCells.map(({ x, y, type }) => {
+        const Icon = type === 'exclude' ? Ban : FlagFill;
+
+        return (
+          <div
+            className={styles.iconContainer}
+            key={[x, y].join('-')}
+            style={{
+              height: cellSize,
+              width: cellSize,
+              left: direction === 'ltr' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
+              right: direction === 'rtl' ? coordinatesSize + BORDER_WIDTH + x * (cellSize + BORDER_WIDTH) : undefined,
+              top: coordinatesSize + BORDER_WIDTH + y * (cellSize + BORDER_WIDTH),
+            }}
+          >
+            <div className={styles.iconBackground} />
+            <Icon className={styles.icon} />
+          </div>
+        );
+      })}
 
       {rows.map((cells, y) => (
         <Fragment key={y}>

package/src/components/Board/components/Actions/Actions.tsx

@@ -3,21 +3,16 @@ import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
-import { Flag, FlagFill, Keyboard, Square, SquareFill } from 'icons';
+import { Keyboard, Square, SquareFill } from 'icons';
 import { findCell } from 'lib';
-import {
-  selectCellIsFiltered,
-  selectInputMode,
-  selectResultCandidateCells,
-  useTranslate,
-  useTypedSelector,
-} from 'state';
+import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
 import { Direction } from 'types';
 
 import Button from '../../../Button';
 import ToggleDirectionButton from '../ToggleDirectionButton';
 
 import styles from './Actions.module.scss';
+import { getNextCellFilter } from './lib';
 
 interface Props extends HTMLProps<HTMLDivElement> {
   cell: Cell;
@@ -35,10 +30,11 @@ const Actions = forwardRef<HTMLDivElement, Props>(
   ) => {
     const translate = useTranslate();
     const inputMode = useTypedSelector(selectInputMode);
-    const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+    const filter = useTypedSelector((state) => selectCellFilter(state, cell));
     const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
     const isBlank = cell.tile.isBlank;
     const isEmpty = cell.tile.character === EMPTY_CELL || Boolean(findCell(resultCandidateCells, cell.x, cell.y));
+    const { Icon, labelTranslationKey } = getNextCellFilter(filter);
 
     // On iOS it helps with losing focus too early which makes Actions disappear
     const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
@@ -67,10 +63,10 @@ const Actions = forwardRef<HTMLDivElement, Props>(
 
         {isEmpty && (
           <Button
-            aria-label={translate('cell.filter-cell')}
+            aria-label={translate(labelTranslationKey)}
             className={classNames(styles.action)}
-            Icon={isFiltered ? Flag : FlagFill}
-            tooltip={translate('cell.filter-cell')}
+            Icon={Icon}
+            tooltip={translate(labelTranslationKey)}
             onClick={onToggleFilterCell}
             onMouseDown={handleMouseDown}
           />

package/src/components/Board/components/Actions/lib.ts

@@ -0,0 +1,30 @@
+import { FunctionComponent, SVGAttributes } from 'react';
+
+import { Ban, Eraser, FlagFill } from 'icons';
+import { CellFilterEntry, TranslationKey } from 'types';
+
+export const getNextCellFilter = (
+  filter: CellFilterEntry | undefined,
+): {
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  labelTranslationKey: TranslationKey;
+} => {
+  if (filter?.type === 'exclude') {
+    return {
+      Icon: Eraser,
+      labelTranslationKey: 'common.clear',
+    };
+  }
+
+  if (filter?.type === 'include') {
+    return {
+      Icon: Ban,
+      labelTranslationKey: 'cell.filter-cell.exclude',
+    };
+  }
+
+  return {
+    Icon: FlagFill,
+    labelTranslationKey: 'cell.filter-cell.include',
+  };
+};

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -7,16 +7,9 @@ import { Provider } from 'react-redux';
 
 import { useAppLayout, useMediaQueries } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { FlagFill, Star } from 'icons';
+import { Star } from 'icons';
 import { dataUrlToBlob, getTileSizes } from 'lib';
-import {
-  BORDER_COLOR_LIGHT,
-  BORDER_RADIUS,
-  BORDER_WIDTH,
-  COLOR_BACKGROUND,
-  COLOR_BONUS_START,
-  COLOR_FILTERED,
-} from 'parameters';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from 'parameters';
 import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
 import { Point } from 'types';
 
@@ -30,7 +23,6 @@ const BONUS = 'b';
 const BONUS_WORD_2 = 'b2';
 const BONUS_WORD_3 = 'b3';
 const BONUS_WORD_4 = 'b4';
-const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
   const { boardSize, cellSize, coordinatesSize } = useAppLayout();
@@ -131,19 +123,6 @@ const useBackgroundImage = () => {
               x4
             </text>
           </symbol>
-
-          <symbol id={CELL_FILTER}>
-            <rect
-              fill={COLOR_FILTERED}
-              height={bonusSize}
-              rx={borderRadius}
-              width={bonusSize}
-              x={bonusOffset}
-              y={bonusOffset}
-            />
-
-            <FlagFill color="white" height={iconSize} width={iconSize} x={iconOffset} y={iconOffset} />
-          </symbol>
         </defs>
 
         {showCoordinates === 'hidden' && (
@@ -230,7 +209,7 @@ const useBackgroundImage = () => {
     </Provider>,
   );
 
-  const encodedSvg = globalThis.btoa(backgroundSvg);
+  const encodedSvg = useMemo(() => globalThis.btoa(backgroundSvg), [backgroundSvg]);
   const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
   const blob = useMemo(() => dataUrlToBlob(dataUrl), [dataUrl]);
   const blobUrl = useMemo(() => URL.createObjectURL(blob), [blob]);

package/src/components/Radio/Radio.module.scss

@@ -25,6 +25,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 
   &.disabled {
     opacity: var(--opacity--disabled);
+    cursor: not-allowed;
   }
 }
 
@@ -35,7 +36,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   width: 100%;
   height: 100%;
   opacity: 0;
-  cursor: pointer;
+  cursor: inherit;
 }
 
 .icon {

package/src/components/Tile/Tile.module.scss

@@ -13,8 +13,6 @@
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
-  transition: var(--transition);
-  transition-property: background-color, color, box-shadow;
   user-select: none;
 
   @include media('<xs') {

package/src/components/Tile/Tile.tsx

@@ -9,14 +9,12 @@ import {
   Ref,
   TouchEventHandler,
   useCallback,
-  useEffect,
   useMemo,
   useRef,
 } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { getTileSizes, noop } from 'lib';
-import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
@@ -65,7 +63,7 @@ const Tile: FunctionComponent<Props> = ({
   onTouchStart = noop,
 }) => {
   const locale = useTypedSelector(selectLocale);
-  const { animateTile, showTilePoints } = useAppLayout();
+  const { showTilePoints } = useAppLayout();
   const { pointsFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
@@ -83,18 +81,6 @@ const Tile: FunctionComponent<Props> = ({
     [onKeyDown],
   );
 
-  useEffect(() => {
-    if (!ref.current?.parentElement || !character || !animateTile) {
-      return;
-    }
-
-    ref.current.parentElement.animate(TILE_APPEAR_KEYFRAMES, {
-      duration: TILE_APPEAR_DURATION,
-      easing: EASE_OUT_CUBIC,
-      fill: 'forwards',
-    });
-  }, [character, animateTile]);
-
   return (
     <TilePure
       aria-label={ariaLabel}

package/src/components/Tooltip/Tooltip.module.scss

@@ -7,6 +7,7 @@
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
   text-align: center;
+  pointer-events: none;
 }
 
 .arrow {

package/src/hooks/useAppLayout.ts

@@ -71,7 +71,6 @@ const useAppLayout = () => {
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
-    animateTile: !isLessThanXs,
     boardSize,
     cellSize,
     coordinatesFontSize: coordinatesSize * 0.6,

package/src/i18n/languages/english.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Enter word",
-  "cell.filter-cell": "Target destination",
+  "cell.filter-cell.exclude": "Exclude destination",
+  "cell.filter-cell.include": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",

package/src/i18n/languages/french.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Entrez un mot",
-  "cell.filter-cell": "Destination cible",
+  "cell.filter-cell.exclude": "Exclure la destination",
+  "cell.filter-cell.include": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",

package/src/i18n/languages/german.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Wort eingeben",
-  "cell.filter-cell": "Zielort",
+  "cell.filter-cell.exclude": "Ziel ausschließen",
+  "cell.filter-cell.include": "Ziel anvisieren",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",

package/src/i18n/languages/persian.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "کلمه را وارد کنید",
-  "cell.filter-cell": "مقصد",
+  "cell.filter-cell.exclude": "مقصد را حذف کنید",
+  "cell.filter-cell.include": "مقصد مورد نظر",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",

package/src/i18n/languages/polish.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Wprowadź słowo",
-  "cell.filter-cell": "Miejsce docelowe",
+  "cell.filter-cell.exclude": "Wyklucz miejsce",
+  "cell.filter-cell.include": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",

package/src/i18n/languages/romanian.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Introducere cuvant",
-  "cell.filter-cell": "Destinatia",
+  "cell.filter-cell.exclude": "Excludeți destinația",
+  "cell.filter-cell.include": "Destinație țintă",
   "cell.set-blank": "Marcare camp liber",
   "cell.set-not-blank": "Marcare camp ocupat ",
   "cell.tile.location": "Tabla: camp ({{x}}, {{y}})",

package/src/i18n/languages/spanish.json

@@ -1,6 +1,7 @@
 {
   "cell.enter-word": "Ingresar palabra",
-  "cell.filter-cell": "Destino objetivo",
+  "cell.filter-cell.exclude": "Excluir destino",
+  "cell.filter-cell.include": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",

package/src/icons/Ban.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/ban/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -2,6 +2,7 @@ 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 Ban } from './Ban.svg';
 export { default as BookHalf } from './BookHalf.svg';
 export { default as CardChecklist } from './CardChecklist.svg';
 export { default as Check } from './Check.svg';

package/src/lib/groupResults.ts

@@ -1,8 +1,9 @@
 import { Result } from '@scrabble-solver/types';
 
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
 import createRegExp from './createRegExp';
+import resultMatchesCellFilter from './resultMatchesCellFilter';
 
 interface GroupedResults {
   matching: Result[];
@@ -12,7 +13,7 @@ interface GroupedResults {
 const groupResults = (
   results: Result[] | undefined,
   query: string,
-  cellFilter: Point[],
+  cellFilter: CellFilterEntry[],
 ): GroupedResults | undefined => {
   if (typeof results === 'undefined') {
     return results;
@@ -23,12 +24,8 @@ const groupResults = (
   return results.reduce<GroupedResults>(
     (groupedResults, result) => {
       const matchesQuery = () => regExp.test(result.word);
-      const matchesCellFilter = () =>
-        cellFilter.every(({ x, y }) => {
-          return result.cells.some((cell) => cell.x === x && cell.y === y);
-        });
 
-      if (matchesCellFilter() && matchesQuery()) {
+      if (resultMatchesCellFilter(result, cellFilter) && matchesQuery()) {
         groupedResults.matching.push(result);
       } else {
         groupedResults.other.push(result);

package/src/lib/index.ts

@@ -32,6 +32,7 @@ export { default as isUpperCase } from './isUpperCase';
 export { default as memoize } from './memoize';
 export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';
+export { default as resultMatchesCellFilter } from './resultMatchesCellFilter';
 export { default as reverseComparator } from './reverseComparator';
 export { default as sortResults } from './sortResults';
 export { default as unorderedArraysEqual } from './unorderedArraysEqual';

package/src/lib/resultMatchesCellFilter.ts

@@ -0,0 +1,23 @@
+import { Result } from '@scrabble-solver/types';
+
+import { CellFilterEntry } from 'types';
+
+const resultMatchesCellFilter = (result: Result, cellFilter: CellFilterEntry[]) => {
+  const excludeFilters = cellFilter.filter((filter) => filter.type === 'exclude');
+  const matchesExcludeFilters = excludeFilters.every(({ x, y }) => {
+    return result.cells.every((cell) => cell.x !== x || cell.y !== y);
+  });
+
+  if (!matchesExcludeFilters) {
+    return false;
+  }
+
+  const includeFilter = cellFilter.filter((filter) => filter.type === 'include');
+  const matchesIncludeFilters = includeFilter.every(({ x, y }) => {
+    return result.cells.some((cell) => cell.x === x && cell.y === y);
+  });
+
+  return matchesExcludeFilters && matchesIncludeFilters;
+};
+
+export default resultMatchesCellFilter;

package/src/parameters/index.ts

@@ -6,7 +6,6 @@ export const BREAKPOINTS = {
   xl: 1400,
 };
 
-export const EASE_OUT_CUBIC = 'cubic-bezier(0.33, 1, 0.68, 1)'; // https://easings.net/#easeOutCubic
 export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
@@ -128,11 +127,3 @@ export const RESULTS_HEADER_HEIGHT = RESULTS_ITEM_HEIGHT;
 export const SOLVER_COLUMN_WIDTH = 580;
 
 export const TEXT_INPUT_HEIGHT = 40;
-
-export const TILE_APPEAR_DURATION = 200;
-
-export const TILE_APPEAR_KEYFRAMES = [
-  { transform: 'translateY(0)' },
-  { transform: 'translateY(10%)', offset: 0.5 },
-  { transform: 'translateY(0)' },
-];

package/src/state/sagas.ts

@@ -12,7 +12,7 @@ import { findWordDefinitions, solve, verify, visit } from 'sdk';
 import { initialize, reset } from './actions';
 import {
   selectBoard,
-  selectCellIsFiltered,
+  selectCellFilter,
   selectCharacters,
   selectConfig,
   selectDictionary,
@@ -56,10 +56,10 @@ export function* rootSaga(): AnyGenerator {
 }
 
 function* onCellValueChange({ payload }: PayloadAction<{ value: string; x: number; y: number }>): AnyGenerator {
-  const isFiltered = yield select((state) => selectCellIsFiltered(state, payload));
+  const filter = yield select((state) => selectCellFilter(state, payload));
 
-  if (isFiltered) {
-    yield put(cellFilterSlice.actions.toggle(payload));
+  if (filter) {
+    yield put(cellFilterSlice.actions.cancel(payload));
   }
 
   yield put(resultsSlice.actions.changeResultCandidate(null));

package/src/state/selectors.ts

@@ -12,6 +12,7 @@ import {
   getRemainingTiles,
   getRemainingTilesGroups,
   groupResults,
+  resultMatchesCellFilter,
   sortResults,
   unorderedArraysEqual,
 } from 'lib';
@@ -75,8 +76,8 @@ export const selectConfig = createSelector([selectGame, selectLocale], getConfig
 
 export const selectFilteredCells = selectCellFilterRoot;
 
-export const selectCellIsFiltered = createSelector([selectFilteredCells, selectPoint], (cellFilter, { x, y }) => {
-  return cellFilter.some((cell) => cell.x === x && cell.y === y);
+export const selectCellFilter = createSelector([selectFilteredCells, selectPoint], (cellFilter, { x, y }) => {
+  return cellFilter.find((cell) => cell.x === x && cell.y === y);
 });
 
 export const selectCellIsValid = createSelector([selectConfig, selectCell], (config, cell) => {
@@ -106,7 +107,7 @@ export const selectResults = createSelector([selectGroupedResults], (groupedResu
 
 export const selectIsResultMatching = createSelector(
   [selectResults, selectResultsQuery, selectFilteredCells, selectResultIndex],
-  (results, query, filteredCells, index) => {
+  (results, query, cellFilter, index) => {
     if (!results) {
       return false;
     }
@@ -118,11 +119,7 @@ export const selectIsResultMatching = createSelector(
       return false;
     }
 
-    if (filteredCells) {
-      return filteredCells.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
-    }
-
-    return true;
+    return resultMatchesCellFilter(result, cellFilter);
   },
 );
 

package/src/state/slices/cellFilterInitialState.ts

@@ -1,6 +1,6 @@
-import { Point } from 'types';
+import { CellFilterEntry } from 'types';
 
-export type CellFilterState = Point[];
+export type CellFilterState = CellFilterEntry[];
 
 const cellFilterInitialState: CellFilterState = [];