@scrabble-solver/scrabble-solver 2.13.9 → 2.13.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.13.9",
+  "version": "2.13.11",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,13 +30,13 @@
     "@floating-ui/react": "^0.26.17",
     "@kamilmielnik/trie": "^3.0.0",
     "@reduxjs/toolkit": "^2.2.5",
-    "@scrabble-solver/configs": "^2.13.9",
-    "@scrabble-solver/constants": "^2.13.9",
-    "@scrabble-solver/dictionaries": "^2.13.9",
-    "@scrabble-solver/logger": "^2.13.9",
-    "@scrabble-solver/solver": "^2.13.9",
-    "@scrabble-solver/types": "^2.13.9",
-    "@scrabble-solver/word-definitions": "^2.13.9",
+    "@scrabble-solver/configs": "^2.13.11",
+    "@scrabble-solver/constants": "^2.13.11",
+    "@scrabble-solver/dictionaries": "^2.13.11",
+    "@scrabble-solver/logger": "^2.13.11",
+    "@scrabble-solver/solver": "^2.13.11",
+    "@scrabble-solver/types": "^2.13.11",
+    "@scrabble-solver/word-definitions": "^2.13.11",
     "classnames": "^2.5.1",
     "env-cmd": "^10.1.0",
     "include-media": "^2.0.0",
@@ -52,6 +52,7 @@
     "react-window": "^1.8.10",
     "redux-saga": "^1.3.0",
     "store2": "^2.14.3",
+    "use-debounce": "^10.0.1",
     "workbox-expiration": "^7.1.0",
     "workbox-precaching": "^7.1.0",
     "workbox-routing": "^7.1.0",
@@ -72,5 +73,5 @@
     "@types/redux-saga": "^0.10.5",
     "sass": "^1.77.5"
   },
-  "gitHead": "d09676296f8fafadb7da0cf1e11fb240aaf309ee"
+  "gitHead": "1b418c5dadc1ff365839cd7825f57eb6d182a815"
 }

package/src/api/isBoardValid.ts

