@scrabble-solver/scrabble-solver 2.12.2 → 2.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.12.2",
+  "version": "2.12.3",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@floating-ui/react": "^0.22.3",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.12.2",
-    "@scrabble-solver/constants": "^2.12.2",
-    "@scrabble-solver/dictionaries": "^2.12.2",
-    "@scrabble-solver/logger": "^2.12.2",
-    "@scrabble-solver/solver": "^2.12.2",
-    "@scrabble-solver/types": "^2.12.2",
-    "@scrabble-solver/word-definitions": "^2.12.2",
+    "@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",
@@ -74,5 +74,5 @@
     "sass": "^1.61.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "22ec8b756bf1f50d94028c8e69ccc269c23e5759"
+  "gitHead": "5400e276feee01557044e4e758b11e86b83fb085"
 }

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/hooks/useBackgroundImage.tsx

@@ -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 = () => {
@@ -41,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);
 
@@ -101,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}
@@ -137,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}

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/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);

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/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> => {