scrabble-solver 2.13.11 → 2.13.13

package/packages/scrabble-solver/src/components/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
+    <div aria-label={translation} className={classNames(styles.loading, className)} data-testid="loading" role="status">
       <div className={styles.dim} />
       <div className={styles.text}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

package/packages/scrabble-solver/src/components/Modal/components/Section/Section.tsx

@@ -6,11 +6,12 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
+  label: string;
   title: ReactNode;
 }
 
-const Section: FunctionComponent<Props> = ({ children, className, title }) => (
-  <section className={classNames(styles.section, className)}>
+const Section: FunctionComponent<Props> = ({ children, className, label, title }) => (
+  <section aria-label={label} className={classNames(styles.section, className)}>
     <h2 className={styles.heading}>{title}</h2>
     <div>{children}</div>
   </section>

package/packages/scrabble-solver/src/components/NavButtons/NavButtons.tsx

@@ -125,6 +125,7 @@ const NavButtons: FunctionComponent<Props> = ({
 
         <IconButton
           aria-label={translate('settings')}
+          data-testid="settings-button"
           className={styles.button}
           Icon={Cog}
           tooltip={translate('settings')}

package/packages/scrabble-solver/src/components/Rack/Rack.tsx

@@ -168,6 +168,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         className={classNames(styles.rack, className, {
           [styles.hidden]: showInputPrompt,
         })}
+        data-testid="rack"
         ref={ref}
         style={{ fontSize: tileFontSize }}
         onPaste={handlePaste}

package/packages/scrabble-solver/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { CSSProperties, FunctionComponent, ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
@@ -11,19 +11,23 @@ import styles from './Results.module.scss';
 interface Props {
   children?: ReactNode;
   className?: string;
+  dataTestId?: string;
+  style?: CSSProperties;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ children, className, translationKey, tooltip, value }) => {
+const Cell: FunctionComponent<Props> = ({ children, className, dataTestId, style, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
 
   return (
     <Tooltip tooltip={`${translate(translationKey)}: ${tooltip || formattedValue}`}>
-      <div className={classNames(styles.cell, className)}>{children || formattedValue}</div>
+      <div className={classNames(styles.cell, className)} data-testid={dataTestId} style={style}>
+        {children || formattedValue}
+      </div>
     </Tooltip>
   );
 };

package/packages/scrabble-solver/src/components/Results/Header.tsx

@@ -0,0 +1,99 @@
+import { FunctionComponent } from 'react';
+
+import { useAppLayout, useColumns } from 'hooks';
+import { GeoAlt, OneTwoThree, Square, SquareA, SquareB, Squares, Words } from 'icons';
+import { RESULTS_COLUMN_WIDTH } from 'parameters';
+import { ResultColumnId } from 'types';
+
+import HeaderButton from './HeaderButton';
+import styles from './Results.module.scss';
+
+const Results: FunctionComponent = () => {
+  const { resultWordWidth } = useAppLayout();
+  const columns = useColumns();
+
+  return (
+    <div className={styles.header}>
+      {columns[ResultColumnId.Coordinates] && (
+        <HeaderButton
+          className={styles.coordinates}
+          Icon={GeoAlt}
+          id={ResultColumnId.Coordinates}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Coordinates] }}
+          translationKey="settings.showCoordinates"
+        />
+      )}
+
+      {columns[ResultColumnId.Word] && (
+        <HeaderButton
+          className={styles.word}
+          id={ResultColumnId.Word}
+          style={{ flexBasis: resultWordWidth }}
+          translationKey="common.word"
+        />
+      )}
+
+      {columns[ResultColumnId.TilesCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Squares}
+          id={ResultColumnId.TilesCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.TilesCount] }}
+          translationKey="common.tiles"
+        />
+      )}
+
+      {columns[ResultColumnId.VowelsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareA}
+          id={ResultColumnId.VowelsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.VowelsCount] }}
+          translationKey="common.vowels"
+        />
+      )}
+
+      {columns[ResultColumnId.ConsonantsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={SquareB}
+          id={ResultColumnId.ConsonantsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.ConsonantsCount] }}
+          translationKey="common.consonants"
+        />
+      )}
+
+      {columns[ResultColumnId.BlanksCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Square}
+          id={ResultColumnId.BlanksCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.BlanksCount] }}
+          translationKey="common.blanks"
+        />
+      )}
+
+      {columns[ResultColumnId.WordsCount] && (
+        <HeaderButton
+          className={styles.stat}
+          Icon={Words}
+          id={ResultColumnId.WordsCount}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.WordsCount] }}
+          translationKey="common.words"
+        />
+      )}
+
+      {columns[ResultColumnId.Points] && (
+        <HeaderButton
+          className={styles.points}
+          Icon={OneTwoThree}
+          id={ResultColumnId.Points}
+          style={{ flexBasis: RESULTS_COLUMN_WIDTH[ResultColumnId.Points] }}
+          translationKey="common.points"
+        />
+      )}
+    </div>
+  );
+};
+
+export default Results;

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -1,42 +1,47 @@
 import classNames from 'classnames';
