@scrabble-solver/scrabble-solver 2.8.7 → 2.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.7",
+  "version": "2.8.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.7",
-    "@scrabble-solver/constants": "^2.8.7",
-    "@scrabble-solver/dictionaries": "^2.8.7",
-    "@scrabble-solver/logger": "^2.8.7",
-    "@scrabble-solver/solver": "^2.8.7",
-    "@scrabble-solver/types": "^2.8.7",
-    "@scrabble-solver/word-definitions": "^2.8.7",
+    "@scrabble-solver/configs": "^2.8.8",
+    "@scrabble-solver/constants": "^2.8.8",
+    "@scrabble-solver/dictionaries": "^2.8.8",
+    "@scrabble-solver/logger": "^2.8.8",
+    "@scrabble-solver/solver": "^2.8.8",
+    "@scrabble-solver/types": "^2.8.8",
+    "@scrabble-solver/word-definitions": "^2.8.8",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -68,5 +68,5 @@
     "env-cmd": "^10.1.0",
     "sass": "^1.55.0"
   },
-  "gitHead": "879bf9b68f27fa3d530d0582fd8fbbcd5c8b150b"
+  "gitHead": "e6ced6e98204e49ba69750242643bda52a453635"
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -13,7 +13,6 @@ $icon-size: 16px;
   transition: var(--transition);
   background-clip: padding-box;
 
-  &.bonusStart,
   &.bonusWord2,
   &.bonusWord3 {
     position: relative;
@@ -33,12 +32,7 @@ $icon-size: 16px;
   }
 
   &.bonusStart {
-    background-color: var(--color--red--light);
-
-    &:before {
-      content: '★';
-      color: var(--color--foreground--secondary);
-    }
+    background-color: var(--color--violet--light);
   }
 
   &.bonusCharacter1 {
@@ -168,6 +162,7 @@ $icon-size: 16px;
   }
 
   &,
+  .filterCell,
   .toggleDirection {
     width: $icon-size;
     height: $icon-size;
@@ -180,8 +175,6 @@ $icon-size: 16px;
 }
 
 .toggleDirection {
-  transition: var(--transition);
-
   &.right {
     transform: rotate(-90deg);
   }
@@ -194,3 +187,35 @@ $icon-size: 16px;
     font-weight: bold;
   }
 }
+
+.filterCell {
+  color: var(--color--inactive);
+
+  &.filtered {
+    color: var(--color--foreground--secondary);
+  }
+}
+
+.iconContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flagContainer {
+  background-color: var(--color--primary);
+}
+
+.flag,
+.star {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  color: white;
+}

package/src/components/Board/components/Cell/Cell.tsx

