@scrabble-solver/scrabble-solver 2.16.1 → 2.16.3

package/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/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/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/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/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/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/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'