@scrabble-solver/scrabble-solver 2.11.8 → 2.12.0

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

@@ -0,0 +1,89 @@
+/* eslint-disable max-lines, max-statements */
+
+import classNames from 'classnames';
+import {
+  CSSProperties,
+  ChangeEventHandler,
+  FormEventHandler,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+
+import { useAppLayout } from 'hooks';
+import { extractCharactersByCase } from 'lib';
+import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
+
+import styles from './InputPrompt.module.scss';
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+  value: string;
+  onBlur: () => void;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+}
+
+const InputPrompt = forwardRef<HTMLFormElement, Props>(
+  ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
+    const dispatch = useDispatch();
+    const translate = useTranslate();
+    const { rackHeight, rackWidth } = useAppLayout();
+    const config = useTypedSelector(selectConfig);
+    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
+
+    const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+      (event) => {
+        event.preventDefault();
+        const charactersByCase = extractCharactersByCase(config, value);
+        const characters = Array.from({ length: config.maximumCharactersCount }, (_, index) => {
+          return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
+        });
+        dispatch(rackSlice.actions.changeCharacters({ characters, index: 0 }));
+        onSubmit(event);
+      },
+      [config, value, onSubmit],
+    );
+
+    useEffect(() => {
+      if (inputRef) {
+        inputRef.focus();
+        inputRef.select();
+      }
+    }, [inputRef]);
+
+    return (
+      <form
+        className={classNames(styles.form, className)}
+        ref={ref}
+        style={{
+          width: rackWidth,
+          height: rackHeight,
+          ...style,
+        }}
+        onSubmit={handleSubmit}
+        {...props}
+      >
+        <input
+          autoCapitalize="none"
+          autoComplete="off"
+          autoCorrect="off"
+          className={styles.input}
+          placeholder={translate('rack.touchscreen.placeholder')}
+          ref={setInputRef}
+          spellCheck={false}
+          value={value}
+          onBlur={onBlur}
+          onChange={onChange}
+        />
+      </form>
+    );
+  },
+);
+
+export default Object.assign(InputPrompt, {
+  styles,
+});

package/src/components/Rack/components/InputPrompt/index.ts

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

package/src/components/Rack/components/RackTile/RackTile.module.scss

@@ -0,0 +1,11 @@
+@import 'styles/mixins';
+
+.rackTile {
+  @include focus-effect;
+
+  --background-color: var(--color--background);
+
+  &:focus-within {
+    z-index: 2;
+  }
+}

package/src/components/Rack/{RackTile.tsx → components/RackTile/RackTile.tsx}

@@ -4,10 +4,13 @@ import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
+  FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
+  MouseEventHandler,
   MutableRefObject,
   RefObject,
+  TouchEventHandler,
   useCallback,
   useMemo,
 } from 'react';
@@ -19,14 +22,15 @@ import {
   selectCharacterIsValid,
   selectCharacterPoints,
   selectConfig,
+  selectInputMode,
   selectLocale,
   useTranslate,
   useTypedSelector,
 } from 'state';
 
-import Tile from '../Tile';
+import Tile from '../../../Tile';
 
-import styles from './Rack.module.scss';
+import styles from './RackTile.module.scss';
 
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
@@ -38,6 +42,7 @@ interface Props {
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  onFocus: () => void;
 }
 
 const RackTile: FunctionComponent<Props> = ({
@@ -50,17 +55,28 @@ const RackTile: FunctionComponent<Props> = ({
   tile,
   onChange,
   onKeyDown,
+  onFocus,
 }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const config = useTypedSelector(selectConfig);
+  const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
 
-  const handleFocus = useCallback(() => {
-    activeIndexRef.current = index;
-  }, [index]);
+  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+        event.target.blur();
+        onFocus();
+      }
+
+      activeIndexRef.current = index;
+    },
+    [activeIndexRef, index, inputMode, onFocus],
+  );
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -94,13 +110,35 @@ const RackTile: FunctionComponent<Props> = ({
     });
   }, [index, onKeyDown]);
 
