scrabble-solver 2.13.5-alpha.0 → 2.13.5-alpha.1

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

@@ -66,3 +66,17 @@
 
   color: var(--color--white);
 }
+
+.coordinateColumn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font--size--h2);
+}
+
+.coordinateRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font--size--h2);
+}

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

@@ -8,6 +8,7 @@ import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
+import { LOCALE_FEATURES } from 'i18n';
 import { TRANSITION } from 'parameters';
 import {
   boardSlice,
@@ -16,6 +17,7 @@ import {
   selectInputMode,
   selectLocale,
   selectRowsWithCandidate,
+  selectShowCoordinates,
   solveSlice,
   useTypedSelector,
 } from 'state';
@@ -35,7 +37,8 @@ const Board: FunctionComponent<Props> = ({ className }) => {
   const rows = useTypedSelector(selectRowsWithCandidate);
   const inputMode = useTypedSelector(selectInputMode);
   const filteredCells = useTypedSelector(selectFilteredCells);
-  const { cellSize } = useAppLayout();
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
+  const { cellSize, coordinatesFontSize, coordinatesSize } = useAppLayout();
   const [
     { activeIndex, direction, inputRefs },
     { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
@@ -149,10 +152,14 @@ const Board: FunctionComponent<Props> = ({ className }) => {
       <BoardPure
         className={className}
         cellSize={cellSize}
+        coordinatesFontSize={coordinatesFontSize}
+        coordinatesSize={coordinatesSize}
+        direction={LOCALE_FEATURES[locale].direction}
         filteredCells={filteredCells}
         inputRefs={inputRefs}
         ref={ref}
         rows={rows}
+        showCoordinates={showCoordinates}
         style={boardStyle}
         onBlur={handleBlur}
         onChange={onChange}

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -1,15 +1,15 @@
-import { Cell as CellModel } from '@scrabble-solver/types';
+import { Cell as CellModel, ShowCoordinates } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import {
+  CSSProperties,
   ChangeEventHandler,
   ClipboardEventHandler,
-  CSSProperties,
   FocusEventHandler,
-  forwardRef,
   Fragment,
   KeyboardEventHandler,
-  memo,
   RefObject,
+  forwardRef,
+  memo,
 } from 'react';
 
 import { FlagFill } from 'icons';
@@ -18,13 +18,18 @@ import { Point } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell } from './components';
+import { getCoordinate } from './lib';
 
 interface Props {
   className?: string;
   cellSize: number;
+  coordinatesFontSize: number;
+  coordinatesSize: number;
+  direction: 'ltr' | 'rtl';
   filteredCells: Point[];
   inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
+  showCoordinates: ShowCoordinates;
   style?: CSSProperties;
   onBlur: FocusEventHandler;
   onChange: ChangeEventHandler<HTMLInputElement>;
@@ -35,7 +40,23 @@ interface Props {
 
 const BoardPure = forwardRef<HTMLDivElement, Props>(
   (
-    { className, cellSize, filteredCells, inputRefs, rows, style, onBlur, onChange, onFocus, onKeyDown, onPaste },
+    {
+      className,
+      cellSize,
+      coordinatesFontSize,
+      coordinatesSize,
+      direction,
+      filteredCells,
+      inputRefs,
+      rows,
+      showCoordinates,
+      style,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      onPaste,
+    },
     ref,
   ) => (
     <div
@@ -46,8 +67,58 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
       onKeyDown={onKeyDown}
       onPaste={onPaste}
     >
+      {showCoordinates !== 'hidden' && (
+        <>
+          <div style={{ width: coordinatesSize, height: coordinatesSize }} />
+
+          {rows[0].map((_column, index) => (
+            <div
+              className={styles.coordinateColumn}
+              key={index}
+              style={{
+                width: cellSize,
+                height: coordinatesSize,
+                fontSize: coordinatesFontSize,
+              }}
+            >
+              {getCoordinate(index, showCoordinates === 'original' ? 'letter' : 'number')}
+            </div>
+          ))}
+        </>
+      )}
+
+      {filteredCells.map(({ x, y }) => (
+        <div
+          className={styles.iconContainer}
+          key={[x, y].join('-')}
+          style={{
+            height: cellSize,
+            width: cellSize,
+            left: direction === 'ltr' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
+            right: direction === 'rtl' ? coordinatesSize + x * (cellSize + BORDER_WIDTH) : undefined,
+            top: coordinatesSize + y * (cellSize + BORDER_WIDTH),
+          }}
+        >
+          <div className={styles.iconBackground} />
+          <FlagFill className={styles.icon} />
+        </div>
+      ))}
+
       {rows.map((cells, y) => (
         <Fragment key={y}>
+          {showCoordinates !== 'hidden' && (
+            <div
+              className={styles.coordinateRow}
+              style={{
+                width: coordinatesSize,
+                height: cellSize,
+                fontSize: coordinatesFontSize,
+              }}
+            >
+              {getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter')}
+            </div>
+          )}
+
           {cells.map((cell, x) => (
             <Cell
               className={styles.cell}
@@ -65,22 +136,6 @@ const BoardPure = forwardRef<HTMLDivElement, Props>(
           ))}
         </Fragment>
       ))}
-
-      {filteredCells.map(({ x, y }) => (
-        <div
-          className={styles.iconContainer}
-          key={[x, y].join('-')}
-          style={{
-            height: cellSize,
-            width: cellSize,
-            left: x * (cellSize + BORDER_WIDTH),
-            top: y * (cellSize + BORDER_WIDTH),
-          }}
-        >
-          <div className={styles.iconBackground} />
-          <FlagFill className={styles.icon} />
-        </div>
-      ))}
     </div>
   ),
 );

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

@@ -6,10 +6,18 @@ import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
 import { useAppLayout, useMediaQueries } from 'hooks';
+import { LOCALE_FEATURES } from 'i18n';
 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 { selectConfig, store, useTypedSelector } from 'state';
+import {
+  BORDER_COLOR_LIGHT,
+  BORDER_RADIUS,
+  BORDER_WIDTH,
+  COLOR_BACKGROUND,
+  COLOR_BONUS_START,
+  COLOR_FILTERED,
+} from 'parameters';
+import { selectConfig, selectLocale, selectShowCoordinates, store, useTypedSelector } from 'state';
 import { Point } from 'types';
 
 import { getBonusColor } from '../lib';
@@ -25,7 +33,10 @@ const BONUS_WORD_4 = 'b4';
 const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
-  const { boardSize, cellSize } = useAppLayout();
+  const { boardSize, cellSize, coordinatesSize } = useAppLayout();
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
   const { isLessThanXs } = useMediaQueries();
   const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
@@ -44,9 +55,10 @@ const useBackgroundImage = () => {
   const word3Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 3);
   const word4Bonuses = config.bonuses.filter((bonus) => bonus.type === BONUS_WORD && bonus.multiplier === 4);
 
-  const getX = (point: Point): number => point.x * (cellSize + BORDER_WIDTH);
+  const getX = (point: Point): number =>
+    (direction === 'ltr' ? coordinatesSize : 0) + point.x * (cellSize + BORDER_WIDTH);
 
-  const getY = (point: Point): number => point.y * (cellSize + BORDER_WIDTH);
+  const getY = (point: Point): number => coordinatesSize + point.y * (cellSize + BORDER_WIDTH);
 
   const backgroundSvg = renderToString(
     <Provider store={store}>
@@ -136,12 +148,39 @@ const useBackgroundImage = () => {
 
         <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
 
+        {showCoordinates !== 'hidden' && (
+          <>
+            <rect fill={COLOR_BACKGROUND} height={coordinatesSize} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
+            <rect
+              fill={COLOR_BACKGROUND}
+              height={viewBoxHeight}
+              rx={borderRadius}
+              x={direction === 'ltr' ? 0 : viewBoxWidth - coordinatesSize}
+              y="0"
+              width={coordinatesSize}
+            />
+            <use href={`#${HORIZONTAL_LINE}`} y={coordinatesSize} />
+            <use
+              href={`#${VERTICAL_LINE}`}
+              x={direction === 'ltr' ? coordinatesSize : viewBoxWidth - coordinatesSize - BORDER_WIDTH}
+            />
+          </>
+        )}
+
         {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
-          <use key={index} href={`#${HORIZONTAL_LINE}`} y={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
+          <use
+            key={index}
+            href={`#${HORIZONTAL_LINE}`}
+            y={coordinatesSize + (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} />
+          <use
+            key={index}
+            href={`#${VERTICAL_LINE}`}
+            x={(direction === 'ltr' ? coordinatesSize : 0) + (index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH}
+          />
         ))}
 
         {characterBonuses.map((bonus, index) => (

package/packages/scrabble-solver/src/components/Board/hooks/useBoardStyle.ts

@@ -2,7 +2,7 @@ import { CSSProperties, useMemo } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { getTileSizes } from 'lib';
-import { selectConfig, useTypedSelector } from 'state';
+import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 
 import useBackgroundImage from './useBackgroundImage';
 
@@ -11,12 +11,17 @@ const useBoardStyle = () => {
   const { cellSize } = useAppLayout();
   const { tileFontSize } = getTileSizes(cellSize);
   const backgroundImage = useBackgroundImage();
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
   const boardStyle = useMemo<CSSProperties>(
     () => ({
       backgroundImage,
       fontSize: tileFontSize,
-      gridTemplateColumns: `repeat(${config.boardWidth}, 1fr)`,
-      gridTemplateRows: `repeat(${config.boardHeight}, 1fr)`,
+      gridTemplateColumns:
+        showCoordinates === 'hidden' ? `repeat(${config.boardWidth}, 1fr)` : `0.5fr repeat(${config.boardWidth}, 1fr)`,
+      gridTemplateRows:
+        showCoordinates === 'hidden'
+          ? `repeat(${config.boardHeight}, 1fr)`
+          : `0.5fr repeat(${config.boardHeight}, 1fr)`,
     }),
     [backgroundImage, config.boardHeight, config.boardWidth, tileFontSize],
   );

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

@@ -0,0 +1,11 @@
+const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+const getCoordinate = (index: number, type: 'letter' | 'number'): string => {
+  if (type === 'number') {
+    return String(index + 1);
+  }
+
+  return alphabet[index];
+};
+
+export default getCoordinate;

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

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

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

@@ -16,7 +16,7 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
-  const isLastAllowed = results.length > 0 ? results[results.length - 1].isAllowed : undefined;
+  const isLastAllowed = results.at(-1)?.isAllowed;
 
   return (
     <div
@@ -44,27 +44,26 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
 
             {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
 
-            {isAllowed === true && (
+            {isAllowed === true && definitions.length === 0 && (
               <>
-                {definitions.length === 0 && (
-                  <>
-                    {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
-                    {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
-                  </>
-                )}
-
-                {definitions.length > 0 && (
-                  <ul className={styles.definitions}>
-                    {definitions.map((result, index) => (
-                      <li key={index} className={styles.definition}>
-                        {result}
-                      </li>
-                    ))}
-                  </ul>
-                )}
+                <div>
+                  {exists
+                    ? translate('dictionary.empty-state.no-definitions')
+                    : translate('dictionary.empty-state.no-results')}
+                </div>
               </>
             )}
 
+            {isAllowed === true && definitions.length > 0 && (
+              <ul className={styles.definitions}>
+                {definitions.map((result, index) => (
+                  <li key={index} className={styles.definition}>
+                    {result}
+                  </li>
+                ))}
+              </ul>
+            )}
+
             {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
           </div>
         </div>

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

@@ -36,7 +36,7 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant })
   const { direction } = LOCALE_FEATURES[locale];
   const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[variant]), [translate]);
   const message = direction === 'ltr' ? title : title.split('').reverse().join('');
-  const content = useMemo(() => [[message.toUpperCase()]], [title]);
+  const content = useMemo(() => [message.toUpperCase().split(' ')], [title]);
 
   return (
     <div className={classNames(styles.emptyState, className)}>

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

@@ -60,6 +60,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
+  background-color: var(--color--background);
 
   &:focus,
   &:hover {

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

@@ -17,7 +17,7 @@ import {
   RACK_TILE_SIZE_MAX,
   SOLVER_COLUMN_WIDTH,
 } from 'parameters';
-import { selectConfig, useTypedSelector } from 'state';
+import { selectConfig, selectShowCoordinates, useTypedSelector } from 'state';
 
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQueries from './useMediaQueries';
@@ -26,6 +26,7 @@ import useViewportSize from './useViewportSize';
 const useAppLayout = () => {
   const { viewportHeight, viewportWidth } = useViewportSize();
   const config = useTypedSelector(selectConfig);
+  const showCoordinates = useTypedSelector(selectShowCoordinates);
   const isTouchDevice = useIsTouchDevice();
   const { isLessThanXs, isLessThanS, isLessThanM, isLessThanL, isLessThanXl } = useMediaQueries();
   const isBoardFullWidth = isLessThanM;
@@ -44,10 +45,21 @@ const useAppLayout = () => {
   const maxBoardHeight = isBoardFullWidth
     ? Number.POSITIVE_INFINITY
     : Math.max(solverHeight - bottomContainerHeight, 0);
-  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
-  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
+
+  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);
+  const cellHeight =
+    (maxBoardHeight - (config.boardHeight + 1 + coordinatesBorderWidth) * BORDER_WIDTH) /
+    (config.boardHeight + coordinatesSizeRatio);
   const cellSize = Math.min(Math.min(cellWidth, cellHeight), BOARD_TILE_SIZE_MAX);
-  const boardSize = (cellSize + BORDER_WIDTH) * config.boardWidth + BORDER_WIDTH;
+  const coordinatesSize = coordinatesSizeRatio * cellSize;
+  const boardSize =
+    (cellSize + BORDER_WIDTH) * config.boardWidth +
+    BORDER_WIDTH +
+    (showCoordinates === 'hidden' ? 0 : coordinatesSize + BORDER_WIDTH);
   const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
   const showResultsInModal = isLessThanL;
   const dictionaryHeight = showResultsInModal ? DICTIONARY_HEIGHT_MOBILE : DICTIONARY_HEIGHT;
@@ -62,6 +74,8 @@ const useAppLayout = () => {
     animateTile: !isLessThanXs,
     boardSize,
     cellSize,
+    coordinatesFontSize: coordinatesSize * 0.6,
+    coordinatesSize,
     dictionaryHeight,
     isModalFullWidth: isLessThanS,
     logoHeight,

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

@@ -2,23 +2,23 @@ import { Locale } from '@scrabble-solver/types';
 
 import { Translations } from 'types';
 
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fa from './fa.json';
-import fr from './fr.json';
-import pl from './pl.json';
-import ro from './ro.json';
+import english from './languages/english.json';
+import french from './languages/french.json';
+import german from './languages/german.json';
+import persian from './languages/persian.json';
+import polish from './languages/polish.json';
+import romanian from './languages/romanian.json';
+import spanish from './languages/spanish.json';
 
 const i18n: Record<Locale, Translations> = {
-  [Locale.DE_DE]: de,
-  [Locale.EN_GB]: en,
-  [Locale.EN_US]: en,
-  [Locale.ES_ES]: es,
-  [Locale.FA_IR]: fa,
-  [Locale.FR_FR]: fr,
-  [Locale.PL_PL]: pl,
-  [Locale.RO_RO]: ro,
+  [Locale.DE_DE]: german,
+  [Locale.EN_GB]: english,
+  [Locale.EN_US]: english,
+  [Locale.ES_ES]: spanish,
+  [Locale.FA_IR]: persian,
+  [Locale.FR_FR]: french,
+  [Locale.PL_PL]: polish,
+  [Locale.RO_RO]: romanian,
 };
 
 export default i18n;

package/packages/scrabble-solver/src/i18n/{en.json → languages/english.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Keyboard",
   "settings.inputMode.touchscreen": "Touchscreen",
   "settings.language": "Language",
+  "settings.showCoordinates": "Coordinates",
+  "settings.showCoordinates.alternative": "Alternative",
+  "settings.showCoordinates.hidden": "Hidden",
+  "settings.showCoordinates.original": "Original",
   "words": "Created words",
   "words.invalid": "Invalid",
   "words.valid": "Valid"

package/packages/scrabble-solver/src/i18n/{fr.json → languages/french.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Clavier",
   "settings.inputMode.touchscreen": "Écran tactile",
   "settings.language": "Langue",
+  "settings.showCoordinates": "Coordonnés",
+  "settings.showCoordinates.alternative": "Alternative",
+  "settings.showCoordinates.hidden": "Caché",
+  "settings.showCoordinates.original": "Original",
   "words": "Mots créés",
   "words.invalid": "Incorrect",
   "words.valid": "Corriger"

package/packages/scrabble-solver/src/i18n/{de.json → languages/german.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Tastatur",
   "settings.inputMode.touchscreen": "Touchscreen",
   "settings.language": "Sprache",
+  "settings.showCoordinates": "Koordinaten",
+  "settings.showCoordinates.alternative": "Alternative",
+  "settings.showCoordinates.hidden": "Versteckt",
+  "settings.showCoordinates.original": "Original",
   "words": "Gebildete Wörter",
   "words.invalid": "Falsch",
   "words.valid": "Korrekt"

package/packages/scrabble-solver/src/i18n/{fa.json → languages/persian.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "صفحه کلید",
   "settings.inputMode.touchscreen": "صفحه لمسی",
   "settings.language": "زبان",
+  "settings.showCoordinates": "مختصات",
+  "settings.showCoordinates.alternative": "بديل",
+  "settings.showCoordinates.hidden": "مختفي",
+  "settings.showCoordinates.original": "إبداعي",
   "words": "کلمات ساخته شده",
   "words.invalid": "نا معتبر",
   "words.valid": "معتبر"

package/packages/scrabble-solver/src/i18n/{pl.json → languages/polish.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Klawiatura",
   "settings.inputMode.touchscreen": "Ekran dotykowy",
   "settings.language": "Język",
+  "settings.showCoordinates": "Współrzędne",
+  "settings.showCoordinates.alternative": "Alternatywne",
+  "settings.showCoordinates.hidden": "Ukryte",
+  "settings.showCoordinates.original": "Oryginalne",
   "words": "Utworzone słowa",
   "words.invalid": "Niepoprawne",
   "words.valid": "Poprawne"

package/packages/scrabble-solver/src/i18n/{ro.json → languages/romanian.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Tastatura",
   "settings.inputMode.touchscreen": "Ecran",
   "settings.language": "Limba",
+  "settings.showCoordinates": "Coordonate",
+  "settings.showCoordinates.alternative": "Alternativă",
+  "settings.showCoordinates.hidden": "Ascuns",
+  "settings.showCoordinates.original": "Original",
   "words": "Cuvinte create",
   "words.invalid": "Invalid",
   "words.valid": "Valid"

package/packages/scrabble-solver/src/i18n/{es.json → languages/spanish.json}

@@ -64,6 +64,10 @@
   "settings.inputMode.keyboard": "Teclado",
   "settings.inputMode.touchscreen": "Pantalla táctil",
   "settings.language": "Idioma",
+  "settings.showCoordinates": "Coordenadas",
+  "settings.showCoordinates.alternative": "Alternativa",
+  "settings.showCoordinates.hidden": "Oculto",
+  "settings.showCoordinates.original": "Original",
   "words": "Palabras creadas",
   "words.invalid": "Incorrecto",
   "words.valid": "Correcto"

package/packages/scrabble-solver/src/lib/extractCharacters.test.ts

@@ -18,9 +18,7 @@ describe('extractCharacters', () => {
   const locale = Locale.ES_ES;
   const config = getConfig(Game.Scrabble, locale);
 
-  for (const { input, expected } of tests) {
-    it(`[${locale}] "${input}"`, () => {
-      expect(extractCharacters(config, input)).toEqual(expected);
-    });
-  }
+  it.each(tests)(`[${locale}] "$input"`, ({ input, expected }) => {
+    expect(extractCharacters(config, input)).toEqual(expected);
+  });
 });

package/packages/scrabble-solver/src/lib/extractCharactersByCase.test.ts

@@ -23,9 +23,7 @@ describe('extractCharactersByCase', () => {
   const locale = Locale.ES_ES;
   const config = getConfig(Game.Scrabble, locale);
 
-  for (const { input, expected } of tests) {
-    it(`[${locale}] "${input}"`, () => {
-      expect(extractCharactersByCase(config, input)).toEqual(expected);
-    });
-  }
+  it.each(tests)(`[${locale}] "$input"`, ({ input, expected }) => {
+    expect(extractCharactersByCase(config, input)).toEqual(expected);
+  });
 });

package/packages/scrabble-solver/src/modals/SettingsModal/SettingsModal.tsx

@@ -4,7 +4,13 @@ import { Modal } from 'components';
 import { useIsTouchDevice } from 'hooks';
 import { useTranslate } from 'state';
 
-import { AutoGroupTilesSetting, ConfigSetting, InputModeSetting, LocaleSetting } from './components';
+import {
+  AutoGroupTilesSetting,
+  ConfigSetting,
+  InputModeSetting,
+  LocaleSetting,
+  ShowCoordinatesSetting,
+} from './components';
 
 interface Props {
   className?: string;
@@ -26,6 +32,10 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
         <LocaleSetting disabled={!isOpen} />
       </Modal.Section>
 
+      <Modal.Section title={translate('settings.showCoordinates')}>
+        <ShowCoordinatesSetting disabled={!isOpen} />
+      </Modal.Section>
+
       {!isTouchDevice && (
         <Modal.Section title={translate('settings.inputMode')}>
           <InputModeSetting disabled={!isOpen} />

package/packages/scrabble-solver/src/modals/SettingsModal/components/ShowCoordinatesSetting/ShowCoordinatesSetting.module.scss

@@ -0,0 +1,12 @@
+.option {
+  margin-bottom: var(--spacing--m);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  display: flex;
+  align-items: center;
+}