@scrabble-solver/scrabble-solver 2.12.2 → 2.12.3

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,9 +67,9 @@ 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 selectFilteredCells = selectCellFilterRoot;
 

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;

package/src/state/slices/settingsInitialState.ts

@@ -1,5 +1,4 @@
-import { literaki, scrabble } from '@scrabble-solver/configs';
-import { Locale } from '@scrabble-solver/types';
+import { Game, Locale } from '@scrabble-solver/types';
 
 import { guessLocale } from 'lib';
 import { AutoGroupTiles, InputMode } from 'types';
@@ -8,7 +7,7 @@ import localStorage from '../localStorage';
 
 export interface SettingsState {
   autoGroupTiles: AutoGroupTiles;
-  configId: typeof literaki.id | typeof scrabble.id;
+  game: Game;
   inputMode: InputMode;
   locale: Locale;
 }
@@ -18,7 +17,7 @@ const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis
 
 const settingsInitialState: SettingsState = {
   autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
-  configId: localStorage.getConfigId() || scrabble.id,
+  game: localStorage.getGame() || Game.Scrabble,
   inputMode: localStorage.getInputMode() || (isTouchScreen ? 'touchscreen' : 'keyboard'),
   locale: localStorage.getLocale() || guessLocale(),
 };

package/src/state/slices/settingsSlice.ts

@@ -1,5 +1,5 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { Locale } from '@scrabble-solver/types';
+import { Game, Locale } from '@scrabble-solver/types';
 
 import { AutoGroupTiles, InputMode } from 'types';
 
@@ -14,9 +14,9 @@ const settingsSlice = createSlice({
       return { ...state, autoGroupTiles };
     },
 
-    changeConfigId: (state, action: PayloadAction<string>) => {
-      const configId = action.payload;
-      return { ...state, configId };
+    changeGame: (state, action: PayloadAction<Game>) => {
+      const game = action.payload;
+      return { ...state, game };
     },
 
     changeInputMode: (state, action: PayloadAction<InputMode>) => {
@@ -29,7 +29,7 @@ const settingsSlice = createSlice({
       return { ...state, locale };
     },
 
-    init: (state, action: PayloadAction<Partial<Pick<typeof settingsInitialState, 'configId' | 'locale'>>>) => {
+    init: (state, action: PayloadAction<Partial<Pick<typeof settingsInitialState, 'game' | 'locale'>>>) => {
       return { ...state, ...action.payload };
     },
   },

package/src/styles/variables.scss

@@ -97,20 +97,11 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --z-index--close-button: 101;
   --z-index--tooltip: 102;
 
-  --flag--de--aspect-ratio: 20 / 12;
-  --flag--es--aspect-ratio: 750 / 500;
-  --flag--fa--aspect-ratio: 630 / 360;
-  --flag--fr--aspect-ratio: 24 / 15;
-  --flag--gb--aspect-ratio: 60 / 30;
-  --flag--pl--aspect-ratio: 16 / 10;
-  --flag--us--aspect-ratio: 7410 / 3900;
-
   --button--icon--size: 24px;
   --dictionary--height: 260px;
   --dictionary--height--mobile: 110px;
   --key--height: 36px;
   --key--icon--size: 16px;
-  --logo--aspect-ratio: 682 / 166;
   --logo--height: 60px;
   --modal--width: 370px;
   --nav--height: calc(var(--logo--height) + var(--nav--padding));