@scrabble-solver/scrabble-solver 2.12.1 → 2.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.12.1",
+  "version": "2.12.3",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -18,7 +18,7 @@
   "bugs": {
     "url": "https://github.com/kamilmielnik/scrabble-solver/issues"
   },
-  "homepage": "https://github.com/kamilmielnik/scrabble-solver#readme",
+  "homepage": "https://scrabble-solver.org",
   "scripts": {
     "build": "env-cmd next build",
     "clean": "rimraf .next/ node_modules/",
@@ -28,20 +28,20 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.22.2",
+    "@floating-ui/react": "^0.22.3",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.12.1",
-    "@scrabble-solver/constants": "^2.12.1",
-    "@scrabble-solver/dictionaries": "^2.12.1",
-    "@scrabble-solver/logger": "^2.12.1",
-    "@scrabble-solver/solver": "^2.12.1",
-    "@scrabble-solver/types": "^2.12.1",
-    "@scrabble-solver/word-definitions": "^2.12.1",
+    "@scrabble-solver/configs": "^2.12.3",
+    "@scrabble-solver/constants": "^2.12.3",
+    "@scrabble-solver/dictionaries": "^2.12.3",
+    "@scrabble-solver/logger": "^2.12.3",
+    "@scrabble-solver/solver": "^2.12.3",
+    "@scrabble-solver/types": "^2.12.3",
+    "@scrabble-solver/word-definitions": "^2.12.3",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^13.2.4",
+    "next": "^13.3.0",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-cool-onclickoutside": "^1.7.0",
@@ -61,7 +61,7 @@
   "devDependencies": {
     "@svgr/webpack": "^7.0.0",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.31",
+    "@types/react": "^18.0.33",
     "@types/react-dom": "^18.0.11",
     "@types/react-highlight-words": "^0.16.4",
     "@types/react-modal": "^3.13.1",
@@ -71,8 +71,8 @@
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
     "env-cmd": "^10.1.0",
-    "sass": "^1.60.0",
+    "sass": "^1.61.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "4f9a96d05558a90c90c5614c4929ce636f696f11"
+  "gitHead": "5400e276feee01557044e4e758b11e86b83fb085"
 }

package/src/components/Board/Board.module.scss

@@ -33,3 +33,36 @@
   user-select: none;
   animation: var(--transition--duration) var(--transition--easing) hide;
 }
+
+.iconContainer {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  user-select: none;
+}
+
+.iconBackground,
+.icon {
+  position: absolute;
+  top: calc((100% - var(--size)) / 2);
+  right: calc((100% - var(--size)) / 2);
+  bottom: calc((100% - var(--size)) / 2);
+  left: calc((100% - var(--size)) / 2);
+  width: var(--size);
+  height: var(--size);
+}
+
+.iconBackground {
+  --size: 80%;
+
+  border-radius: var(--border--radius);
+  background-color: var(--color--foreground--secondary);
+}
+
+.icon {
+  --size: 40%;
+
+  color: var(--color--white);
+}

package/src/components/Board/Board.tsx

