@scrabble-solver/scrabble-solver 2.8.5 → 2.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.5",
+  "version": "2.8.7",
   "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.5",
-    "@scrabble-solver/constants": "^2.8.5",
-    "@scrabble-solver/dictionaries": "^2.8.5",
-    "@scrabble-solver/logger": "^2.8.5",
-    "@scrabble-solver/solver": "^2.8.5",
-    "@scrabble-solver/types": "^2.8.5",
-    "@scrabble-solver/word-definitions": "^2.8.5",
+    "@scrabble-solver/configs": "^2.8.7",
+    "@scrabble-solver/constants": "^2.8.7",
+    "@scrabble-solver/dictionaries": "^2.8.7",
+    "@scrabble-solver/logger": "^2.8.7",
+    "@scrabble-solver/solver": "^2.8.7",
+    "@scrabble-solver/types": "^2.8.7",
+    "@scrabble-solver/word-definitions": "^2.8.7",
     "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": "79ba3664458e7dc8d805599a3cf3cd1faba86309"
+  "gitHead": "879bf9b68f27fa3d530d0582fd8fbbcd5c8b150b"
 }

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/Board.tsx

@@ -1,6 +1,6 @@
 import { FunctionComponent, Ref } from 'react';
 
-import { selectRowsWithCandidate, useTypedSelector } from 'state';
+import { selectBoard, selectRowsWithCandidate, useTypedSelector } from 'state';
 
 import BoardPure from './BoardPure';
 import { useGrid } from './hooks';