@@ -4,7 +4,15 @@ import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
-import { boardSlice, selectCellBonus, selectTilePoints, useTranslate, useTypedSelector } from 'state';
+import {
+  boardSlice,
+  cellFilterSlice,
+  selectCellBonus,
+  selectCellIsFiltered,
+  selectTilePoints,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import CellPure from './CellPure';
 
@@ -34,10 +42,19 @@ const Cell: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
+  const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
   const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
+  const handleDirectionToggleClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+
+    onDirectionToggle();
+  }, [onDirectionToggle]);
+
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
   const handleToggleBlankClick = useCallback(() => {
@@ -48,13 +65,13 @@ const Cell: FunctionComponent<Props> = ({
     dispatch(boardSlice.actions.toggleCellIsBlank({ x, y }));
   }, [dispatch, x, y]);
 
-  const handleDirectionToggleClick = useCallback(() => {
+  const handleToggleFilterCellClick = useCallback(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
 
-    onDirectionToggle();
-  }, [onDirectionToggle]);
+    dispatch(cellFilterSlice.actions.toggle({ x, y }));
+  }, [dispatch, x, y]);
 
   return (
     <CellPure
@@ -65,6 +82,7 @@ const Cell: FunctionComponent<Props> = ({
       inputRef={inputRef}
       isCenter={isCenter}
       isEmpty={isEmpty}
+      isFiltered={isFiltered}
       points={points}
       size={size}
       style={style}
@@ -73,6 +91,7 @@ const Cell: FunctionComponent<Props> = ({
       onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
       onToggleBlankClick={handleToggleBlankClick}
+      onToggleFilterCellClick={handleToggleFilterCellClick}
     />
   );
 };

package/src/components/Board/components/Cell/CellPure.tsx

@@ -2,7 +2,7 @@ import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
 
-import { ArrowDown } from 'icons';
+import { ArrowDown, Flag, Star } from 'icons';
 import { Translate } from 'types';
 
 import Tile from '../../../Tile';
@@ -19,6 +19,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   isCenter: boolean;
   isEmpty: boolean;
+  isFiltered: boolean;
   points?: number;
   size: number;
   style?: CSSProperties;
@@ -27,6 +28,7 @@ interface Props {
   onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
+  onToggleFilterCellClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 const CellPure: FunctionComponent<Props> = ({
@@ -37,6 +39,7 @@ const CellPure: FunctionComponent<Props> = ({
   inputRef,
   isCenter,
   isEmpty,
+  isFiltered,
   points,
   size,
   style,
@@ -45,6 +48,7 @@ const CellPure: FunctionComponent<Props> = ({
   onDirectionToggleClick,
   onFocus,
   onToggleBlankClick,
+  onToggleFilterCellClick,
 }) => (
   <div
     className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
@@ -52,6 +56,18 @@ const CellPure: FunctionComponent<Props> = ({
     })}
     style={style}
   >
+    {isCenter && (
+      <div className={classNames(styles.iconContainer)}>
+        <Star className={styles.star} />
+      </div>
+    )}
+
+    {isFiltered && (
+      <div className={classNames(styles.iconContainer, styles.flagContainer)}>
+        <Flag className={styles.flag} />
+      </div>
+    )}
+
     <Tile
       className={styles.tile}
       character={isEmpty ? undefined : tile.character}
@@ -74,6 +90,18 @@ const CellPure: FunctionComponent<Props> = ({
         />
       </Button>
 
+      {isEmpty && (
+        <Button
+          className={classNames(styles.filterCell, {
+            [styles.filtered]: isFiltered,
+          })}
+          tooltip={translate('cell.filter-cell')}
+          onClick={onToggleFilterCellClick}
+        >
+          <Flag />
+        </Button>
+      )}
+
       {!isEmpty && (
         <Button
           className={classNames(styles.blank, {

package/src/components/Board/hooks/useGrid.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines, max-statements */
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell } from '@scrabble-solver/types';
 import { createRef, KeyboardEventHandler, RefObject, useCallback, useMemo, useState, useRef } from 'react';

package/src/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Zielort - klicken zum Wechseln",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Target destination - click to toggle",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.toggle-direction": "Typing direction - click to toggle",

package/src/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",

package/src/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Destination cible - cliquer pour changer",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",

package/src/i18n/pl.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",

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

@@ -8,6 +8,7 @@ export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.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 +21,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/state/rootReducer.ts

@@ -1,9 +1,18 @@
 import { combineReducers } from 'redux';
 
-import { boardSlice, dictionarySlice, rackSlice, resultsSlice, settingsSlice, solveSlice } from './slices';
+import {
+  boardSlice,
+  dictionarySlice,
+  cellFilterSlice,
+  rackSlice,
+  resultsSlice,
+  settingsSlice,
+  solveSlice,
+} from './slices';
 
 const rootReducer = combineReducers({
   board: boardSlice.reducer,
+  cellFilter: cellFilterSlice.reducer,
   dictionary: dictionarySlice.reducer,
   rack: rackSlice.reducer,
   results: resultsSlice.reducer,

package/src/state/sagas.ts

@@ -9,12 +9,21 @@ 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,
+} from './slices';
 
 const SUBMIT_DELAY = 150;
 
@@ -26,6 +35,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);
@@ -36,9 +46,18 @@ export function* rootSaga(): AnyGenerator {
   yield takeLatest(solveSlice.actions.submit.type, onSubmit);
 }
 
+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));
+  }
+}
+
 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));
 }
@@ -72,6 +91,7 @@ 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());

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;
@@ -38,6 +42,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 +61,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));
     });
   },
 );

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';

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'