@scrabble-solver/scrabble-solver 2.9.3 → 2.10.1

package/src/hooks/index.ts

@@ -1,4 +1,6 @@
+export { default as useDirection } from './useDirection';
 export { default as useIsTablet } from './useIsTablet';
+export { default as useLanguage } from './useLanguage';
 export { default as useLocalStorage } from './useLocalStorage';
 export { default as usePortal } from './usePortal';
 export { default as useUniqueId } from './useUniqueId';

package/src/hooks/useDirection.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect } from 'react';
+
+import { noop } from 'lib';
+
+const useDirection = (direction: 'ltr' | 'rtl') => {
+  useLayoutEffect(() => {
+    const html = document.body.parentElement;
+
+    if (!html) {
+      return noop;
+    }
+
+    const old = html.dir;
+    html.dir = direction;
+
+    return () => {
+      html.dir = old;
+    };
+  }, [direction]);
+};
+
+export default useDirection;

package/src/hooks/useLanguage.ts

@@ -0,0 +1,22 @@
+import { useLayoutEffect } from 'react';
+
+import { noop } from 'lib';
+
+const useLanguage = (language: string) => {
+  useLayoutEffect(() => {
+    const html = document.body.parentElement;
+
+    if (!html) {
+      return noop;
+    }
+
+    const old = html.lang;
+    html.lang = language;
+
+    return () => {
+      html.lang = old;
+    };
+  }, [language]);
+};
+
+export default useLanguage;

package/src/i18n/constants.ts

@@ -0,0 +1,53 @@
+import { Locale } from '@scrabble-solver/types';
+
+interface LocaleFeatures {
+  direction: 'ltr' | 'rtl';
+  fontFamily: string;
+  consonants: boolean;
+  vowels: boolean;
+}
+
+export const LOCALE_FEATURES: Record<Locale, LocaleFeatures> = {
+  [Locale.DE_DE]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+  [Locale.EN_GB]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+  [Locale.EN_US]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+  [Locale.ES_ES]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+  [Locale.FA_IR]: {
+    direction: 'rtl',
+    fontFamily: 'Vazirmatn',
+    consonants: false,
+    vowels: false,
+  },
+  [Locale.FR_FR]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+  [Locale.PL_PL]: {
+    direction: 'ltr',
+    fontFamily: 'Open Sans',
+    consonants: true,
+    vowels: true,
+  },
+};

package/src/i18n/fa.json

