@scrabble-solver/scrabble-solver 2.11.3 → 2.11.5

package/src/i18n/pl.json

@@ -21,7 +21,7 @@
   "dictionary.empty-state.no-definitions": "Słowo istnieje w słowniku ale nie posiada definicji.",
   "dictionary.empty-state.no-results": "Nie udało się znaleźć definicji słowa w słowniku.",
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",
-  "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona słownikowa definicja ostatnio podświetlonego słowa.",
+  "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona definicja słowa.",
   "dictionary.input.placeholder": "Szukaj w słowniku...",
   "dictionary.input.title": "Słowa rozdzielone przecinkiem",
   "empty-state.error": "Błąd",
@@ -46,7 +46,7 @@
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
-  "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
+  "results.empty-state.outdated": "Wyniki są nieaktualne.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",
   "results.input.placeholder": "Szukaj rozwiązania... (RegExp)",
   "results.insert": "Wstaw",

package/src/lib/arrayEquals.ts

@@ -0,0 +1,5 @@
+const arrayEquals = <T>(array1: T[], array2: T[]): boolean => {
+  return array1.length === array2.length && array1.every((value, index) => value === array2[index]);
+};
+
+export default arrayEquals;

package/src/lib/index.ts

@@ -1,3 +1,4 @@
+export { default as arrayEquals } from './arrayEquals';
 export { default as canUseDom } from './canUseDom';
 export { default as createArray } from './createArray';
 export { default as createComparator } from './createComparator';

package/src/lib/zipCharactersAndTiles.ts

@@ -1,12 +1,14 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile } from '@scrabble-solver/types';
 
+import { Rack } from 'types';
+
 interface CharacterTilePair {
   character: string | null;
   tile: Tile | null;
 }
 
-const zipCharactersAndTiles = (characters: (string | null)[], tiles: Tile[]): CharacterTilePair[] => {
+const zipCharactersAndTiles = (characters: Rack, tiles: Tile[]): CharacterTilePair[] => {
   let remainingTiles = [...tiles];
 
   return characters.map((character) => {

package/src/modals/DictionaryModal/DictionaryModal.tsx

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

package/src/modals/KeyMapModal/KeyMapModal.tsx

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

package/src/modals/KeyMapModal/keys.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Key } from 'components';
 import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
 import { isMac } from 'lib';

package/src/modals/MenuModal/MenuModal.module.scss

@@ -23,11 +23,35 @@
   justify-content: space-between;
 }
 
-.flag {
-  --height: var(--button--icon--size);
+.settingsLabel {
+  @include ellipsis;
+
+  --quatar-flag-aspect-ratio: 2.545;
+  --highest-flag-aspect-ratio: var(--quatar-flag-aspect-ratio);
+  --aspect-ratio: var(--highest-flag-aspect-ratio);
+  --padding: calc(var(--spacing--l) + var(--button--icon--size) * var(--aspect-ratio));
+
+  [dir='ltr'] & {
+    padding-right: var(--padding);
+  }
+
+  [dir='rtl'] & {
+    padding-left: var(--padding);
+  }
+}
 
-  width: calc(var(--height) * var(--aspect--ratio));
-  height: var(--height);
+.flag {
+  position: fixed;
+  width: calc(var(--button--icon--size) * var(--aspect-ratio));
+  height: var(--button--icon--size);
   border-radius: var(--border--radius);
   box-shadow: 0 0 0 1px var(--box-shadow--color);
+
+  [dir='ltr'] & {
+    right: calc(2 * var(--spacing--l));
+  }
+
+  [dir='rtl'] & {
+    left: calc(2 * var(--spacing--l));
+  }
 }

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 }>) => {