@scrabble-solver/scrabble-solver 2.11.4 → 2.11.5

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Button, Modal } from 'components';
 import { LOCALE_FLAGS } from 'i18n';
@@ -18,7 +18,7 @@ interface Props {
   onShowWords: () => void;
 }
 
-const Menu: FunctionComponent<Props> = ({
+const MenuModal: FunctionComponent<Props> = ({
   className,
   isOpen,
   onClose,
@@ -63,7 +63,7 @@ const Menu: FunctionComponent<Props> = ({
 
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
         <div className={styles.settings}>
-          <span>{translate('settings')}</span>
+          <div className={styles.settingsLabel}>{translate('settings')}</div>
           <Flag.Icon className={styles.flag} />
         </div>
       </Button>
@@ -71,4 +71,4 @@ const Menu: FunctionComponent<Props> = ({
   );
 };
 
-export default Menu;
+export default memo(MenuModal);

package/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { LOCALE_FEATURES } from 'i18n';
@@ -56,4 +56,4 @@ const RemainingTilesModal: FunctionComponent<Props> = ({ className, isOpen, onCl
   );
 };
 
-export default RemainingTilesModal;
+export default memo(RemainingTilesModal);

package/src/modals/ResultsModal/ResultsModal.module.scss

@@ -13,12 +13,8 @@
 }
 
 .dictionary {
-  flex: 0 1 calc(var(--dictionary--height) - var(--text-input--height));
+  flex: 0 0 var(--dictionary--height--mobile);
   background-color: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-
-  @media (max-height: 600px) {
-    display: none;
-  }
 }

package/src/modals/ResultsModal/ResultsModal.tsx

@@ -1,8 +1,9 @@
 import { Result } from '@scrabble-solver/types';
-import { FunctionComponent, useMemo } from 'react';
+import { FunctionComponent, memo, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Button, Dictionary, Modal, Results } from 'components';
+import { useAppLayout } from 'hooks';
 import { Check, EyeFill } from 'icons';
 import { resultsSlice, selectResultCandidate, selectResults, useTranslate, useTypedSelector } from 'state';
 
@@ -17,6 +18,7 @@ interface Props {
 const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const { showResultsInModal } = useAppLayout();
   const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
   const index = results ? results.findIndex((result) => result.id === resultCandidate?.id) : -1;
@@ -49,6 +51,12 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
     onClose();
   };
 
+  useEffect(() => {
+    if (isOpen && !showResultsInModal) {
+      onClose();
+    }
+  }, [isOpen, onClose, showResultsInModal]);
+
   return (
     <Modal
       className={className}
@@ -88,4 +96,4 @@ const ResultsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default ResultsModal;
+export default memo(ResultsModal);

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Modal } from 'components';
 import { useTranslate } from 'state';
@@ -31,4 +31,4 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
   );
 };
 
-export default SettingsModal;
+export default memo(SettingsModal);

package/src/modals/SettingsModal/components/AutoGroupTilesSetting/lib.ts

@@ -1,6 +1,8 @@
+import { AutoGroupTiles } from 'types';
+
 import { NULL_VALUE } from './constants';
 
-export const parseValue = (value: string): 'left' | 'right' | null => {
+export const parseValue = (value: string): AutoGroupTiles => {
   if (value === 'left' || value === 'right') {
     return value;
   }

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -20,7 +20,7 @@
 .flag {
   --height: 32px;
 
-  width: calc(var(--height) * var(--aspect--ratio));
+  width: calc(var(--height) * var(--aspect-ratio));
   height: var(--height);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);

package/src/modals/WordsModal/WordsModal.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { Badge, Modal } from 'components';
 import { Check, Cross } from 'icons';
@@ -53,4 +53,4 @@ const WordsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) =>
   );
 };
 
-export default WordsModal;
+export default memo(WordsModal);

package/src/pages/index.module.scss

@@ -1,18 +1,3 @@
-@import 'styles/mixins';
-
-.index {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  opacity: 0;
-  overflow: auto;
-  transition: var(--transition--long);
-
-  &.initialized {
-    opacity: 1;
-  }
-}
-
 .nav {
   position: relative;
   z-index: 1;
@@ -23,7 +8,7 @@
   width: 100%;
   display: flex;
   align-items: flex-start;
-  padding: var(--spacing--l);
+  padding: var(--nav--padding);
 }
 
 .navLogo {
@@ -36,12 +21,9 @@
 }
 
 .logo {
-  height: 60px;
+  width: calc(var(--logo--aspect-ratio) * var(--logo--height));
+  height: var(--logo--height);
   user-select: none;
-
-  @include media('<l') {
-    height: 48px;
-  }
 }
 
 .solver {

package/src/pages/index.tsx

@@ -1,13 +1,11 @@
-import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { FunctionComponent, useEffect, useState } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 import ReactModal from 'react-modal';
 import { useDispatch } from 'react-redux';
-import { useEffectOnce, useMeasure } from 'react-use';
 
-import { Logo, LogoSplashScreen, NavButtons, Solver, SvgFontFix } from 'components';
-import { useAppLayout, useDirection, useLanguage, useLocalStorage } from 'hooks';
+import { Logo, NavButtons, Solver, SvgFontFix } from 'components';
+import { useDirection, useEffectOnce, useLanguage, useLocalStorage } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import {
   DictionaryModal,
@@ -33,7 +31,6 @@ interface Props {
 const Index: FunctionComponent<Props> = ({ version }) => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
-  const { showResultsInModal } = useAppLayout();
   const [showDictionary, setShowDictionary] = useState(false);
   const [showKeyMap, setShowKeyMap] = useState(false);
   const [showMenu, setShowMenu] = useState(false);
@@ -41,38 +38,36 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [showResults, setShowResults] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [showWords, setShowWords] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  const [indexRef, { height: indexHeight, width: indexWidth }] = useMeasure<HTMLDivElement>();
-  const [navRef, { height: navHeight }] = useMeasure<HTMLElement>();
-  const solverHeight = indexHeight - navHeight;
-  const solverWidth = indexWidth;
   const [isClient, setIsClient] = useState(false);
 
-  const handleClear = () => {
-    dispatch(reset());
-  };
+  const handleShowResults = useCallback(() => setShowResults(true), []);
+  const handleClear = useCallback(() => dispatch(reset()), [dispatch]);
+  const handleHideDictionary = useCallback(() => setShowDictionary(false), []);
+  const handleHideKeyMap = useCallback(() => setShowKeyMap(false), []);
+  const handleHideMenu = useCallback(() => setShowMenu(false), []);
+  const handleHideRemainingTiles = useCallback(() => setShowRemainingTiles(false), []);
+  const handleHideResults = useCallback(() => setShowResults(false), []);
+  const handleHideSettings = useCallback(() => setShowSettings(false), []);
+  const handleHideWords = useCallback(() => setShowWords(false), []);
+  const handleShowDictionary = useCallback(() => setShowDictionary(true), []);
+  const handleShowKeyMap = useCallback(() => setShowKeyMap(true), []);
+  const handleShowMenu = useCallback(() => setShowMenu(true), []);
+  const handleShowRemainingTiles = useCallback(() => setShowRemainingTiles(true), []);
+  const handleShowSettings = useCallback(() => setShowSettings(true), []);
+  const handleShowWords = useCallback(() => setShowWords(true), []);
 
   useDirection(LOCALE_FEATURES[locale].direction);
   useLanguage(locale);
   useLocalStorage();
 
   useEffectOnce(() => {
-    setIsClient(true);
-    dispatch(initialize());
-    setIsInitialized(true);
-  });
-
-  useEffect(() => {
-    if (!showResultsInModal) {
-      setShowResults(false);
-    }
-  }, [showResultsInModal]);
-
-  useEffect(() => {
     if (process.env.NODE_ENV === 'production') {
       registerServiceWorker();
     }
-  }, []);
+
+    setIsClient(true);
+    dispatch(initialize());
+  });
 
   if (!isClient) {
     return null;
@@ -82,58 +77,47 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     <>
       <SvgFontFix />
 
-      <div className={classNames(styles.index, { [styles.initialized]: isInitialized })} ref={indexRef}>
-        <nav className={styles.nav} ref={navRef}>
-          <div className={styles.navContent}>
-            <div className={styles.navLogo}>
-              <a className={styles.logoContainer} href="/" title={version}>
-                <Logo className={styles.logo} />
-              </a>
-            </div>
-
-            <NavButtons
-              onClear={handleClear}
-              onShowKeyMap={() => setShowKeyMap(true)}
-              onShowMenu={() => setShowMenu(true)}
-              onShowRemainingTiles={() => setShowRemainingTiles(true)}
-              onShowSettings={() => setShowSettings(true)}
-              onShowWords={() => setShowWords(true)}
-            />
+      <nav className={styles.nav}>
+        <div className={styles.navContent}>
+          <div className={styles.navLogo}>
+            <a className={styles.logoContainer} href="/" title={version}>
+              <Logo className={styles.logo} />
+            </a>
           </div>
-        </nav>
-
-        {solverHeight > 0 && solverWidth > 0 && (
-          <Solver
-            className={styles.solver}
-            height={solverHeight}
-            width={solverWidth}
-            onShowResults={() => setShowResults(true)}
+
+          <NavButtons
+            onClear={handleClear}
+            onShowKeyMap={handleShowKeyMap}
+            onShowMenu={handleShowMenu}
+            onShowRemainingTiles={handleShowRemainingTiles}
+            onShowSettings={handleShowSettings}
+            onShowWords={handleShowWords}
           />
-        )}
-      </div>
+        </div>
+      </nav>
+
+      <Solver className={styles.solver} onShowResults={handleShowResults} />
 
       <MenuModal
         isOpen={showMenu}
-        onClose={() => setShowMenu(false)}
-        onShowDictionary={() => setShowDictionary(true)}
-        onShowRemainingTiles={() => setShowRemainingTiles(true)}
-        onShowSettings={() => setShowSettings(true)}
-        onShowWords={() => setShowWords(true)}
+        onClose={handleHideMenu}
+        onShowDictionary={handleShowDictionary}
+        onShowRemainingTiles={handleShowRemainingTiles}
+        onShowSettings={handleShowSettings}
+        onShowWords={handleShowWords}
       />
 
-      <SettingsModal isOpen={showSettings} onClose={() => setShowSettings(false)} />
-
-      <KeyMapModal isOpen={showKeyMap} onClose={() => setShowKeyMap(false)} />
+      <SettingsModal isOpen={showSettings} onClose={handleHideSettings} />
 
-      <WordsModal isOpen={showWords} onClose={() => setShowWords(false)} />
+      <KeyMapModal isOpen={showKeyMap} onClose={handleHideKeyMap} />
 
-      <RemainingTilesModal isOpen={showRemainingTiles} onClose={() => setShowRemainingTiles(false)} />
+      <WordsModal isOpen={showWords} onClose={handleHideWords} />
 
-      <ResultsModal isOpen={showResults} onClose={() => setShowResults(false)} />
+      <RemainingTilesModal isOpen={showRemainingTiles} onClose={handleHideRemainingTiles} />
 
-      <DictionaryModal isOpen={showDictionary} onClose={() => setShowDictionary(false)} />
+      <ResultsModal isOpen={showResults} onClose={handleHideResults} />
 
-      <LogoSplashScreen forceShow={!isInitialized} />
+      <DictionaryModal isOpen={showDictionary} onClose={handleHideDictionary} />
     </>
   );
 };

package/src/parameters/index.ts

@@ -19,8 +19,14 @@ export const COLOR_GREEN = '#bae3ba';
 export const COLOR_RED = '#f7c2aa';
 export const COLOR_YELLOW = '#efe3ae';
 
-export const COMPONENTS_SPACING = 40;
-export const COMPONENTS_SPACING_SMALL = 20;
+export const SPACING_XS = 2;
+export const SPACING_S = 5;
+export const SPACING_M = 10;
+export const SPACING_L = 20;
+export const SPACING_XL = 40;
+
+export const COMPONENTS_SPACING = SPACING_XL;
+export const COMPONENTS_SPACING_SMALL = SPACING_L;
 
 export const BOARD_CELL_ACTIONS_OFFSET = 3;
 export const BOARD_CELL_BORDER_WIDTH = 1;
@@ -36,6 +42,23 @@ export const BOARD_TILE_SIZE_MIN = 20;
 
 export const BORDER_WIDTH = 1;
 
+export const BUTTON_ICON_SIZE = 24;
+export const BUTTON_PADDING_VERTICAL = SPACING_M;
+export const BUTTON_HEIGHT = BUTTON_ICON_SIZE + 2 * BUTTON_PADDING_VERTICAL + 2 * BORDER_WIDTH;
+
+export const DICTIONARY_HEIGHT = 260;
+export const DICTIONARY_HEIGHT_MOBILE = 110;
+
+export const LOGO_ASPECT_RATIO = 682 / 166;
+export const LOGO_HEIGHT = 60;
+export const LOGO_HEIGHT_SMALL = 48;
+export const LOGO_SRC = '/logo.svg';
+
+export const MODAL_WIDTH = 370;
+export const MODAL_HEADER_HEIGHT = 45;
+
+export const NAV_PADDING = SPACING_L;
+
 export const TILE_SIZE = 80;
 
 export const PLAIN_TILES_COLOR_DEFAULT = COLOR_GREEN;
@@ -67,10 +90,14 @@ export const RACK_TILE_SIZE_MAX = 80;
 
 export const REMAINING_TILES_TILE_SIZE = 50;
 
+export const RESULTS_HEADER_HEIGHT = 35;
+
 export const RESULTS_ITEM_HEIGHT = 40;
 
 export const SOLVER_COLUMN_WIDTH = 580;
 
+export const TEXT_INPUT_HEIGHT = 40;
+
 export const TILE_APPEAR_DURATION = 200;
 
 export const TILE_APPEAR_KEYFRAMES = [

package/src/state/localStorage.ts

@@ -1,6 +1,9 @@
 import { Board, Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
+import { AutoGroupTiles, Rack } from 'types';
+
+const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
 const CONFIG_ID = 'config-id';
 const LOCALE = 'locale';
@@ -9,6 +12,14 @@ const RACK = 'rack';
 const store = store2.namespace('scrabble-solver');
 
 const localStorage = {
+  getAutoGroupTiles(): AutoGroupTiles | undefined {
+    return store.get(AUTO_GROUP_TILES);
+  },
+
+  setAutoGroupTiles(autoGroupTiles: AutoGroupTiles | undefined): void {
+    store.set(AUTO_GROUP_TILES, autoGroupTiles, true);
+  },
+
   getBoard(): Board | undefined {
     const serialized = store.get(BOARD);
     return serialized ? Board.fromJson(JSON.parse(serialized)) : serialized;
@@ -35,11 +46,11 @@ const localStorage = {
     store.set(LOCALE, locale, true);
   },
 
-  getRack(): (string | null)[] | undefined {
+  getRack(): Rack | undefined {
     return store.get(RACK);
   },
 
-  setRack(rack: (string | null)[] | undefined): void {
+  setRack(rack: Rack | undefined): void {
     store.set(RACK, rack, true);
   },
 };

package/src/state/sagas.ts

@@ -1,3 +1,5 @@
+/* eslint-disable max-lines */
+
 import { PayloadAction } from '@reduxjs/toolkit';
 import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale, Result } from '@scrabble-solver/types';
@@ -15,6 +17,7 @@ import {
   selectDictionary,
   selectLocale,
   selectLocaleAutoGroupTiles,
+  selectRack,
 } from './selectors';
 import {
   boardSlice,
@@ -105,9 +108,14 @@ function* onDictionarySubmit(): AnyGenerator {
 }
 
 function* onInitialize(): AnyGenerator {
+  const board = yield select(selectBoard);
+
   yield call(visit);
-  yield* ensureProperTilesCount();
-  yield put(verifySlice.actions.submit());
+
+  if (!board.isEmpty()) {
+    yield* ensureProperTilesCount();
+    yield put(verifySlice.actions.submit());
+  }
 }
 
 function* onReset(): AnyGenerator {
@@ -191,13 +199,13 @@ function* onVerify(): AnyGenerator {
 
 function* ensureProperTilesCount(): AnyGenerator {
   const { config } = yield select(selectConfig);
-  const characters = yield select(selectCharacters);
+  const rack = yield select(selectRack);
 
-  if (config.maximumCharactersCount > characters.length) {
-    const differenceCount = Math.abs(config.maximumCharactersCount - characters.length);
-    yield put(rackSlice.actions.init([...characters, ...Array(differenceCount).fill(null)]));
-  } else if (config.maximumCharactersCount < characters.length) {
-    const nonNulls = characters.filter(Boolean).slice(0, config.maximumCharactersCount);
+  if (config.maximumCharactersCount > rack.length) {
+    const differenceCount = Math.abs(config.maximumCharactersCount - rack.length);
+    yield put(rackSlice.actions.init([...rack, ...Array(differenceCount).fill(null)]));
+  } else if (config.maximumCharactersCount < rack.length) {
+    const nonNulls = rack.filter(Boolean).slice(0, config.maximumCharactersCount);
     const differenceCount = Math.abs(config.maximumCharactersCount - nonNulls.length);
     const autoGroupTiles = yield select(selectLocaleAutoGroupTiles);
     yield put(rackSlice.actions.init([...nonNulls, ...Array(differenceCount).fill(null)]));

package/src/state/slices/boardInitialState.ts

@@ -1,13 +1,17 @@
 import { getLocaleConfig } from '@scrabble-solver/configs';
 import { Board } from '@scrabble-solver/types';
 
+import localStorage from '../localStorage';
+
 import settingsInitialState from './settingsInitialState';
 
 export type BoardState = Board;
 
 const { configId, locale } = settingsInitialState;
 const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
-const boardInitialState: BoardState = Board.create(boardWidth, boardHeight);
+export const boardDefaultState = Board.create(boardWidth, boardHeight);
+
+const boardInitialState: BoardState = localStorage.getBoard() || boardDefaultState;
 
 // const createOxyphenbutazone = () => {
 //   // Tiles: oypbaze

package/src/state/slices/boardSlice.ts

@@ -2,7 +2,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Board, Cell, Result, Tile } from '@scrabble-solver/types';
 
-import boardInitialState from './boardInitialState';
+import boardInitialState, { boardDefaultState } from './boardInitialState';
 
 const boardSlice = createSlice({
   initialState: boardInitialState,
@@ -43,7 +43,7 @@ const boardSlice = createSlice({
     },
 
     reset: () => {
-      return boardInitialState;
+      return boardDefaultState;
     },
 
     toggleCellIsBlank: (state, action: PayloadAction<{ x: number; y: number }>) => {

package/src/state/slices/rackInitialState.ts

@@ -1,5 +1,11 @@
-export type RackState = (string | null)[];
+import { Rack } from 'types';
 
-const rackInitialState: RackState = [null, null, null, null, null, null, null];
+import localStorage from '../localStorage';
+
+export type RackState = Rack;
+
+export const rackDefaultState: RackState = [null, null, null, null, null, null, null];
+
+const rackInitialState: RackState = localStorage.getRack() || rackDefaultState;
 
 export default rackInitialState;

package/src/state/slices/rackSlice.ts

@@ -1,9 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Tile } from '@scrabble-solver/types';
 
-import { createNullMovingComparator, inverseDirection, zipCharactersAndTiles } from 'lib';
+import { arrayEquals, createNullMovingComparator, inverseDirection, zipCharactersAndTiles } from 'lib';
+import { AutoGroupTiles, Rack } from 'types';
 
-import rackInitialState from './rackInitialState';
+import rackInitialState, { rackDefaultState } from './rackInitialState';
 
 const rackSlice = createSlice({
   initialState: rackInitialState,
@@ -14,28 +15,30 @@ const rackSlice = createSlice({
       return [...state.slice(0, index), character, ...state.slice(index + 1)];
     },
 
-    changeCharacters: (state, action: PayloadAction<{ characters: (string | null)[]; index: number }>) => {
+    changeCharacters: (state, action: PayloadAction<{ characters: Rack; index: number }>) => {
       const { characters, index } = action.payload;
+
+      if (characters.length === 0) {
+        return state;
+      }
+
       const expectedRackLength = state.length;
       const rack = [...state.slice(0, index), ...characters, ...state.slice(index + characters.length)];
       return rack.slice(0, expectedRackLength);
     },
 
-    groupTiles: (state, action: PayloadAction<'left' | 'right' | null>) => {
-      const direction = action.payload;
-
-      if (direction === null) {
+    groupTiles: (state, action: PayloadAction<AutoGroupTiles>) => {
+      if (action.payload === null) {
         return state;
       }
 
-      const nullMovingComparator = createNullMovingComparator(inverseDirection(direction));
+      const nullMovingComparator = createNullMovingComparator(inverseDirection(action.payload));
       const sortedTiles = [...state].sort(nullMovingComparator);
-      return sortedTiles;
+      return arrayEquals(state, sortedTiles) ? state : sortedTiles;
     },
 
-    init: (_state, action: PayloadAction<(string | null)[]>) => {
-      const rack = action.payload;
-      return rack;
+    init: (state, action: PayloadAction<Rack>) => {
+      return arrayEquals(state, action.payload) ? state : action.payload;
     },
 
     removeTiles: (state, action: PayloadAction<Tile[]>) => {
@@ -45,7 +48,7 @@ const rackSlice = createSlice({
       return charactersWithoutMatchingTiles;
     },
 
-    reset: () => rackInitialState,
+    reset: () => rackDefaultState,
   },
 });
 

package/src/state/slices/settingsInitialState.ts

@@ -2,17 +2,22 @@ import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
 import { guessLocale } from 'lib';
+import { AutoGroupTiles } from 'types';
+
+import localStorage from '../localStorage';
 
 export interface SettingsState {
-  autoGroupTiles: 'left' | 'right' | null;
+  autoGroupTiles: AutoGroupTiles;
   configId: typeof literaki.id | typeof scrabble.id;
   locale: Locale;
 }
 
+const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
+
 const settingsInitialState: SettingsState = {
-  autoGroupTiles: 'left',
-  configId: scrabble.id,
-  locale: guessLocale(),
+  autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
+  configId: localStorage.getConfigId() || scrabble.id,
+  locale: localStorage.getLocale() || guessLocale(),
 };
 
 export default settingsInitialState;

package/src/state/slices/settingsSlice.ts

@@ -1,13 +1,15 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Locale } from '@scrabble-solver/types';
 
+import { AutoGroupTiles } from 'types';
+
 import settingsInitialState from './settingsInitialState';
 
 const settingsSlice = createSlice({
   initialState: settingsInitialState,
   name: 'settings',
   reducers: {
-    changeAutoGroupTiles: (state, action: PayloadAction<'left' | 'right' | null>) => {
+    changeAutoGroupTiles: (state, action: PayloadAction<AutoGroupTiles>) => {
       const autoGroupTiles = action.payload;
       return { ...state, autoGroupTiles };
     },