scrabble-solver 2.11.6 → 2.11.8

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

@@ -0,0 +1,174 @@
+/* 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, useMediaQueries } 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 BORDER_RADIUS_XS = 3;
+const GRID_LINE_SIZE = 1;
+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 { 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 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={GRID_LINE_SIZE} width={viewBoxWidth} />
+          </symbol>
+
+          <symbol id={VERTICAL_LINE}>
+            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
+          </symbol>
+
+          <symbol id={BONUS}>
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+          </symbol>
+
+          <symbol id={BONUS_WORD_2}>
+            <rect height={bonusSize} rx={borderRadius} 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={borderRadius} 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={borderRadius}
+              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={borderRadius} 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={borderRadius}
+          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/hooks/useGrid.ts

@@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux';
 
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction, Point } from 'types';
 
@@ -290,6 +290,22 @@ 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 }));
+          moveFocus(1);
+          return;
+        }
+
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 

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/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/Key/Key.module.scss

@@ -1,19 +1,15 @@
-$key-size: 36px;
-$icon-size: 15px;
-
 .key {
   position: relative;
-  top: calc(0px - 2 * var(--border--width));
   display: inline-block;
-  min-width: $key-size;
-  height: $key-size;
+  min-width: var(--key--height);
+  height: var(--key--height);
   padding: var(--spacing--s) var(--spacing--m);
   background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
@@ -24,9 +20,9 @@ $icon-size: 15px;
 
   :global(svg) {
     position: absolute;
-    top: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    left: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    width: $icon-size;
-    height: $icon-size;
+    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    width: var(--key--icon--size);
+    height: var(--key--icon--size);
   }
 }

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

@@ -9,6 +9,7 @@ import {
   extractCharacters,
   extractInputValue,
   getTileSizes,
+  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -100,7 +101,9 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (event.currentTarget.value === event.key) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          changeActiveIndex(1);
+        } else if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();

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

@@ -13,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -80,7 +80,17 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown,
+      onKeyDown: (event) => {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          event.preventDefault();
+          event.stopPropagation();
+          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
+        }
+
+        onKeyDown(event);
+      },
     });
   }, [index, onKeyDown]);
 

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

@@ -60,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 {
@@ -135,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;
@@ -145,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 & {
@@ -180,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/Tile/Tile.module.scss

@@ -17,6 +17,10 @@
   transition-property: background-color, color, box-shadow;
   user-select: none;
 
+  @include media('<xs') {
+    --border--radius: 3px;
+  }
+
   &.points1 {
     --background-color: var(--color--yellow);
   }

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/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/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,45 +7,61 @@ import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
 import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
-  direction: 'ltr' | 'rtl';
+  comma: string;
   consonants: boolean;
+  direction: 'ltr' | 'rtl';
+  separator: string;
   vowels: boolean;
 }
 
 export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
   [Locale.DE_DE]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_GB]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.EN_US]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.ES_ES]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.FA_IR]: {
-    direction: 'rtl',
+    comma: COMMA_ARABIC,
     consonants: false,
+    direction: 'rtl',
+    separator: `${COMMA_ARABIC} `,
     vowels: false,
   },
   [Locale.FR_FR]: {
-    direction: 'ltr',
+    comma: COMMA_LATIN,
     consonants: true,
+    direction: 'ltr',
+    separator: `${COMMA_LATIN} `,
     vowels: true,
   },
   [Locale.PL_PL]: {
-    direction: 'ltr',
+    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",

package/packages/scrabble-solver/src/lib/dataUrlToBlob.ts

@@ -0,0 +1,20 @@
+const dataUrlToBlob = (dataUrl: string): Blob => {
+  const [mime = '', data] = dataUrl.split(',');
+  const [, type] = mime.match(/:(.*?);/) || [];
+
+  if (typeof type !== 'string') {
+    throw new Error('Unsupported data URL');
+  }
+
+  const byteString = globalThis.atob(data);
+  const u8arr = new Uint8Array(byteString.length);
+  let index = byteString.length;
+
+  while (index--) {
+    u8arr[index] = byteString.charCodeAt(index);
+  }
+
+  return new Blob([u8arr], { type });
+};
+
+export default dataUrlToBlob;