@@ -0,0 +1,56 @@
+{
+  "cell.filter-cell": "مقصد - کلیک برای تغییر",
+  "cell.set-blank": "علامت گذاری به عنوان خالی",
+  "cell.set-not-blank": "علامت گذاری به عنوان غیر خالی",
+  "cell.toggle-direction": "جهت تایپ - کلیک برای تغییر",
+  "common.blanks": "خالی",
+  "common.clear": "پاک کردن",
+  "common.close": "بستن",
+  "common.consonants": "حروف صامت",
+  "common.loading": "در حال بارگزاری",
+  "common.points": "امتیازات",
+  "common.tiles": "کاشی ها",
+  "common.two-letter-tiles": "دو حرفی",
+  "common.vowels": "حروف مصوت",
+  "common.word": "کلمه",
+  "common.words": "کلمات",
+  "dictionary.empty-state.no-definitions": "کلمه در فرهنگ لغت وجود دارد، ولی معنایی برای آن ثبت نشده است.",
+  "dictionary.empty-state.no-results": "کلمه در فرهنگ لغت یافت نشد.",
+  "dictionary.empty-state.not-allowed": "این کلمه مجاز نیست.",
+  "dictionary.empty-state.uninitialized": "معنی لغت اینجا نمایش داده خواهد شد.",
+  "dictionary.input.placeholder": "جستجو در فرهنگ لغت ...",
+  "empty-state.error": "خطا",
+  "empty-state.info": "اطلاعات",
+  "empty-state.success": "حله!",
+  "empty-state.warning": "اوووخ!",
+  "github": "به این پروژه در گیتهاب سر بزنید",
+  "keyMap": "میانبر های کیبورد",
+  "keyMap.board": "صفحه",
+  "keyMap.board.toggle-blank": "علامت/عدم علامت گذاری کاشی به عنوان خالی",
+  "keyMap.board.toggle-direction": "تغییر جهت تایپ",
+  "keyMap.board-and-rack": "صفحه و طاقچه",
+  "keyMap.board-and-rack.insert-two-letter-tile": "وارد کردن کاشی دو حرفی",
+  "keyMap.board-and-rack.navigate": "حرکت",
+  "keyMap.board-and-rack.remove-tile": "حذف کاشی",
+  "keyMap.board-and-rack.submit": "حل کردن",
+  "keyMap.rack": "طاقچه",
+  "keyMap.rack.insert-blank": "وارد کردن کاشی خالی (دکمه اسپیس)",
+  "rack.placeholder": "لیستحرف",
+  "remaining-tiles": "کاشی های باقی مانده",
+  "results.empty-state.no-filtered-results": "پاسخی یافت نشد.",
+  "results.empty-state.no-results": "کلمه قابل استفاده پیدا نشد.",
+  "results.empty-state.outdated": "نتایج به روز نیستند، برای بروز رسانی کلیک کنید.",
+  "results.empty-state.uninitialized": "کلمات تولید شده از حروف شما اینجا نمایش داده خواهد شد.",
+  "results.input.placeholder": "جستجو در نتایج (RegExp)",
+  "results.solve": "حل کن",
+  "settings": "تنظیمات",
+  "settings.autoGroupTiles": "کاشی های باقی مانده ی طاقچه را کنار هم قرار بده",
+  "settings.autoGroupTiles.left": "در سمت چپ",
+  "settings.autoGroupTiles.right": "در سمت راست",
+  "settings.autoGroupTiles.null": "کنار هم قرار  نده",
+  "settings.game": "بازی",
+  "settings.language": "زبان",
+  "words": "کلمات ساخته شده",
+  "words.invalid": "نا معتبر",
+  "words.valid": "معتبر"
+}

package/src/i18n/fr.json

@@ -40,7 +40,7 @@
   "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": "Words generated from your letters will be shown here.",
+  "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.solve": "Résoudre",
   "settings": "Options",

package/src/i18n/i18n.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+import { Translations } from 'types';
+
+import de from './de.json';
+import en from './en.json';
+import es from './es.json';
+import fa from './fa.json';
+import fr from './fr.json';
+import pl from './pl.json';
+
+const i18n: Record<Locale, Translations> = {
+  [Locale.DE_DE]: de,
+  [Locale.EN_GB]: en,
+  [Locale.EN_US]: en,
+  [Locale.ES_ES]: es,
+  [Locale.FA_IR]: fa,
+  [Locale.FR_FR]: fr,
+  [Locale.PL_PL]: pl,
+};
+
+export default i18n;

package/src/i18n/index.ts

@@ -1,20 +1,2 @@
-import { Locale } from '@scrabble-solver/types';
-
-import { Translations } from 'types';
-
-import de from './de.json';
-import en from './en.json';
-import es from './es.json';
-import fr from './fr.json';
-import pl from './pl.json';
-
-const i18n: Record<Locale, Translations> = {
-  [Locale.DE_DE]: de,
-  [Locale.EN_GB]: en,
-  [Locale.EN_US]: en,
-  [Locale.ES_ES]: es,
-  [Locale.FR_FR]: fr,
-  [Locale.PL_PL]: pl,
-};
-
-export default i18n;
+export { default } from './i18n';
+export * from './constants';

package/src/icons/FlagFa.svg

