scrabble-solver 2.11.5 → 2.11.7

package/packages/scrabble-solver/src/components/Board/hooks/useBackgroundImage.tsx

@@ -0,0 +1,170 @@
+/* eslint-disable max-statements */
+
+import { BONUS_CHARACTER, BONUS_WORD } from '@scrabble-solver/constants';
+import { useMemo } from 'react';
+import { renderToString } from 'react-dom/server';
+import { Provider } from 'react-redux';
+
+import { useAppLayout } from 'hooks';
+import { FlagFill, Star } from 'icons';
+import { dataUrlToBlob, getTileSizes } from 'lib';
+import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BONUS_START, COLOR_FILTERED } from 'parameters';
+import { selectCellFilter, selectConfig, store, useTypedSelector } from 'state';
+import { Point } from 'types';
+
+import { getBonusColor } from '../lib';
+
+const HORIZONTAL_LINE = 'h';
+const VERTICAL_LINE = 'v';
+const BONUS = 'b';
+const BONUS_WORD_2 = 'b2';
+const BONUS_WORD_3 = 'b3';
+const CELL_FILTER = 'c';
+
+const useBackgroundImage = () => {
+  const { boardSize, cellSize } = useAppLayout();
+  const config = useTypedSelector(selectConfig);
+  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
+  const cellFilter = useTypedSelector(selectCellFilter);
+  const viewBoxHeight = boardSize;
+  const viewBoxWidth = boardSize;
+  const bonusSize = cellSize * 0.8;
+  const bonusOffset = cellSize * 0.1;
+  const iconSize = cellSize * 0.4;
+  const iconOffset = (cellSize - iconSize) / 2;
+  const { tileFontSize } = getTileSizes(cellSize);
+  const fontSize = tileFontSize * 0.6;
+  const fontOffset = cellSize / 2;
+  const characterBonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_CHARACTER);
+  const word2Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 2);
+  const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
+
+  const getX = (point: Point): number => point.x * (cellSize + BORDER_WIDTH);
+
+  const getY = (point: Point): number => point.y * (cellSize + BORDER_WIDTH);
+
+  const backgroundSvg = renderToString(
+    <Provider store={store}>
+      <svg
+        height={viewBoxHeight}
+        viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+        width={viewBoxWidth}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <defs>
+          <symbol id={HORIZONTAL_LINE}>
+            <rect fill={BORDER_COLOR_LIGHT} height={1} width={viewBoxWidth} />
+          </symbol>
+
+          <symbol id={VERTICAL_LINE}>
+            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={1} />
+          </symbol>
+
+          <symbol id={BONUS}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+          </symbol>
+
+          <symbol id={BONUS_WORD_2}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+            <text
+              dominantBaseline="central"
+              fill="white"
+              fontFamily="system-ui, sans-serif"
+              fontSize={fontSize}
+              fontWeight="bold"
+              textAnchor="middle"
+              x={fontOffset}
+              y={fontOffset}
+            >
+              x2
+            </text>
+          </symbol>
+
+          <symbol id={BONUS_WORD_3}>
+            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+
+            <text
+              dominantBaseline="central"
+              fill="white"
+              fontFamily="system-ui, sans-serif"
+              fontSize={fontSize}
+              fontWeight="bold"
+              textAnchor="middle"
+              x={fontOffset}
+              y={fontOffset}
+            >
+              x3
+            </text>
+          </symbol>
+
+          <symbol id={CELL_FILTER}>
+            <rect
+              fill={COLOR_FILTERED}
+              height={bonusSize}
+              rx={BORDER_RADIUS}
+              width={bonusSize}
+              x={bonusOffset}
+              y={bonusOffset}
+            />
+
+            <FlagFill color="white" height={iconSize} width={iconSize} x={iconOffset} y={iconOffset} />
+          </symbol>
+        </defs>
+
+        <rect fill="white" height={viewBoxHeight} rx={BORDER_RADIUS} width={viewBoxWidth} x="0" y="0" />
+
+        {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
+          <use key={index} href={`#${HORIZONTAL_LINE}`} y={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
+        ))}
+
+        {Array.from({ length: config.boardWidth - 1 }).map((_value, index) => (
+          <use key={index} href={`#${VERTICAL_LINE}`} x={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
+        ))}
+
+        {characterBonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        {word2Bonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_2}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        {word3Bonuses.map((bonus, index) => (
+          <use fill={getBonusColor(bonus)} key={index} href={`#${BONUS_WORD_3}`} x={getX(bonus)} y={getY(bonus)} />
+        ))}
+
+        <rect
+          fill={COLOR_BONUS_START}
+          height={bonusSize}
+          rx={BORDER_RADIUS}
+          width={bonusSize}
+          x={getX(center) + bonusOffset}
+          y={getY(center) + bonusOffset}
+        />
+
+        <Star
+          color="white"
+          height={iconSize}
+          width={iconSize}
+          x={getX(center) + iconOffset}
+          y={getY(center) + iconOffset}
+        />
+
+        {cellFilter.map((cell, index) => (
+          <use key={index} href={`#${CELL_FILTER}`} x={getX(cell)} y={getY(cell)} />
+        ))}
+      </svg>
+    </Provider>,
+  );
+
+  const encodedSvg = globalThis.btoa(backgroundSvg);
+  const dataUrl = `data:image/svg+xml;base64,${encodedSvg}`;
+  const blob = useMemo(() => dataUrlToBlob(dataUrl), [dataUrl]);
+  const blobUrl = useMemo(() => URL.createObjectURL(blob), [blob]);
+  const url = `url(${blobUrl})`;
+
+  return url;
+};
+
+export default useBackgroundImage;