@@ -13,12 +13,14 @@ interface Props {
 
 const Board: FunctionComponent<Props> = ({ cellSize, className, innerRef }) => {
   const rows = useTypedSelector(selectRowsWithCandidate);
+  const board = useTypedSelector(selectBoard);
   const [{ lastDirection, refs }, { onDirectionToggle, onFocus, onKeyDown }] = useGrid(rows);
 
   return (
     <BoardPure
       className={className}
       cellSize={cellSize}
+      center={board.center}
       innerRef={innerRef}
       lastDirection={lastDirection}
       refs={refs}

package/src/components/Board/BoardPure.tsx

@@ -8,6 +8,7 @@ import { Cell as CellComponent } from './components';
 interface Props {
   className?: string;
   cellSize: number;
+  center: Cell;
   innerRef?: Ref<HTMLDivElement>;
   lastDirection: 'horizontal' | 'vertical';
   refs: RefObject<HTMLInputElement>[][];
@@ -19,11 +20,12 @@ interface Props {
 
 const BoardPure: FunctionComponent<Props> = ({
   className,
+  cellSize,
+  center,
   innerRef,
   lastDirection,
   refs,
   rows,
-  cellSize,
   onDirectionToggle,
   onFocus,
   onKeyDown,
@@ -37,6 +39,7 @@ const BoardPure: FunctionComponent<Props> = ({
             cell={cell}
             direction={lastDirection}
             inputRef={refs[y][x]}
+            isCenter={center.x === x && center.y === y}
             key={x}
             size={cellSize}
             onDirectionToggle={onDirectionToggle}

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

@@ -13,6 +13,34 @@ $icon-size: 16px;
   transition: var(--transition);
   background-clip: padding-box;
 
+  &.bonusStart,
+  &.bonusWord2,
+  &.bonusWord3 {
+    position: relative;
+
+    &:before {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      font-weight: bold;
+      pointer-events: none;
+    }
+  }
+
+  &.bonusStart {
+    background-color: var(--color--red--light);
+
+    &:before {
+      content: '★';
+      color: var(--color--foreground--secondary);
+    }
+  }
+
   &.bonusCharacter1 {
     background-color: var(--color--yellow--light);
   }
@@ -39,22 +67,11 @@ $icon-size: 16px;
 
   &.bonusWord2,
   &.bonusWord3 {
-    position: relative;
     background-color: var(--color--inactive);
 
     &:before {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
       font-size: 75%;
-      font-weight: bold;
       color: white;
-      pointer-events: none;
     }
   }
 

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

@@ -13,12 +13,22 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isCenter: boolean;
   size: number;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
 }
 
-const Cell: FunctionComponent<Props> = ({ cell, className, direction, inputRef, size, onDirectionToggle, onFocus }) => {
+const Cell: FunctionComponent<Props> = ({
+  cell,
+  className,
+  direction,
+  inputRef,
+  isCenter,
+  size,
+  onDirectionToggle,
+  onFocus,
+}) => {
   const { tile, x, y } = cell;
   const dispatch = useDispatch();
   const translate = useTranslate();
@@ -53,6 +63,7 @@ const Cell: FunctionComponent<Props> = ({ cell, className, direction, inputRef,
       className={className}
       direction={direction}
       inputRef={inputRef}
+      isCenter={isCenter}
       isEmpty={isEmpty}
       points={points}
       size={size}

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

@@ -17,6 +17,7 @@ interface Props {
   className?: string;
   direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
+  isCenter: boolean;
   isEmpty: boolean;
   points?: number;
   size: number;
@@ -34,6 +35,7 @@ const CellPure: FunctionComponent<Props> = ({
   className,
   direction,
   inputRef,
+  isCenter,
   isEmpty,
   points,
   size,
@@ -45,7 +47,7 @@ const CellPure: FunctionComponent<Props> = ({
   onToggleBlankClick,
 }) => (
   <div
-    className={classNames(styles.cell, getBonusClassname(cell, bonus), className, {
+    className={classNames(styles.cell, getBonusClassname(cell, bonus, isCenter), className, {
       [styles.candidate]: cell.isCandidate(),
     })}
     style={style}

package/src/components/Board/components/Cell/lib.ts

@@ -20,8 +20,16 @@ const CHARACTER_MULTIPLIER_CLASSNAMES: Record<number, string> = {
   3: styles.bonusCharacterMultiplier3,
 };
 
-export const getBonusClassname = (cell: Cell, bonus: Bonus | undefined): string | undefined => {
-  if (!bonus || !cell.isEmpty) {
+export const getBonusClassname = (cell: Cell, bonus: Bonus | undefined, isCenter: boolean): string | undefined => {
+  if (!cell.isEmpty) {
+    return undefined;
+  }
+
+  if (isCenter) {
+    return styles.bonusStart;
+  }
+
+  if (!bonus) {
     return undefined;
   }
 

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/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 +

package/src/lib/index.ts

@@ -15,8 +15,9 @@ export { default as getTotalRemainingTilesCount } from './getTotalRemainingTiles
 export { default as getTileSizes } from './getTileSizes';
 export { default as inverseDirection } from './inverseDirection';
 export { default as isCtrl } from './isCtrl';
-export { default as isLocale } from './isLocale';
 export { default as isMac } from './isMac';
+export { default as isRegExp } from './isRegExp';
+export { default as isStringArray } from './isStringArray';
 export { default as memoize } from './memoize';
 export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';

package/src/lib/isRegExp.ts

@@ -0,0 +1,11 @@
+const isRegExp = (value: string): boolean => {
+  try {
+    // eslint-disable-next-line no-new
+    new RegExp(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+export default isRegExp;

package/src/lib/isStringArray.ts

@@ -0,0 +1,5 @@
+const isStringArray = (value: unknown): value is string[] => {
+  return Array.isArray(value) && value.every((item) => typeof item === 'string');
+};
+
+export default isStringArray;

package/src/lib/sortResults.ts

@@ -6,13 +6,13 @@ import createKeyComparator from './createKeyComparator';
 import reverseComparator from './reverseComparator';
 
 const comparators: Record<ResultColumn, Comparator<Result>> = {
-  [ResultColumn.BlanksCount]: createKeyComparator('numberOfBlanks'),
-  [ResultColumn.ConsonantsCount]: createKeyComparator('numberOfConsonants'),
+  [ResultColumn.BlanksCount]: createKeyComparator('blanksCount'),
+  [ResultColumn.ConsonantsCount]: createKeyComparator('consonantsCount'),
   [ResultColumn.Points]: createKeyComparator('points'),
-  [ResultColumn.TilesCount]: createKeyComparator('numberOfTiles'),
-  [ResultColumn.VowelsCount]: createKeyComparator('numberOfVowels'),
+  [ResultColumn.TilesCount]: createKeyComparator('tilesCount'),
+  [ResultColumn.VowelsCount]: createKeyComparator('vowelsCount'),
   [ResultColumn.Word]: createKeyComparator('word'),
-  [ResultColumn.WordsCount]: createKeyComparator('numberOfWords'),
+  [ResultColumn.WordsCount]: createKeyComparator('wordsCount'),
 };
 
 const sortResults = (

package/src/pages/_app.tsx

@@ -7,7 +7,9 @@ import { createAppStore } from 'state';
 
 import 'styles/global.scss';
 
-const DESCRIPTION = 'Scrabble Solver 2 - The ultimate, open-source cheating app for Scrabble and Literaki';
+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.';
 const KEYWORDS = [
   'Scrabble',
   'Solver',
@@ -54,8 +56,9 @@ const App: FunctionComponent<AppProps> = ({ Component, pageProps }) => (
 
     <Provider store={store}>
       <p style={{ fontSize: 0 }}>
-        Scrabble Solver 2 is the most popular, online, open-source, cheating app for Scrabble. It's available in
-        English, French, German, Polish &amp; Spanish! Source code is available on GitHub - contributions are welcome!
+        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!
       </p>
       <Component {...pageProps} />
     </Provider>