@@ -12,6 +12,7 @@ import { TRANSITION } from 'parameters';
 import {
   boardSlice,
   cellFilterSlice,
+  selectFilteredCells,
   selectInputMode,
   selectLocale,
   selectRowsWithCandidate,
@@ -33,6 +34,7 @@ const Board: FunctionComponent<Props> = ({ className }) => {
   const locale = useTypedSelector(selectLocale);
   const rows = useTypedSelector(selectRowsWithCandidate);
   const inputMode = useTypedSelector(selectInputMode);
+  const filteredCells = useTypedSelector(selectFilteredCells);
   const { cellSize } = useAppLayout();
   const [
     { activeIndex, direction, inputRefs },
@@ -147,6 +149,7 @@ const Board: FunctionComponent<Props> = ({ className }) => {
       <BoardPure
         className={className}
         cellSize={cellSize}
+        filteredCells={filteredCells}
         inputRefs={inputRefs}
         ref={ref}
         rows={rows}

package/src/components/Board/BoardPure.tsx

@@ -12,12 +12,17 @@ import {
   RefObject,
 } from 'react';
 
+import { FlagFill } from 'icons';
+import { BORDER_WIDTH } from 'parameters';
+import { Point } from 'types';
+
 import styles from './Board.module.scss';
 import { Cell } from './components';
 
 interface Props {
   className?: string;
   cellSize: number;
+  filteredCells: Point[];
   inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
   style?: CSSProperties;
@@ -29,7 +34,10 @@ interface Props {
 }
 
 const BoardPure = forwardRef<HTMLDivElement, Props>(
-  ({ className, cellSize, inputRefs, rows, style, onBlur, onChange, onFocus, onKeyDown, onPaste }, ref) => (
+  (
+    { className, cellSize, filteredCells, inputRefs, rows, style, onBlur, onChange, onFocus, onKeyDown, onPaste },
+    ref,
+  ) => (
     <div
       className={classNames(styles.board, className)}
       ref={ref}
@@ -57,6 +65,22 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
           ))}
         </Fragment>
       ))}
+
+      {filteredCells.map(({ x, y }) => (
+        <div
+          className={styles.iconContainer}
+          key={[x, y].join('-')}
+          style={{
+            height: cellSize,
+            width: cellSize,
+            left: x * (cellSize + BORDER_WIDTH),
+            top: y * (cellSize + BORDER_WIDTH),
+          }}
+        >
+          <div className={styles.iconBackground} />
+          <FlagFill className={styles.icon} />
+        </div>
+      ))}
     </div>
   ),
 );

package/src/components/Board/components/Cell/Cell.module.scss