@@ -0,0 +1,95 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 630 360">
+  <path style="fill:#da0000" d="M 0,0 H 630 V 360 H 0 Z" />
+  <path style="fill:#ffffff" d="M 0,0 H 630 V 240 H 0 Z" />
+  <path style="fill:#239f40" d="M 0,0 H 630 V 120 H 0 Z" />
+  <g transform="translate(8.4,100.4)">
+    <g fill="none" stroke="#fff" stroke-width="2">
+      <path d="M0,1H26M1,10V5H9V9H17V5H12M4,9H6M26,9H21V5H29M29,0V9H37V0M33,0V9" transform="scale(1.4)" />
+      <path d="M0,7H9M10,7H19" transform="scale(2.8)" />
+      <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+      <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+    </g>
+    <g>
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(56)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(112)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(168)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+    </g>
+    <g transform="translate(168)">
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(56)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(112)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+      <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(168)">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+    </g>
+    <g transform="translate(392)">
+      <g fill="none" stroke="#ffffff" stroke-width="2">
+        <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+        <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+        <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+        <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+      </g>
+      <g>
+        <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(56)">
+          <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+          <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+          <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+          <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+        </g>
+        <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(112)">
+          <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+          <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+          <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+          <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+        </g>
+        <g fill="none" stroke="#ffffff" stroke-width="2" transform="translate(168)">
+          <path d="M 0,1 H 26 M 1,10 V 5 h 8 v 4 h 8 V 5 H 12 M 4,9 H 6 M 26,9 H 21 V 5 h 8 m 0,-5 v 9 h 8 V 0 m -4,0 v 9" transform="scale(1.4)" />
+          <path d="m 0,7 h 9 m 1,0 h 9" transform="scale(2.8)" />
+          <path d="m 0,139.6 h 25.2 m 2.8,0 h 25.2" style="stroke-width:5.6" />
+          <path d="m 0,146.6 h 36.4 m -35,12.6 v -7 h 11.2 v 5.6 h 11.2 v -5.6 h -7 m -11.2,5.6 h 2.8 m 28,0 h -7 v -5.6 h 11.2 m 0,-7 v 12.6 h 11.2 v -12.6 m -5.6,0 v 12.6" style="stroke-width:2.8" />
+        </g>
+      </g>
+    </g>
+  </g>
+  <g fill="#da0000" transform="matrix(45,0,0,45,315,180)">
+    <g>
+      <path d="M-0.54815,0.83638A0.912046,0.912046 0 0,0 0.328544,-0.722384A1,1 0 0,1 -0.54815,0.83638" />
+      <path d="M0.618339,0.661409A0.763932,0.763932 0 0,0 0.421644,-0.741049A1,1 0 0,1 0.618339,0.661409" />
+      <path d="M0,1 -0.05,0 0,-0.787278A0.309995,0.309995 0 0,0 0.118034,-0.688191V-0.100406L0.077809,0.892905z" />
+      <path d="M-0.02,-0.85 0,-0.831217A0.14431,0.14431 0 0,0 0.252075,-0.967708A0.136408,0.136408 0 0,1 0,-0.924634" />
+    </g>
+    <g transform="scale(-1,1)">
+      <path d="M -0.54815,0.83638 A 0.912046,0.912046 0 0 0 0.328544,-0.722384 1,1 0 0 1 -0.54815,0.83638" />
+      <path d="M 0.618339,0.661409 A 0.763932,0.763932 0 0 0 0.421644,-0.741049 1,1 0 0 1 0.618339,0.661409" />
+      <path d="M 0,1 -0.05,0 0,-0.787278 a 0.309995,0.309995 0 0 0 0.118034,0.099087 v 0.587785 L 0.077809,0.892905 Z" />
+      <path d="M -0.02,-0.85 0,-0.831217 A 0.14431,0.14431 0 0 0 0.252075,-0.967708 0.136408,0.136408 0 0 1 0,-0.924634" />
+    </g>
+  </g>
+</svg>

package/src/icons/index.ts

@@ -13,6 +13,7 @@ export { default as DashCircleFill } from './DashCircleFill.svg';
 export { default as Eraser } from './Eraser.svg';
 export { default as Flag } from './Flag.svg';
 export { default as FlagEs } from './FlagEs.svg';