package/packages/scrabble-solver/src/components/Board/lib/getBonusColor.ts

@@ -0,0 +1,18 @@
+import { BONUS_WORD } from '@scrabble-solver/constants';
+import { Bonus } from '@scrabble-solver/types';
+
+import { COLOR_BONUS_CHARACTER, COLOR_BONUS_CHARACTER_MULTIPLIER, COLOR_BONUS_WORD } from 'parameters';
+
+const getBonusColor = (bonus: Bonus): string => {
+  if (bonus.type === BONUS_WORD) {
+    return COLOR_BONUS_WORD[bonus.multiplier];
+  }
+
+  if (bonus.score) {
+    return COLOR_BONUS_CHARACTER[bonus.score];
+  }
+
+  return COLOR_BONUS_CHARACTER_MULTIPLIER[bonus.multiplier];
+};
+
+export default getBonusColor;

package/packages/scrabble-solver/src/components/Board/lib/index.ts

@@ -1 +1,2 @@
+export { default as getBonusColor } from './getBonusColor';
 export { default as getPositionInGrid } from './getPositionInGrid';

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

@@ -49,7 +49,6 @@
 
 .word {
   margin-bottom: var(--spacing--m);
-  font-family: var(--font--family--title);
   font-size: var(--font--size--h2);
   text-transform: uppercase;
 }

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