@@ -3,7 +3,7 @@ import { BoardJson, CellJson, Config } from '@scrabble-solver/types';
 import isRowValid from './isRowValid';
 
 const isBoardValid = (board: BoardJson, config: Config): boolean => {
-  if (board.length !== config.boardHeight) {
+  if (board.length !== config.boardSize) {
     return false;
   }
 

package/src/api/isCellValid.ts

@@ -5,11 +5,11 @@ import isCharacterValid from './isCharacterValid';
 const isCellValid = (cell: CellJson, config: Config): boolean => {
   const { isEmpty, tile, x, y } = cell;
 
-  if (x < 0 || x >= config.boardWidth) {
+  if (x < 0 || x >= config.boardSize) {
     return false;
   }
 
-  if (y < 0 || y >= config.boardHeight) {
+  if (y < 0 || y >= config.boardSize) {
     return false;
   }
 

package/src/api/isRowValid.ts

@@ -3,7 +3,7 @@ import { CellJson, Config } from '@scrabble-solver/types';
 import isCellValid from './isCellValid';
 
 const isRowValid = (row: CellJson[], config: Config): boolean => {
-  if (row.length !== config.boardWidth) {
+  if (row.length !== config.boardSize) {
     return false;
   }
 

package/src/components/Board/components/Actions/Actions.tsx

@@ -3,8 +3,9 @@ import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
+import { useIsTouchDevice } from 'hooks';
 import { Keyboard, Square, SquareFill } from 'icons';
-import { findCell } from 'lib';
+import { findCell, isMac } from 'lib';
 import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
 import { Direction } from 'types';
 
@@ -29,6 +30,7 @@ const Actions = forwardRef<HTMLDivElement, Props>(
     ref,
   ) => {
     const translate = useTranslate();
+    const isTouchDevice = useIsTouchDevice();
     const inputMode = useTypedSelector(selectInputMode);
     const filter = useTypedSelector((state) => selectCellFilter(state, cell));
     const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
@@ -66,7 +68,12 @@ const Actions = forwardRef<HTMLDivElement, Props>(
             aria-label={translate(labelTranslationKey)}
             className={classNames(styles.action)}
             Icon={Icon}
-            tooltip={translate(labelTranslationKey)}
+            tooltip={
+              <>
+                <span>{translate(labelTranslationKey)}</span>
+                {!isTouchDevice && <span> ({isMac() ? '⌘' : 'Ctrl'} + G)</span>}
+              </>
+            }
             onClick={onToggleFilterCell}
             onMouseDown={handleMouseDown}
           />
@@ -77,7 +84,12 @@ const Actions = forwardRef<HTMLDivElement, Props>(
             aria-label={isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             className={styles.action}
             Icon={isBlank ? SquareFill : Square}
-            tooltip={isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
+            tooltip={
+              <>
+                <span>{isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}</span>
+                {!isTouchDevice && <span> ({translate('common.space')})</span>}
+              </>
+            }
             onClick={onToggleBlank}
             onMouseDown={handleMouseDown}
           />

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

@@ -101,7 +101,7 @@ const Cell: FunctionComponent<Props> = ({
       })}
       className={classNames(styles.tile, className, {
         [styles.first3]: x < 3,
-        [styles.last3]: config.boardWidth - x - 1 < 3,
+        [styles.last3]: config.boardSize - 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/ToggleDirectionButton/ToggleDirectionButton.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { ButtonHTMLAttributes, FunctionComponent } from 'react';
 
+import { useIsTouchDevice } from 'hooks';
 import { ArrowDown } from 'icons';
 import { useTranslate } from 'state';
 import { Direction } from 'types';
@@ -16,16 +17,22 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
 
 const ToggleDirectionButton: FunctionComponent<Props> = ({ className, direction, ...props }) => {
   const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
 
   return (
     <Button
-      aria-label={translate('cell.toggle-direction')}
+      aria-label={translate('keyMap.board.toggle-cell-filter')}
       className={classNames(styles.button, className)}
       Icon={ArrowDown}
       iconClassName={classNames(styles.icon, {
         [styles.right]: direction === 'horizontal',
       })}
-      tooltip={translate('cell.toggle-direction')}
+      tooltip={
+        <>
+          <span>{translate('keyMap.board.toggle-cell-filter')}</span>
+          {!isTouchDevice && <span> ({translate('common.arrows')})</span>}
+        </>
+      }
       {...props}
     />
   );

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

@@ -32,7 +32,7 @@ const useBackgroundImage = () => {
   const { isLessThanXs } = useMediaQueries();
   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 center = { x: Math.floor(config.boardSize / 2), y: Math.floor(config.boardSize / 2) };
   const viewBoxHeight = boardSize;
   const viewBoxWidth = boardSize;
   const bonusSize = cellSize * 0.8;
@@ -157,7 +157,7 @@ const useBackgroundImage = () => {
           </>
         )}
 
-        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+        {Array.from({ length: config.boardSize - 1 }).map((_value, index) => (
           <use
             key={index}
             href={`#${HORIZONTAL_LINE}`}
@@ -165,7 +165,7 @@ const useBackgroundImage = () => {
           />
         ))}
 
-        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+        {Array.from({ length: config.boardSize - 1 }).map((_value, index) => (
           <use
             key={index}
             href={`#${VERTICAL_LINE}`}

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

@@ -17,13 +17,11 @@ const useBoardStyle = () => {
       backgroundImage,
       fontSize: tileFontSize,
       gridTemplateColumns:
-        showCoordinates === 'hidden' ? `repeat(${config.boardWidth}, 1fr)` : `0.5fr repeat(${config.boardWidth}, 1fr)`,
+        showCoordinates === 'hidden' ? `repeat(${config.boardSize}, 1fr)` : `0.5fr repeat(${config.boardSize}, 1fr)`,
       gridTemplateRows:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardHeight}, 1fr)`
-          : `0.5fr repeat(${config.boardHeight}, 1fr)`,
+        showCoordinates === 'hidden' ? `repeat(${config.boardSize}, 1fr)` : `0.5fr repeat(${config.boardSize}, 1fr)`,
     }),
-    [backgroundImage, config.boardHeight, config.boardWidth, tileFontSize],
+    [backgroundImage, config.boardSize, tileFontSize],
   );
 
   return boardStyle;

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

@@ -18,7 +18,7 @@ import { useDispatch } from 'react-redux';
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
+import { boardSlice, cellFilterSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction, Point } from 'types';
 
 import { getPositionInGrid } from '../lib';
@@ -106,7 +106,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       };
 
       characters.forEach((character) => {
-        if (x >= config.boardWidth || y >= config.boardHeight) {
+        if (x >= config.boardSize || y >= config.boardSize) {
           return;
         }
 
@@ -299,15 +299,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
-        const isTogglingBlank = isCtrl(event) && character === 'b';
         const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
 
-        if (isTogglingBlank) {
-          event.preventDefault();
-          dispatch(boardSlice.actions.toggleCellIsBlank(position));
-          return;
-        }
-
         if (isCtrl(event) && twoCharacterTile) {
           event.preventDefault();
           dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
@@ -316,6 +309,17 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         }
 
         const cell = rows[y][x];
+
+        if (isCtrl(event) && character === 'g') {
+          event.preventDefault();
+
+          if (!cell.hasTile()) {
+            dispatch(cellFilterSlice.actions.toggle(position));
+          }
+
+          return;
+        }
+
         const twoCharacterCandidate = cell.tile.character + character;
 
         if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {

package/src/components/Key/Key.module.scss

@@ -5,6 +5,7 @@
   height: var(--key--height);
   padding: var(--spacing--s) var(--spacing--m);
   background-color: var(--color--white);
+  color: var(--color--foreground);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
@@ -12,10 +13,10 @@
   line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;
-  white-space: nowrap;
+  white-space: pre-wrap;
 
   & + & {
-    margin-left: var(--spacing--xs);
+    margin-inline-start: var(--spacing--xs);
   }
 
   :global(svg) {

package/src/components/Keys/Arrows/Arrows.module.scss

@@ -0,0 +1,41 @@
+.arrows {
+  display: inline-grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: var(--spacing--xs);
+  gap: 1px;
+}
+
+.arrow {
+  margin-inline-start: 0 !important;
+  max-width: var(--key--height--small);
+  padding: 0;
+}
+
+.up {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.left {
+  grid-row: 2;
+  grid-column: 1;
+
+  [dir='rtl'] & {
+    grid-column: 3;
+  }
+}
+
+.right {
+  grid-row: 2;
+  grid-column: 3;
+
+  [dir='rtl'] & {
+    grid-column: 1;
+  }
+}
+
+.down {
+  grid-row: 2;
+  grid-column: 2;
+}

package/src/components/Keys/Arrows/Arrows.tsx

@@ -0,0 +1,31 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from 'icons';
+
+import Key from '../../Key';
+
+import styles from './Arrows.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Arrows: FunctionComponent<Props> = ({ className }) => (
+  <div className={classNames(styles.arrows, className)}>
+    <Key className={classNames(styles.arrow, styles.left)}>
+      <ArrowLeft />
+    </Key>
+    <Key className={classNames(styles.arrow, styles.up)}>
+      <ArrowUp />
+    </Key>
+    <Key className={classNames(styles.arrow, styles.right)}>
+      <ArrowRight />
+    </Key>
+    <Key className={classNames(styles.arrow, styles.down)}>
+      <ArrowDown />
+    </Key>
+  </div>
+);
+
+export default Arrows;

package/src/components/Keys/Arrows/index.ts

@@ -0,0 +1 @@
+export { default } from './Arrows';

package/src/components/Keys/index.ts

@@ -0,0 +1 @@
+export { default as Arrows } from './Arrows';

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

@@ -39,7 +39,7 @@ const InputPrompt = forwardRef<HTMLFormElement, Props>(
       (event) => {
         event.preventDefault();
         const charactersByCase = extractCharactersByCase(config, value);
-        const characters = Array.from({ length: config.maximumCharactersCount }, (_, index) => {
+        const characters = Array.from({ length: config.rackSize }, (_, index) => {
           return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
         });
         dispatch(rackSlice.actions.changeCharacters({ characters, index: 0 }));

package/src/components/Results/HeaderButton.tsx

@@ -13,10 +13,9 @@ import { Column } from './types';
 
 interface Props {
   column: Column;
-  sortable?: boolean;
 }
 
-const HeaderButton = ({ column, sortable }: Props): ReactElement => {
+const HeaderButton = ({ column }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
@@ -29,12 +28,10 @@ const HeaderButton = ({ column, sortable }: Props): ReactElement => {
     <Tooltip tooltip={translate(column.translationKey)}>
       <button
         aria-label={translate(column.translationKey)}
-        className={classNames(styles.headerButton, column.className, {
-          [styles.sortable]: sortable,
-        })}
+        className={classNames(styles.headerButton, column.className)}
         key={column.id}
         type="button"
-        onClick={sortable ? handleClick : undefined}
+        onClick={handleClick}
       >
         <span className={styles.cell}>
           <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>

package/src/components/Results/Results.module.scss

@@ -52,6 +52,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
 .headerButton {
   @include button-reset;
+  @include focus-effect;
+  cursor: pointer;
 
   text-transform: uppercase;
   transition: var(--transition);
@@ -64,12 +66,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   &:last-child {
     border-start-end-radius: inherit;
   }
-}
-
-.sortable {
-  @include focus-effect;
-
-  cursor: pointer;
 
   &:focus,
   &:hover {

package/src/components/Results/Results.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
 import { FixedSizeList } from 'react-window';
+import { useDebounce } from 'use-debounce';
 
 import { useAppLayout, useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
@@ -32,6 +33,8 @@ interface Props {
   highlightedIndex?: number;
 }
 
+const IS_LOADING_DEBOUNCE = 100;
+
 const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
   const { resultsHeight, resultsWidth } = useAppLayout();
@@ -39,6 +42,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const { direction } = LOCALE_FEATURES[locale];
   const results = useTypedSelector(selectResults);
   const isLoading = useTypedSelector(selectIsLoading);
+  const [isLoadingDebounced] = useDebounce(isLoading, IS_LOADING_DEBOUNCE);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
@@ -69,7 +73,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
     <div className={classNames(styles.results, className)}>
       <div className={styles.header}>
         {columns.map((column) => (
-          <HeaderButton column={column} key={column.id} sortable={column.sortable} />
+          <HeaderButton column={column} key={column.id} />
         ))}
       </div>
 
@@ -128,7 +132,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
 
       {showInput && <ResultsInput className={styles.input} />}
 
-      {isLoading && <Loading />}
+      {isLoadingDebounced && <Loading />}
     </div>
   );
 };

package/src/components/Results/getCoordinatesColumn.ts

@@ -8,7 +8,6 @@ const getCoordinatesColumn = (): Column => {
     className: styles.coordinates,
     id: ResultColumn.Coordinates,
     translationKey: 'settings.showCoordinates',
-    sortable: false,
   };
 };
 

package/src/components/Results/getLocaleColumns.ts

@@ -10,13 +10,11 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.word,
       id: ResultColumn.Word,
       translationKey: 'common.word',
-      sortable: true,
     },
     {
       className: styles.stat,
       id: ResultColumn.TilesCount,
       translationKey: 'common.tiles',
-      sortable: true,
     },
   ];
 
@@ -25,7 +23,6 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.ConsonantsCount,
       translationKey: 'common.consonants',
-      sortable: true,
     });
   }
 
@@ -34,7 +31,6 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.VowelsCount,
       translationKey: 'common.vowels',
-      sortable: true,
     });
   }
 
@@ -43,19 +39,16 @@ const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Co
       className: styles.stat,
       id: ResultColumn.BlanksCount,
       translationKey: 'common.blanks',
-      sortable: true,
     },
     {
       className: styles.stat,
       id: ResultColumn.WordsCount,
       translationKey: 'common.words',
-      sortable: true,
     },
     {
       className: styles.points,
       id: ResultColumn.Points,
       translationKey: 'common.points',
-      sortable: true,
     },
   );
 

package/src/components/Results/types.ts

@@ -7,7 +7,6 @@ export interface Column {
   className: string;
   id: ResultColumn;
   translationKey: TranslationKey;
-  sortable?: boolean;
 }
 
 export interface ResultCallbacks {

package/src/components/index.ts

@@ -22,4 +22,6 @@ export { default as SeoMessage } from './SeoMessage';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
 export { default as Tile } from './Tile';
+export * from './keys';
+export * from './Keys';
 export * from './Tooltip';

package/src/components/keys.tsx

@@ -0,0 +1,26 @@
+import { FunctionComponent } from 'react';
+
+import { isMac } from 'lib';
+import { useTranslate } from 'state';
+
+import Key from './Key';
+
+interface Props {
+  className?: string;
+}
+
+export const Backspace: FunctionComponent<Props> = ({ className }) => <Key className={className}>← Backspace</Key>;
+
+export const Ctrl: FunctionComponent<Props> = ({ className }) => (
+  <Key className={className}>{isMac() ? '⌘' : 'Ctrl'}</Key>
+);
+
+export const Del: FunctionComponent<Props> = ({ className }) => <Key className={className}>Del</Key>;
+
+export const Enter: FunctionComponent<Props> = ({ className }) => <Key className={className}>Enter ⏎</Key>;
+
+export const Space: FunctionComponent<Props> = ({ className }) => {
+  const translate = useTranslate();
+
+  return <Key className={className}>{` ${translate('common.space')} `}</Key>;
+};

package/src/hooks/useAppLayout.ts

@@ -39,7 +39,7 @@ const useAppLayout = () => {
   const solverHeight = viewportHeight - navHeight;
   const solverWidth = viewportWidth;
   const maxBoardWidth = solverWidth - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
+  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.rackSize, RACK_TILE_SIZE_MAX);
   const candidatePickerHeight = showResultCandidatePicker ? BUTTON_HEIGHT + componentsSpacing : 0;
   const bottomContainerHeight = candidatePickerHeight + tileSize + 2 * componentsSpacing;
   const maxBoardHeight = isBoardFullWidth
@@ -49,25 +49,25 @@ const useAppLayout = () => {
   const coordinatesSizeRatio = showCoordinates === 'hidden' ? 0 : 0.5;
   const coordinatesBorderWidth = showCoordinates === 'hidden' ? 0 : 1;
   const cellWidth =
-    (maxBoardWidth - (config.boardWidth + 1 + coordinatesBorderWidth) * BORDER_WIDTH) /
-    (config.boardWidth + coordinatesSizeRatio);
+    (maxBoardWidth - (config.boardSize + 1 + coordinatesBorderWidth) * BORDER_WIDTH) /
+    (config.boardSize + coordinatesSizeRatio);
   const cellHeight =
-    (maxBoardHeight - (config.boardHeight + 1 + coordinatesBorderWidth) * BORDER_WIDTH) /
-    (config.boardHeight + coordinatesSizeRatio);
+    (maxBoardHeight - (config.boardSize + 1 + coordinatesBorderWidth) * BORDER_WIDTH) /
+    (config.boardSize + coordinatesSizeRatio);
   const cellSize = Math.min(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MAX);
   const coordinatesSize = coordinatesSizeRatio * cellSize;
   const boardSize =
-    (cellSize + BORDER_WIDTH) * config.boardWidth +
+    (cellSize + BORDER_WIDTH) * config.boardSize +
     BORDER_WIDTH +
     (showCoordinates === 'hidden' ? 0 : coordinatesSize + BORDER_WIDTH);
-  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
+  const maxControlsWidth = tileSize * config.rackSize + 2 * BORDER_WIDTH;
   const showResultsInModal = isLessThanL;
   const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
   const modalWidth = isLessThanS ? viewportWidth : MODAL_WIDTH;
   const resultsHeight = isLessThanL
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
     : boardSize - componentsSpacing - dictionaryHeight;
-  const rackWidth = tileSize * config.maximumCharactersCount;
+  const rackWidth = tileSize * config.rackSize;
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,

package/src/i18n/languages/english.json

@@ -5,7 +5,7 @@
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
   "cell.tile.location": "Board: tile ({{x}}, {{y}})",
-  "cell.toggle-direction": "Typing direction",
+  "common.arrows": "Arrow keys",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",
@@ -14,6 +14,7 @@
   "common.next": "Next",
   "common.points": "Points",
   "common.previous": "Previous",
+  "common.space": "Spacebar",
   "common.tiles": "Tiles",
   "common.two-letter-tiles": "Two-letter",
   "common.vowels": "Vowels",
@@ -34,6 +35,7 @@
   "keyMap": "Keyboard shortcuts",
   "keyMap.board": "Board",
   "keyMap.board.toggle-blank": "Mark/unmark tile as a blank",
+  "keyMap.board.toggle-cell-filter": "Toggle destination filter",
   "keyMap.board.toggle-direction": "Toggle typing direction",
   "keyMap.board-and-rack": "Board & rack",
   "keyMap.board-and-rack.insert-two-letter-tile": "Insert two-letter tile",
@@ -41,7 +43,7 @@
   "keyMap.board-and-rack.remove-tile": "Remove tile",
   "keyMap.board-and-rack.submit": "Start solving",
   "keyMap.rack": "Rack",
-  "keyMap.rack.insert-blank": "Insert blank (spacebar)",
+  "keyMap.rack.insert-blank": "Insert blank",
   "menu": "Menu",
   "rack.placeholder": "Letters",
   "rack.tile.location": "Rack: tile ({{index}})",