+export { default as FlagFa } from './FlagFa.svg';
 export { default as FlagFr } from './FlagFr.svg';
 export { default as FlagGb } from './FlagGb.svg';
 export { default as FlagPl } from './FlagPl.svg';

package/src/lib/createComparator.ts

@@ -0,0 +1,22 @@
+import { Comparator } from 'types';
+
+import createStringComparator from './createStringComparator';
+import numberComparator from './numberComparator';
+
+const createComparator = <T>(locale: string): Comparator<T> => {
+  const stringComparator = createStringComparator(locale);
+
+  return (a: T, b: T): number => {
+    if (typeof a === 'string' && typeof b === 'string') {
+      return stringComparator(a, b);
+    }
+
+    if (typeof a === 'number' && typeof b === 'number') {
+      return numberComparator(a, b);
+    }
+
+    return 0;
+  };
+};
+
+export default createComparator;

package/src/lib/createKeyComparator.ts

@@ -1,9 +1,11 @@
 import { Comparator } from 'types';
 
+import createStringComparator from './createStringComparator';
 import numberComparator from './numberComparator';
-import stringComparator from './stringComparator';
 
-const createKeyComparator = <T extends Record<keyof T, unknown>>(key: keyof T): Comparator<T> => {
+const createKeyComparator = <T extends Record<keyof T, unknown>>(key: keyof T, locale: string): Comparator<T> => {
+  const stringComparator = createStringComparator(locale);
+
   return (a: T, b: T): number => {
     const aValue = a[key];
     const bValue = b[key];

package/src/lib/createStringComparator.ts

@@ -0,0 +1,5 @@
+import { Comparator } from 'types';
+
+const createStringComparator: (locale: string) => Comparator<string> = (locale) => (a, b) => a.localeCompare(b, locale);
+
+export default createStringComparator;

package/src/lib/detectLocale.ts

@@ -9,6 +9,10 @@ const detectLocale = (): Locale => {
     return Locale.EN_GB;
   }
 
+  if (window.navigator.languages.includes('fa') || window.navigator.languages.includes('fa-IR')) {
+    return Locale.FA_IR;
+  }
+
   if (window.navigator.languages.includes('fr-FR')) {
     return Locale.FR_FR;
   }

package/src/lib/getRemainingTiles.ts

@@ -5,7 +5,7 @@ import { RemainingTile } from 'types';
 
 import createKeyComparator from './createKeyComparator';
 
-const getRemainingTiles = (config: Config, board: Board, characters: string[]): RemainingTile[] => {
+const getRemainingTiles = (config: Config, board: Board, characters: string[], locale: string): RemainingTile[] => {
   const nonEmptyCells = board.rows.flat().filter((cell) => !cell.isEmpty);
   const letterCells = nonEmptyCells.filter((cell) => !cell.tile.isBlank);
   const remainingTiles = Object.fromEntries(config.tiles.map((tile) => [tile.character, { ...tile, usedCount: 0 }]));
@@ -36,7 +36,9 @@ const getRemainingTiles = (config: Config, board: Board, characters: string[]):
     ++remainingTiles[letter].usedCount;
   }
 
-  return [...Object.values(remainingTiles).sort(createKeyComparator('character')), blank];
+  const comparator = createKeyComparator('character', locale);
+
+  return [...Object.values(remainingTiles).sort(comparator), blank];
 };
 
 export default getRemainingTiles;

package/src/lib/getRemainingTilesGroups.ts

@@ -5,39 +5,62 @@ import { RemainingTile, RemainingTilesGroup } from 'types';
 import getRemainingTilesCount from './getRemainingTilesCount';
 import getTotalRemainingTilesCount from './getTotalRemainingTilesCount';
 
-export const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): RemainingTilesGroup[] => {
-  const consonants = remainingTiles.filter(({ character }) => CONSONANTS.includes(character));
-  const vowels = remainingTiles.filter(({ character }) => VOWELS.includes(character));
-  const twoCharacterTiles = remainingTiles.filter(({ character }) => character.length === 2);
-  const blanks = remainingTiles.filter(({ character }) => character === BLANK);
-  const groups: RemainingTilesGroup[] = [
-    {
-      remainingCount: getRemainingTilesCount(vowels),
-      tiles: vowels,
-      translationKey: 'common.vowels',
-      totalCount: getTotalRemainingTilesCount(vowels),
-    },
-    {
-      remainingCount: getRemainingTilesCount(consonants),
-      tiles: consonants,
-      translationKey: 'common.consonants',
-      totalCount: getTotalRemainingTilesCount(consonants),
-    },
-    {
-      remainingCount: getRemainingTilesCount(twoCharacterTiles),
-      tiles: twoCharacterTiles,
-      translationKey: 'common.two-letter-tiles',
-      totalCount: getTotalRemainingTilesCount(twoCharacterTiles),
-    },
-    {
-      remainingCount: getRemainingTilesCount(blanks),
-      tiles: blanks,
-      translationKey: 'common.blanks',
-      totalCount: getTotalRemainingTilesCount(blanks),
-    },
-  ];
+const getRemainingTilesGroups = (remainingTiles: RemainingTile[]): RemainingTilesGroup[] => {
+  const consonants = remainingTiles.filter(isConsonant);
+  const vowels = remainingTiles.filter(isVowel);
+  const other = remainingTiles.filter(isOther);
+  const groups: RemainingTilesGroup[] = [];
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(vowels),
+    tiles: vowels,
+    translationKey: 'common.vowels',
+    totalCount: getTotalRemainingTilesCount(vowels),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(consonants),
+    tiles: consonants,
+    translationKey: 'common.consonants',
+    totalCount: getTotalRemainingTilesCount(consonants),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(other),
+    tiles: other,
+    translationKey: 'common.tiles',
+    totalCount: getTotalRemainingTilesCount(other),
+  });
+
+  const twoCharacterTiles = remainingTiles.filter(isTwoCharacter);
+  const blanks = remainingTiles.filter(isBlank);
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(twoCharacterTiles),
+    tiles: twoCharacterTiles,
+    translationKey: 'common.two-letter-tiles',
+    totalCount: getTotalRemainingTilesCount(twoCharacterTiles),
+  });
+
+  groups.push({
+    remainingCount: getRemainingTilesCount(blanks),
+    tiles: blanks,
+    translationKey: 'common.blanks',
+    totalCount: getTotalRemainingTilesCount(blanks),
+  });
 
   return groups.filter(({ totalCount }) => totalCount > 0);
 };
 
