@scrabble-solver/scrabble-solver 2.12.1 → 2.12.3

package/src/modals/MenuModal/MenuModal.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent, memo } from 'react';
 
 import { Button, Modal } from 'components';
-import { LOCALE_FLAGS } from 'i18n';
+import { LOCALE_FEATURES } from 'i18n';
 import { BookHalf, CardChecklist, Cog, Github, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
@@ -29,7 +29,7 @@ const MenuModal: FunctionComponent<Props> = ({
 }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
-  const Flag = LOCALE_FLAGS[locale];
+  const { Icon } = LOCALE_FEATURES[locale];
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
@@ -64,7 +64,7 @@ const MenuModal: FunctionComponent<Props> = ({
       <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
         <div className={styles.settings}>
           <div className={styles.settingsLabel}>{translate('settings')}</div>
-          <Flag.Icon className={styles.flag} />
+          <Icon className={styles.flag} />
         </div>
       </Button>
     </Modal>

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent, memo } from 'react';
 
 import { Modal } from 'components';
+import { useIsTouchDevice } from 'hooks';
 import { useTranslate } from 'state';
 
 import { AutoGroupTilesSetting, ConfigSetting, InputModeSetting, LocaleSetting } from './components';
@@ -13,6 +14,7 @@ interface Props {
 
 const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('settings')} onClose={onClose}>
@@ -24,9 +26,11 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
         <LocaleSetting disabled={!isOpen} />
       </Modal.Section>
 
-      <Modal.Section title={translate('settings.inputMode')}>
-        <InputModeSetting disabled={!isOpen} />
-      </Modal.Section>
+      {!isTouchDevice && (
+        <Modal.Section title={translate('settings.inputMode')}>
+          <InputModeSetting disabled={!isOpen} />
+        </Modal.Section>
+      )}
 
       <Modal.Section title={translate('settings.autoGroupTiles')}>
         <AutoGroupTilesSetting disabled={!isOpen} />

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.tsx

@@ -1,11 +1,12 @@
+import { games, hasConfig } from '@scrabble-solver/configs';
+import { isGame } from '@scrabble-solver/types';
 import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';
-import { selectConfigId, settingsSlice, useTypedSelector } from 'state';
+import { selectGame, selectLocale, settingsSlice, useTypedSelector } from 'state';
 
 import styles from './ConfigSetting.module.scss';
-import options from './options';
 
 interface Props {
   className?: string;
@@ -14,21 +15,29 @@ interface Props {
 
 const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
-  const configId = useTypedSelector(selectConfigId);
+  const game = useTypedSelector(selectGame);
+  const locale = useTypedSelector(selectLocale);
+  const options = Object.values(games).map((gameConfig) => ({
+    disabled: !hasConfig(gameConfig.game, locale),
+    label: gameConfig.name,
+    value: gameConfig.game,
+  }));
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    dispatch(settingsSlice.actions.changeConfigId(event.target.value));
+    if (isGame(event.target.value)) {
+      dispatch(settingsSlice.actions.changeGame(event.target.value));
+    }
   };
 
   return (
     <div className={className}>
       {options.map((option) => (
         <Radio
-          checked={configId === option.value}
+          checked={game === option.value}
           className={styles.option}
-          disabled={disabled}
+          disabled={disabled || option.disabled}
           key={option.value}
-          name="configId"
+          name="game"
           value={option.value}
           onChange={handleChange}
         >

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

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

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Radio } from 'components';
-import { LOCALE_FLAGS } from 'i18n';
+import { LOCALE_FEATURES } from 'i18n';
 import { selectLocale, settingsSlice, useTypedSelector } from 'state';
 
 import styles from './LocaleSetting.module.scss';
@@ -14,7 +14,7 @@ interface Props {
   disabled: boolean;
 }
 
-const OPTIONS = Object.values(LOCALE_FLAGS).sort((a, b) => a.name.localeCompare(b.name));
+const OPTIONS = Object.values(LOCALE_FEATURES).sort((a, b) => a.name.localeCompare(b.name));
 
 const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
@@ -29,18 +29,18 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
     <div className={className}>
       {OPTIONS.map(({ Icon, ...option }) => (
         <Radio
-          checked={locale === option.value}
+          checked={locale === option.locale}
           className={classNames(styles.option, className, {
-            [styles.checked]: locale === option.value,
+            [styles.checked]: locale === option.locale,
           })}
           disabled={disabled}
-          key={option.value}
+          key={option.locale}
           name="locale"
-          value={option.value}
+          value={option.locale}
           onChange={handleChange}
         >
-          <span className={classNames(styles.label, option.className)}>
-            <Icon className={classNames(styles.flag, option.className)} />
+          <span className={styles.label}>
+            <Icon className={styles.flag} />
 
             <span>{option.label}</span>
           </span>

package/src/pages/_app.tsx

@@ -10,12 +10,14 @@ import 'styles/global.scss';
 
 const DESCRIPTION =
   // eslint-disable-next-line max-len
-  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring words using given letters and board state. Available in English, French, German, Polish & Spanish.';
+  'Scrabble Solver 2 - Free and open-source analysis tool for Scrabble, Super Scrabble & Literaki. Quickly find top scoring words using given letters and board state. Available in English, French, German, Polish & Spanish.';
 
 const KEYWORDS = [
   'Scrabble Solver',
   'Scrabble',
   'Solver',
+  'Super Scrabble',
+  'Super Scrabble Solver',
   'Board',
   'Open-source',
   'Open',

package/src/pages/api/dictionary/[locale]/[word].ts

@@ -1,8 +1,8 @@
-import { scrabble } from '@scrabble-solver/configs';
+import { games } from '@scrabble-solver/configs';
 import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
-import { isLocale, Locale } from '@scrabble-solver/types';
+import { Locale, isLocale } from '@scrabble-solver/types';
 import { getWordDefinition } from '@scrabble-solver/word-definitions';
 import { NextApiRequest, NextApiResponse } from 'next';
 
@@ -13,7 +13,10 @@ interface RequestData {
   words: string[];
 }
 
-const MAXIMUM_COLLISIONS_COUNT = scrabble['en-US'].maximumCharactersCount;
+const MAXIMUM_COLLISIONS_COUNT = Object.values(games).reduce(
+  (result, game) => Math.max(result, game.maximumCharactersCount),
+  0,
+);
 const MAXIMUM_WORDS_COUNT = MAXIMUM_COLLISIONS_COUNT + 1;
 
 const dictionary = async (request: NextApiRequest, response: NextApiResponse): Promise<void> => {

package/src/pages/api/solve.ts

@@ -1,9 +1,9 @@
-import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
+import { getConfig, hasConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
 import { solve as solveScrabble } from '@scrabble-solver/solver';
-import { Board, Config, isBoardJson, isLocale, Locale, Tile } from '@scrabble-solver/types';
+import { Board, Config, Locale, Tile, isBoardJson, isGame, isLocale } from '@scrabble-solver/types';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid, isCharacterValid } from 'api';
@@ -29,7 +29,7 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
         boardBlanksCount: board.getBlanksCount(),
         boardTilesCount: board.getTilesCount(),
         characters: characters.join(''),
-        configId: request.body.configId,
+        game: request.body.game,
         locale,
       },
     });
@@ -46,21 +46,25 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
 };
 
 const parseRequest = (request: NextApiRequest): RequestData => {
-  const { board: boardJson, characters, configId, locale } = request.body;
+  const { board: boardJson, characters, game, locale } = request.body;
 
   if (!isLocale(locale)) {
     throw new Error('Invalid "locale" parameter');
   }
 
-  if (!isConfigId(configId)) {
-    throw new Error('Invalid "configId" parameter');
+  if (!isGame(game)) {
+    throw new Error('Invalid "game" parameter');
   }
 
   if (!isStringArray(characters) || characters.length === 0) {
     throw new Error('Invalid "characters" parameter');
   }
 
-  const config = getLocaleConfig(configId, locale);
+  if (!hasConfig(game, locale)) {
+    throw new Error(`No game "${game}" in "${locale}"`);
+  }
+
+  const config = getConfig(game, locale);
 
   for (const character of characters) {
     if (!isCharacterValid(character)) {

package/src/pages/api/verify.ts

@@ -1,7 +1,7 @@
-import { getLocaleConfig, isConfigId } from '@scrabble-solver/configs';
+import { getConfig, hasConfig } from '@scrabble-solver/configs';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
-import { Board, Config, isBoardJson, isLocale, Locale } from '@scrabble-solver/types';
+import { Board, Config, Locale, isBoardJson, isGame, isLocale } from '@scrabble-solver/types';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { getServerLoggingData, isBoardValid } from 'api';
@@ -24,7 +24,7 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
         board: board.toString(),
         boardBlanksCount: board.getBlanksCount(),
         boardTilesCount: board.getTilesCount(),
-        configId: request.body.configId,
+        game: request.body.game,
         locale,
       },
     });
@@ -42,17 +42,21 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
 };
 
 const parseRequest = (request: NextApiRequest): RequestData => {
-  const { board: boardJson, configId, locale } = request.body;
+  const { board: boardJson, game, locale } = request.body;
 
   if (!isLocale(locale)) {
     throw new Error('Invalid "locale" parameter');
   }
 
-  if (!isConfigId(configId)) {
-    throw new Error('Invalid "configId" parameter');
+  if (!isGame(game)) {
+    throw new Error('Invalid "game" parameter');
   }
 
-  const config = getLocaleConfig(configId, locale);
+  if (!hasConfig(game, locale)) {
+    throw new Error(`No game "${game}" in "${locale}"`);
+  }
+
+  const config = getConfig(game, locale);
 
   if (!isBoardJson(boardJson) || !isBoardValid(boardJson, config)) {
     throw new Error('Invalid "board" parameter');

package/src/pages/index.module.scss

@@ -21,7 +21,6 @@
 }
 
 .logo {
-  width: calc(var(--logo--aspect-ratio) * var(--logo--height));
   height: var(--logo--height);
   user-select: none;
 }

package/src/parameters/index.ts

@@ -25,9 +25,11 @@ export const COLOR_BONUS_CHARACTER_3 = '#dde4f6';
 export const COLOR_BONUS_CHARACTER_5 = '#fbe0d4';
 export const COLOR_BONUS_CHARACTER_MULTIPLIER_2 = '#b8d5ed';
 export const COLOR_BONUS_CHARACTER_MULTIPLIER_3 = '#86aed1';
+export const COLOR_BONUS_CHARACTER_MULTIPLIER_4 = '#3477b2';
 export const COLOR_BONUS_START = '#b284b8';
 export const COLOR_BONUS_WORD_MULTIPLIER_2 = '#fbc997';
 export const COLOR_BONUS_WORD_MULTIPLIER_3 = '#f19393';
+export const COLOR_BONUS_WORD_MULTIPLIER_4 = '#ed5e5e';
 export const COLOR_FILTERED = '#444';
 
 export const COLOR_BONUS_CHARACTER: Record<number, string> = {
@@ -40,11 +42,13 @@ export const COLOR_BONUS_CHARACTER: Record<number, string> = {
 export const COLOR_BONUS_CHARACTER_MULTIPLIER: Record<number, string> = {
   2: COLOR_BONUS_CHARACTER_MULTIPLIER_2,
   3: COLOR_BONUS_CHARACTER_MULTIPLIER_3,
+  4: COLOR_BONUS_CHARACTER_MULTIPLIER_4,
 };
 
 export const COLOR_BONUS_WORD: Record<number, string> = {
   2: COLOR_BONUS_WORD_MULTIPLIER_2,
   3: COLOR_BONUS_WORD_MULTIPLIER_3,
+  4: COLOR_BONUS_WORD_MULTIPLIER_4,
 };
 
 export const SPACING_XS = 2;
@@ -61,12 +65,6 @@ export const BOARD_CELL_BORDER_WIDTH = 1;
 export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
 export const BOARD_TILE_SIZE_MAX = 64;
-/**
- * 20 - fits all board tiles without horizontal scrollbar on 360px viewport width (font-size: 14px)
- * 21 - fits all board tiles without horizontal scrollbar on 375px viewport width (font-size: 14px)
- * 26 - tiles start to look good (font-size: 16px)
- */
-export const BOARD_TILE_SIZE_MIN = 20;
 
 export const BORDER_COLOR = '#cdcdcd';
 export const BORDER_COLOR_LIGHT = '#d9d9d9';

package/src/sdk/solve.ts

@@ -5,14 +5,14 @@ import fetchJson from './fetchJson';
 interface Payload {
   board: BoardJson;
   characters: string[];
-  configId: string;
+  game: string;
   locale: Locale;
 }
 
-const solve = async ({ board, characters, configId, locale }: Payload): Promise<Result[]> => {
+const solve = async ({ board, characters, game, locale }: Payload): Promise<Result[]> => {
   const json = await fetchJson<ResultJson[]>('/api/solve', {
     method: 'POST',
-    body: JSON.stringify({ board, characters, configId, locale }),
+    body: JSON.stringify({ board, characters, game, locale }),
   });
 
   return json.map(Result.fromJson);

package/src/sdk/verify.ts

@@ -4,7 +4,7 @@ import fetchJson from './fetchJson';
 
 interface Payload {
   board: BoardJson;
-  configId: string;
+  game: string;
   locale: Locale;
 }
 
@@ -13,10 +13,10 @@ interface Response {
   validWords: string[];
 }
 
-const verify = async ({ board, configId, locale }: Payload): Promise<Response> => {
+const verify = async ({ board, game, locale }: Payload): Promise<Response> => {
   return fetchJson<Response>('/api/verify', {
     method: 'POST',
-    body: JSON.stringify({ board, configId, locale }),
+    body: JSON.stringify({ board, game, locale }),
   });
 };
 

package/src/service-worker/routeSolveRequests.ts

@@ -2,7 +2,7 @@ import { Trie } from '@kamilmielnik/trie';
 import { getConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { solve } from '@scrabble-solver/solver';
-import { Board, Locale, Tile } from '@scrabble-solver/types';
+import { Board, Tile } from '@scrabble-solver/types';
 import { registerRoute } from 'workbox-routing';
 
 import average from './average';
@@ -33,10 +33,10 @@ const routeSolveRequests = () => {
   registerRoute(
     ({ url }) => url.origin === location.origin && url.pathname === '/api/solve',
     async ({ request }) => {
-      const { board, characters, configId, locale } = await request.clone().json();
+      const { board, characters, game, locale } = await request.clone().json();
 
       const solveLocal = async (trie: Trie) => {
-        const config = getConfig(configId)[locale as Locale];
+        const config = getConfig(game, locale);
         const tiles = characters.map((character: string) => new Tile({ character, isBlank: character === BLANK }));
         const resultsJson = solve(trie, config, Board.fromJson(board), tiles);
         const json = JSON.stringify(resultsJson);

package/src/state/localStorage.ts

@@ -1,11 +1,11 @@
-import { Board, Locale } from '@scrabble-solver/types';
+import { Board, Game, Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
 import { AutoGroupTiles, InputMode, Rack } from 'types';
 
 const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
-const CONFIG_ID = 'config-id';
+const GAME_ID = 'config-id';
 const INPUT_MODE = 'input-mode';
 const LOCALE = 'locale';
 const RACK = 'rack';
@@ -31,12 +31,12 @@ const localStorage = {
     store.set(BOARD, serialized, true);
   },
 
-  getConfigId(): string | undefined {
-    return store.get(CONFIG_ID);
+  getGame(): Game | undefined {
+    return store.get(GAME_ID);
   },
 
-  setConfigId(configId: string | undefined): void {
-    store.set(CONFIG_ID, configId, true);
+  setGame(game: Game | undefined): void {
+    store.set(GAME_ID, game, true);
   },
 
   getInputMode(): InputMode | undefined {

package/src/state/sagas.ts

@@ -1,7 +1,8 @@
 /* eslint-disable max-lines */
 
 import { PayloadAction } from '@reduxjs/toolkit';
-import { Locale, Result } from '@scrabble-solver/types';
+import { hasConfig, localesMap } from '@scrabble-solver/configs';
+import { Board, Locale, Result } from '@scrabble-solver/types';
 import { call, delay, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
 import { LOCALE_FEATURES } from 'i18n';
@@ -15,6 +16,7 @@ import {
   selectCharacters,
   selectConfig,
   selectDictionary,
+  selectGame,
   selectLocale,
   selectLocaleAutoGroupTiles,
   selectRack,
@@ -44,7 +46,7 @@ export function* rootSaga(): AnyGenerator {
   yield takeEvery([rackSlice.actions.changeCharacter.type, rackSlice.actions.changeCharacters.type], onRackValueChange);
   yield takeEvery(resultsSlice.actions.applyResult.type, onApplyResult);
   yield takeEvery(resultsSlice.actions.changeResultCandidate.type, onResultCandidateChange);
-  yield takeEvery(settingsSlice.actions.changeConfigId.type, onConfigIdChange);
+  yield takeEvery(settingsSlice.actions.changeGame.type, onGameChange);
   yield takeEvery(settingsSlice.actions.changeLocale.type, onLocaleChange);
   yield takeLatest(dictionarySlice.actions.submit.type, onDictionarySubmit);
   yield takeLatest(initialize.type, onInitialize);
@@ -77,7 +79,7 @@ function* onApplyResult({ payload: result }: PayloadAction<Result>): AnyGenerato
   yield put(verifySlice.actions.submit());
 }
 
-function* onConfigIdChange(): AnyGenerator {
+function* onGameChange(): AnyGenerator {
   const characters = yield select(selectCharacters);
 
   if (characters.length > 0) {
@@ -119,7 +121,9 @@ function* onInitialize(): AnyGenerator {
 }
 
 function* onReset(): AnyGenerator {
-  yield put(boardSlice.actions.reset());
+  const config = yield select(selectConfig);
+
+  yield put(boardSlice.actions.init(Board.create(config.boardWidth, config.boardHeight)));
   yield put(cellFilterSlice.actions.reset());
   yield put(dictionarySlice.actions.reset());
   yield put(rackSlice.actions.reset());
@@ -128,7 +132,14 @@ function* onReset(): AnyGenerator {
   yield put(verifySlice.actions.submit());
 }
 
-function* onLocaleChange(): AnyGenerator {
+function* onLocaleChange({ payload: locale }: PayloadAction<Locale>): AnyGenerator {
+  const game = yield select(selectGame);
+
+  if (!hasConfig(game, locale)) {
+    const defaultConfig = localesMap[locale][0];
+    yield put(settingsSlice.actions.changeGame(defaultConfig.game));
+  }
+
   const characters = yield select(selectCharacters);
 
   if (characters.length > 0) {
@@ -166,7 +177,7 @@ function* onSolve(): AnyGenerator {
     const results = yield call(solve, {
       board: board.toJson(),
       characters,
-      configId: config.id,
+      game: config.game,
       locale,
     });
     yield put(resultsSlice.actions.changeResults(results));
@@ -187,7 +198,7 @@ function* onVerify(): AnyGenerator {
   try {
     const { invalidWords, validWords } = yield call(verify, {
       board: board.toJson(),
-      configId: config.id,
+      game: config.game,
       locale,
     });
     yield put(verifySlice.actions.submitSuccess({ board, invalidWords, validWords }));

package/src/state/selectors.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
 import { createSelector } from '@reduxjs/toolkit';
-import { getLocaleConfig } from '@scrabble-solver/configs';
+import { getConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
 import { Cell, Config, isError, Tile } from '@scrabble-solver/types';
 
@@ -67,13 +67,13 @@ export const selectBoard = selectBoardRoot;
 
 export const selectInputMode = createSelector([selectSettingsRoot], (settings) => settings.inputMode);
 
-export const selectConfigId = createSelector([selectSettingsRoot], (settings) => settings.configId);
+export const selectGame = createSelector([selectSettingsRoot], (settings) => settings.game);
 
-export const selectConfig = createSelector([selectConfigId, selectLocale], getLocaleConfig);
+export const selectConfig = createSelector([selectGame, selectLocale], getConfig);
 
-export const selectCellFilter = selectCellFilterRoot;
+export const selectFilteredCells = selectCellFilterRoot;
 
-export const selectCellIsFiltered = createSelector([selectCellFilter, selectPoint], (cellFilter, { x, y }) => {
+export const selectCellIsFiltered = createSelector([selectFilteredCells, selectPoint], (cellFilter, { x, y }) => {
   return cellFilter.some((cell) => cell.x === x && cell.y === y);
 });
 
@@ -94,7 +94,7 @@ export const selectResultsSort = createSelector([selectResultsRoot], (results) =
 export const selectSortedResults = createSelector([selectResultsRaw, selectResultsSort, selectLocale], sortResults);
 
 export const selectGroupedResults = createSelector(
-  [selectSortedResults, selectResultsQuery, selectCellFilter],
+  [selectSortedResults, selectResultsQuery, selectFilteredCells],
   groupResults,
 );
 
@@ -103,8 +103,8 @@ export const selectResults = createSelector([selectGroupedResults], (groupedResu
 });
 
 export const selectIsResultMatching = createSelector(
-  [selectResults, selectResultsQuery, selectCellFilter, selectResultIndex],
-  (results, query, cellFilter, index) => {
+  [selectResults, selectResultsQuery, selectFilteredCells, selectResultIndex],
+  (results, query, filteredCells, index) => {
     if (!results) {
       return false;
     }
@@ -116,8 +116,8 @@ export const selectIsResultMatching = createSelector(
       return false;
     }
 
-    if (cellFilter) {
-      return cellFilter.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
+    if (filteredCells) {
+      return filteredCells.every(({ x, y }) => result.cells.some((cell) => cell.x === x && cell.y === y));
     }
 
     return true;

package/src/state/slices/boardInitialState.ts

@@ -1,4 +1,4 @@
-import { getLocaleConfig } from '@scrabble-solver/configs';
+import { getConfig } from '@scrabble-solver/configs';
 import { Board } from '@scrabble-solver/types';
 
 import localStorage from '../localStorage';
@@ -7,8 +7,8 @@ import settingsInitialState from './settingsInitialState';
 
 export type BoardState = Board;
 
-const { configId, locale } = settingsInitialState;
-const { boardHeight, boardWidth } = getLocaleConfig(configId, locale);
+const { game, locale } = settingsInitialState;
+const { boardHeight, boardWidth } = getConfig(game, locale);
 export const boardDefaultState = Board.create(boardWidth, boardHeight);
 
 const boardInitialState: BoardState = localStorage.getBoard() || boardDefaultState;

package/src/state/slices/boardSlice.ts

@@ -1,8 +1,10 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { games } from '@scrabble-solver/configs';
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { Board, Cell, Result, Tile } from '@scrabble-solver/types';
+import { Board, Cell, Game, Result, Tile } from '@scrabble-solver/types';
 
-import boardInitialState, { boardDefaultState } from './boardInitialState';
+import boardInitialState from './boardInitialState';
+import settingsSlice from './settingsSlice';
 
 const boardSlice = createSlice({
   initialState: boardInitialState,
@@ -42,10 +44,6 @@ const boardSlice = createSlice({
       return board;
     },
 
-    reset: () => {
-      return boardDefaultState;
-    },
-
     toggleCellIsBlank: (state, action: PayloadAction<{ x: number; y: number }>) => {
       const newBoard = state.clone();
       const { x, y } = action.payload;
@@ -58,6 +56,22 @@ const boardSlice = createSlice({
       return newBoard;
     },
   },
+  extraReducers: {
+    [settingsSlice.actions.changeGame.type]: (state, action: PayloadAction<Game>) => {
+      const game = action.payload;
+      const config = Object.values(games).find((gameConfig) => gameConfig.game === game);
+
+      if (!config) {
+        throw new Error(`Cannot find config for game "${game}"`);
+      }
+
+      if (state.rows.length !== config.boardHeight || state.rows[0].length !== config.boardWidth) {
+        return Board.create(config.boardWidth, config.boardHeight);
+      }
+
+      return state;
+    },
+  },
 });
 
 export default boardSlice;