scrabble-solver 2.16.1 → 2.16.3

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

@@ -52,6 +52,7 @@ const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOp
 
   return (
     <ReactModal
+      aria={{ modal: true }}
       className={{
         afterOpen: styles.afterOpen,
         base: styles.modal,
@@ -61,6 +62,7 @@ const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOp
       contentLabel={title}
       isOpen={isOpen}
       overlayClassName={styles.overlay}
+      role="dialog"
       shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
       onRequestClose={onClose}
     >

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

@@ -25,7 +25,12 @@ export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, st
   return (
     <div
       {...props}
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-valuenow={value}
+      aria-valuetext={`${percent.toLocaleString(locale)}%`}
       className={classNames(styles.progress, className)}
+      role="progressbar"
       style={{
         ...style,
         backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),

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/Radio/Radio.tsx

@@ -30,7 +30,7 @@ export const Radio: FunctionComponent<Props> = ({ checked, children, className,
       onChange={onChange}
     />
 
-    <div aria-hidden="true" className={styles.icon} role="img">
+    <div aria-hidden="true" className={styles.icon}>
       <div className={styles.iconContent} />
     </div>
 

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -50,6 +50,7 @@ export const Result = ({
 
   return (
     <button
+      aria-current={index === highlightedIndex ? 'true' : undefined}
       aria-hidden={isMatching ? undefined : 'true'}
       aria-label={result.word}
       className={classNames(styles.result, {

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

@@ -70,10 +70,16 @@ export const Results: FunctionComponent<Props> = ({ callbacks, className, highli
   }, [results, listRef, scrollToIndexRef]);
 
   return (
-    <div className={classNames(styles.results, className)} data-testid="results">
+    <div
+      aria-busy={isLoadingDebounced}
+      aria-label={translate('results')}
+      className={classNames(styles.results, className)}
+      data-testid="results"
+      role="region"
+    >
       <Header />
 
-      <div className={styles.content}>
+      <div aria-live="polite" className={styles.content}>
         {typeof error !== 'undefined' && (
           <EmptyState className={styles.emptyState} variant="error">
             {error.message}

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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Board: tile {{coordinates}}",
   "cell.toggle-direction": "Typing direction",
   "common.arrows": "Arrow keys",
   "common.blanks": "Blanks",
@@ -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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Plateau: la case {{coordinates}}",
   "cell.toggle-direction": "Direction d'écriture",
   "common.arrows": "Touches fléchées",
   "common.blanks": "Cases vides",
@@ -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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Brett: Stein {{coordinates}}",
   "cell.toggle-direction": "Schreibrichtung",
   "common.arrows": "Pfeiltasten",
   "common.blanks": "Blankos",
@@ -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

@@ -4,7 +4,7 @@
   "cell.filter-cell.include": "مقصد مورد نظر",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
-  "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
+  "cell.tile.location": "{{coordinates}} کاشی: صفحه",
   "cell.toggle-direction": "جهت تایپ",
   "common.arrows": "کلیدهای جهت دار",
   "common.blanks": "خالی",
@@ -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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Plansza: płytka {{coordinates}}",
   "cell.toggle-direction": "Kierunek wpisywania",
   "common.arrows": "Klawisze strzałek",
   "common.blanks": "Blanki",
@@ -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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Tabla: camp {{coordinates}}",
   "cell.toggle-direction": "Directie scriere",
   "common.arrows": "Sagetile",
   "common.blanks": "Jokeri",
@@ -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

@@ -4,7 +4,7 @@
   "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}})",
+  "cell.tile.location": "Tablero: espacio {{coordinates}}",
   "cell.toggle-direction": "Dirección de escritura",
   "common.arrows": "Teclas de flecha",
   "common.blanks": "Blancos",
@@ -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

@@ -4,7 +4,7 @@
   "cell.filter-cell.include": "Hedef varış noktası",
   "cell.set-blank": "Boş olarak işaretle",
   "cell.set-not-blank": "Boş değil olarak işaretle",
-  "cell.tile.location": "Tahta: harfler ({{x}}, {{y}})",
+  "cell.tile.location": "Tahta: harfler {{coordinates}}",
   "cell.toggle-direction": "Yazma yönü - geçiş yapmak için tıklayın",
   "common.arrows": "Ok tuşları",
   "common.blanks": "Jokerler",
@@ -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';

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

@@ -0,0 +1,5 @@
+import type { HoveredTileState } from './types';
+
+export const hoveredTileInitialState: HoveredTileState = {
+  character: null,
+};

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

@@ -0,0 +1,3 @@
+import type { RootState } from '../types';
+
+export const selectHoveredCharacter = (state: RootState): string | null => state.hoveredTile.character;

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

@@ -0,0 +1,16 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { hoveredTileInitialState } from './initialState';
+
+export const hoveredTileSlice = createSlice({
+  initialState: hoveredTileInitialState,
+  name: 'hoveredTile',
+  reducers: {
+    set: (state, action: PayloadAction<string>) => {
+      state.character = action.payload;
+    },
+    clear: (state) => {
+      state.character = null;
+    },
+  },
+});

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

@@ -0,0 +1,3 @@
+export interface HoveredTileState {
+  character: string | null;
+}

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

@@ -2,6 +2,7 @@ export * from './actions';
 export * from './board';
 export * from './cellFilters';
 export * from './dictionary';
+export * from './hoveredTile';
 export * from './localStorage';
 export * from './rack';
 export * from './results';

package/packages/scrabble-solver/src/state/localStorage.ts

@@ -12,6 +12,7 @@ const SETTINGS = 'settings';
 const LEGACY_KEYS: Record<keyof SettingsState, string> = {
   autoGroupTiles: 'auto-group-tiles',
   game: 'config-id',
+  highlightUnreachableCells: 'highlight-unreachable-cells',
   inputMode: 'input-mode',
   locale: 'locale',
   removeCellFilters: 'remove-cell-filters',

package/packages/scrabble-solver/src/state/settings/initialState.ts

@@ -10,6 +10,7 @@ const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis
 export const settingsInitialState: SettingsState = {
   autoGroupTiles: null,
   game: Game.Scrabble,
+  highlightUnreachableCells: false,
   inputMode: isTouchScreen ? 'touchscreen' : 'keyboard',
   locale: guessLocale(),
   removeCellFilters: 'always',

package/packages/scrabble-solver/src/state/settings/selectors.ts

@@ -19,6 +19,11 @@ export const selectAutoGroupTiles = createSelector([selectSettings], (settings)
 
 export const selectGame = createSelector([selectSettings], (settings) => settings.game);
 
+export const selectHighlightUnreachableCells = createSelector(
+  [selectSettings],
+  (settings) => settings.highlightUnreachableCells,
+);
+
 export const selectInputMode = createSelector([selectSettings], (settings) => settings.inputMode);
 
 export const selectLocale = createSelector([selectSettings], (settings) => settings.locale);

package/packages/scrabble-solver/src/state/settings/slice.ts

@@ -19,6 +19,11 @@ export const settingsSlice = createSlice({
       return { ...state, game };
     },
 
+    changeHighlightUnreachableCells: (state, action: PayloadAction<boolean>) => {
+      const highlightUnreachableCells = action.payload;
+      return { ...state, highlightUnreachableCells };
+    },
+
     changeInputMode: (state, action: PayloadAction<InputMode>) => {
       const inputMode = action.payload;
       return { ...state, inputMode };