@@ -1,9 +1,9 @@
-import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { dictionarySlice, selectDictionary, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import styles from './DictionaryInput.module.scss';
 
@@ -14,7 +14,9 @@ interface Props {
 const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const { input } = useTypedSelector(selectDictionary);
+  const { comma } = LOCALE_FEATURES[locale];
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     dispatch(dictionarySlice.actions.changeInput(event.target.value));
@@ -29,7 +31,7 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
-        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
+        pattern={`.*[^\\s${comma}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
         title={translate('dictionary.input.title')}

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

@@ -1,6 +1,5 @@
 .emptyState {
   padding: var(--spacing--xl);
-  font-family: var(--font--family);
   color: var(--color--foreground--secondary);
   text-align: center;
   text-transform: none;

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

@@ -1,4 +1,4 @@
-$key-size: 28px;
+$key-size: 36px;
 $icon-size: 15px;
 
 .key {

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

@@ -1,11 +1,6 @@
 import classNames from 'classnames';
 import { CSSProperties, FunctionComponent, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from 'i18n';
-import { selectLocale, useTypedSelector } from 'state';
-
-import SvgFontCss from '../SvgFontCss';
-
 import { createPlainTiles, getViewbox } from './lib';
 import styles from './PlainTiles.module.scss';
 import Tile from './Tile';
@@ -21,8 +16,6 @@ interface Props {
 }
 
 const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropShadow, showPoints, style, wave }) => {
-  const locale = useTypedSelector(selectLocale);
-  const { fontFamily } = LOCALE_FEATURES[locale];
   const tiles = useMemo(() => createPlainTiles({ color, content, showPoints }), [color, content, showPoints]);
 
   return (
@@ -35,14 +28,11 @@ const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropS
       viewBox={getViewbox(content)}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <SvgFontCss fontFamily={fontFamily} />
-
       {tiles.map((tile, index) => (
         <Tile
           character={tile.character}
           className={styles.tile}
           color={tile.color}
-          fontFamily={fontFamily}
           key={index}
           points={tile.points}
           size={tile.size}

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

@@ -4,7 +4,6 @@ interface Props {
   character: string;
   className?: string;
   color: string;
-  fontFamily: string;
   points?: number;
   size: number;
   transform?: string;
@@ -12,13 +11,12 @@ interface Props {
   y: number;
 }
 
-const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
+const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
     <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
-      fontFamily={fontFamily}
       fontSize={size * 0.6}
       fontWeight="bold"
       textAnchor="middle"
@@ -31,7 +29,6 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamil
     {typeof points === 'number' && (
       <text
         dominantBaseline="text-after-edge"
-        fontFamily={fontFamily}
         fontSize={size * 0.25}
         fontWeight="bold"
         textAnchor="end"

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

@@ -22,9 +22,9 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
   const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
-    <span className={classNames(styles.cell, className)} {...triggerProps}>
+    <div className={classNames(styles.cell, className)} {...triggerProps}>
       {formattedValue}
-    </span>
+    </div>
   );
 };
 

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

@@ -30,10 +30,10 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
-  const { consonants, vowels } = LOCALE_FEATURES[locale];
+  const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
-  const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const words = direction === 'rtl' ? [...result.words].reverse() : result.words;
   const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
   const handleClick: MouseEventHandler = (event) => onClick(result, event);
@@ -60,11 +60,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell
-            className={styles.word}
-            translationKey="common.word"
-            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-          />
+          <Cell className={styles.word} translationKey="common.word" value={result.word} />
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (
@@ -87,7 +83,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
           <Cell
             className={styles.stat}
             translationKey="common.words"
-            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            tooltip={`${result.wordsCount.toLocaleString(locale)} (${words.join(separator)})`}
             value={result.wordsCount}
           />
         )}

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

@@ -10,7 +10,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   background: var(--color--background--element);
   border: var(--border);
   border-radius: var(--border--radius);
-  font-family: var(--font--family--title);
 }
 
 .emptyState {
@@ -61,7 +60,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
-  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -136,6 +134,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: space-between;
+  height: 100%;
 
   .word {
     @include ellipsis;
@@ -146,8 +145,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
+  height: 100%;
   padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
+  line-height: var(--results--item--height);
 
   .result &:first-child,
   .headerButton:first-child & {
@@ -181,12 +182,12 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .word {
-  flex: 1 0 180px;
+  flex: 1 0;
   text-transform: uppercase;
 }
 
 .stat {
-  $width: 50px;
+  $width: 55px;
 
   flex: 0 0 $width;
   max-width: $width;

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

@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { cellSize, maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -93,7 +93,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
       <div className={styles.container}>
         <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            <Board cellSize={cellSize} className={styles.board} />
+            <Board className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 

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

@@ -1,10 +1,12 @@
 .tooltip {
+  max-width: var(--tooltip--max-width);
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   background-color: var(--color--tooltip--background);
   color: var(--color--tooltip--foreground);
   z-index: var(--z-index--tooltip);
+  text-align: center;
 }
 
 .arrow {

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

@@ -22,7 +22,5 @@ export { default as ResultsInput } from './ResultsInput';
 export { default as SeoMessage } from './SeoMessage';
 export { default as Solver } from './Solver';
 export { default as Spinner } from './Spinner';
-export { default as SvgFontCss } from './SvgFontCss';
-export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';

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

@@ -60,6 +60,7 @@ const useAppLayout = () => {
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
     animateTile: !isLessThanXs,
+    boardSize,
     cellSize,
     dictionaryHeight,
     isModalFullWidth: isLessThanS,

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

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useDirection = (direction: 'ltr' | 'rtl') => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

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

@@ -1,9 +1,9 @@
-import { useLayoutEffect } from 'react';
+import { useEffect } from 'react';
 
 import { noop } from 'lib';
 
 const useLanguage = (language: string) => {
-  useLayoutEffect(() => {
+  useEffect(() => {
     const html = document.body.parentElement;
 
     if (!html) {

package/packages/scrabble-solver/src/i18n/constants.ts

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { Locale } from '@scrabble-solver/types';
 import { FunctionComponent, SVGAttributes } from 'react';
 
@@ -6,53 +7,61 @@ import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
-  direction: 'ltr' | 'rtl';
-  fontFamily: string;
+  comma: string;
   consonants: boolean;
+  direction: 'ltr' | 'rtl';
+  separator: string;
   vowels: boolean;
 }
 
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_GB]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_US]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.ES_ES]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.FA_IR]: {
-    direction: 'rtl',
-    fontFamily: 'Vazirmatn',
+    comma: COMMA_ARABIC,
     consonants: false,
+    direction: 'rtl',
+    separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
   [Locale.FR_FR]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.PL_PL]: {
-    direction: 'ltr',
-    fontFamily: 'Open Sans',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
 };

package/packages/scrabble-solver/src/i18n/de.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Zielort - klicken zum Wechseln",
+  "cell.filter-cell": "Zielort",
   "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 - klicken zum Wechseln",
+  "cell.toggle-direction": "Schreibrichtung",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",

package/packages/scrabble-solver/src/i18n/en.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Target destination - click to toggle",
+  "cell.filter-cell": "Target destination",
   "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 - click to toggle",
+  "cell.toggle-direction": "Typing direction",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",

package/packages/scrabble-solver/src/i18n/es.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destino objetivo: haga clic para alternar",
+  "cell.filter-cell": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
   "cell.tile.location": "Tablero: espacio ({{x}}, {{y}})",
-  "cell.toggle-direction": "Dirección de escritura: haga clic para alternar",
+  "cell.toggle-direction": "Dirección de escritura",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",

package/packages/scrabble-solver/src/i18n/fa.json

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

package/packages/scrabble-solver/src/i18n/fr.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Destination cible - cliquer pour changer",
+  "cell.filter-cell": "Destination cible",
   "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 - cliquer pour changer",
+  "cell.toggle-direction": "Direction d'écriture",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",
   "common.close": "Fermer",

package/packages/scrabble-solver/src/i18n/pl.json

@@ -1,9 +1,9 @@
 {
-  "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
+  "cell.filter-cell": "Miejsce docelowe",
   "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 - kliknij aby zmienić",
+  "cell.toggle-direction": "Kierunek wpisywania",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",
   "common.close": "Zamknij",