scrabble-solver 2.16.0 → 2.16.2

package/packages/scrabble-solver/src/components/Board/Board.tsx

@@ -25,7 +25,7 @@ import styles from './Board.module.scss';
 import { BoardPure } from './BoardPure';
 import { Actions, InputPrompt } from './components';
 import { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
-import { selectRowsWithCandidate } from './selectors';
+import { selectReachableCells, selectRowsWithCandidate } from './selectors';
 
 interface Props {
   className?: string;
@@ -35,6 +35,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
   const rows = useTypedSelector(selectRowsWithCandidate);
+  const reachableCells = useTypedSelector(selectReachableCells);
   const inputMode = useTypedSelector(selectInputMode);
   const cellFilters = useTypedSelector(selectCellFilters);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
@@ -157,6 +158,7 @@ export const Board: FunctionComponent<Props> = ({ className }) => {
         coordinatesSize={coordinatesSize}
         direction={LOCALE_FEATURES[locale].direction}
         inputRefs={inputRefs}
+        reachableCells={reachableCells}
         ref={ref}
         rows={rows}
         showCoordinates={showCoordinates}

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -28,6 +28,7 @@ interface Props {
   coordinatesSize: number;
   direction: 'ltr' | 'rtl';
   inputRefs: RefObject<HTMLInputElement | null>[][];
+  reachableCells: boolean[][] | null;
   rows: CellModel[][];
   showCoordinates: ShowCoordinates;
   style?: CSSProperties;
@@ -48,6 +49,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
       direction,
       cellFilters,
       inputRefs,
+      reachableCells,
       rows,
       showCoordinates,
       style,
@@ -137,6 +139,7 @@ const BoardPureBase = forwardRef<HTMLDivElement, Props>(
               cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
               cellTop={y > 0 ? rows[y - 1][x] : undefined}
               inputRef={inputRefs[y][x]}
+              isReachable={reachableCells ? reachableCells[y][x] : true}
               key={x}
               size={cellSize}
               onChange={onChange}

package/packages/scrabble-solver/src/components/Board/components/Cell/Cell.module.scss

@@ -87,6 +87,12 @@
     border-end-end-radius: 0;
   }
 
+  &.unreachable {
+    background-color: var(--border--color);
+    opacity: 0.5;
+    border-radius: 0;
+  }
+
   &:focus-within {
     z-index: 2;
   }

package/packages/scrabble-solver/src/components/Board/components/Cell/Cell.tsx

@@ -1,4 +1,4 @@
-import { EMPTY_CELL } from '@scrabble-solver/constants';
+import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
 import { type Cell as CellModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
@@ -14,6 +14,7 @@ import {
 import {
   selectCellIsValid,
   selectConfig,
+  selectHoveredCharacter,
   selectInputMode,
   selectLocale,
   selectTilePoints,
@@ -33,6 +34,7 @@ interface Props {
   cellTop?: CellModel;
   className?: string;
   inputRef: RefObject<HTMLInputElement | null>;
+  isReachable?: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onFocus: (x: number, y: number) => void;
@@ -46,6 +48,7 @@ export const Cell: FunctionComponent<Props> = ({
   cellTop,
   className,
   inputRef,
+  isReachable = true,
   size,
   onChange,
   onFocus,
@@ -57,7 +60,12 @@ export const Cell: FunctionComponent<Props> = ({
   const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
+  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
   const isEmpty = tile.character === EMPTY_CELL;
+  const isHoverMatch =
+    !isEmpty &&
+    hoveredCharacter !== null &&
+    (hoveredCharacter === BLANK ? tile.isBlank : !tile.isBlank && tile.character === hoveredCharacter);
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
     (event) => {
@@ -106,9 +114,10 @@ export const Cell: FunctionComponent<Props> = ({
         [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
         [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),
         [styles.sharpBottomRight]: cellBottom?.hasTile() || cellRight?.hasTile(),
+        [styles.unreachable]: !isReachable,
       })}
       character={isEmpty ? undefined : tile.character}
-      highlighted={cell.isCandidate()}
+      highlighted={cell.isCandidate() || isHoverMatch}
       inputRef={inputRef}
       isBlank={tile.isBlank}
       isValid={isValid}

package/packages/scrabble-solver/src/components/Board/lib.ts

@@ -1,8 +1,8 @@
 import { BONUS_WORD } from '@scrabble-solver/constants';
-import { type Bonus } from '@scrabble-solver/types';
+import { type Board, type Bonus, type Config } from '@scrabble-solver/types';
 
 import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from '@/parameters';
-import { type Point } from '@/types';
+import { type Direction, type Point } from '@/types';
 
 export const createGrid = <T>(width: number, height: number, getInitialValue: (x: number, y: number) => T): T[][] => {
   return Array.from({ length: height }).map((_row, y) => {
@@ -35,3 +35,84 @@ export const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => bool
 
   return undefined;
 };
+
+export const getReachableCells = (config: Config, board: Board, charactersCount: number): boolean[][] => {
+  const { boardHeight, boardWidth } = config;
+  const reachable = createGrid(boardWidth, boardHeight, () => false);
+
+  if (charactersCount === 0) {
+    return reachable;
+  }
+
+  const isBoardEmpty = board.isEmpty();
+  const center = board.center;
+
+  const isAnchor = (x: number, y: number, playDirection: Direction): boolean => {
+    if (isBoardEmpty) {
+      return x === center.x && y === center.y;
+    }
+
+    if (playDirection === 'horizontal') {
+      const above = y > 0 && !board.rows[y - 1][x].isEmpty;
+      const below = y < boardHeight - 1 && !board.rows[y + 1][x].isEmpty;
+      return above || below;
+    }
+
+    const left = x > 0 && !board.rows[y][x - 1].isEmpty;
+    const right = x < boardWidth - 1 && !board.rows[y][x + 1].isEmpty;
+    return left || right;
+  };
+
+  const isReachableInDirection = (x: number, y: number, direction: Direction): boolean => {
+    const isHorizontal = direction === 'horizontal';
+    const length = isHorizontal ? boardWidth : boardHeight;
+    const startOffset = isHorizontal ? x : y;
+    const cellAt = (offset: number) => (isHorizontal ? board.rows[y][offset] : board.rows[offset][x]);
+
+    if (isAnchor(x, y, direction)) {
+      return true;
+    }
+
+    for (const step of [-1, 1] as const) {
+      let newTiles = 1;
+
+      for (let offset = startOffset + step; offset >= 0 && offset < length; offset += step) {
+        const cell = cellAt(offset);
+
+        if (cell.hasTile()) {
+          if (newTiles <= charactersCount) {
+            return true;
+          }
+          break;
+        }
+
+        newTiles += 1;
+
+        if (newTiles > charactersCount) {
+          break;
+        }
+
+        if (isAnchor(cell.x, cell.y, direction)) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  };
+
+  for (let y = 0; y < boardHeight; ++y) {
+    for (let x = 0; x < boardWidth; ++x) {
+      if (board.rows[y][x].hasTile()) {
+        reachable[y][x] = true;
+        continue;
+      }
+
+      if (isReachableInDirection(x, y, 'horizontal') || isReachableInDirection(x, y, 'vertical')) {
+        reachable[y][x] = true;
+      }
+    }
+  }
+
+  return reachable;
+};

package/packages/scrabble-solver/src/components/Board/selectors.ts

@@ -1,8 +1,27 @@
 import { createSelector } from '@reduxjs/toolkit';
 
 import { findCell } from '@/lib';
-import { selectBoard, selectResultCandidateCells } from '@/state';
+import {
+  selectBoard,
+  selectCharacters,
+  selectConfig,
+  selectHighlightUnreachableCells,
+  selectResultCandidateCells,
+} from '@/state';
+
+import { getReachableCells } from './lib';
 
 export const selectRowsWithCandidate = createSelector([selectBoard, selectResultCandidateCells], (board, cells) => {
   return board.rows.map((row, y) => row.map((cell, x) => findCell(cells, x, y) || cell));
 });
+
+export const selectReachableCells = createSelector(
+  [selectConfig, selectBoard, selectCharacters, selectHighlightUnreachableCells],
+  (config, board, characters, highlightUnreachableCells): boolean[][] | null => {
+    if (!highlightUnreachableCells || characters.length === 0) {
+      return null;
+    }
+
+    return getReachableCells(config, board, characters.length);
+  },
+);

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.tsx

@@ -21,6 +21,7 @@ import {
   selectCharacterIsValid,
   selectCharacterPoints,
   selectConfig,
+  selectHoveredCharacter,
   selectInputMode,
   selectLocale,
   useTranslate,
@@ -63,6 +64,8 @@ export const RackTile: FunctionComponent<Props> = ({
   const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
+  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
+  const isHoverMatch = character !== null && hoveredCharacter !== null && hoveredCharacter === character;
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
     (event) => {
@@ -141,7 +144,7 @@ export const RackTile: FunctionComponent<Props> = ({
       autoFocus={inputMode === 'keyboard' && index === 0}
       className={classNames(styles.rackTile, className)}
       character={character === null ? undefined : character}
-      highlighted={tile !== null}
+      highlighted={tile !== null || isHoverMatch}
       inputRef={inputRef}
       isBlank={character === BLANK}
       isValid={isValid}

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -82,24 +82,26 @@ const TilePureBase: FunctionComponent<Props> = ({
   >
     {character || placeholder}
 
-    <input
-      aria-label={ariaLabel}
-      autoCapitalize="none"
-      autoComplete="off"
-      autoCorrect="off"
-      autoFocus={autoFocus}
-      className={styles.input}
-      disabled={disabled}
-      ref={inputRef}
-      spellCheck={false}
-      tabIndex={tabIndex}
-      value={character || ''}
-      onChange={onChange}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      onMouseDown={onMouseDown}
-      onTouchStart={onTouchStart}
-    />
+    {!disabled && (
+      <input
+        aria-label={ariaLabel}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        autoFocus={autoFocus}
+        className={styles.input}
+        disabled={disabled}
+        ref={inputRef}
+        spellCheck={false}
+        tabIndex={tabIndex}
+        value={character || ''}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+        onMouseDown={onMouseDown}
+        onTouchStart={onTouchStart}
+      />
+    )}
 
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>

package/packages/scrabble-solver/src/i18n/languages/english.json

@@ -13,6 +13,8 @@
   "common.consonants": "Consonants",
   "common.loading": "Loading",
   "common.next": "Next",
+  "common.off": "Off",
+  "common.on": "On",
   "common.points": "Points",
   "common.previous": "Previous",
   "common.space": "Spacebar",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "On the right",
   "settings.autoGroupTiles.null": "Do not group",
   "settings.game": "Game",
+  "settings.highlightUnreachableCells": "Highlight unreachable cells",
   "settings.inputMode": "Input mode",
   "settings.inputMode.keyboard": "Keyboard",
   "settings.inputMode.touchscreen": "Touchscreen",

package/packages/scrabble-solver/src/i18n/languages/french.json

@@ -13,6 +13,8 @@
   "common.consonants": "Consonnes",
   "common.loading": "Chargement",
   "common.next": "Suivant",
+  "common.off": "Désactivé",
+  "common.on": "Activé",
   "common.points": "Points",
   "common.previous": "Précédent",
   "common.space": "Barre d'espace",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "Vers la gauche",
   "settings.autoGroupTiles.null": "Ne pas grouper",
   "settings.game": "Jeu",
+  "settings.highlightUnreachableCells": "Mettre en évidence les cases inatteignables",
   "settings.inputMode": "Mode de saisie",
   "settings.inputMode.keyboard": "Clavier",
   "settings.inputMode.touchscreen": "Écran tactile",

package/packages/scrabble-solver/src/i18n/languages/german.json

@@ -13,6 +13,8 @@
   "common.consonants": "Konsonanten",
   "common.loading": "Laden",
   "common.next": "Weiter",
+  "common.off": "Aus",
+  "common.on": "Ein",
   "common.points": "Punkte",
   "common.previous": "Zurück",
   "common.space": "Leertaste",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "Rechte Seite",
   "settings.autoGroupTiles.null": "Nicht gruppieren",
   "settings.game": "Spiel",
+  "settings.highlightUnreachableCells": "Unerreichbare Felder hervorheben",
   "settings.inputMode": "Eingabemodus",
   "settings.inputMode.keyboard": "Tastatur",
   "settings.inputMode.touchscreen": "Touchscreen",

package/packages/scrabble-solver/src/i18n/languages/persian.json

@@ -13,6 +13,8 @@
   "common.consonants": "حروف صامت",
   "common.loading": "در حال بارگزاری",
   "common.next": "بعدی",
+  "common.off": "خاموش",
+  "common.on": "روشن",
   "common.points": "امتیازات",
   "common.previous": "قبلی",
   "common.space": "دکمه اسپیس",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "در سمت راست",
   "settings.autoGroupTiles.null": "کنار هم قرار  نده",
   "settings.game": "بازی",
+  "settings.highlightUnreachableCells": "خانه‌های غیرقابل دسترس را برجسته کن",
   "settings.inputMode": "حالت ورودی",
   "settings.inputMode.keyboard": "صفحه کلید",
   "settings.inputMode.touchscreen": "صفحه لمسی",

package/packages/scrabble-solver/src/i18n/languages/polish.json

@@ -13,6 +13,8 @@
   "common.consonants": "Spółgłoski",
   "common.loading": "Ładowanie",
   "common.next": "Następne",
+  "common.off": "Wyłączone",
+  "common.on": "Włączone",
   "common.points": "Punkty",
   "common.previous": "Poprzednie",
   "common.space": "Spacja",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "Po prawej",
   "settings.autoGroupTiles.null": "Nie grupuj",
   "settings.game": "Gra",
+  "settings.highlightUnreachableCells": "Wyróżnij nieosiągalne pola",
   "settings.inputMode": "Tryb wpisywania",
   "settings.inputMode.keyboard": "Klawiatura",
   "settings.inputMode.touchscreen": "Ekran dotykowy",

package/packages/scrabble-solver/src/i18n/languages/romanian.json

@@ -13,6 +13,8 @@
   "common.consonants": "Consoane",
   "common.loading": "Incarcare",
   "common.next": "Pasul urmator",
+  "common.off": "Dezactivat",
+  "common.on": "Activat",
   "common.points": "Puncte",
   "common.previous": "Pasul anterior",
   "common.space": "Bara de spațiu",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "In partea dreapta",
   "settings.autoGroupTiles.null": "Nu se grupeaza",
   "settings.game": "Joc",
+  "settings.highlightUnreachableCells": "Evidențiază celulele inaccesibile",
   "settings.inputMode": "Mod introducere",
   "settings.inputMode.keyboard": "Tastatura",
   "settings.inputMode.touchscreen": "Ecran",

package/packages/scrabble-solver/src/i18n/languages/spanish.json

@@ -13,6 +13,8 @@
   "common.consonants": "Consonantes",
   "common.loading": "Cargando",
   "common.next": "Siguiente",
+  "common.off": "Desactivado",
+  "common.on": "Activado",
   "common.points": "Puntos",
   "common.previous": "Anterior",
   "common.space": "Barra espaciadora",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "A la derecha",
   "settings.autoGroupTiles.null": "No agrupar",
   "settings.game": "Juego",
+  "settings.highlightUnreachableCells": "Resaltar casillas inalcanzables",
   "settings.inputMode": "Modo de entrada",
   "settings.inputMode.keyboard": "Teclado",
   "settings.inputMode.touchscreen": "Pantalla táctil",

package/packages/scrabble-solver/src/i18n/languages/turkish.json

@@ -13,6 +13,8 @@
   "common.consonants": "Ünlü harfler",
   "common.loading": "Yükleniyor",
   "common.next": "Sonraki",
+  "common.off": "Kapalı",
+  "common.on": "Açık",
   "common.points": "Puanlar",
   "common.previous": "Öncesi",
   "common.space": "Boşluk çubuğu",
@@ -64,6 +66,7 @@
   "settings.autoGroupTiles.right": "Sağdaki",
   "settings.autoGroupTiles.null": "Gruplamayın",
   "settings.game": "Oyun",
+  "settings.highlightUnreachableCells": "Ulaşılamayan kareleri vurgula",
   "settings.inputMode": "Giriş Methodu",
   "settings.inputMode.keyboard": "Klavye",
   "settings.inputMode.touchscreen": "Dokunmatik ekran",

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -43,3 +43,7 @@
   font-size: var(--font--size--m);
   white-space: nowrap;
 }
+
+.unused {
+  cursor: not-allowed;
+}

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -1,11 +1,18 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { type FunctionComponent } from 'react';
+import { type FunctionComponent, useCallback, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 
 import { Progress, Tile } from '@/components';
 import { LOCALE_FEATURES } from '@/i18n';
 import { REMAINING_TILES_TILE_SIZE } from '@/parameters';
-import { selectCharacterPoints, selectLocale, useTypedSelector } from '@/state';
+import {
+  hoveredTileSlice,
+  selectCharacterPoints,
+  selectHoveredCharacter,
+  selectLocale,
+  useTypedSelector,
+} from '@/state';
 import { type RemainingTile } from '@/types';
 
 import styles from './Character.module.scss';
@@ -15,7 +22,9 @@ interface Props {
 }
 
 export const Character: FunctionComponent<Props> = ({ tile }) => {
+  const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
   const { direction } = LOCALE_FEATURES[locale];
   const { character, count, usedCount } = tile;
 
@@ -27,19 +36,43 @@ export const Character: FunctionComponent<Props> = ({ tile }) => {
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const current = direction === 'ltr' ? remainingCount : count;
   const total = direction === 'ltr' ? count : remainingCount;
+  const isUsed = usedCount > 0;
+  const isHovered = isUsed && hoveredCharacter === character;
+
+  const handleMouseEnter = useCallback(() => {
+    if (!isUsed) {
+      return;
+    }
+    dispatch(hoveredTileSlice.actions.set(character));
+  }, [character, dispatch, isUsed]);
+
+  const handleMouseLeave = useCallback(() => {
+    dispatch(hoveredTileSlice.actions.clear());
+  }, [dispatch]);
+
+  useEffect(() => {
+    return () => {
+      dispatch(hoveredTileSlice.actions.clear());
+    };
+  }, [dispatch]);
 
   return (
     <div
       className={classNames(styles.character, {
         [styles.finished]: remainingCount <= 0,
         [styles.overused]: remainingCount < 0,
+        [styles.unused]: !isUsed,
       })}
+      data-testid={character === BLANK ? 'remaining-tile-blank' : `remaining-tile-${character}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
       <Tile
         aria-label={character}
         character={character}
         className={styles.tile}
         disabled
+        highlighted={isHovered}
         isBlank={character === BLANK}
         isValid={remainingCount >= 0}
         points={points}

package/packages/scrabble-solver/src/modals/SettingsModal/SettingsModal.tsx

@@ -7,6 +7,7 @@ import { useTranslate } from '@/state';
 import {
   AutoGroupTilesSetting,
   ConfigSetting,
+  HighlightUnreachableCellsSetting,
   InputModeSetting,
   LocaleSetting,
   ShowCoordinatesSetting,
@@ -50,6 +51,13 @@ const SettingsModalBase: FunctionComponent<Props> = ({ className, isOpen, onClos
       <Modal.Section label={translate('settings.removeCellFilters')} title={translate('settings.removeCellFilters')}>
         <RemoveCellFiltersSetting disabled={!isOpen} />
       </Modal.Section>
+
+      <Modal.Section
+        label={translate('settings.highlightUnreachableCells')}
+        title={translate('settings.highlightUnreachableCells')}
+      >
+        <HighlightUnreachableCellsSetting disabled={!isOpen} />
+      </Modal.Section>
     </Modal>
   );
 };

package/packages/scrabble-solver/src/modals/SettingsModal/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -19,6 +19,10 @@ export const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, dis
   const value = useTypedSelector(selectAutoGroupTiles);
 
   const options = [
+    {
+      label: translate('settings.autoGroupTiles.null'),
+      value: NULL_VALUE,
+    },
     {
       label: translate('settings.autoGroupTiles.left'),
       value: 'left',
@@ -27,10 +31,6 @@ export const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, dis
       label: translate('settings.autoGroupTiles.right'),
       value: 'right',
     },
-    {
-      label: translate('settings.autoGroupTiles.null'),
-      value: NULL_VALUE,
-    },
   ];
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {

package/packages/scrabble-solver/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.module.scss

@@ -0,0 +1,12 @@
+.option {
+  margin-bottom: var(--spacing--m);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}

package/packages/scrabble-solver/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/HighlightUnreachableCellsSetting.tsx

@@ -0,0 +1,51 @@
+import { type ChangeEvent, type FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Radio } from '@/components';
+import { selectHighlightUnreachableCells, settingsSlice, useTranslate, useTypedSelector } from '@/state';
+
+import styles from './HighlightUnreachableCellsSetting.module.scss';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+}
+
+export const HighlightUnreachableCellsSetting: FunctionComponent<Props> = ({ className, disabled }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const value = useTypedSelector(selectHighlightUnreachableCells);
+
+  const options = [
+    {
+      label: translate('common.off'),
+      value: 'off',
+    },
+    {
+      label: translate('common.on'),
+      value: 'on',
+    },
+  ];
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    dispatch(settingsSlice.actions.changeHighlightUnreachableCells(event.target.value === 'on'));
+  };
+
+  return (
+    <div className={className}>
+      {options.map((option) => (
+        <Radio
+          checked={(value ? 'on' : 'off') === option.value}
+          className={styles.option}
+          disabled={disabled}
+          key={option.value}
+          name="highlightUnreachableCells"
+          value={option.value}
+          onChange={handleChange}
+        >
+          <div className={styles.label}>{option.label}</div>
+        </Radio>
+      ))}
+    </div>
+  );
+};

package/packages/scrabble-solver/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/index.ts

@@ -0,0 +1 @@
+export { HighlightUnreachableCellsSetting } from './HighlightUnreachableCellsSetting';

package/packages/scrabble-solver/src/modals/SettingsModal/components/index.ts

@@ -1,5 +1,6 @@
 export { AutoGroupTilesSetting } from './AutoGroupTilesSetting';
 export { ConfigSetting } from './ConfigSetting';
+export { HighlightUnreachableCellsSetting } from './HighlightUnreachableCellsSetting';
 export { InputModeSetting } from './InputModeSetting';
 export { LocaleSetting } from './LocaleSetting';
 export { ShowCoordinatesSetting } from './ShowCoordinatesSetting';

package/packages/scrabble-solver/src/state/hoveredTile/index.ts

@@ -0,0 +1,4 @@
+export * from './initialState';
+export * from './selectors';
+export * from './slice';
+export * from './types';