@scrabble-solver/scrabble-solver 2.11.1 → 2.11.3

package/src/components/Solver/Solver.tsx

@@ -11,9 +11,8 @@ import {
   selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
+  selectResults,
   selectSolveError,
-  selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
   useTranslate,
   useTypedSelector,
@@ -41,18 +40,16 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+  const { columnWidth, componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
     useAppLayout();
-  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
-  const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
-  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
-  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const allResults = useTypedSelector(selectSortedResults);
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const results = useTypedSelector(selectResults);
+  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const [bestResult] = results || [];
   const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
   const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
@@ -117,8 +114,8 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.column} ref={columnRef}>
-            <Results callbacks={callbacks} />
+          <div className={styles.column}>
+            <Results callbacks={callbacks} className={styles.results} />
 
             <div className={styles.dictionaryContainer}>
               <Dictionary className={styles.dictionary} />
@@ -145,7 +142,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
                 </Alert>
               )}
 
-              {allResults && allResults.length === 0 && !isOutdated && (
+              {results && results.length === 0 && !isOutdated && (
                 <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
                 </Alert>

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

@@ -10,7 +10,7 @@ import {
   selectIsLoading,
   selectLocale,
   selectResultCandidate,
-  selectSortedResults,
+  selectResults,
   useTranslate,
   useTypedSelector,
 } from 'state';
@@ -31,13 +31,12 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const locale = useTypedSelector(selectLocale);
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const sortedResults = useTypedSelector(selectSortedResults);
-  const results = sortedResults || [];
+  const results = useTypedSelector(selectResults);
   const resultCandidate = useTypedSelector(selectResultCandidate);
-  const index = resultCandidate ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
+  const index = resultCandidate && results ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
   const disabled = isOutdated || !resultCandidate;
-  const isPreviousDisabled = index <= 0 || disabled;
-  const isNextDisabled = index >= results.length - 1 || disabled;
+  const isPreviousDisabled = !results || index <= 0 || disabled;
+  const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
   const { showFloatingSolveButton } = useAppLayout();
 

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

@@ -4,8 +4,17 @@
   --background-color: transparent;
 
   position: relative;
-  transition: var(--transition);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  background-color: var(--background-color);
   border-radius: var(--border--radius);
+  font-weight: bold;
+  text-transform: uppercase;
+  text-align: center;
+  transition: var(--transition);
+  user-select: none;
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -24,13 +33,29 @@
     --background-color: var(--color--red);
   }
 
+  &.raised {
+    box-shadow: var(--box-shadow--raised);
+
+    @include media('<xs') {
+      box-shadow: var(--box-shadow--raised--subtle);
+    }
+  }
+
   &.blank {
     --background-color: var(--color--white);
 
-    .placeholder,
-    .character {
-      color: var(--color--foreground);
-    }
+    color: var(--color--foreground);
+  }
+
+  &.empty {
+    color: var(--color--inactive);
+  }
+
+  &.invalid {
+    --background-color: var(--color--foreground);
+    --shadow--color: var(--box-shadow--color--inverse);
+
+    color: var(--color--white);
   }
 
   &.highlighted {
@@ -38,85 +63,28 @@
 
     color: var(--color--primary--opposite);
 
-    .placeholder,
-    .character {
-      color: inherit;
-    }
-
     .points {
       color: inherit;
     }
   }
-
-  &:not(.disabled) {
-    .input::selection {
-      --background--color: transparent;
-    }
-  }
-}
-
-.input,
-.character,
-.placeholder {
-  padding: 0;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: center;
-  caret-color: transparent;
-  box-sizing: border-box;
 }
 
 .input {
-  width: 100%;
-  height: 100%;
-  background-color: transparent;
-  color: transparent;
-  border: none;
-  font-size: 16px; // prevent iOS from automatically zooming in on focus
-}
-
-.character,
-.placeholder {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--background-color);
-  border-radius: inherit;
-  transition: var(--transition);
-  pointer-events: none;
-  user-select: none;
-
-  .empty & {
-    color: var(--color--inactive);
-  }
-
-  .raised & {
-    --shadow--size: 2px;
-    --shadow--blur: 2px;
-    --shadow--spread: -1px;
-    --shadow--color: rgba(34, 34, 34, 0.8);
-
-    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
-      var(--shadow--spread) var(--shadow--color);
-
-    @include media('<xs') {
-      --shadow--size: 1px;
-      --shadow--spread: 0;
-      --shadow--blur: 1px;
-    }
-  }
-}
-
-.character {
-  opacity: 1;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: transparent;
+  color: transparent;
+  caret-color: transparent;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
 
-  .empty & {
-    opacity: 0;
+  &::selection {
+    --background--color: transparent;
   }
 }
 
@@ -145,23 +113,29 @@
 }
 
 .alert {
-  $size: 30%;
+  --size: 30%;
 
   position: absolute;
-  width: $size;
-  height: $size;
-  background-color: var(--color--error--opposite);
+  width: var(--size);
+  height: var(--size);
+  background: radial-gradient(
+    var(--color--error--opposite),
+    var(--color--error--opposite) 85%,
+    transparent 85%,
+    transparent
+  );
   color: var(--color--error);
+  pointer-events: none;
 
   [dir='ltr'] & {
     top: 0;
     right: 0;
-    border-top-right-radius: inherit;
+    border-bottom-right-radius: inherit;
   }
 
   [dir='rtl'] & {
-    bottom: 0;
-    right: 0;
-    border-bottom-right-radius: inherit;
+    top: 0;
+    left: 0;
+    border-top-left-radius: inherit;
   }
 }

package/src/components/Tile/Tile.tsx

@@ -59,9 +59,8 @@ const Tile: FunctionComponent<Props> = ({
 }) => {
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
-  const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
+  const { pointsFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = useMergeRefs(inputRef ? [ref, inputRef] : [ref]);
@@ -98,7 +97,6 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
-      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}

package/src/components/Tile/TilePure.tsx

@@ -18,7 +18,6 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
-  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
@@ -42,7 +41,6 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
-  characterStyle,
   className,
   disabled,
   highlighted,
@@ -63,18 +61,20 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
-      [styles.disabled]: disabled,
       [styles.empty]: !character,
+      [styles.invalid]: !isValid,
       [styles.highlighted]: highlighted,
-      [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
       [styles.points3]: points === 3,
       [styles.points4]: points === 4,
       [styles.points5]: typeof points === 'number' && points >= 5,
+      [styles.raised]: raised,
     })}
     style={style}
   >
