@scrabble-solver/scrabble-solver 2.8.6 → 2.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.6",
+  "version": "2.8.8",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
   "dependencies": {
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.6",
-    "@scrabble-solver/constants": "^2.8.6",
-    "@scrabble-solver/dictionaries": "^2.8.6",
-    "@scrabble-solver/logger": "^2.8.6",
-    "@scrabble-solver/solver": "^2.8.6",
-    "@scrabble-solver/types": "^2.8.6",
-    "@scrabble-solver/word-definitions": "^2.8.6",
+    "@scrabble-solver/configs": "^2.8.8",
+    "@scrabble-solver/constants": "^2.8.8",
+    "@scrabble-solver/dictionaries": "^2.8.8",
+    "@scrabble-solver/logger": "^2.8.8",
+    "@scrabble-solver/solver": "^2.8.8",
+    "@scrabble-solver/types": "^2.8.8",
+    "@scrabble-solver/word-definitions": "^2.8.8",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -68,5 +68,5 @@
     "env-cmd": "^10.1.0",
     "sass": "^1.55.0"
   },
-  "gitHead": "ec130aa77ac64b91ab82e79f130eb69ac561fffa"
+  "gitHead": "e6ced6e98204e49ba69750242643bda52a453635"
 }

package/src/api/index.ts

@@ -1,10 +1,4 @@
 export { default as getServerLoggingData } from './getServerLoggingData';
-export { default as validateBoard } from './validateBoard';
-export { default as validateCell } from './validateCell';
-export { default as validateCharacter } from './validateCharacter';
-export { default as validateCharacters } from './validateCharacters';
-export { default as validateConfigId } from './validateConfigId';
-export { default as validateLocale } from './validateLocale';
-export { default as validateRow } from './validateRow';
-export { default as validateTile } from './validateTile';
-export { default as validateWord } from './validateWord';
+export { default as isBoardValid } from './isBoardValid';
+export { default as isCellValid } from './isCellValid';
+export { default as isRowValid } from './isRowValid';

package/src/api/isBoardValid.ts