+  const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus();
+    },
+    [inputMode, onFocus],
+  );
+
+  const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus();
+    },
+    [inputMode, onFocus],
+  );
+
   return (
     <Tile
       aria-label={translate('rack.tile.location', {
         index: (index + 1).toLocaleString(locale),
       })}
-      autoFocus={index === 0}
-      className={classNames(styles.tile, className)}
+      autoFocus={inputMode === 'keyboard' && index === 0}
+      className={classNames(styles.rackTile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}
@@ -115,6 +153,8 @@ const RackTile: FunctionComponent<Props> = ({
       onChange={handleChange}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
     />
   );
 };

package/src/components/Rack/components/RackTile/index.ts

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

package/src/components/Rack/components/index.ts

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

package/src/components/Radio/Radio.module.scss

@@ -15,13 +15,6 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   transition: var(--transition);
   cursor: pointer;
 
-  &:hover,
-  &.checked {
-    .icon {
-      box-shadow: var(--box-shadow);
-    }
-  }
-
   &.checked {
     .icon {
       &::after {
@@ -48,7 +41,6 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   height: $radio-box-size;
   border-radius: 50%;
   border: $radio-inner-border solid var(--color--primary);
-  box-shadow: var(--box-shadow--null);
   pointer-events: none;
 
   &::after {

package/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 
 import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
@@ -9,13 +9,14 @@ import { useTooltip } from '../Tooltip';
 import styles from './Results.module.scss';
 
 interface Props {
+  children?: ReactNode;
   className?: string;
   translationKey: TranslationKey;
   tooltip?: string | number;
   value: string | number;
 }
 
-const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, value }) => {
+const Cell: FunctionComponent<Props> = ({ children, className, translationKey, tooltip, value }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const formattedValue = value.toLocaleString(locale);
@@ -23,7 +24,7 @@ const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, va
 
   return (
     <div className={classNames(styles.cell, className)} {...triggerProps}>
-      {formattedValue}
+      {children || formattedValue}
     </div>
   );
 };

package/src/components/Results/Result.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useRef } from 'react';
+import Highlighter from 'react-highlight-words';
 
 import { LOCALE_FEATURES } from 'i18n';
 import { noop } from 'lib';
-import { selectIsResultMatching, selectLocale, useTypedSelector } from 'state';
+import { selectIsResultMatching, selectLocale, selectResultsQuery, useTypedSelector } from 'state';
 import { ResultColumn } from 'types';
 
 import Cell from './Cell';
@@ -30,6 +31,7 @@ const Result = ({ data, index, style }: Props): ReactElement => {
   const ref = useRef<HTMLButtonElement>(null);
   const columns = useColumns();
   const locale = useTypedSelector(selectLocale);
+  const query = useTypedSelector(selectResultsQuery);
   const { consonants, direction, separator, vowels } = LOCALE_FEATURES[locale];
   const result = results[index];
   const isMatching = useTypedSelector((state) => selectIsResultMatching(state, index));
@@ -60,7 +62,9 @@ const Result = ({ data, index, style }: Props): ReactElement => {
     >
       <span className={styles.resultContent}>
         {enabledColumns[ResultColumn.Word] && (
-          <Cell className={styles.word} translationKey="common.word" value={result.word} />
+          <Cell className={styles.word} translationKey="common.word" value={result.word}>
+            <Highlighter highlightClassName={styles.highlight} searchWords={[query]} textToHighlight={result.word} />
+          </Cell>
         )}
 
         {enabledColumns[ResultColumn.TilesCount] && (

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

@@ -220,3 +220,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   border-bottom-left-radius: var(--border--radius);
   border-bottom-right-radius: var(--border--radius);
 }
+
+.highlight {
+  background-color: var(--color--mark);
+  color: var(--color--foreground);
+  border-radius: var(--border--radius);
+}

package/src/components/Solver/Solver.module.scss

@@ -113,23 +113,3 @@
 .emptyState {
   margin-top: var(--spacing);
 }
-
-.solve {
-  --spacing: var(--spacing--l);
-
-  position: fixed;
-  bottom: var(--spacing);
-  z-index: 1;
-
-  @include media('<xs') {
-    --spacing: var(--spacing--m);
-  }
-
-  [dir='ltr'] & {
-    right: var(--spacing);
-  }
-
-  [dir='rtl'] & {
-    left: var(--spacing);
-  }
-}

package/src/components/Solver/Solver.tsx

@@ -22,7 +22,7 @@ import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { FloatingSolveButton, ResultCandidatePicker } from './components';
+import { ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -134,8 +134,6 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
           )}
         </div>
       </div>
-
-      {showFloatingSolveButton && <FloatingSolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
 import {
   resultsSlice,
@@ -38,7 +37,6 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const isPreviousDisabled = !results || index <= 0 || disabled;
   const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
-  const { showFloatingSolveButton } = useAppLayout();
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -91,14 +89,8 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
         {!resultCandidate && <div className={styles.word}> </div>}
 
         <div className={styles.iconContainer}>
-          {showFloatingSolveButton && <ChevronDown className={styles.icon} />}
-
-          {!showFloatingSolveButton && (
-            <>
-              {isLoading && <Spinner className={styles.loading} />}
-              {!isLoading && <ChevronDown className={styles.icon} />}
-            </>
-          )}
+          {isLoading && <Spinner className={styles.loading} />}
+          {!isLoading && <ChevronDown className={styles.icon} />}
         </div>
       </button>
 

package/src/components/Solver/components/index.ts

@@ -1,3 +1,2 @@
-export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';

package/src/components/Tile/Tile.module.scss

@@ -87,6 +87,7 @@
   color: transparent;
   caret-color: transparent;
   font-size: 16px; // prevent iOS from automatically zooming in on focus
+  outline: none;
 
   &::selection {
     --background--color: transparent;

package/src/components/Tile/Tile.tsx

@@ -5,7 +5,9 @@ import {
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
+  MouseEventHandler,
   Ref,
+  TouchEventHandler,
   useCallback,
   useEffect,
   useMemo,
@@ -37,6 +39,8 @@ interface Props {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
 }
 
 const Tile: FunctionComponent<Props> = ({
@@ -57,6 +61,8 @@ const Tile: FunctionComponent<Props> = ({
   onChange,
   onFocus = noop,
   onKeyDown = noop,
+  onMouseDown = noop,
+  onTouchStart = noop,
 }) => {
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
@@ -77,12 +83,6 @@ const Tile: FunctionComponent<Props> = ({
     [onKeyDown],
   );
 
-  useEffect(() => {
-    if (autoFocus && ref.current) {
-      ref.current.focus();
-    }
-  }, [autoFocus, ref]);
-
   useEffect(() => {
     if (!ref.current?.parentElement || !character || !animateTile) {
       return;
@@ -117,6 +117,8 @@ const Tile: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
       onKeyDown={handleKeyDown}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
     />
   );
 };

package/src/components/Tile/TilePure.tsx

@@ -6,7 +6,9 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   memo,
+  MouseEventHandler,
   Ref,
+  TouchEventHandler,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';
@@ -34,6 +36,8 @@ interface Props {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
 }
 
 const TilePure: FunctionComponent<Props> = ({
@@ -57,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   onChange,
   onFocus,
   onKeyDown,
+  onMouseDown,
+  onTouchStart,
 }) => (
   <div
     className={classNames(styles.tile, className, {
@@ -90,6 +96,8 @@ const TilePure: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
     />
 
     {canShowPoints && (

package/src/hooks/useAppLayout.ts

@@ -56,6 +56,7 @@ const useAppLayout = () => {
   const resultsHeight = isLessThanL
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
     : boardSize - componentsSpacing - dictionaryHeight;
+  const rackWidth = tileSize * config.maximumCharactersCount;
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
@@ -67,10 +68,11 @@ const useAppLayout = () => {
     logoHeight,
     logoWidth: logoHeight * LOGO_ASPECT_RATIO,
     maxControlsWidth,
+    rackHeight: tileSize,
+    rackWidth,
     resultsHeight,
     resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
     showCompactControls: !showColumn,
-    showFloatingSolveButton: isTouchDevice,
     showKeyMap: !isTouchDevice,
     showResultsInModal,
     showShortNav: isLessThanS,

package/src/hooks/useLocalStorage.ts

@@ -5,6 +5,7 @@ import {
   selectAutoGroupTiles,
   selectBoard,
   selectConfigId,
+  selectInputMode,
   selectLocale,
   selectRack,
   useTypedSelector,
@@ -14,6 +15,7 @@ const useLocalStorage = () => {
   const autoGroupTiles = useTypedSelector(selectAutoGroupTiles);
   const board = useTypedSelector(selectBoard);
   const configId = useTypedSelector(selectConfigId);
+  const inputMode = useTypedSelector(selectInputMode);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
 
@@ -35,6 +37,12 @@ const useLocalStorage = () => {
     }
   }, [configId]);
 
+  useEffect(() => {
+    if (inputMode) {
+      localStorage.setInputMode(inputMode);
+    }
+  }, [inputMode]);
+
   useEffect(() => {
     if (locale) {
       localStorage.setLocale(locale);

package/src/i18n/de.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "Wort eingeben",
   "cell.filter-cell": "Zielort",
   "cell.set-blank": "Als Blanko markieren",
   "cell.set-not-blank": "Nicht als Blanko markieren",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "Wort kann nicht im Wörterbuch gefunden werden.",
   "dictionary.empty-state.not-allowed": "Dieses Wort ist nicht erlaubt.",
   "dictionary.empty-state.uninitialized": "Die Wörterbuchdéfinition wird hier angezeigt.",
-  "dictionary.input.placeholder": "Durchsuche Wörterbuch...",
+  "dictionary.input.placeholder": "Durchsuche Wörterbuch…",
   "dictionary.input.title": "Durch Kommas getrennte Wörter",
   "empty-state.error": "Fehler",
   "empty-state.info": "Info",
@@ -43,6 +44,7 @@
   "menu": "Menü",
   "rack.placeholder": "Steine…",
   "rack.tile.location": "Ablage: Stein ({{index}})",
+  "rack.touchscreen.placeholder": "Steine…",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "Rechte Seite",
   "settings.autoGroupTiles.null": "Nicht gruppieren",
   "settings.game": "Spiel",
+  "settings.inputMode": "Eingabemodus",
+  "settings.inputMode.keyboard": "Tastatur",
+  "settings.inputMode.touchscreen": "Touchscreen",
   "settings.language": "Sprache",
   "words": "Gebildete Wörter",
   "words.invalid": "Falsch",

package/src/i18n/en.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "Enter word",
   "cell.filter-cell": "Target destination",
   "cell.set-blank": "Mark it a blank",
   "cell.set-not-blank": "Mark it not a blank",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "Unable to find word definition in the dictionary.",
   "dictionary.empty-state.not-allowed": "This word is not allowed.",
   "dictionary.empty-state.uninitialized": "Word definition will be shown here.",
-  "dictionary.input.placeholder": "Search dictionary...",
+  "dictionary.input.placeholder": "Search dictionary…",
   "dictionary.input.title": "Comma-separated words",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
@@ -43,6 +44,7 @@
   "menu": "Menu",
   "rack.placeholder": "Letters",
   "rack.tile.location": "Rack: tile ({{index}})",
+  "rack.touchscreen.placeholder": "Letters…",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
   "results.empty-state.no-results": "No results - unable to generate any words.",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "On the right",
   "settings.autoGroupTiles.null": "Do not group",
   "settings.game": "Game",
+  "settings.inputMode": "Input mode",
+  "settings.inputMode.keyboard": "Keyboard",
+  "settings.inputMode.touchscreen": "Touchscreen",
   "settings.language": "Language",
   "words": "Created words",
   "words.invalid": "Invalid",

package/src/i18n/es.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "Ingresar palabra",
   "cell.filter-cell": "Destino objetivo",
   "cell.set-blank": "Marcar como en blanco",
   "cell.set-not-blank": "Marcar como no en blanco",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "No se puede encontrar la definición de palabra en el diccionario.",
   "dictionary.empty-state.not-allowed": "Esta palabra no es aceptable.",
   "dictionary.empty-state.uninitialized": "Aquí se mostrará la definición del diccionario.",
-  "dictionary.input.placeholder": "Busca el diccionario...",
+  "dictionary.input.placeholder": "Busca el diccionario…",
   "dictionary.input.title": "Palabras separadas por comas",
   "empty-state.error": "Error",
   "empty-state.info": "Info",
@@ -43,6 +44,7 @@
   "menu": "Menú",
   "rack.placeholder": "Letras…",
   "rack.tile.location": "Estante: espacio ({{index}})",
+  "rack.touchscreen.placeholder": "Letras… (p.ej. LLabcCHhRR)",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "A la derecha",
   "settings.autoGroupTiles.null": "No agrupar",
   "settings.game": "Juego",
+  "settings.inputMode": "Modo de entrada",
+  "settings.inputMode.keyboard": "Teclado",
+  "settings.inputMode.touchscreen": "Pantalla táctil",
   "settings.language": "Idioma",
   "words": "Palabras creadas",
   "words.invalid": "Incorrecto",