@@ -17,18 +17,14 @@
   }
 
   [dir='ltr'] & {
-    &:nth-child(15n + 1),
-    &:nth-child(15n + 2),
-    &:nth-child(15n + 3) {
+    &.first3 {
       input {
         left: 0;
         clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
       }
     }
 
-    &:nth-last-child(15n + 1),
-    &:nth-last-child(15n + 2),
-    &:nth-last-child(15n + 3) {
+    &.last3 {
       input {
         left: -200%;
         clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
@@ -37,9 +33,7 @@
   }
 
   [dir='rtl'] & {
-    &:nth-child(15n + 1),
-    &:nth-child(15n + 2),
-    &:nth-child(15n + 3) {
+    &.first3 {
       input {
         left: -200%;
         right: 0;
@@ -47,9 +41,7 @@
       }
     }
 
-    &:nth-last-child(15n + 1),
-    &:nth-last-child(15n + 2),
-    &:nth-last-child(15n + 3) {
+    &.last3 {
       input {
         left: 0;
         right: -200%;

package/src/components/Board/components/Cell/Cell.tsx

@@ -13,6 +13,7 @@ import {
 
 import {
   selectCellIsValid,
+  selectConfig,
   selectInputMode,
   selectLocale,
   selectTilePoints,
@@ -52,6 +53,7 @@ const Cell: FunctionComponent<Props> = ({
   const { tile, x, y } = cell;
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const config = useTypedSelector(selectConfig);
   const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
@@ -98,6 +100,8 @@ const Cell: FunctionComponent<Props> = ({
         y: (y + 1).toLocaleString(locale),
       })}
       className={classNames(styles.tile, className, {
+        [styles.first3]: x < 3,
+        [styles.last3]: config.boardWidth - x - 1 < 3,
         [styles.sharpTopLeft]: cellTop?.hasTile() || cellLeft?.hasTile(),
         [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
         [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),

package/src/components/Board/components/InputPrompt/InputPrompt.tsx

@@ -37,6 +37,7 @@ const InputPrompt = forwardRef<HTMLFormElement, Props>(
       if (inputRef) {
         inputRef.focus();
         inputRef.select();
+        inputRef.scrollIntoView({ block: 'start', inline: 'center' });
       }
     }, [inputRef]);
 

package/src/components/Board/hooks/useBackgroundImage.tsx

@@ -9,7 +9,7 @@ import { useAppLayout, useMediaQueries } from 'hooks';
 import { FlagFill, Star } from 'icons';
 import { dataUrlToBlob, getTileSizes } from 'lib';
 import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BONUS_START, COLOR_FILTERED } from 'parameters';
-import { selectCellFilter, selectConfig, store, useTypedSelector } from 'state';
+import { selectConfig, store, useTypedSelector } from 'state';
 import { Point } from 'types';
 
 import { getBonusColor } from '../lib';
@@ -21,6 +21,7 @@ const VERTICAL_LINE = 'v';
 const BONUS = 'b';
 const BONUS_WORD_2 = 'b2';
 const BONUS_WORD_3 = 'b3';
+const BONUS_WORD_4 = 'b4';
 const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
@@ -29,7 +30,6 @@ const useBackgroundImage = () => {
   const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
   const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
-  const cellFilter = useTypedSelector(selectCellFilter);
   const viewBoxHeight = boardSize;
   const viewBoxWidth = boardSize;
   const bonusSize = cellSize * 0.8;
@@ -42,6 +42,7 @@ const useBackgroundImage = () => {
   const characterBonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER);
   const word2Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2);
   const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
+  const word4Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4);
 
   const getX = (point: Point): number => point.x * (cellSize + BORDER_WIDTH);
 
@@ -102,6 +103,23 @@ const useBackgroundImage = () => {
             </text>
           </symbol>
 
+          <symbol id={BONUS_WORD_4}>
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+            <text
+              dominantBaseline="central"
+              fill="white"
+              fontFamily="system-ui, sans-serif"
+              fontSize={fontSize}
+              fontWeight="bold"
+              textAnchor="middle"
+              x={fontOffset}
+              y={fontOffset}
+            >
+              x4
+            </text>
+          </symbol>
+
           <symbol id={CELL_FILTER}>
             <rect
               fill={COLOR_FILTERED}
@@ -138,6 +156,10 @@ const useBackgroundImage = () => {
           <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
         ))}
 
+        {word4Bonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_4}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
         <rect
           fill={COLOR_BONUS_START}
           height={bonusSize}
@@ -154,10 +176,6 @@ const useBackgroundImage = () => {
           x={getX(center) + iconOffset}
           y={getY(center) + iconOffset}
         />
-
-        {cellFilter.map((cell, index) => (
-          <use key={index} href={`#${CELL_FILTER}`} x={getX(cell)} y={getY(cell)} />
-        ))}
       </svg>
     </Provider>,
   );

package/src/components/PlainTiles/lib/createPlainTile.ts

@@ -1,11 +1,11 @@
-import { literaki } from '@scrabble-solver/configs';
-import { Locale } from '@scrabble-solver/types';
+import { getConfig } from '@scrabble-solver/configs';
+import { Game, Locale } from '@scrabble-solver/types';
 
 import {
   PLAIN_TILES_COLOR_DEFAULT,
   PLAIN_TILES_POINTS_COLORS,
-  PLAIN_TILES_TILE_MAX_SCATTER,
   PLAIN_TILES_TILE_MAX_ROTATE,
+  PLAIN_TILES_TILE_MAX_SCATTER,
   PLAIN_TILES_TILE_SIZE,
 } from 'parameters';
 
@@ -16,7 +16,7 @@ import getY from './getY';
 import randomize from './randomize';
 
 const createPlainTile = ({ cellIndex, character, color, rowIndex, showPoints }: CreatePlainTileOptions): PlainTile => {
-  const configPoints = literaki[Locale.EN_US].getCharacterPoints(character.toLowerCase());
+  const configPoints = getConfig(Game.Literaki, Locale.EN_US).getCharacterPoints(character.toLowerCase());
   const points = showPoints ? configPoints : undefined;
   const defaultColor =
     typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -52,6 +52,7 @@ const InputPrompt = forwardRef<HTMLFormElement, Props>(
       if (inputRef) {
         inputRef.focus();
         inputRef.select();
+        inputRef.scrollIntoView({ block: 'end', inline: 'center' });
       }
     }, [inputRef]);
 

package/src/components/Radio/Radio.module.scss

@@ -22,6 +22,10 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
       }
     }
   }
+
+  &.disabled {
+    opacity: var(--opacity--disabled);
+  }
 }
 
 .input {

package/src/components/Radio/Radio.tsx

@@ -17,6 +17,7 @@ const Radio: FunctionComponent<Props> = ({ checked, children, className, disable
   <label
     className={classNames(styles.radio, className, {
       [styles.checked]: checked,
+      [styles.disabled]: disabled,
     })}
   >
     <input

package/src/components/SeoMessage/SeoMessage.tsx

@@ -10,9 +10,9 @@ const INVISIBLE_STYLE: CSSProperties = {
 
 const SeoMessage: FunctionComponent = () => (
   <p style={INVISIBLE_STYLE}>
-    Scrabble Solver 2 is a 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. Source code is
-    available on GitHub - contributions are welcome!
+    Scrabble Solver 2 is a free and open-source analysis tool for Scrabble, Super Scrabble &amp; Literaki. Quickly find
+    top scoring words using given letters and board state. Available in English, French, German, Polish & Spanish.
+    Source code is available on GitHub - contributions are welcome!
   </p>
 );
 

package/src/hooks/useAppLayout.ts

@@ -2,7 +2,6 @@
 
 import {
   BOARD_TILE_SIZE_MAX,
-  BOARD_TILE_SIZE_MIN,
   BORDER_WIDTH,
   BUTTON_HEIGHT,
   COMPONENTS_SPACING,
@@ -47,7 +46,7 @@ const useAppLayout = () => {
     : Math.max(solverHeight - bottomContainerHeight, 0);
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
   const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
-  const cellSize = Math.min(Math.max(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
+  const cellSize = Math.min(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MAX);
   const boardSize = (cellSize + BORDER_WIDTH) * config.boardWidth + BORDER_WIDTH;
   const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const showResultsInModal = isLessThanL;

package/src/hooks/useLocalStorage.ts

@@ -4,7 +4,7 @@ import {
   localStorage,
   selectAutoGroupTiles,
   selectBoard,
-  selectConfigId,
+  selectGame,
   selectInputMode,
   selectLocale,
   selectRack,
@@ -14,7 +14,7 @@ import {
 const useLocalStorage = () => {
   const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
   const board = useTypedSelector(selectBoard);
-  const configId = useTypedSelector(selectConfigId);
+  const game = useTypedSelector(selectGame);
   const inputMode = useTypedSelector(selectInputMode);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
@@ -32,10 +32,10 @@ const useLocalStorage = () => {
   }, [board]);
 
   useEffect(() => {
-    if (configId) {
-      localStorage.setConfigId(configId);
+    if (game) {
+      localStorage.setGame(game);
     }
-  }, [configId]);
+  }, [game]);
 
   useEffect(() => {
     if (inputMode) {

package/src/i18n/constants.ts

@@ -4,12 +4,14 @@ import { FunctionComponent, SVGAttributes } from 'react';
 
 import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 
-import styles from './i18n.module.scss';
-
 interface LocaleFeatures {
   comma: string;
   consonants: boolean;
   direction: 'ltr' | 'rtl';
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  label: string;
+  locale: Locale;
+  name: string;
   separator: string;
   vowels: boolean;
 }
@@ -19,6 +21,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
+    Icon: FlagDe,
+    label: 'Deutsch',
+    locale: Locale.DE_DE,
+    name: 'German',
     separator: `${COMMA_LATIN} `,
     vowels: true,
   },
@@ -26,6 +32,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
+    Icon: FlagGb,
+    label: 'English (GB)',
+    locale: Locale.EN_GB,
+    name: 'English (GB)',
     separator: `${COMMA_LATIN} `,
     vowels: true,
   },
@@ -33,6 +43,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
+    Icon: FlagUs,
+    label: 'English (US)',
+    locale: Locale.EN_US,
+    name: 'English (US)',
     separator: `${COMMA_LATIN} `,
     vowels: true,
   },
@@ -40,6 +54,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
+    Icon: FlagEs,
+    label: 'Español',
+    locale: Locale.ES_ES,
+    name: 'Spanish',
     separator: `${COMMA_LATIN} `,
     vowels: true,
   },
@@ -47,6 +65,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_ARABIC,
     consonants: false,
     direction: 'rtl',
+    Icon: FlagFa,
+    label: 'فارسی',
+    locale: Locale.FA_IR,
+    name: 'Persian',
     separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
@@ -54,6 +76,10 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
+    Icon: FlagFr,
+    label: 'Français',
+    locale: Locale.FR_FR,
+    name: 'French',
     separator: `${COMMA_LATIN} `,
     vowels: true,
   },
@@ -61,67 +87,11 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     comma: COMMA_LATIN,
     consonants: true,
     direction: 'ltr',
-    separator: `${COMMA_LATIN} `,
-    vowels: true,
-  },
-};
-
-interface Flag {
-  className: string;
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  label: string;
-  name: string;
-  value: Locale;
-}
-
-export const LOCALE_FLAGS: Record<Locale, Flag> = {
-  [Locale.DE_DE]: {
-    className: styles.de,
-    Icon: FlagDe,
-    label: 'Deutsch',
-    name: 'German',
-    value: Locale.DE_DE,
-  },
-  [Locale.EN_GB]: {
-    className: styles.gb,
-    Icon: FlagGb,
-    label: 'English (GB)',
-    name: 'English (GB)',
-    value: Locale.EN_GB,
-  },
-  [Locale.EN_US]: {
-    className: styles.us,
-    Icon: FlagUs,
-    label: 'English (US)',
-    name: 'English (US)',
-    value: Locale.EN_US,
-  },
-  [Locale.ES_ES]: {
-    className: styles.es,
-    Icon: FlagEs,
-    label: 'Español',
-    name: 'Spanish',
-    value: Locale.ES_ES,
-  },
-  [Locale.FA_IR]: {
-    className: styles.fa,
-    Icon: FlagFa,
-    label: 'فارسی',
-    name: 'Persian',
-    value: Locale.FA_IR,
-  },
-  [Locale.FR_FR]: {
-    className: styles.fr,
-    Icon: FlagFr,
-    label: 'Français',
-    name: 'French',
-    value: Locale.FR_FR,
-  },
-  [Locale.PL_PL]: {
-    className: styles.pl,
     Icon: FlagPl,
     label: 'Polski',
+    locale: Locale.PL_PL,
     name: 'Polish',
-    value: Locale.PL_PL,
+    separator: `${COMMA_LATIN} `,
+    vowels: true,
   },
 };

package/src/lib/extractCharacters.test.ts

@@ -1,6 +1,6 @@
-import { scrabble } from '@scrabble-solver/configs';
+import { getConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
-import { Locale } from '@scrabble-solver/types';
+import { Game, Locale } from '@scrabble-solver/types';
 
 import extractCharacters from './extractCharacters';
 
@@ -16,7 +16,7 @@ const tests = [
 
 describe('extractCharacters', () => {
   const locale = Locale.ES_ES;
-  const config = scrabble[locale];
+  const config = getConfig(Game.Scrabble, locale);
 
   for (const { input, expected } of tests) {
     it(`[${locale}] "${input}"`, () => {

package/src/lib/extractCharactersByCase.test.ts

@@ -1,6 +1,6 @@
-import { scrabble } from '@scrabble-solver/configs';
+import { getConfig } from '@scrabble-solver/configs';
 import { BLANK } from '@scrabble-solver/constants';
-import { Locale } from '@scrabble-solver/types';
+import { Game, Locale } from '@scrabble-solver/types';
 
 import extractCharactersByCase from './extractCharactersByCase';
 
@@ -21,7 +21,7 @@ const tests = [
 
 describe('extractCharactersByCase', () => {
   const locale = Locale.ES_ES;
-  const config = scrabble[locale];
+  const config = getConfig(Game.Scrabble, locale);
 
   for (const { input, expected } of tests) {
     it(`[${locale}] "${input}"`, () => {

package/src/lib/getCellSize.ts

@@ -1,12 +1,12 @@
 import { Config } from '@scrabble-solver/types';
 
-import { BOARD_CELL_BORDER_WIDTH, BOARD_TILE_SIZE_MAX, BOARD_TILE_SIZE_MIN } from 'parameters';
+import { BOARD_CELL_BORDER_WIDTH, BOARD_TILE_SIZE_MAX } from 'parameters';
 
 const getCellSize = (config: Config, width: number, height: number): number => {
   const maxWidth = (width - BOARD_CELL_BORDER_WIDTH) / config.boardWidth - BOARD_CELL_BORDER_WIDTH;
   const maxHeight = (height - BOARD_CELL_BORDER_WIDTH) / config.boardHeight - BOARD_CELL_BORDER_WIDTH;
   const cellSize = Math.min(maxWidth, maxHeight);
-  return Math.floor(Math.min(Math.max(cellSize, BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX));
+  return Math.floor(Math.min(cellSize, BOARD_TILE_SIZE_MAX));
 };
 
 export default getCellSize;

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

@@ -42,7 +42,6 @@
 
 .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);