@@ -0,0 +1,43 @@
+import { BoardJson, CellJson, Config } from '@scrabble-solver/types';
+
+import isRowValid from './isRowValid';
+
+const isBoardValid = (board: BoardJson, config: Config): boolean => {
+  if (board.length !== config.boardHeight) {
+    return false;
+  }
+
+  for (const row of board) {
+    if (!isRowValid(row, config)) {
+      return false;
+    }
+  }
+
+  return areTwoCharacterTilesValid(board, config);
+};
+
+const areTwoCharacterTilesValid = (board: CellJson[][], config: Config): boolean => {
+  const cells: CellJson[] = board
+    .flat()
+    .filter((cell) => cell && cell.tile && config.isTwoCharacterTilePrefix(cell.tile.character));
+
+  for (const cell of cells) {
+    for (const characters of config.twoCharacterTiles) {
+      const canCheckDown = cell.y + 1 < board.length;
+      const canCheckRight = cell.x + 1 < board[0].length;
+      const cellDown = board[cell.y + 1][cell.x];
+      const cellRight = board[cell.y][cell.x + 1];
+      const collidesDown = canCheckDown && cellDown.tile && cellDown.tile.character === characters[1];
+      const collidesRight = canCheckRight && cellRight.tile && cellRight.tile.character === characters[1];
+      const collides = collidesDown || collidesRight;
+
+      if (cell.tile && characters.startsWith(cell.tile.character) && collides) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+};
+
+export default isBoardValid;

package/src/api/isCellValid.ts

@@ -0,0 +1,26 @@
+import { BLANK } from '@scrabble-solver/constants';
+import { CellJson, Config } from '@scrabble-solver/types';
+
+const isCellValid = (cell: CellJson, config: Config): boolean => {
+  const { isEmpty, tile, x, y } = cell;
+
+  if (x < 0 || x >= config.boardWidth) {
+    return false;
+  }
+
+  if (y < 0 || y >= config.boardHeight) {
+    return false;
+  }
+
+  if (isEmpty && tile !== null) {
+    return false;
+  }
+
+  if (tile !== null && !config.hasCharacter(tile.character) && tile.character !== BLANK) {
+    return false;
+  }
+
+  return true;
+};
+
+export default isCellValid;

package/src/api/isRowValid.ts

@@ -0,0 +1,19 @@
+import { CellJson, Config } from '@scrabble-solver/types';
+
+import isCellValid from './isCellValid';
+
+const isRowValid = (row: CellJson[], config: Config): boolean => {
+  if (row.length !== config.boardWidth) {
+    return false;
+  }
+
+  for (const cell of row) {
+    if (!isCellValid(cell, config)) {
+      return false;
+    }
+  }
+
+  return true;
+};
+
+export default isRowValid;

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

@@ -13,7 +13,6 @@ $icon-size: 16px;
   transition: var(--transition);
   background-clip: padding-box;
 
-  &.bonusStart,
   &.bonusWord2,
   &.bonusWord3 {
     position: relative;
@@ -33,12 +32,7 @@ $icon-size: 16px;
   }
 
   &.bonusStart {
-    background-color: var(--color--red--light);
-
-    &:before {
-      content: '★';
-      color: var(--color--foreground--secondary);
-    }
+    background-color: var(--color--violet--light);
   }
 
   &.bonusCharacter1 {
@@ -168,6 +162,7 @@ $icon-size: 16px;
   }
 
   &,
+  .filterCell,
   .toggleDirection {
     width: $icon-size;
     height: $icon-size;
@@ -180,8 +175,6 @@ $icon-size: 16px;
 }
 
 .toggleDirection {
-  transition: var(--transition);
-
   &.right {
     transform: rotate(-90deg);
   }
@@ -194,3 +187,35 @@ $icon-size: 16px;
     font-weight: bold;
   }
 }
+
+.filterCell {
+  color: var(--color--inactive);
+
+  &.filtered {
+    color: var(--color--foreground--secondary);
+  }
+}
+
+.iconContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.flagContainer {
+  background-color: var(--color--primary);
+}
+
+.flag,
+.star {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  color: white;
+}

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

@@ -4,7 +4,15 @@ import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
-import { boardSlice, selectCellBonus, selectTilePoints, useTranslate, useTypedSelector } from 'state';
+import {
+  boardSlice,
+  cellFilterSlice,
+  selectCellBonus,
+  selectCellIsFiltered,
+  selectTilePoints,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import CellPure from './CellPure';
 
@@ -34,10 +42,19 @@ const Cell: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
+  const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
   const { tileFontSize } = getTileSizes(size);
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
+  const handleDirectionToggleClick = useCallback(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+    }
+
+    onDirectionToggle();
+  }, [onDirectionToggle]);
+
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
   const handleToggleBlankClick = useCallback(() => {
@@ -48,13 +65,13 @@ const Cell: FunctionComponent<Props> = ({
     dispatch(boardSlice.actions.toggleCellIsBlank({ x, y }));
   }, [dispatch, x, y]);
 
-  const handleDirectionToggleClick = useCallback(() => {
+  const handleToggleFilterCellClick = useCallback(() => {
     if (inputRef.current) {
       inputRef.current.focus();
     }
 
-    onDirectionToggle();
-  }, [onDirectionToggle]);
+    dispatch(cellFilterSlice.actions.toggle({ x, y }));
+  }, [dispatch, x, y]);
 
   return (
     <CellPure
@@ -65,6 +82,7 @@ const Cell: FunctionComponent<Props> = ({
       inputRef={inputRef}
       isCenter={isCenter}
       isEmpty={isEmpty}
+      isFiltered={isFiltered}
       points={points}
       size={size}
       style={style}
@@ -73,6 +91,7 @@ const Cell: FunctionComponent<Props> = ({
       onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
       onToggleBlankClick={handleToggleBlankClick}
+      onToggleFilterCellClick={handleToggleFilterCellClick}
     />
   );
 };

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

@@ -2,7 +2,7 @@ import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
 
-import { ArrowDown } from 'icons';
+import { ArrowDown, Flag, Star } from 'icons';
 import { Translate } from 'types';
 
 import Tile from '../../../Tile';
@@ -19,6 +19,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   isCenter: boolean;
   isEmpty: boolean;
+  isFiltered: boolean;
   points?: number;
   size: number;
   style?: CSSProperties;
@@ -27,6 +28,7 @@ interface Props {
   onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
+  onToggleFilterCellClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 const CellPure: FunctionComponent<Props> = ({
@@ -37,6 +39,7 @@ const CellPure: FunctionComponent<Props> = ({
   inputRef,
   isCenter,
   isEmpty,
+  isFiltered,
   points,
   size,
   style,
@@ -45,6 +48,7 @@ const CellPure: FunctionComponent<Props> = ({
   onDirectionToggleClick,
   onFocus,
   onToggleBlankClick,
+  onToggleFilterCellClick,
 }) => (
   <div
     className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
@@ -52,6 +56,18 @@ const CellPure: FunctionComponent<Props> = ({
     })}
     style={style}
   >
+    {isCenter && (
+      <div className={classNames(styles.iconContainer)}>
+        <Star className={styles.star} />
+      </div>
+    )}
+
+    {isFiltered && (
+      <div className={classNames(styles.iconContainer, styles.flagContainer)}>
+        <Flag className={styles.flag} />
+      </div>
+    )}
+
     <Tile
       className={styles.tile}
       character={isEmpty ? undefined : tile.character}
@@ -74,6 +90,18 @@ const CellPure: FunctionComponent<Props> = ({
         />
       </Button>
 
+      {isEmpty && (
+        <Button
+          className={classNames(styles.filterCell, {
+            [styles.filtered]: isFiltered,
+          })}
+          tooltip={translate('cell.filter-cell')}
+          onClick={onToggleFilterCellClick}
+        >
+          <Flag />
+        </Button>
+      )}
+
       {!isEmpty && (
         <Button
           className={classNames(styles.blank, {

package/src/components/Board/hooks/useGrid.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines, max-statements */
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell } from '@scrabble-solver/types';
 import { createRef, KeyboardEventHandler, RefObject, useCallback, useMemo, useState, useRef } from 'react';

package/src/components/Dictionary/Dictionary.module.scss

@@ -7,6 +7,26 @@
   font-size: var(--font--size--s);
 }
 
+.result {
+  transition: var(--transition);
+
+  &.isAllowed {
+    & + & {
+      .content {
+        padding-top: 0;
+      }
+    }
+  }
+
+  &.isNotAllowed {
+    & + & {
+      .content {
+        padding-top: 0;
+      }
+    }
+  }
+}
+
 .content {
   padding: var(--spacing--l);
 }

package/src/components/Dictionary/Dictionary.tsx

@@ -14,44 +14,55 @@ interface Props {
 
 const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
-  const { definitions, isAllowed, isLoading, word } = useTypedSelector(selectDictionary);
+  const { results, isLoading } = useTypedSelector(selectDictionary);
+  const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
 
   return (
     <div
       className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isAllowed === true,
-        [styles.isNotAllowed]: isAllowed === false,
+        [styles.isAllowed]: isFirstAllowed === true,
+        [styles.isNotAllowed]: isFirstAllowed === false,
       })}
     >
-      {typeof word === 'undefined' && (
-        <EmptyState type="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-      )}
-
-      {typeof word !== 'undefined' && (
-        <div className={styles.content}>
-          {word && <h2 className={styles.word}>{word}</h2>}
-
-          {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
-
-          {isAllowed === true && (
-            <>
-              {definitions.length === 0 && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
-
-              {definitions.length > 0 && (
-                <ul className={styles.definitions}>
-                  {definitions.map((result, index) => (
-                    <li key={index} className={styles.definition}>
-                      {result}
-                    </li>
-                  ))}
-                </ul>
-              )}
-            </>
+      {results.map(({ definitions, isAllowed, word }) => (
+        <div
+          className={classNames(styles.result, {
+            [styles.isAllowed]: isAllowed === true,
+            [styles.isNotAllowed]: isAllowed === false,
+          })}
+          key={word}
+        >
+          {typeof word === 'undefined' && (
+            <EmptyState type="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
           )}
 
-          {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+          {typeof word !== 'undefined' && (
+            <div className={styles.content}>
+              {word && <h2 className={styles.word}>{word}</h2>}
+
+              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
+
+              {isAllowed === true && (
+                <>
+                  {definitions.length === 0 && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+
+                  {definitions.length > 0 && (
+                    <ul className={styles.definitions}>
+                      {definitions.map((result, index) => (
+                        <li key={index} className={styles.definition}>
+                          {result}
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </>
+              )}
+
+              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+            </div>
+          )}
         </div>
-      )}
+      ))}
 
       {isLoading && <Loading />}
     </div>

package/src/components/Results/Cell.tsx

@@ -11,12 +11,13 @@ import styles from './Results.module.scss';
 interface Props {
   className?: string;
   translationKey: TranslationKey;
+  tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ className, translationKey, value }) => {
+const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, value }) => {
   const translate = useTranslate();
-  const triggerProps = useTooltip(`${translate(translationKey)}: ${value}`);
+  const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || value}`);
 
   return (
     <span className={classNames(styles.cell, className)} {...triggerProps}>

package/src/components/Results/Result.tsx

@@ -16,6 +16,7 @@ const Result = ({ index, style }: Props): ReactElement => {
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const results = useTypedSelector(selectSortedFilteredResults)!;
   const result = results[index];
+  const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
 
   const handleClick = () => {
     dispatch(resultsSlice.actions.applyResult(result));
@@ -49,12 +50,21 @@ const Result = ({ index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        <Cell className={styles.word} translationKey="common.word" value={result.word} />
-        <Cell className={styles.stat} translationKey="common.tiles" value={result.numberOfTiles} />
-        <Cell className={styles.stat} translationKey="common.consonants" value={result.numberOfConsonants} />
-        <Cell className={styles.stat} translationKey="common.vowels" value={result.numberOfVowels} />
-        <Cell className={styles.stat} translationKey="common.blanks" value={result.numberOfBlanks} />
-        <Cell className={styles.stat} translationKey="common.words" value={result.numberOfWords} />
+        <Cell
+          className={styles.word}
+          translationKey="common.word"
+          value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
+        />
+        <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
+        <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+        <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
+        <Cell
+          className={styles.stat}
+          translationKey="common.words"
+          tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+          value={result.wordsCount}
+        />
         <Cell className={styles.points} translationKey="common.points" value={result.points} />
       </span>
     </button>

package/src/components/ResultsInput/ResultsInput.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
-import { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { isRegExp } from 'lib';
 import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from 'state';
 
 import styles from './ResultsInput.module.scss';
@@ -14,9 +15,16 @@ const ResultsInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const value = useTypedSelector(selectResultsQuery);
+  const [localValue, setLocalValue] = useState(value);
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    dispatch(resultsSlice.actions.changeQuery(event.target.value));
+    const newValue = event.target.value;
+
+    setLocalValue(newValue);
+
+    if (isRegExp(newValue)) {
+      dispatch(resultsSlice.actions.changeQuery(newValue));
+    }
   };
 
   return (
@@ -25,7 +33,7 @@ const ResultsInput: FunctionComponent<Props> = ({ className }) => {
         className={styles.input}
         placeholder={translate('results.input.placeholder')}
         type="text"
-        value={value}
+        value={localValue}
         onChange={handleChange}
       />
     </form>

package/src/hooks/useIsTablet.ts

@@ -1,8 +1,8 @@
 import { useMedia } from 'react-use';
 
 const useIsTablet = (): boolean => {
-  const isTabletHeight = useMedia('(max-height: 800px)');
-  const isTabletWidth = useMedia('(max-width: 1024px)');
+  const isTabletHeight = useMedia('(max-height: 800px)', false);
+  const isTabletWidth = useMedia('(max-width: 1024px)', false);
   const isTablet = isTabletHeight || isTabletWidth;
   return isTablet;
 };

package/src/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Zielort - klicken zum Wechseln",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.toggle-direction": "Schreibrichtung - klicken zum Wechseln",

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Target destination - click to toggle",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.toggle-direction": "Typing direction - click to toggle",

package/src/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",

package/src/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Destination cible - cliquer pour changer",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.toggle-direction": "Direction d'écriture - cliquer pour changer",

package/src/i18n/pl.json

@@ -1,4 +1,5 @@
 {
+  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.toggle-direction": "Kierunek wpisywania - kliknij aby zmienić",

package/src/icons/Flag.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/flag-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12.435 12.435 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A19.626 19.626 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a19.587 19.587 0 0 0 1.349-.476l.019-.007.004-.002h.001" fill="currentColor" />
+</svg>

package/src/icons/Star.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/star-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -8,6 +8,7 @@ export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
 export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
+export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFr } from './FlagFr.svg';
 export { default as FlagGb } from './FlagGb.svg';
@@ -20,3 +21,4 @@ export { default as Play } from './Play.svg';
 export { default as Sack } from './Sack.svg';
 export { default as SortDown } from './SortDown.svg';
 export { default as SortUp } from './SortUp.svg';
+export { default as Star } from './Star.svg';

package/src/lib/getRemainingTiles.ts

@@ -11,7 +11,7 @@ const getRemainingTiles = (config: Config, board: Board, characters: string[]):
   const remainingTiles = Object.fromEntries(config.tiles.map((tile) => [tile.character, { ...tile, usedCount: 0 }]));
   const blank: RemainingTile = {
     character: BLANK,
-    count: config.numberOfBlanks,
+    count: config.blanksCount,
     score: config.blankScore,
     usedCount:
       nonEmptyCells.filter((cell) => cell.tile.isBlank).length +