@scrabble-solver/scrabble-solver 2.16.1 → 2.16.2

package/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/src/modals/SettingsModal/components/HighlightUnreachableCellsSetting/index.ts

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

package/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/src/state/hoveredTile/index.ts

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

package/src/state/hoveredTile/initialState.ts

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

package/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/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/src/state/hoveredTile/types.ts

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

package/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/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/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/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/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 };

package/src/state/settings/types.ts

@@ -5,6 +5,7 @@ import type { AutoGroupTiles, InputMode, RemoveCellFilters } from '@/types';
 export interface SettingsState {
   autoGroupTiles: AutoGroupTiles;
   game: Game;
+  highlightUnreachableCells: boolean;
   inputMode: InputMode;
   locale: Locale;
   showCoordinates: ShowCoordinates;

package/src/state/store.ts

@@ -4,6 +4,7 @@ import reduxSaga from 'redux-saga';
 import { boardSlice } from './board';
 import { cellFiltersSlice } from './cellFilters';
 import { dictionarySlice } from './dictionary';
+import { hoveredTileSlice } from './hoveredTile';
 import { rackSlice } from './rack';
 import { resultsSlice } from './results';
 import { rootSaga } from './sagas';
@@ -18,6 +19,7 @@ export const store = configureStore({
     board: boardSlice.reducer,
     cellFilters: cellFiltersSlice.reducer,
     dictionary: dictionarySlice.reducer,
+    hoveredTile: hoveredTileSlice.reducer,
     rack: rackSlice.reducer,
     results: resultsSlice.reducer,
     settings: settingsSlice.reducer,

package/src/state/types.ts

@@ -1,6 +1,7 @@
 import type { BoardState } from './board';
 import type { CellFiltersState } from './cellFilters';
 import type { DictionaryState } from './dictionary';
+import type { HoveredTileState } from './hoveredTile';
 import type { RackState } from './rack';
 import type { ResultsState } from './results';
 import type { SettingsState } from './settings';
@@ -11,6 +12,7 @@ export type RootState = {
   board: BoardState;
   cellFilters: CellFiltersState;
   dictionary: DictionaryState;
+  hoveredTile: HoveredTileState;
   rack: RackState;
   results: ResultsState;
   settings: SettingsState;

package/src/types/index.ts

@@ -89,6 +89,8 @@ export type TranslationKey =
   | 'common.blanks'
   | 'common.consonants'
   | 'common.next'
+  | 'common.off'
+  | 'common.on'
   | 'common.points'
   | 'common.previous'
   | 'common.space'
@@ -140,6 +142,7 @@ export type TranslationKey =
   | 'settings.autoGroupTiles.right'
   | 'settings.autoGroupTiles.null'
   | 'settings.game'
+  | 'settings.highlightUnreachableCells'
   | 'settings.inputMode'
   | 'settings.inputMode.keyboard'
   | 'settings.inputMode.touchscreen'