@scrabble-solver/scrabble-solver 2.11.8 → 2.12.0

package/src/i18n/fa.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "کلمه را وارد کنید",
   "cell.filter-cell": "مقصد",
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "کلمه در فرهنگ لغت یافت نشد.",
   "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",
   "dictionary.empty-state.uninitialized": "معنی لغت اینجا نمایش داده خواهد شد.",
-  "dictionary.input.placeholder": "جستجو در فرهنگ لغت ...",
+  "dictionary.input.placeholder": "جستجو در فرهنگ لغت …",
   "dictionary.input.title": "کلمات جدا شده با کاما",
   "empty-state.error": "خطا",
   "empty-state.info": "اطلاعات",
@@ -43,6 +44,7 @@
   "menu": "منو",
   "rack.placeholder": "لیستحرف",
   "rack.tile.location": "({{index}}) کاشی: طاقچه",
+  "rack.touchscreen.placeholder": "لیستحرف…",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "در سمت راست",
   "settings.autoGroupTiles.null": "کنار هم قرار  نده",
   "settings.game": "بازی",
+  "settings.inputMode": "حالت ورودی",
+  "settings.inputMode.keyboard": "صفحه کلید",
+  "settings.inputMode.touchscreen": "صفحه لمسی",
   "settings.language": "زبان",
   "words": "کلمات ساخته شده",
   "words.invalid": "نا معتبر",

package/src/i18n/fr.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "Entrez un mot",
   "cell.filter-cell": "Destination cible",
   "cell.set-blank": "Marquer comme vide",
   "cell.set-not-blank": "Marquer comme non vide",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "Impossible de trouver une définition pour ce mot dans le dictionaire.",
   "dictionary.empty-state.not-allowed": "Ce mot n'est pas pas acceptable.",
   "dictionary.empty-state.uninitialized": "La définition dictionaire sera affichée ici.",
-  "dictionary.input.placeholder": "Rechercher dans le dictionnaire...",
+  "dictionary.input.placeholder": "Rechercher dans le dictionnaire…",
   "dictionary.input.title": "Mots séparées par des virgules",
   "empty-state.error": "Erreur",
   "empty-state.info": "Info",
@@ -43,6 +44,7 @@
   "menu": "Menu",
   "rack.placeholder": "Lettres",
   "rack.tile.location": "Chevalet: la case ({{index}})",
+  "rack.touchscreen.placeholder": "Lettres…",
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "Vers la gauche",
   "settings.autoGroupTiles.null": "Ne pas grouper",
   "settings.game": "Jeu",
+  "settings.inputMode": "Mode de saisie",
+  "settings.inputMode.keyboard": "Clavier",
+  "settings.inputMode.touchscreen": "Écran tactile",
   "settings.language": "Langue",
   "words": "Mots créés",
   "words.invalid": "Incorrect",

package/src/i18n/pl.json