+    {character || placeholder}
+
     <input
       aria-label={ariaLabel}
       autoCapitalize="none"
@@ -92,16 +92,6 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
-    {placeholder && (
-      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
-        {placeholder}
-      </div>
-    )}
-
-    <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character}
-    </div>
-
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/src/hooks/useAppLayout.ts

@@ -1,4 +1,4 @@
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL } from 'parameters';
+import { COMPONENTS_SPACING, COMPONENTS_SPACING_SMALL, SOLVER_COLUMN_WIDTH } from 'parameters';
 
 import useIsTouchDevice from './useIsTouchDevice';
 import useMediaQuery from './useMediaQuery';
@@ -14,8 +14,10 @@ const useAppLayout = () => {
 
   return {
     animateTile: !isLessThanXs,
+    columnWidth: showColumn ? SOLVER_COLUMN_WIDTH : 0,
     componentsSpacing: isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING,
     isBoardFullWidth: isLessThanM,
+    isModalFullWidth: isLessThanS,
     showColumn,
     showCompactControls: !showColumn,
     showFloatingSolveButton: isTouchDevice,

package/src/i18n/constants.ts

@@ -1,4 +1,9 @@
 import { Locale } from '@scrabble-solver/types';
+import { FunctionComponent, SVGAttributes } from 'react';
+
+import { FlagDe, FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs } from 'icons';
+
+import styles from './i18n.module.scss';
 
 interface LocaleFeatures {
   direction: 'ltr' | 'rtl';
@@ -51,3 +56,63 @@ export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
     vowels: true,
   },
 };
+
+interface Flag {
+  className: string;
+  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
+  label: string;
+  name: string;
+  value: Locale;
+}
+
+export const LOCALE_FLAGS: Record<Locale, Flag> = {
+  [Locale.EN_GB]: {
+    className: styles.gb,
+    Icon: FlagGb,
+    label: 'English (GB)',
+    name: 'English (GB)',
+    value: Locale.EN_GB,
+  },
+  [Locale.EN_US]: {
+    className: styles.us,
+    Icon: FlagUs,
+    label: 'English (US)',
+    name: 'English (US)',
+    value: Locale.EN_US,
+  },
+  [Locale.FA_IR]: {
+    className: styles.fa,
+    Icon: FlagFa,
+    label: 'فارسی',
+    name: 'Persian',
+    value: Locale.FA_IR,
+  },
+  [Locale.FR_FR]: {
+    className: styles.fr,
+    Icon: FlagFr,
+    label: 'Français',
+    name: 'French',
+    value: Locale.FR_FR,
+  },
+  [Locale.DE_DE]: {
+    className: styles.de,
+    Icon: FlagDe,
+    label: 'Deutsch',
+    name: 'German',
+    value: Locale.DE_DE,
+  },
+  [Locale.PL_PL]: {
+    className: styles.pl,
+    Icon: FlagPl,
+    label: 'Polski',
+    name: 'Polish',
+    value: Locale.PL_PL,
+  },
+  [Locale.ES_ES]: {
+    className: styles.es,
+    Icon: FlagEs,
+    label: 'Español',
+    name: 'Spanish',
+    value: Locale.ES_ES,
+  },
+};

package/src/i18n/de.json

@@ -45,12 +45,12 @@
   "rack.tile.location": "Ablage: Stein ({{index}})",
   "remaining-tiles": "Restliche Steine",
   "results": "Ergebnisse",
-  "results.empty-state.no-filtered-results": "Keine Ergebnisse für diese Anfrage.",
   "results.empty-state.no-results": "Keine Ergebnisse - kein Wort konnte generiert werden.",
   "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.preview": "Vorschau",
   "results.solve": "Lösen",
   "settings": "Einstellungen",
   "settings.autoGroupTiles": "Restliche Steine gruppieren",

package/src/i18n/en.json

@@ -45,12 +45,12 @@
   "rack.tile.location": "Rack: tile ({{index}})",
   "remaining-tiles": "Remaining tiles",
   "results": "Results",
-  "results.empty-state.no-filtered-results": "No result matches this query.",
   "results.empty-state.no-results": "No results - unable to generate any words.",
   "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.preview": "Preview",
   "results.solve": "Solve",
   "settings": "Settings",
   "settings.autoGroupTiles": "Group remaining tiles",

package/src/i18n/es.json

@@ -45,12 +45,12 @@
   "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.",
   "results.empty-state.no-results": "No hay resultados; no se pueden generar palabras",
   "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.preview": "Vista previa",
   "results.solve": "Resolver",
   "settings": "Configuración",
   "settings.autoGroupTiles": "Agrupar casillas restantes",

package/src/i18n/fa.json

@@ -45,12 +45,12 @@
   "rack.tile.location": "({{index}}) کاشی: طاقچه",
   "remaining-tiles": "کاشی های باقی مانده",
   "results": "نتایج",
-  "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
   "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
   "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
   "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",
   "results.input.placeholder": "جستجو در نتایج (RegExp)",
   "results.insert": "وارد کردن",
+  "results.preview": "پیش نمایش",
   "results.solve": "حل کن",
   "settings": "تنظیمات",
   "settings.autoGroupTiles": "کاشی های باقی مانده ی طاقچه را کنار هم قرار بده",

package/src/i18n/fr.json

@@ -45,12 +45,12 @@
   "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",
   "results.empty-state.no-results": "Pas de résultats - impossible de générer des mots.",
   "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.preview": "Prévisualisation",
   "results.solve": "Résoudre",
   "settings": "Options",
   "settings.autoGroupTiles": "Grouper les cases restantes",

package/src/i18n/i18n.module.scss

@@ -0,0 +1,27 @@
+.de {
+  --aspect-ratio: var(--flag--de--aspect-ratio);
+}
+
+.es {
+  --aspect-ratio: var(--flag--es--aspect-ratio);
+}
+
+.fa {
+  --aspect-ratio: var(--flag--fa--aspect-ratio);
+}
+
+.fr {
+  --aspect-ratio: var(--flag--fr--aspect-ratio);
+}
+
+.gb {
+  --aspect-ratio: var(--flag--gb--aspect-ratio);
+}
+
+.pl {
+  --aspect-ratio: var(--flag--pl--aspect-ratio);
+}
+
+.us {
+  --aspect-ratio: var(--flag--us--aspect-ratio);
+}

package/src/i18n/pl.json

@@ -45,12 +45,12 @@
   "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.",
   "results.empty-state.no-results": "Brak wyników - nie można wygenerować żadnego słowa.",
   "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.preview": "Podgląd",
   "results.solve": "Rozwiąż",
   "settings": "Opcje",
   "settings.autoGroupTiles": "Grupuj pozostałe płytki",

package/src/icons/DashCircleFill.svg

@@ -1,3 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/dash-circle-fill/ -->
 <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
   <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM4.5 7.5a.5.5 0 0 0 0 1h7a.5.5 0 0 0 0-1h-7z" fill="currentColor" />
 </svg>

package/src/icons/EyeFill.svg

@@ -0,0 +1,5 @@
+<!-- https://icons.getbootstrap.com/icons/eye-fill/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z" fill="currentColor" />
+  <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z" fill="currentColor" />
+</svg>

package/src/icons/index.ts

@@ -18,15 +18,16 @@ export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
 export { default as ExclamationSquareFill } from './ExclamationSquareFill.svg';
 export { default as ExclamationTriangleFill } from './ExclamationTriangleFill.svg';
+export { default as EyeFill } from './EyeFill.svg';
 export { default as Flag } from './Flag.svg';
-export { default as FlagFill } from './FlagFill.svg';
+export { default as FlagDe } from './FlagDe.svg';
 export { default as FlagEs } from './FlagEs.svg';
 export { default as FlagFa } from './FlagFa.svg';
+export { default as FlagFill } from './FlagFill.svg';
 export { default as FlagFr } from './FlagFr.svg';
 export { default as FlagGb } from './FlagGb.svg';
 export { default as FlagPl } from './FlagPl.svg';
 export { default as FlagUs } from './FlagUs.svg';
-export { default as FlagDe } from './FlagDe.svg';
 export { default as Github } from './Github.svg';
 export { default as InfoCircleFill } from './InfoCircleFill.svg';
 export { default as Keyboard } from './Keyboard.svg';

package/src/lib/createRegExp.ts

@@ -0,0 +1,13 @@
+const createRegExp = (input: string): RegExp => {
+  if (input.trim().length === 0) {
+    return /.*/;
+  }
+
+  try {
+    return new RegExp(input, 'gi');
+  } catch {
+    return /.*/;
+  }
+};
+
+export default createRegExp;

package/src/lib/groupResults.ts

@@ -0,0 +1,38 @@
+import { Result } from '@scrabble-solver/types';
+
+import { Point } from 'types';
+
+import createRegExp from './createRegExp';
+
+interface GroupedResults {
+  matching: Result[];
+  other: Result[];
+}
+
+const groupResults = (
+  results: Result[] | undefined,
+  query: string,
+  cellFilter: Point[],
+): GroupedResults | undefined => {
+  if (typeof results === 'undefined') {
+    return results;
+  }
+
+  return results.reduce<GroupedResults>(
+    ({ matching, other }, result) => {
+      const matchesQuery = createRegExp(query).test(result.word);
+      const matchesCellFilter = cellFilter.every(({ x, y }) => {
+        return result.cells.some((cell) => cell.x === x && cell.y === y);
+      });
+      const isMatching = matchesQuery && matchesCellFilter;
+
+      return {
+        matching: isMatching ? [...matching, result] : matching,
+        other: isMatching ? other : [...other, result],
+      };
+    },
+    { matching: [], other: [] },
+  );
+};
+
+export default groupResults;

package/src/lib/guessLocale.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+const guessLocale = (): Locale => {
+  if (!globalThis.navigator) {
+    return Locale.EN_US;
+  }
+
+  const locales = Object.values(Locale);
+  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  const partialMatch = locales.find((locale) => {
+    return globalThis.navigator.language === locale.substring(0, 2);
+  });
+
+  return partialMatch || Locale.EN_US;
+};
+
+export default guessLocale;