+const isConsonant = (tile: RemainingTile): boolean => CONSONANTS.includes(tile.character);
+
+const isVowel = (tile: RemainingTile): boolean => VOWELS.includes(tile.character);
+
+const isTwoCharacter = (tile: RemainingTile): boolean => tile.character.length === 2;
+
+const isBlank = (tile: RemainingTile): boolean => tile.character === BLANK;
+
+const isOther = (tile: RemainingTile) =>
+  !isConsonant(tile) && !isVowel(tile) && !isBlank(tile) && !isTwoCharacter(tile);
+
 export default getRemainingTilesGroups;

package/src/lib/index.ts

@@ -1,10 +1,11 @@
 export { default as canUseDom } from './canUseDom';
-export { default as comparator } from './comparator';
 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 createNullMovingComparator } from './createNullMovingComparator';
+export { default as createStringComparator } from './createStringComparator';
 export { default as detectLocale } from './detectLocale';
 export { default as extractCharacters } from './extractCharacters';
 export { default as extractInputValue } from './extractInputValue';
@@ -25,6 +26,5 @@ export { default as noop } from './noop';
 export { default as numberComparator } from './numberComparator';
 export { default as reverseComparator } from './reverseComparator';
 export { default as sortResults } from './sortResults';
-export { default as stringComparator } from './stringComparator';
 export { default as unorderedArraysEqual } from './unorderedArraysEqual';
 export { default as zipCharactersAndTiles } from './zipCharactersAndTiles';