@@ -1,4 +1,5 @@
 {
+  "cell.enter-word": "Wprowadź słowo",
   "cell.filter-cell": "Miejsce docelowe",
   "cell.set-blank": "Oznacz jako blank",
   "cell.set-not-blank": "Oznacz jako nie blank",
@@ -22,7 +23,7 @@
   "dictionary.empty-state.no-results": "Nie udało się znaleźć definicji słowa w słowniku.",
   "dictionary.empty-state.not-allowed": "To słowo nie jest dopuszczalne w grach.",
   "dictionary.empty-state.uninitialized": "Tu zostanie wyświetlona definicja słowa.",
-  "dictionary.input.placeholder": "Szukaj w słowniku...",
+  "dictionary.input.placeholder": "Szukaj w słowniku…",
   "dictionary.input.title": "Słowa rozdzielone przecinkiem",
   "empty-state.error": "Błąd",
   "empty-state.info": "Info",
@@ -43,6 +44,7 @@
   "menu": "Menu",
   "rack.placeholder": "Literki",
   "rack.tile.location": "Stojak: płytka ({{index}})",
+  "rack.touchscreen.placeholder": "Literki…",
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
@@ -58,6 +60,9 @@
   "settings.autoGroupTiles.right": "Po prawej",
   "settings.autoGroupTiles.null": "Nie grupuj",
   "settings.game": "Gra",
+  "settings.inputMode": "Tryb wpisywania",
+  "settings.inputMode.keyboard": "Klawiatura",
+  "settings.inputMode.touchscreen": "Ekran dotykowy",
   "settings.language": "Język",
   "words": "Utworzone słowa",
   "words.invalid": "Niepoprawne",

package/src/icons/Keyboard.svg

@@ -1,4 +1,5 @@
-<!-- https://icons.getbootstrap.com/icons/keyboard-fill/ -->
-<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6zm13 .25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM2.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 3 8.75v-.5A.25.25 0 0 0 2.75 8h-.5zM4 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 5 8.75v-.5A.25.25 0 0 0 4.75 8h-.5a.25.25 0 0 0-.25.25zM6.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 7 8.75v-.5A.25.25 0 0 0 6.75 8h-.5zM8 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 9 8.75v-.5A.25.25 0 0 0 8.75 8h-.5a.25.25 0 0 0-.25.25zM13.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zm0 2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zm-3-2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-1.5zm.75 2.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM11.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zM9 6.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5A.25.25 0 0 0 9.75 6h-.5a.25.25 0 0 0-.25.25zM7.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 8 6.75v-.5A.25.25 0 0 0 7.75 6h-.5zM5 6.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 6 6.75v-.5A.25.25 0 0 0 5.75 6h-.5a.25.25 0 0 0-.25.25zM2.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h1.5A.25.25 0 0 0 4 6.75v-.5A.25.25 0 0 0 3.75 6h-1.5zM2 10.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM4.25 10a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h5.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-5.5z" fill="currentColor" />
+<!-- https://icons.getbootstrap.com/icons/keyboard/ -->
+<svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h12zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H2z" />
+  <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75v-.5zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25v-.5zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75v-.5zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75v-.5zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75v-.5zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75v-.5zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75v-.5zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75v-.5zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75v-.5zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25v-.5zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25v-.5z" />
 </svg>

package/src/icons/KeyboardFill.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/keyboard-fill/ -->
+<svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6zm13 .25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM2.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 3 8.75v-.5A.25.25 0 0 0 2.75 8h-.5zM4 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 5 8.75v-.5A.25.25 0 0 0 4.75 8h-.5a.25.25 0 0 0-.25.25zM6.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 7 8.75v-.5A.25.25 0 0 0 6.75 8h-.5zM8 8.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 9 8.75v-.5A.25.25 0 0 0 8.75 8h-.5a.25.25 0 0 0-.25.25zM13.25 8a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zm0 2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zm-3-2a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h1.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-1.5zm.75 2.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM11.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5zM9 6.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5A.25.25 0 0 0 9.75 6h-.5a.25.25 0 0 0-.25.25zM7.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 8 6.75v-.5A.25.25 0 0 0 7.75 6h-.5zM5 6.25v.5c0 .138.112.25.25.25h.5A.25.25 0 0 0 6 6.75v-.5A.25.25 0 0 0 5.75 6h-.5a.25.25 0 0 0-.25.25zM2.25 6a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h1.5A.25.25 0 0 0 4 6.75v-.5A.25.25 0 0 0 3.75 6h-1.5zM2 10.25v.5c0 .138.112.25.25.25h.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-.5a.25.25 0 0 0-.25.25zM4.25 10a.25.25 0 0 0-.25.25v.5c0 .138.112.25.25.25h5.5a.25.25 0 0 0 .25-.25v-.5a.25.25 0 0 0-.25-.25h-5.5z" />
+</svg>

package/src/icons/index.ts

@@ -31,6 +31,7 @@ export { default as FlagUs } from './FlagUs.svg';
 export { default as Github } from './Github.svg';
 export { default as InfoCircleFill } from './InfoCircleFill.svg';
 export { default as Keyboard } from './Keyboard.svg';
+export { default as KeyboardFill } from './KeyboardFill.svg';
 export { default as List } from './List.svg';
 export { default as Sack } from './Sack.svg';
 export { default as Search } from './Search.svg';

package/src/lib/extractCharacters.test.ts

@@ -0,0 +1,26 @@
+import { scrabble } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
+import { Locale } from '@scrabble-solver/types';
+
+import extractCharacters from './extractCharacters';
+
+const tests = [
+  { input: 'ab ', expected: ['a', 'b', BLANK] },
+  { input: 'śćźa', expected: ['a'] },
+  { input: 'bueno', expected: ['b', 'u', 'e', 'n', 'o'] },
+  { input: 'bellas', expected: ['b', 'e', 'll', 'a', 's'] },
+  { input: 'BELLAS', expected: ['b', 'e', 'll', 'a', 's'] },
+  { input: 'churro', expected: ['ch', 'u', 'rr', 'o'] },
+  { input: 'challulla', expected: ['ch', 'a', 'll', 'u', 'll', 'a'] },
+];
+
+describe('extractCharacters', () => {
+  const locale = Locale.ES_ES;
+  const config = scrabble[locale];
+
+  for (const { input, expected } of tests) {
+    it(`[${locale}] "${input}"`, () => {
+      expect(extractCharacters(config, input)).toEqual(expected);
+    });
+  }
+});

package/src/lib/extractCharacters.ts

@@ -4,20 +4,22 @@ import { Config } from '@scrabble-solver/types';
 const extractCharacters = (config: Config, value: string): string[] => {
   let index = 0;
   const characters: string[] = [];
+  const valueLowercase = value.toLocaleLowerCase(config.locale);
 
-  while (index < value.length) {
-    const character = value[index];
-    const nextCharacter = value[index + 1];
-    const twoCharacterTileCandidate = `${character}${nextCharacter}`;
+  while (index < valueLowercase.length) {
+    const character = valueLowercase[index];
+    const nextCharacter = valueLowercase[index + 1];
+    const digraph = `${character}${nextCharacter}`;
 
-    if (config.twoCharacterTiles.includes(twoCharacterTileCandidate)) {
-      characters.push(twoCharacterTileCandidate);
-      ++index;
+    if (config.twoCharacterTiles.includes(digraph)) {
+      characters.push(digraph);
+      index += digraph.length;
     } else if (config.hasCharacter(character) || character === BLANK) {
       characters.push(character);
+      ++index;
+    } else {
+      ++index;
     }
-
-    ++index;
   }
 
   return characters;

package/src/lib/extractCharactersByCase.test.ts

@@ -0,0 +1,31 @@
+import { scrabble } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
+import { Locale } from '@scrabble-solver/types';
+
+import extractCharactersByCase from './extractCharactersByCase';
+
+const tests = [
+  { input: 'ab ', expected: ['a', 'b', BLANK] },
+  { input: 'śćźa', expected: ['a'] },
+  { input: 'bueno', expected: ['b', 'u', 'e', 'n', 'o'] },
+  { input: 'bellas', expected: ['b', 'e', 'l', 'l', 'a', 's'] },
+  { input: 'churro', expected: ['c', 'h', 'u', 'r', 'r', 'o'] },
+  { input: 'challulla', expected: ['c', 'h', 'a', 'l', 'l', 'u', 'l', 'l', 'a'] },
+  { input: 'beLlas', expected: ['b', 'e', 'l', 'l', 'a', 's'] },
+  { input: 'belLas', expected: ['b', 'e', 'l', 'l', 'a', 's'] },
+  { input: 'beLLas', expected: ['b', 'e', 'll', 'a', 's'] },
+  { input: 'chuRRo', expected: ['c', 'h', 'u', 'rr', 'o'] },
+  { input: 'CHuRRo', expected: ['ch', 'u', 'rr', 'o'] },
+  { input: 'CHaLLuLLa', expected: ['ch', 'a', 'll', 'u', 'll', 'a'] },
+];
+
+describe('extractCharactersByCase', () => {
+  const locale = Locale.ES_ES;
+  const config = scrabble[locale];
+
+  for (const { input, expected } of tests) {
+    it(`[${locale}] "${input}"`, () => {
+      expect(extractCharactersByCase(config, input)).toEqual(expected);
+    });
+  }
+});

package/src/lib/extractCharactersByCase.ts

@@ -0,0 +1,31 @@
+import { BLANK } from '@scrabble-solver/constants';
+import { Config } from '@scrabble-solver/types';
+
+import isUpperCase from './isUpperCase';
+
+const extractCharactersByCase = (config: Config, value: string): string[] => {
+  let index = 0;
+  const characters: string[] = [];
+
+  while (index < value.length) {
+    const character = value[index];
+    const characterLowercase = value[index].toLocaleLowerCase(config.locale);
+    const nextCharacter = value[index + 1];
+    const digraph = `${character}${nextCharacter}`;
+    const digraphLowercase = digraph.toLocaleLowerCase(config.locale);
+
+    if (isUpperCase(config.locale, digraph) && config.twoCharacterTiles.includes(digraphLowercase)) {
+      characters.push(digraphLowercase);
+      index += digraphLowercase.length;
+    } else if (config.hasCharacter(characterLowercase) || characterLowercase === BLANK) {
+      characters.push(characterLowercase);
+      ++index;
+    } else {
+      ++index;
+    }
+  }
+
+  return characters;
+};
+
+export default extractCharactersByCase;

package/src/lib/index.ts

@@ -3,14 +3,15 @@ export { default as canUseDom } from './canUseDom';
 export { default as createArray } from './createArray';
 export { default as createComparator } from './createComparator';
 export { default as createGridOf } from './createGridOf';
-export { default as createKeyboardNavigation } from './createKeyboardNavigation';
 export { default as createKeyComparator } from './createKeyComparator';
+export { default as createKeyboardNavigation } from './createKeyboardNavigation';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as createRegExp } from './createRegExp';
 export { default as createStringComparator } from './createStringComparator';
 export { default as dataUrlToBlob } from './dataUrlToBlob';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
+export { default as extractCharactersByCase } from './extractCharactersByCase';
 export { default as extractInputValue } from './extractInputValue';
 export { default as findCell } from './findCell';
 export { default as getCellSize } from './getCellSize';
@@ -26,6 +27,7 @@ export { default as isCtrl } from './isCtrl';
 export { default as isMac } from './isMac';
 export { default as isRegExp } from './isRegExp';
 export { default as isStringArray } from './isStringArray';
+export { default as isUpperCase } from './isUpperCase';
 export { default as memoize } from './memoize';
 export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';

package/src/lib/isUpperCase.ts

@@ -0,0 +1,7 @@
+import { Locale } from '@scrabble-solver/types';
+
+const isUpperCase = (locale: Locale, value: string): boolean => {
+  return value === value.toLocaleUpperCase(locale);
+};
+
+export default isUpperCase;

package/src/modals/SettingsModal/SettingsModal.tsx

@@ -3,7 +3,7 @@ import { FunctionComponent, memo } from 'react';
 import { Modal } from 'components';
 import { useTranslate } from 'state';
 
-import { AutoGroupTilesSetting, ConfigSetting, LocaleSetting } from './components';
+import { AutoGroupTilesSetting, ConfigSetting, InputModeSetting, LocaleSetting } from './components';
 
 interface Props {
   className?: string;
@@ -24,6 +24,10 @@ const SettingsModal: FunctionComponent<Props> = ({ className, isOpen, onClose })
         <LocaleSetting disabled={!isOpen} />
       </Modal.Section>
 
+      <Modal.Section title={translate('settings.inputMode')}>
+        <InputModeSetting disabled={!isOpen} />
+      </Modal.Section>
+
       <Modal.Section title={translate('settings.autoGroupTiles')}>
         <AutoGroupTilesSetting disabled={!isOpen} />
       </Modal.Section>

package/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.module.scss

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

package/src/modals/SettingsModal/components/InputModeSetting/InputModeSetting.tsx

@@ -0,0 +1,55 @@
+import { ChangeEvent, FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Radio } from 'components';
+import { selectInputMode, settingsSlice, useTranslate, useTypedSelector } from 'state';
+
+import styles from './InputModeSetting.module.scss';
+import { parseValue } from './lib';
+
+interface Props {
+  className?: string;
+  disabled?: boolean;
+}
+
+const InputModeSetting: FunctionComponent<Props> = ({ className, disabled }) => {
+  const dispatch = useDispatch();
+  const translate = useTranslate();
+  const value = useTypedSelector(selectInputMode);
+
+  const options = [
+    {
+      label: translate('settings.inputMode.keyboard'),
+      value: 'keyboard',
+    },
+    {
+      label: translate('settings.inputMode.touchscreen'),
+      value: 'touchscreen',
+    },
+  ];
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const inputMode = parseValue(event.target.value);
+    dispatch(settingsSlice.actions.changeInputMode(inputMode));
+  };
+
+  return (
+    <div className={className}>
+      {options.map((option) => (
+        <Radio
+          checked={value === option.value}
+          className={styles.option}
+          disabled={disabled}
+          key={option.value}
+          name="inputMode"
+          value={option.value}
+          onChange={handleChange}
+        >
+          <div className={styles.label}>{option.label}</div>
+        </Radio>
+      ))}
+    </div>
+  );
+};
+
+export default InputModeSetting;

package/src/modals/SettingsModal/components/InputModeSetting/index.ts

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

package/src/modals/SettingsModal/components/InputModeSetting/lib.ts

@@ -0,0 +1,13 @@
+import { InputMode } from 'types';
+
+export const parseValue = (value: string): InputMode => {
+  if (value === 'keyboard') {
+    return 'keyboard';
+  }
+
+  if (value === 'touchscreen') {
+    return 'touchscreen';
+  }
+
+  throw new Error(`"${value}" is not valid. Should be "keyboard" or "touchscreen"`);
+};

package/src/modals/SettingsModal/components/InputModeSetting/types.ts

@@ -0,0 +1,7 @@
+import { InputMode } from 'types';
+
+export interface Option {
+  className: string;
+  label: string;
+  value: InputMode;
+}

package/src/modals/SettingsModal/components/index.ts

@@ -1,3 +1,4 @@
 export { default as AutoGroupTilesSetting } from './AutoGroupTilesSetting';
 export { default as ConfigSetting } from './ConfigSetting';
+export { default as InputModeSetting } from './InputModeSetting';
 export { default as LocaleSetting } from './LocaleSetting';

package/src/state/localStorage.ts

@@ -1,11 +1,12 @@
 import { Board, Locale } from '@scrabble-solver/types';
 import store2 from 'store2';
 
-import { AutoGroupTiles, Rack } from 'types';
+import { AutoGroupTiles, InputMode, Rack } from 'types';
 
 const AUTO_GROUP_TILES = 'auto-group-tiles';
 const BOARD = 'board';
 const CONFIG_ID = 'config-id';
+const INPUT_MODE = 'input-mode';
 const LOCALE = 'locale';
 const RACK = 'rack';
 
@@ -38,6 +39,14 @@ const localStorage = {
     store.set(CONFIG_ID, configId, true);
   },
 
+  getInputMode(): InputMode | undefined {
+    return store.get(INPUT_MODE);
+  },
+
+  setInputMode(inputMode: InputMode | undefined): void {
+    store.set(INPUT_MODE, inputMode, true);
+  },
+
   getLocale(): Locale | undefined {
     return store.get(LOCALE);
   },

package/src/state/selectors.ts

@@ -65,6 +65,8 @@ export const selectLocaleAutoGroupTiles = createSelector([selectLocale, selectSe
 
 export const selectBoard = selectBoardRoot;
 
+export const selectInputMode = createSelector([selectSettingsRoot], (settings) => settings.inputMode);
+
 export const selectConfigId = createSelector([selectSettingsRoot], (settings) => settings.configId);
 
 export const selectConfig = createSelector([selectConfigId, selectLocale], getLocaleConfig);

package/src/state/slices/settingsInitialState.ts

@@ -2,21 +2,24 @@ import { literaki, scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
 import { guessLocale } from 'lib';
-import { AutoGroupTiles } from 'types';
+import { AutoGroupTiles, InputMode } from 'types';
 
 import localStorage from '../localStorage';
 
 export interface SettingsState {
   autoGroupTiles: AutoGroupTiles;
   configId: typeof literaki.id | typeof scrabble.id;
+  inputMode: InputMode;
   locale: Locale;
 }
 
 const localStorageAutoGroupTiles = localStorage.getAutoGroupTiles();
+const isTouchScreen = typeof globalThis.matchMedia !== 'undefined' && globalThis.matchMedia('(hover: none)').matches;
 
 const settingsInitialState: SettingsState = {
   autoGroupTiles: typeof localStorageAutoGroupTiles === 'undefined' ? 'left' : localStorageAutoGroupTiles,
   configId: localStorage.getConfigId() || scrabble.id,
+  inputMode: localStorage.getInputMode() || (isTouchScreen ? 'touchscreen' : 'keyboard'),
   locale: localStorage.getLocale() || guessLocale(),
 };
 

package/src/state/slices/settingsSlice.ts

@@ -1,7 +1,7 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { Locale } from '@scrabble-solver/types';
 
-import { AutoGroupTiles } from 'types';
+import { AutoGroupTiles, InputMode } from 'types';
 
 import settingsInitialState from './settingsInitialState';
 
@@ -19,6 +19,11 @@ const settingsSlice = createSlice({
       return { ...state, configId };
     },
 
+    changeInputMode: (state, action: PayloadAction<InputMode>) => {
+      const inputMode = action.payload;
+      return { ...state, inputMode };
+    },
+
     changeLocale: (state, action: PayloadAction<Locale>) => {
       const locale = action.payload;
       return { ...state, locale };

package/src/styles/mixins.scss

@@ -103,6 +103,7 @@ $media-expressions: (
   padding: 0 var(--spacing--l);
   transition: var(--transition);
   font-size: var(--font--size--m);
+  outline: none;
 }
 
 @mixin text-stroke($color, $size: 1px) {

package/src/styles/variables.scss

@@ -39,6 +39,7 @@ $easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
   --color--background--overlay: rgba(255, 255, 255, 0.65);
   --color--foreground: #222;
   --color--foreground--secondary: #444;
+  --color--mark: #ffff00;
   --color--error: hsl(0, 92%, 62%);
   --color--error--opposite: var(--color--white);
   --color--info: #1868ad;

package/src/types/index.ts

@@ -4,6 +4,8 @@ export type AutoGroupTiles = 'left' | 'right' | null;
 
 export type Direction = 'horizontal' | 'vertical';
 
+export type InputMode = 'keyboard' | 'touchscreen';
+
 export interface Point {
   x: number;
   y: number;
@@ -45,6 +47,7 @@ export enum ResultColumn {
   WordsCount = 'words-count',
 }
 export type TranslationKey =
+  | 'cell.enter-word'
   | 'cell.filter-cell'
   | 'cell.set-blank'
   | 'cell.set-not-blank'
@@ -89,6 +92,7 @@ export type TranslationKey =
   | 'menu'
   | 'rack.placeholder'
   | 'rack.tile.location'
+  | 'rack.touchscreen.placeholder'
   | 'remaining-tiles'
   | 'results'
   | 'results.empty-state.no-results'
@@ -104,6 +108,9 @@ export type TranslationKey =
   | 'settings.autoGroupTiles.right'
   | 'settings.autoGroupTiles.null'
   | 'settings.game'
+  | 'settings.inputMode'
+  | 'settings.inputMode.keyboard'
+  | 'settings.inputMode.touchscreen'
   | 'settings.language'
   | 'words'
   | 'words.invalid'

package/.next/static/5ttGCAW8jcIKxpR8om9fK/_buildManifest.js

@@ -1 +0,0 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/css/c6e0e01f44fc0425.css","static/chunks/pages/index-6894f40e6cac9243.js"],"/404":["static/chunks/pages/404-ca203fa27afc37d8.js"],"/_error":["static/chunks/pages/_error-54de1933a164a1ff.js"],sortedPages:["/","/404","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();