scrabble-solver 2.10.5 → 2.10.7

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

@@ -16,6 +16,7 @@ import { selectLocale, useTypedSelector } from 'state';
 import TilePure from './TilePure';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   character?: string;
   className?: string;
@@ -35,6 +36,7 @@ interface Props {
 }
 
 const Tile: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   className,
   character = '',
@@ -75,6 +77,7 @@ const Tile: FunctionComponent<Props> = ({
 
   return (
     <TilePure
+      aria-label={ariaLabel}
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}

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

@@ -14,6 +14,7 @@ import { ExclamationSquareFill } from 'icons';
 import styles from './Tile.module.scss';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
@@ -37,6 +38,7 @@ interface Props {
 }
 
 const TilePure: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   canShowPoints,
   character,
@@ -75,6 +77,7 @@ const TilePure: FunctionComponent<Props> = ({
     style={style}
   >
     <input
+      aria-label={ariaLabel}
       autoCapitalize="none"
       autoComplete="off"
       autoCorrect="off"

package/packages/scrabble-solver/src/components/Tooltip/useTooltip.tsx

@@ -12,7 +12,7 @@ import {
 import { usePopper } from 'react-popper';
 import { useMountedState, useRafLoop } from 'react-use';
 
-import { usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
 import { noop } from 'lib';
 
 import { MODIFIERS } from './constants';
@@ -36,11 +36,13 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+// eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
   const id = useUniqueId();
+  const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
   const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
@@ -90,7 +92,7 @@ const useTooltip = (
     [onMouseOver],
   );
 
-  const triggerProps = useMemo(
+  const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
       ref: setReferenceElement,
@@ -102,6 +104,16 @@ const useTooltip = (
     [ariaAttributes, handleBlur, handleFocus, handleMouseOut, handleMouseOver],
   );
 
+  const touchTriggerProps = useMemo(
+    () => ({
+      ...ariaAttributes,
+      ref: setReferenceElement,
+    }),
+    [ariaAttributes],
+  );
+
+  const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
+
   useRafLoop(() => {
     if (isMounted() && update) {
       update();

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

@@ -5,6 +5,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
+export { default as IconButton } from './IconButton';
 export { default as Key } from './Key';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
@@ -16,13 +17,11 @@ export { default as PlainTiles } from './PlainTiles';
 export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as SplashScreen } from './SplashScreen';
-export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';

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

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Zielort - klicken zum Wechseln",
   "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",
   "common.blanks": "Blankos",
   "common.clear": "Löschen",
   "common.close": "Schließen",
   "common.consonants": "Konsonanten",
   "common.loading": "Laden",
+  "common.next": "Weiter",
   "common.points": "Punkte",
+  "common.previous": "Zurück",
   "common.tiles": "Steine",
   "common.two-letter-tiles": "Zwei-Buchstaben",
   "common.vowels": "Vokale",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Blanko hinzufügen (Leertaste)",
   "menu": "Menü",
   "rack.placeholder": "Steine…",
+  "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
   "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Ergebnisse sind alt. Klicken zum Aktualisieren.",
   "results.empty-state.uninitialized": "Wörter die aus deinen Buchstaben generiert wurden erscheinen hier.",
   "results.input.placeholder": "Suchergebnisse... (RegExp)",
+  "results.insert": "Hinzufügen",
   "results.solve": "Lösen",
   "settings": "Einstellungen",
   "settings.autoGroupTiles": "Restliche Steine gruppieren",

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

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Target destination - click to toggle",
   "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",
   "common.blanks": "Blanks",
   "common.clear": "Clear",
   "common.close": "Close",
   "common.consonants": "Consonants",
   "common.loading": "Loading",
+  "common.next": "Next",
   "common.points": "Points",
+  "common.previous": "Previous",
   "common.tiles": "Tiles",
   "common.two-letter-tiles": "Two-letter",
   "common.vowels": "Vowels",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Insert blank (spacebar)",
   "menu": "Menu",
   "rack.placeholder": "Letters",
+  "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
   "results.empty-state.no-filtered-results": "No result matches this query.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Results are outdated. Click below to update.",
   "results.empty-state.uninitialized": "Words generated from your letters will be shown here.",
   "results.input.placeholder": "Search results... (RegExp)",
+  "results.insert": "Insert",
   "results.solve": "Solve",
   "settings": "Settings",
   "settings.autoGroupTiles": "Group remaining tiles",

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

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Destino objetivo: haga clic para alternar",
   "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",
   "common.blanks": "Blancos",
   "common.clear": "Borrar",
   "common.close": "Cerrar",
   "common.consonants": "Consonantes",
   "common.loading": "Cargando",
+  "common.next": "Siguiente",
   "common.points": "Puntos",
+  "common.previous": "Anterior",
   "common.tiles": "Longitud",
   "common.two-letter-tiles": "Dos letras",
   "common.vowels": "Vocales",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Insertar espacio en blanco (barra espaciadora)",
   "menu": "Menú",
   "rack.placeholder": "Letras…",
+  "rack.tile.location": "Estante: espacio ({{index}})",
   "remaining-tiles": "Casillas restantes",
   "results": "Resultados",
   "results.empty-state.no-filtered-results": "Ningún resultado coincide con esta consulta.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Los resultados están desactualizados. Haga clic a continuación para actualizar.",
   "results.empty-state.uninitialized": "Aquí se mostrarán las palabras generadas a partir de sus letras.",
   "results.input.placeholder": "Busque una solución... (RegExp)",
+  "results.insert": "Insertar",
   "results.solve": "Resolver",
   "settings": "Configuración",
   "settings.autoGroupTiles": "Agrupar casillas restantes",

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

@@ -3,12 +3,15 @@
   "cell.set-blank": "علامت گذاری به عنوان خالی",
   "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
   "cell.toggle-direction": "جهت تایپ - کلیک برای تغییر",
+  "cell.tile.location": "({{x}}، {{y}}) کاشی: صفحه",
   "common.blanks": "خالی",
   "common.clear": "پاک کردن",
   "common.close": "بستن",
   "common.consonants": "حروف صامت",
   "common.loading": "در حال بارگزاری",
+  "common.next": "بعدی",
   "common.points": "امتیازات",
+  "common.previous": "قبلی",
   "common.tiles": "کاشی ها",
   "common.two-letter-tiles": "دو حرفی",
   "common.vowels": "حروف مصوت",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "وارد کردن کاشی خالی (دکمه اسپیس)",
   "menu": "منو",
   "rack.placeholder": "لیستحرف",
+  "rack.tile.location": "({{index}}) کاشی: طاقچه",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
   "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",
   "results.input.placeholder": "جستجو در نتایج (RegExp)",
+  "results.insert": "وارد کردن",
   "results.solve": "حل کن",
   "settings": "تنظیمات",
   "settings.autoGroupTiles": "کاشی های باقی مانده ی طاقچه را کنار هم قرار بده",

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

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Destination cible - cliquer pour changer",
   "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",
   "common.blanks": "Cases vides",
   "common.clear": "Effacer",
   "common.close": "Fermer",
   "common.consonants": "Consonnes",
   "common.loading": "Chargement",
+  "common.next": "Suivant",
   "common.points": "Points",
+  "common.previous": "Précédent",
   "common.tiles": "Cases",
   "common.two-letter-tiles": "Deux lettres",
   "common.vowels": "Voyelles",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Inserer une case vide (spacebar)",
   "menu": "Menu",
   "rack.placeholder": "Lettres",
+  "rack.tile.location": "Chevalet: la case ({{index}})",
   "remaining-tiles": "Cases restantes",
   "results": "Résultats",
   "results.empty-state.no-filtered-results": "Aucun résultat ne correspond à cette requête",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Les résultats sont dépassé. Cliquer ci-dessous pour mettre à jour.",
   "results.empty-state.uninitialized": "Les mots générés à partir de vos lettres seront affichés ici.",
   "results.input.placeholder": "Rechercher les résultats... (RegExp)",
+  "results.insert": "Inserer",
   "results.solve": "Résoudre",
   "settings": "Options",
   "settings.autoGroupTiles": "Grouper les cases restantes",

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

@@ -2,13 +2,16 @@
   "cell.filter-cell": "Miejsce docelowe - kliknij aby zmienić",
   "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ć",
   "common.blanks": "Blanki",
   "common.clear": "Wyczyść",
   "common.close": "Zamknij",
   "common.consonants": "Spółgłoski",
   "common.loading": "Ładowanie",
+  "common.next": "Następne",
   "common.points": "Punkty",
+  "common.previous": "Poprzednie",
   "common.tiles": "Płytki",
   "common.two-letter-tiles": "Dwuliterowe",
   "common.vowels": "Samogłoski",
@@ -37,6 +40,7 @@
   "keyMap.rack.insert-blank": "Wstaw blanka (spacja)",
   "menu": "Menu",
   "rack.placeholder": "Literki",
+  "rack.tile.location": "Stojak: płytka ({{index}})",
   "remaining-tiles": "Pozostałe płytki",
   "results": "Wyniki",
   "results.empty-state.no-filtered-results": "Żaden wynik nie pasuje do tej kwerendy.",
@@ -44,6 +48,7 @@
   "results.empty-state.outdated": "Wyniki są nieaktualne. Kliknij poniżej, aby zaktualizować.",
   "results.empty-state.uninitialized": "Tu zostaną wyświetlone słowa wygenerowane z Twoich liter.",
   "results.input.placeholder": "Szukaj rozwiązania... (RegExp)",
+  "results.insert": "Wstaw",
   "results.solve": "Rozwiąż",
   "settings": "Opcje",
   "settings.autoGroupTiles": "Grupuj pozostałe płytki",

package/packages/scrabble-solver/src/icons/ArrowDown.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/arrow-down/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill="currentColor" fill-rule="evenodd" />
+  <path d="M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/ArrowLeft.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/arrow-left/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" fill="currentColor" fill-rule="evenodd" />
+  <path d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/ArrowRight.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/arrow-right/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill="currentColor" fill-rule="evenodd" />
+  <path d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/ArrowUp.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/arrow-up/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" fill="currentColor" fill-rule="evenodd" />
+  <path d="M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/ChevronDown.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/chevron-down/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill="currentColor" />
+  <path d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" fill="currentColor" />
 </svg>

package/packages/scrabble-solver/src/icons/ChevronLeft.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-left/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/ChevronRight.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-right/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" fill="currentColor" />
+</svg>

package/packages/scrabble-solver/src/icons/List.svg

@@ -1,4 +1,4 @@
 <!-- https://icons.getbootstrap.com/icons/list/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" >
-  <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill="currentColor" />
+  <path d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z" fill="currentColor" />
 </svg>

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

@@ -8,6 +8,8 @@ export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
+export { default as ChevronLeft } from './ChevronLeft.svg';
+export { default as ChevronRight } from './ChevronRight.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
 export { default as CrossCircleFill } from './CrossCircleFill.svg';

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss

@@ -2,10 +2,9 @@
 
 .button {
   width: 100%;
-  margin-bottom: var(--spacing--m);
   text-transform: none;
 
-  &:last-child {
-    margin-bottom: 0;
+  & + & {
+    margin-top: var(--spacing--l);
   }
 }

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

@@ -28,15 +28,21 @@ const Menu: FunctionComponent<Props> = ({
 
   return (
     <Modal className={className} isOpen={isOpen} title={translate('menu')} onClose={onClose}>
-      <Button className={styles.button} Icon={Sack} onClick={onShowRemainingTiles}>
+      <Button
+        aria-label={translate('remaining-tiles')}
+        className={styles.button}
+        Icon={Sack}
+        onClick={onShowRemainingTiles}
+      >
         {translate('remaining-tiles')}
       </Button>
 
-      <Button className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
+      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} onClick={onShowWords}>
         {translate('words')}
       </Button>
 
       <Button.Link
+        aria-label={translate('github')}
         className={styles.button}
         href={GITHUB_PROJECT_URL}
         Icon={Github}
@@ -46,7 +52,7 @@ const Menu: FunctionComponent<Props> = ({
         {translate('github')}
       </Button.Link>
 
-      <Button className={styles.button} Icon={Cog} onClick={onShowSettings}>
+      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} onClick={onShowSettings}>
         {translate('settings')}
       </Button>
     </Modal>

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -31,6 +31,7 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
       })}
     >
       <Tile
+        aria-label={character}
         character={character}
         className={styles.tile}
         disabled

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

@@ -40,12 +40,12 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
 
   return (
     <div className={className}>
-      {options.map((option) => (
+      {options.map((option, index) => (
         <Radio
           checked={value === parseValue(option.value)}
           className={styles.option}
           disabled={disabled}
-          id="autoGroupTiles"
+          id={`autoGroupTiles-${index}`}
           key={option.value}
           name="autoGroupTiles"
           value={option.value}

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

@@ -22,12 +22,12 @@ const ConfigSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map((option) => (
+      {options.map((option, index) => (
         <Radio
           checked={configId === option.value}
           className={styles.option}
           disabled={disabled}
-          id="configId"
+          id={`configId-${index}`}
           key={option.value}
           name="configId"
           value={option.value}

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

@@ -25,14 +25,14 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
 
   return (
     <div className={className}>
-      {options.map(({ Icon, ...option }) => (
+      {options.map(({ Icon, ...option }, index) => (
         <Radio
           checked={locale === option.value}
           className={classNames(styles.option, className, {
             [styles.checked]: locale === option.value,
           })}
           disabled={disabled}
-          id="locale"
+          id={`locale-${index}`}
           key={option.value}
           name="locale"
           value={option.value}

package/packages/scrabble-solver/src/pages/api/dictionary/[locale]/[word].ts

@@ -1,4 +1,5 @@
 import { scrabble } from '@scrabble-solver/configs';
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import logger from '@scrabble-solver/logger';
 import { isLocale, Locale } from '@scrabble-solver/types';
@@ -54,7 +55,8 @@ const parseRequest = (request: NextApiRequest): RequestData => {
   const words = Array.from(
     new Set(
       word
-        .split(',')
+        .replaceAll(COMMA_ARABIC, COMMA_LATIN)
+        .split(COMMA_LATIN)
         .map((part) => part.trim())
         .filter(Boolean),
     ),

package/packages/scrabble-solver/src/pages/index.tsx

@@ -38,6 +38,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   const [navRef, { height: navHeight }] = useMeasure<HTMLDivElement>();
   const solverHeight = indexHeight - navHeight;
   const solverWidth = indexWidth;
+  const [isClient, setIsClient] = useState(false);
 
   const handleClear = () => {
     dispatch(reset());
@@ -55,6 +56,7 @@ const Index: FunctionComponent<Props> = ({ version }) => {
   useLocalStorage();
 
   useEffectOnce(() => {
+    setIsClient(true);
     dispatch(initialize());
 
     globalThis.setTimeout(() => {
@@ -98,12 +100,14 @@ const Index: FunctionComponent<Props> = ({ version }) => {
           </div>
         </div>
 
-        <Solver
-          className={styles.solver}
-          height={solverHeight}
-          width={solverWidth}
-          onShowResults={() => setShowResults(true)}
-        />
+        {isClient && (
+          <Solver
+            className={styles.solver}
+            height={solverHeight}
+            width={solverWidth}
+            onShowResults={() => setShowResults(true)}
+          />
+        )}
       </div>
 
       <MenuModal

package/packages/scrabble-solver/src/state/sagas.ts

@@ -1,5 +1,6 @@
 import { PayloadAction } from '@reduxjs/toolkit';
-import { Result } from '@scrabble-solver/types';
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
+import { Locale, Result } from '@scrabble-solver/types';
 import { call, delay, put, select, takeEvery, takeLatest } from 'redux-saga/effects';
 
 import { memoize } from 'lib';
@@ -134,7 +135,9 @@ function* onLocaleChange(): AnyGenerator {
 
 function* onResultCandidateChange({ payload: result }: PayloadAction<Result | null>): AnyGenerator {
   if (result) {
-    yield put(dictionarySlice.actions.changeInput(result.words.join(', ')));
+    const locale = yield select(selectLocale);
+    const comma = locale === Locale.FA_IR ? ` ${COMMA_ARABIC}` : `${COMMA_LATIN} `;
+    yield put(dictionarySlice.actions.changeInput(result.words.join(comma)));
     yield put(dictionarySlice.actions.submit());
   }
 }

package/packages/scrabble-solver/src/state/useTranslate.ts

@@ -9,14 +9,17 @@ const useTranslate = (): Translate => {
   const translations = useTypedSelector(selectTranslations);
   const locale = useTypedSelector(selectLocale);
   const translate: Translate = useCallback(
-    (id) => {
+    (id, replacements = {}) => {
       const translation = translations[id];
 
       if (typeof translation === 'undefined') {
         throw new Error(`Untranslated key "${id}" in locale "${locale}"`);
       }
 
-      return translation;
+      return Object.entries(replacements).reduce(
+        (result, [key, value]) => result.replaceAll(`{{${key}}}`, value),
+        translation,
+      );
     },
     [translations, locale],
   );

package/packages/scrabble-solver/src/styles/mixins.scss

@@ -44,6 +44,12 @@ $media-expressions: (
   }
 }
 
+@mixin disabled {
+  opacity: var(--opacity--disabled);
+  box-shadow: none;
+  cursor: not-allowed;
+}
+
 @mixin ellipsis {
   display: block;
   text-overflow: ellipsis;

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

@@ -36,12 +36,15 @@ export type TranslationKey =
   | 'cell.set-blank'
   | 'cell.set-not-blank'
   | 'cell.toggle-direction'
+  | 'cell.tile.location'
   | 'common.clear'
   | 'common.close'
   | 'common.loading'
   | 'common.blanks'
   | 'common.consonants'
+  | 'common.next'
   | 'common.points'
+  | 'common.previous'
   | 'common.tiles'
   | 'common.two-letter-tiles'
   | 'common.vowels'
@@ -70,6 +73,7 @@ export type TranslationKey =
   | 'keyMap.rack.insert-blank'
   | 'menu'
   | 'rack.placeholder'
+  | 'rack.tile.location'
   | 'remaining-tiles'
   | 'results'
   | 'results.empty-state.no-filtered-results'
@@ -77,6 +81,7 @@ export type TranslationKey =
   | 'results.empty-state.outdated'
   | 'results.empty-state.uninitialized'
   | 'results.input.placeholder'
+  | 'results.insert'
   | 'results.solve'
   | 'settings'
   | 'settings.autoGroupTiles'
@@ -89,6 +94,6 @@ export type TranslationKey =
   | 'words.invalid'
   | 'words.valid';
 
-export type Translate = (key: TranslationKey) => string;
+export type Translate = (key: TranslationKey, replacements?: Record<string, string>) => string;
 
 export type Translations = Record<TranslationKey, string>;