package/src/lib/sortResults.ts

@@ -5,26 +5,28 @@ import { Comparator, ResultColumn, SortDirection } from 'types';
 import createKeyComparator from './createKeyComparator';
 import reverseComparator from './reverseComparator';
 
-const comparators: Record<ResultColumn, Comparator<Result>> = {
-  [ResultColumn.BlanksCount]: createKeyComparator('blanksCount'),
-  [ResultColumn.ConsonantsCount]: createKeyComparator('consonantsCount'),
-  [ResultColumn.Points]: createKeyComparator('points'),
-  [ResultColumn.TilesCount]: createKeyComparator('tilesCount'),
-  [ResultColumn.VowelsCount]: createKeyComparator('vowelsCount'),
-  [ResultColumn.Word]: createKeyComparator('word'),
-  [ResultColumn.WordsCount]: createKeyComparator('wordsCount'),
+const comparators: Record<ResultColumn, (locale: string) => Comparator<Result>> = {
+  [ResultColumn.BlanksCount]: (locale: string) => createKeyComparator('blanksCount', locale),
+  [ResultColumn.ConsonantsCount]: (locale: string) => createKeyComparator('consonantsCount', locale),
+  [ResultColumn.Points]: (locale: string) => createKeyComparator('points', locale),
+  [ResultColumn.TilesCount]: (locale: string) => createKeyComparator('tilesCount', locale),
+  [ResultColumn.VowelsCount]: (locale: string) => createKeyComparator('vowelsCount', locale),
+  [ResultColumn.Word]: (locale: string) => createKeyComparator('word', locale),
+  [ResultColumn.WordsCount]: (locale: string) => createKeyComparator('wordsCount', locale),
 };
 
 const sortResults = (
   results: Result[] | undefined,
   column: ResultColumn,
   sortDirection: SortDirection,
+  locale: string,
 ): Result[] | undefined => {
   if (typeof results === 'undefined') {
     return results;
   }
 
-  const comparator = comparators[column];
+  const createComparator = comparators[column];
+  const comparator = createComparator(locale);
   const finalComparator = sortDirection === SortDirection.Descending ? reverseComparator(comparator) : comparator;
   return [...results].sort(finalComparator);
 };

package/src/lib/unorderedArraysEqual.ts

@@ -1,10 +1,11 @@
-import comparator from './comparator';
+import createComparator from './createComparator';
 
-const unorderedArraysEqual = <T>(a: T[], b: T[]): boolean => {
+const unorderedArraysEqual = <T>(a: T[], b: T[], locale: string): boolean => {
   if (a.length !== b.length) {
     return false;
   }
 
+  const comparator = createComparator(locale);
   const aSorted = [...a].sort(comparator);
   const bSorted = [...b].sort(comparator);
   return aSorted.every((character, index) => character === bSorted[index]);

package/src/pages/api/verify.ts

@@ -30,7 +30,7 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
     });
 
     const trie = await dictionaries.get(locale);
-    const words = board.getWords().sort((a, b) => a.localeCompare(b));
+    const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
     const invalidWords = words.filter((word) => !trie.has(word));
     const validWords = words.filter((word) => trie.has(word));
     response.status(200).send({ invalidWords, validWords });

package/src/pages/index.module.scss

@@ -58,6 +58,11 @@
   align-items: center;
   justify-content: center;
   height: 100%;
+  gap: var(--spacing--xl);
+
+  @include tablet {
+    gap: var(--spacing--l);
+  }
 }
 
 .boardContainer {
@@ -68,27 +73,11 @@
 .sidebar {
   display: flex;
   flex-direction: column;
-  padding-left: var(--spacing--xl);
   flex: 0 0 var(--sidebar--width);
-
-  > * {
-    margin-bottom: var(--spacing--xl);
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
+  gap: var(--spacing--xl);
 
   @include tablet {
-    padding-left: var(--spacing--l);
-
-    > * {
-      margin-bottom: var(--spacing--l);
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+    gap: var(--spacing--l);
   }
 }