-import { ReactElement, useCallback } from 'react';
+import { CSSProperties, FunctionComponent, ReactElement, SVGAttributes, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { SortDirection } from 'types';
+import { ResultColumnId, SortDirection, TranslationKey } from 'types';
 
 import { Tooltip } from '../Tooltip';
 
 import styles from './Results.module.scss';
-import { Column } from './types';
 
 interface Props {
-  column: Column;
+  className: string;
+  Icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  id: ResultColumnId;
+  translationKey: TranslationKey;
+  style?: CSSProperties;
 }
 
-const HeaderButton = ({ column }: Props): ReactElement => {
+const HeaderButton = ({ className, Icon, id, translationKey, style }: Props): ReactElement => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const sort = useTypedSelector(selectResultsSort);
 
   const handleClick = useCallback(() => {
-    dispatch(resultsSlice.actions.sort(column.id));
-  }, [column.id, dispatch]);
+    dispatch(resultsSlice.actions.sort(id));
+  }, [dispatch, id]);
 
   return (
-    <Tooltip tooltip={translate(column.translationKey)}>
+    <Tooltip tooltip={translate(translationKey)}>
       <button
-        aria-label={translate(column.translationKey)}
-        className={classNames(styles.headerButton, column.className)}
-        key={column.id}
+        aria-label={translate(translationKey)}
+        className={classNames(styles.headerButton, className)}
+        style={style}
         type="button"
         onClick={handleClick}
       >
         <span className={styles.cell}>
-          <span className={styles.headerButtonLabel}>{translate(column.translationKey)}</span>
+          {Icon && <Icon className={styles.headerButtonIcon} />}
 
-          {sort.column === column.id && (
+          {!Icon && <span className={styles.headerButtonLabel}>{translate(translationKey)}</span>}
+
+          {sort.column === id && (
             <>
               {sort.direction === SortDirection.Ascending && <SortUp className={styles.sortIcon} />}
               {sort.direction === SortDirection.Descending && <SortDown className={styles.sortIcon} />}

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useMemo, useRef } from 'react';
 import Highlighter from 'react-highlight-words';
 
+import { useAppLayout, useColumns } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { getCoordinates, noop } from 'lib';
 import {
@@ -11,12 +12,11 @@ import {
   selectShowCoordinates,
   useTypedSelector,
 } from 'state';
-import { ResultColumn } from 'types';
+import { ResultColumnId } from 'types';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
 import { ResultData } from './types';
-import useColumns from './useColumns';
 
 interface Props {
   data: ResultData;
@@ -34,16 +34,16 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     onMouseEnter = noop,
     onMouseLeave = noop,
   } = data;
+  const { resultWordWidth } = useAppLayout();
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const query = useTypedSelector(selectResultsQuery);
-  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
+  const { direction, separator } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
   const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
-  const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
   const coordinates = useMemo(() => getCoordinates(result, showCoordinates), [result, showCoordinates]);
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -54,11 +54,13 @@ const Result = ({ data, index, style }: Props): ReactElement => {
 
   return (
     <button
+      aria-hidden={isMatching ? undefined : 'true'}
       aria-label={result.word}
       className={classNames(styles.result, {
         [styles.highlighted]: index === highlightedIndex,
         [styles.notMatching]: !isMatching,
       })}
+      data-testid="result"
       ref={ref}
       style={style}
       type="button"
@@ -69,33 +71,38 @@ const Result = ({ data, index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        {enabledColumns[ResultColumn.Coordinates] && (
+        {columns[ResultColumnId.Coordinates] && (
           <Cell className={styles.coordinates} translationKey="settings.showCoordinates" value={coordinates} />
         )}
 
-        {enabledColumns[ResultColumn.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word}>
+        {columns[ResultColumnId.Word] && (
+          <Cell
+            className={styles.word}
+            style={{ flexBasis: resultWordWidth }}
+            translationKey="common.word"
+            value={result.word}
+          >
             <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
           </Cell>
         )}
 
-        {enabledColumns[ResultColumn.TilesCount] && (
+        {columns[ResultColumnId.TilesCount] && (
           <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
         )}
 
-        {enabledColumns[ResultColumn.ConsonantsCount] && consonants && (
-          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+        {columns[ResultColumnId.VowelsCount] && (
+          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
         )}
 
-        {enabledColumns[ResultColumn.VowelsCount] && vowels && (
-          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        {columns[ResultColumnId.ConsonantsCount] && (
+          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
         )}
 
-        {enabledColumns[ResultColumn.BlanksCount] && (
+        {columns[ResultColumnId.BlanksCount] && (
           <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
         )}
 
-        {enabledColumns[ResultColumn.WordsCount] && (
+        {columns[ResultColumnId.WordsCount] && (
           <Cell
             className={styles.stat}
             translationKey="common.words"
@@ -104,8 +111,8 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           />
         )}
 
-        {enabledColumns[ResultColumn.Points] && (
-          <Cell className={styles.points} translationKey="common.points" value={result.points} />
+        {columns[ResultColumnId.Points] && (
+          <Cell className={styles.points} dataTestId="points" translationKey="common.points" value={result.points} />
         )}
       </span>
     </button>

package/packages/scrabble-solver/src/components/Results/Results.module.scss

@@ -44,7 +44,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: 700;
   border-bottom: var(--border);
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -53,11 +52,13 @@ $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);
   background-color: var(--color--background);
+  height: 100%;
 
   &:first-child {
     border-start-start-radius: inherit;
@@ -72,6 +73,17 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &.points {
+    @include scrollbars;
+
+    overflow-y: scroll;
+
+    &,
+    &:hover {
+      scrollbar-color: transparent transparent;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -81,6 +93,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   text-align: start;
 }
 
+.headerButtonIcon {
+  flex: 0 0 auto;
+  width: var(--results--icon--size);
+  height: var(--results--icon--size);
+}
+
 .result {
   @include button-reset;
 
@@ -98,7 +116,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     }
   }
 
-  &.notMatching {
+  &[aria-hidden='true'] {
     color: var(--color--inactive);
 
     &:focus,
@@ -138,24 +156,18 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     justify-content: flex-start;
   }
 
-  .result &:first-child,
-  .headerButton:first-child & {
-    text-align: start;
+  .result &.word:first-child,
+  .headerButton.word:first-child & {
     padding-inline-start: $row-padding-horizontal;
   }
 
-  .result &:last-child,
-  .headerButton:last-child & {
-    padding-inline-end: $row-padding-horizontal;
-  }
-
   &:last-child {
     flex: 1;
   }
 }
 
 .word {
-  flex: 1 0;
+  flex: 0 0;
   text-transform: uppercase;
 }
 
@@ -176,7 +188,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .coordinates {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

package/packages/scrabble-solver/src/components/Results/Results.tsx

@@ -20,12 +20,11 @@ import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
 
-import HeaderButton from './HeaderButton';
+import Header from './Header';
 import Result from './Result';
 import styles from './Results.module.scss';
 import SolveButton from './SolveButton';
 import { ResultCallbacks, ResultData } from './types';
-import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
@@ -47,7 +46,6 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   const error = useTypedSelector(selectSolveError);
   const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
-  const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
   const scrollToIndexRef = useLatest(scrollToIndex);
   const hasResults = typeof error === 'undefined' && typeof results !== 'undefined';
@@ -70,12 +68,8 @@ const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIn
   }, [results, listRef, scrollToIndexRef]);
 
   return (
-    <div className={classNames(styles.results, className)}>
-      <div className={styles.header}>
-        {columns.map((column) => (
-          <HeaderButton column={column} key={column.id} />
-        ))}
-      </div>
+    <div className={classNames(styles.results, className)} data-testid="results">
+      <Header />
 
       <div className={styles.content}>
         {typeof error !== 'undefined' && (

package/packages/scrabble-solver/src/components/Results/types.ts

@@ -1,14 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 import { FocusEvent, MouseEvent } from 'react';
 
-import { ResultColumn, TranslationKey } from 'types';
-
-export interface Column {
-  className: string;
-  id: ResultColumn;
-  translationKey: TranslationKey;
-}
-
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;
   onClick?: (result: Result, event: MouseEvent) => void;

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -100,7 +100,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
           <div className={styles.column}>
             <Results callbacks={callbacks} className={styles.results} />
 
-            <div className={styles.dictionaryContainer}>
+            <div data-testid="dictionary" className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />
               <DictionaryInput className={styles.dictionaryInput} />
             </div>

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -77,6 +77,7 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.points5]: typeof points === 'number' && points >= 5,
       [styles.raised]: raised,
     })}
+    role={highlighted ? 'mark' : undefined}
     style={style}
   >
     {character || placeholder}

package/packages/scrabble-solver/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { default as useAppLayout } from './useAppLayout';
+export { default as useColumns } from './useColumns';
 export { default as useDirection } from './useDirection';
 export { default as useEffectOnce } from './useEffectOnce';
 export { default as useIsTouchDevice } from './useIsTouchDevice';

package/packages/scrabble-solver/src/hooks/useAppLayout.ts

@@ -15,10 +15,13 @@ import {
   MODAL_WIDTH,
   NAV_PADDING,
   RACK_TILE_SIZE_MAX,
+  RESULTS_COLUMN_WIDTH,
   SOLVER_COLUMN_WIDTH,
 } from 'parameters';
 import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
+import { ResultColumnId } from 'types';
 
+import useColumns from './useColumns';
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQueries from './useMediaQueries';
 import useViewportSize from './useViewportSize';
@@ -29,6 +32,7 @@ const useAppLayout = () => {
   const showCoordinates = useTypedSelector(selectShowCoordinates);
   const isTouchDevice = useIsTouchDevice();
   const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl } = useMediaQueries();
+  const columns = useColumns();
   const isBoardFullWidth = isLessThanM;
   const showResultCandidatePicker = isLessThanL;
   const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
@@ -68,6 +72,12 @@ const useAppLayout = () => {
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
     : boardSize - componentsSpacing - dictionaryHeight;
   const rackWidth = tileSize * config.rackSize;
+  const resultsWidth = isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH;
+  const columnsWidth = Object.keys(columns).reduce(
+    (sum, column) => sum + (RESULTS_COLUMN_WIDTH[column as ResultColumnId] ?? 0),
+    0,
+  );
+  const resultWordWidth = resultsWidth - 2 * BORDER_WIDTH - columnsWidth;
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
@@ -83,7 +93,8 @@ const useAppLayout = () => {
     rackHeight: tileSize,
     rackWidth,
     resultsHeight,
-    resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
+    resultsWidth,
+    resultWordWidth,
     showCompactControls: !showColumn,
     showKeyMap: !isTouchDevice,
     showResultsInModal,

package/packages/scrabble-solver/src/hooks/useColumns.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+import { selectColumns, useTypedSelector } from 'state';
+import { ResultColumnId } from 'types';
+
+import useMediaQueries from './useMediaQueries';
+
+const COLUMNS_XS = [ResultColumnId.Coordinates, ResultColumnId.Word, ResultColumnId.Points];
+
+const COLUMNS_S = [...COLUMNS_XS, ResultColumnId.BlanksCount, ResultColumnId.WordsCount];
+
+const COLUMNS_M = [...COLUMNS_XS];
+
+const COLUMNS_L = [...COLUMNS_XS];
+
+const useColumns = (): Partial<Record<ResultColumnId, boolean>> => {
+  const columns = useTypedSelector(selectColumns);
+  const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL } = useMediaQueries();
+
+  const filteredColumns = useMemo(() => {
+    if (isLessThanXs) {
+      return columns.filter((columnId) => COLUMNS_XS.includes(columnId));
+    }
+
+    if (isLessThanS) {
+      return columns.filter((columnId) => COLUMNS_S.includes(columnId));
+    }
+
+    if (isLessThanM) {
+      return columns.filter((columnId) => COLUMNS_M.includes(columnId));
+    }
+
+    if (isLessThanL) {
+      return columns.filter((columnId) => COLUMNS_L.includes(columnId));
+    }
+
+    return columns;
+  }, [columns, isLessThanXs, isLessThanS, isLessThanM, isLessThanL]);
+
+  const columnsMap = useMemo(() => {
+    return Object.fromEntries(filteredColumns.map((column) => [column, true]));
+  }, [filteredColumns]);
+
+  return columnsMap;
+};
+
+export default useColumns;

package/packages/scrabble-solver/src/i18n/languages/english.json

@@ -5,6 +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",

package/packages/scrabble-solver/src/i18n/languages/french.json

@@ -5,6 +5,7 @@
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
   "cell.tile.location": "Plateau: la case ({{x}}, {{y}})",
+  "cell.toggle-direction": "Direction d'écriture",
   "common.arrows": "Touches fléchées",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",

package/packages/scrabble-solver/src/i18n/languages/german.json

@@ -5,6 +5,7 @@
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
   "cell.tile.location": "Brett: Stein ({{x}}, {{y}})",
+  "cell.toggle-direction": "Schreibrichtung",
   "common.arrows": "Pfeiltasten",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",

package/packages/scrabble-solver/src/i18n/languages/persian.json

@@ -5,6 +5,7 @@
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
   "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
+  "cell.toggle-direction": "جهت تایپ",
   "common.arrows": "کلیدهای جهت دار",
   "common.blanks": "خالی",
   "common.clear": "پاک کردن",

package/packages/scrabble-solver/src/i18n/languages/polish.json

@@ -5,6 +5,7 @@
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
   "cell.tile.location": "Plansza: płytka ({{x}}, {{y}})",
+  "cell.toggle-direction": "Kierunek wpisywania",
   "common.arrows": "Klawisze strzałek",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",