@scrabble-solver/scrabble-solver 2.9.2 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.9.2",
+  "version": "2.10.0",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -31,13 +31,13 @@
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.6",
-    "@scrabble-solver/configs": "^2.9.2",
-    "@scrabble-solver/constants": "^2.9.2",
-    "@scrabble-solver/dictionaries": "^2.9.2",
-    "@scrabble-solver/logger": "^2.9.2",
-    "@scrabble-solver/solver": "^2.9.2",
-    "@scrabble-solver/types": "^2.9.2",
-    "@scrabble-solver/word-definitions": "^2.9.2",
+    "@scrabble-solver/configs": "^2.10.0",
+    "@scrabble-solver/constants": "^2.10.0",
+    "@scrabble-solver/dictionaries": "^2.10.0",
+    "@scrabble-solver/logger": "^2.10.0",
+    "@scrabble-solver/solver": "^2.10.0",
+    "@scrabble-solver/types": "^2.10.0",
+    "@scrabble-solver/word-definitions": "^2.10.0",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -74,5 +74,5 @@
     "sass": "^1.55.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "f50d782088cb89544f0c2c504f31fca81a6ff409"
+  "gitHead": "7fd0f6bf536fca88c18ce02e320da71b0c6d6f61"
 }

package/src/components/Board/components/Cell/Cell.module.scss

@@ -66,6 +66,10 @@ $icon-size: 16px;
     &:before {
       font-size: 75%;
       color: white;
+
+      [lang='fa-IR'] & {
+        font-family: 'Open Sans', sans-serif;
+      }
     }
   }
 
@@ -122,13 +126,20 @@ $icon-size: 16px;
 .actions {
   display: none;
   position: absolute;
-  left: calc(100% + var(--spacing--s) - #{$icon-size});
   top: -$icon-size;
   z-index: 2;
   transition: var(--transition);
   pointer-events: none;
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
+
+  [dir='ltr'] & {
+    left: calc(100% + var(--spacing--s) - #{$icon-size});
+  }
+
+  [dir='rtl'] & {
+    right: calc(100% + var(--spacing--s) - #{$icon-size});
+  }
 }
 
 .action {
@@ -142,8 +153,6 @@ $icon-size: 16px;
   box-sizing: content-box;
   background-color: white;
   border: var(--border);
-  border-top-left-radius: var(--border--radius);
-  border-bottom-left-radius: var(--border--radius);
   font-size: var(--font--size--m);
   line-height: $icon-size;
   color: var(--color--foreground--secondary);
@@ -151,14 +160,37 @@ $icon-size: 16px;
   cursor: pointer;
 
   & + & {
-    border-left: none;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    [dir='ltr'] & {
+      border-left: none;
+    }
+
+    [dir='rtl'] & {
+      border-right: none;
+    }
+  }
+
+  [dir='ltr'] & {
+    &:first-child {
+      border-top-left-radius: var(--border--radius);
+      border-bottom-left-radius: var(--border--radius);
+    }
+
+    &:last-child {
+      border-top-right-radius: var(--border--radius);
+      border-bottom-right-radius: var(--border--radius);
+    }
   }
 
-  &:last-child {
-    border-top-right-radius: var(--border--radius);
-    border-bottom-right-radius: var(--border--radius);
+  [dir='rtl'] & {
+    &:first-child {
+      border-top-right-radius: var(--border--radius);
+      border-bottom-right-radius: var(--border--radius);
+    }
+
+    &:last-child {
+      border-top-left-radius: var(--border--radius);
+      border-bottom-left-radius: var(--border--radius);
+    }
   }
 
   &,
@@ -177,6 +209,10 @@ $icon-size: 16px;
 .toggleDirection {
   &.right {
     transform: rotate(-90deg);
+
+    [dir='rtl'] & {
+      transform: rotate(90deg);
+    }
   }
 }
 

package/src/components/Board/hooks/useGrid.ts

@@ -235,7 +235,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
-          changeActiveIndex(-1, 0);
+          const isRtl = document.body.parentElement?.dir === 'rtl';
+          changeActiveIndex(isRtl ? 1 : -1, 0);
         }
       },
       onArrowRight: (event) => {
@@ -244,7 +245,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
-          changeActiveIndex(1, 0);
+          const isRtl = document.body.parentElement?.dir === 'rtl';
+          changeActiveIndex(isRtl ? -1 : 1, 0);
         }
       },
       onArrowUp: (event) => {

package/src/components/Dictionary/Dictionary.module.scss

@@ -48,7 +48,14 @@
 
 .definitions {
   margin: 0;
-  padding-left: var(--spacing--l);
+
+  [dir='ltr'] & {
+    padding-left: var(--spacing--l);
+  }
+
+  [dir='rtl'] & {
+    padding-right: var(--spacing--l);
+  }
 }
 
 .definition {

package/src/components/EmptyState/EmptyState.tsx

@@ -1,8 +1,9 @@
 import classNames from 'classnames';
 import { FunctionComponent, ReactNode, useMemo } from 'react';
 
+import { LOCALE_FEATURES } from 'i18n';
 import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from 'parameters';
-import { useTranslate } from 'state';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { Translations } from 'types';
 
 import PlainTiles from '../PlainTiles';
@@ -31,8 +32,11 @@ const COLORS_PER_TYPE: Record<Props['type'], string> = {
 
 const EmptyState: FunctionComponent<Props> = ({ className, children, type }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
   const title = useMemo(() => translate(TITLE_KEY_PER_TYPE[type]), [translate]);
-  const content = useMemo(() => [[title.toUpperCase()]], [title]);
+  const message = direction === 'ltr' ? title : title.split('').reverse().join('');
+  const content = useMemo(() => [[message.toUpperCase()]], [title]);
 
   return (
     <div className={classNames(styles.emptyState, className)}>

package/src/components/Loading/Loading.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import { FunctionComponent, useMemo } from 'react';
 
-import { useTranslate } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 
 import PlainTiles from '../PlainTiles';
 
@@ -13,9 +14,19 @@ interface Props {
   wave?: boolean;
 }
 
+const prepareContent = (message: string): string[][] => {
+  const uppercased = message.toLocaleUpperCase();
+  const parts = uppercased.split(' ');
+  return [parts];
+};
+
 const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const translate = useTranslate();
-  const content = useMemo<string[][]>(() => [[translate('common.loading').toUpperCase()]], [translate]);
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const translation = translate('common.loading');
+  const message = direction === 'ltr' ? translation : translation.split('').reverse().join('');
+  const content = useMemo(() => prepareContent(message), [message]);
 
   return (
     <div className={classNames(styles.loading, className)}>

package/src/components/Logo/Logo.svg

@@ -0,0 +1,62 @@
+<svg viewBox="0 0 682 166" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+  <g transform="rotate(0, 40, 40)">
+    <path fill="#efe3ae" d="M 0,0 H 80 V 80 H 0 Z" />
+    <path aria-label="S" d="m 51.167969,47.628907 q 0,3.046875 -1.476563,5.296875 -1.476562,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492187,-0.234375 -1.6875,-0.234375 -3.257813,-0.679687 -1.546875,-0.46875 -2.953125,-1.148438 v -6.75 q 2.4375,1.078125 5.0625,1.945313 2.625,0.867187 5.203125,0.867187 1.78125,0 2.859375,-0.46875 1.101563,-0.46875 1.59375,-1.289062 0.492188,-0.820313 0.492188,-1.875 0,-1.289063 -0.867188,-2.203125 -0.867187,-0.914063 -2.390625,-1.710938 -1.5,-0.796875 -3.398437,-1.710937 -1.195313,-0.5625 -2.601563,-1.359375 -1.40625,-0.820313 -2.671875,-1.992188 -1.265625,-1.171875 -2.085937,-2.835937 -0.796875,-1.6875 -0.796875,-4.03125 0,-3.070313 1.40625,-5.25 1.40625,-2.179688 4.007812,-3.328125 2.625,-1.171875 6.1875,-1.171875 2.671875,0 5.085938,0.632812 2.4375,0.609375 5.085937,1.78125 l -2.34375,5.648438 q -2.367187,-0.960938 -4.242187,-1.476563 -1.875,-0.539062 -3.820313,-0.539062 -1.359375,0 -2.320312,0.445312 -0.960938,0.421875 -1.453125,1.21875 -0.492188,0.773438 -0.492188,1.804688 0,1.21875 0.703125,2.0625 0.726563,0.820312 2.15625,1.59375 1.453125,0.773437 3.609375,1.804687 2.625,1.242188 4.476563,2.601563 1.875,1.335937 2.882812,3.164062 1.007813,1.804688 1.007813,4.5 z" />
+  </g>
+  <g transform="rotate(0, 126, 40)">
+    <path fill="#c7d8f9" d="m 86,0 h 80 V 80 H 86 Z" />
+    <path aria-label="C" d="m 129.57422,28.433595 q -2.08594,0 -3.70313,0.820312 -1.59375,0.796875 -2.69531,2.320313 -1.07812,1.523437 -1.64062,3.679687 -0.5625,2.15625 -0.5625,4.851563 0,3.632812 0.89062,6.210937 0.91406,2.554688 2.8125,3.914063 1.89844,1.335937 4.89844,1.335937 2.08594,0 4.17187,-0.46875 2.10938,-0.46875 4.57032,-1.335937 v 6.09375 q -2.27344,0.9375 -4.47657,1.335937 -2.20312,0.421875 -4.94531,0.421875 -5.29687,0 -8.71875,-2.179687 -3.39844,-2.203125 -5.03906,-6.140625 -1.64063,-3.960938 -1.64063,-9.234375 0,-3.890625 1.05469,-7.125 1.05469,-3.234375 3.09375,-5.601563 2.03906,-2.367187 5.03906,-3.65625 3,-1.289062 6.89063,-1.289062 2.55469,0 5.10937,0.65625 2.57813,0.632812 4.92188,1.757812 l -2.34375,5.90625 q -1.92188,-0.914062 -3.86719,-1.59375 -1.94531,-0.679687 -3.82031,-0.679687 z" />
+  </g>
+  <g transform="rotate(0, 212, 40)">
+    <path fill="#efe3ae" d="m 172,0 h 80 v 80 h -80 z" />
+    <path aria-label="R" d="m 210.45312,22.867188 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.398438 1.47656,2.273437 1.47656,5.742187 0,2.34375 -0.89062,4.101563 -0.89063,1.757812 -2.34375,2.976562 -1.45313,1.21875 -3.14063,1.992188 l 10.07813,14.929687 h -8.0625 l -8.17969,-13.148437 h -3.86719 v 13.148437 h -7.26562 V 22.867188 Z m -0.51562,5.953125 h -2.20313 v 9.257813 h 2.34375 q 3.60938,0 5.15625,-1.195313 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
+  </g>
+  <g transform="rotate(0, 298, 40)">
+    <path fill="#efe3ae" d="m 258,0 h 80 v 80 h -80 z" />
+    <path aria-label="A" d="m 306.73047,57.203126 -2.48438,-8.15625 h -12.49218 l -2.48438,8.15625 h -7.82812 l 12.09375,-34.40625 h 8.88281 l 12.14062,34.40625 z m -4.21875,-14.25 -2.48438,-7.96875 q -0.23437,-0.796875 -0.63281,-2.039063 -0.375,-1.265625 -0.77344,-2.554687 -0.375,-1.3125 -0.60937,-2.273438 -0.23438,0.960938 -0.65625,2.390625 -0.39844,1.40625 -0.77344,2.671875 -0.375,1.265625 -0.53906,1.804688 l -2.46094,7.96875 z" />
+  </g>
+  <g transform="rotate(0, 384, 40)">
+    <path fill="#c7d8f9" d="m 344,0 h 80 v 80 h -80 z" />
+    <path aria-label="B" d="m 372.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 372.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
+  </g>
+  <g transform="rotate(0, 470, 40)">
+    <path fill="#c7d8f9" d="m 430,0 h 80 v 80 h -80 z" />
+    <path aria-label="B" d="m 458.1875,22.867188 h 10.66406 q 6.84375,0 10.35938,1.921875 3.51562,1.921875 3.51562,6.75 0,1.945313 -0.63281,3.515625 -0.60938,1.570313 -1.78125,2.578125 -1.17188,1.007813 -2.85938,1.3125 v 0.234375 q 1.71094,0.351563 3.09375,1.21875 1.38282,0.84375 2.20313,2.484375 0.84375,1.617188 0.84375,4.3125 0,3.117188 -1.52344,5.34375 -1.52344,2.226563 -4.35937,3.421875 -2.8125,1.171875 -6.70313,1.171875 H 458.1875 Z m 7.26562,13.570313 h 4.21875 q 3.16407,0 4.38282,-0.984375 1.21875,-1.007813 1.21875,-2.953125 0,-1.96875 -1.45313,-2.8125 -1.42969,-0.867188 -4.54687,-0.867188 h -3.82032 z m 0,5.765625 v 8.929687 h 4.73438 q 3.28125,0 4.57031,-1.265625 1.28906,-1.265625 1.28906,-3.398437 0,-1.265625 -0.5625,-2.226563 -0.5625,-0.960937 -1.89843,-1.5 -1.3125,-0.539062 -3.63282,-0.539062 z" />
+  </g>
+  <g transform="rotate(0, 556, 40)">
+    <path fill="#efe3ae" d="m 516,0 h 80 v 80 h -80 z" />
+    <path aria-label="L" d="M 546.75391,57.132813 V 22.867188 h 7.26562 v 28.265625 h 13.89844 v 6 z" />
+  </g>
+  <g transform="rotate(0, 642, 40)">
+    <path fill="#efe3ae" d="m 602,0 h 80 v 80 h -80 z" />
+    <path aria-label="E" d="M 652.60547,57.132813 H 632.87109 V 22.867188 h 19.73438 v 5.953125 h -12.46875 v 7.523438 h 11.60156 v 5.953125 h -11.60156 v 8.835937 h 12.46875 z" />
+  </g>
+  <g transform="rotate(0, 40, 40)">
+    <path fill="#efe3ae" d="m 0,86 h 80 v 80 H 0 Z" />
+    <path aria-label="S" d="m 51.320312,133.6289 q 0,3.04688 -1.476562,5.29688 -1.476563,2.25 -4.3125,3.46875 -2.8125,1.21875 -6.84375,1.21875 -1.78125,0 -3.492188,-0.23438 -1.6875,-0.23437 -3.257812,-0.67968 -1.546875,-0.46875 -2.953125,-1.14844 v -6.75 q 2.4375,1.07812 5.0625,1.94531 2.625,0.86719 5.203125,0.86719 1.78125,0 2.859375,-0.46875 1.101562,-0.46875 1.59375,-1.28906 0.492187,-0.82032 0.492187,-1.875 0,-1.28907 -0.867187,-2.20313 -0.867188,-0.91406 -2.390625,-1.71094 -1.5,-0.79687 -3.398438,-1.71093 -1.195312,-0.5625 -2.601562,-1.35938 -1.40625,-0.82031 -2.671875,-1.99219 Q 31,123.83203 30.179687,122.16797 q -0.796875,-1.6875 -0.796875,-4.03125 0,-3.07032 1.40625,-5.25 1.40625,-2.17969 4.007813,-3.32813 2.625,-1.17187 6.1875,-1.17187 2.671875,0 5.085937,0.63281 2.4375,0.60937 5.085938,1.78125 l -2.34375,5.64844 q -2.367188,-0.96094 -4.242188,-1.47657 -1.875,-0.53906 -3.820312,-0.53906 -1.359375,0 -2.320313,0.44531 -0.960937,0.42188 -1.453125,1.21875 -0.492187,0.77344 -0.492187,1.80469 0,1.21875 0.703125,2.0625 0.726562,0.82031 2.15625,1.59375 1.453125,0.77344 3.609375,1.80469 2.625,1.24219 4.476562,2.60156 1.875,1.33594 2.882813,3.16406 1.007812,1.80469 1.007812,4.5 z" />
+  </g>
+  <g transform="rotate(0, 126, 40)">
+    <path fill="#efe3ae" d="m 86,86 h 80 v 80 H 86 Z" />
+    <path aria-label="O" d="m 142.3125,125.98828 q 0,3.96094 -0.98438,7.21875 -0.98437,3.23437 -3,5.57812 -1.99218,2.34375 -5.0625,3.60938 -3.07031,1.24219 -7.26562,1.24219 -4.19531,0 -7.26562,-1.24219 -3.07032,-1.26563 -5.08594,-3.60938 -1.99219,-2.34375 -2.97656,-5.60156 -0.98438,-3.25781 -0.98438,-7.24219 0,-5.32031 1.73438,-9.25781 1.75781,-3.96094 5.39062,-6.14062 3.63281,-2.17969 9.23438,-2.17969 5.57812,0 9.16406,2.17969 3.60937,2.17968 5.34375,6.14062 1.75781,3.96094 1.75781,9.30469 z m -25.00781,0 q 0,3.58594 0.89062,6.1875 0.91407,2.57812 2.83594,3.98437 1.92188,1.38282 4.96875,1.38282 3.09375,0 5.01562,-1.38282 1.92188,-1.40625 2.78907,-3.98437 0.89062,-2.60156 0.89062,-6.1875 0,-5.39063 -2.01562,-8.48438 -2.01563,-3.09375 -6.63281,-3.09375 -3.07032,0 -5.01563,1.40625 -1.92187,1.38282 -2.83594,3.98438 -0.89062,2.57812 -0.89062,6.1875 z" />
+  </g>
+  <g transform="rotate(0, 212, 40)">
+    <path fill="#efe3ae" d="m 172,86 h 80 v 80 h -80 z" />
+    <path aria-label="L" d="m 202.75391,143.13281 v -34.26563 h 7.26562 v 28.26563 h 13.89844 v 6 z" />
+  </g>
+  <g transform="rotate(0, 298, 40)">
+    <path fill="#f7c2aa" d="m 258,86 h 80 v 80 h -80 z" />
+    <path aria-label="V" d="m 313.59766,108.86718 -11.64844,34.26563 h -7.92188 l -11.625,-34.26563 h 7.33594 l 6.44531,20.39063 q 0.16407,0.51562 0.53907,1.94531 0.375,1.40625 0.75,3 0.39843,1.57031 0.53906,2.60156 0.14062,-1.03125 0.49219,-2.60156 0.375,-1.57031 0.72656,-2.97656 0.375,-1.42969 0.53906,-1.96875 l 6.49219,-20.39063 z" />
+  </g>
+  <g transform="rotate(0, 384, 40)">
+    <path fill="#efe3ae" d="m 344,86 h 80 v 80 h -80 z" />
+    <path aria-label="E" d="m 394.60547,143.13281 h -19.73438 v -34.26563 h 19.73438 v 5.95313 h -12.46875 v 7.52344 h 11.60156 v 5.95312 h -11.60156 v 8.83594 h 12.46875 z" />
+  </g>
+  <g transform="rotate(0, 470, 40)">
+    <path fill="#efe3ae" d="m 430,86 h 80 v 80 h -80 z" />
+    <path aria-label="R" d="m 468.45312,108.86718 q 4.66407,0 7.6875,1.125 3.04688,1.125 4.52344,3.39844 1.47656,2.27344 1.47656,5.74219 0,2.34375 -0.89062,4.10156 -0.89063,1.75781 -2.34375,2.97656 -1.45313,1.21875 -3.14063,1.99219 l 10.07813,14.92969 h -8.0625 l -8.17969,-13.14844 h -3.86719 v 13.14844 h -7.26562 v -34.26563 z m -0.51562,5.95313 h -2.20313 v 9.25781 h 2.34375 q 3.60938,0 5.15625,-1.19531 1.57032,-1.21875 1.57032,-3.5625 0,-2.4375 -1.6875,-3.46875 -1.66407,-1.03125 -5.17969,-1.03125 z" />
+  </g>
+  <g transform="rotate(0, 642, 40)">
+    <path fill="#bae3ba" d="m 602,86 h 80 v 80 h -80 z" />
+    <path aria-label="2" d="m 654.15234,143.3789 h -23.95312 v -5.03906 l 8.60156,-8.69531 q 2.60156,-2.67188 4.17188,-4.45313 1.59375,-1.80468 2.29687,-3.28125 0.72656,-1.47656 0.72656,-3.16406 0,-2.03906 -1.14843,-3.04687 -1.125,-1.03125 -3.02344,-1.03125 -1.99219,0 -3.86719,0.91406 -1.875,0.91406 -3.91406,2.60156 l -3.9375,-4.66406 q 1.47656,-1.26563 3.11719,-2.39063 1.66406,-1.125 3.84375,-1.80468 2.20312,-0.70313 5.27343,-0.70313 3.375,0 5.78907,1.21875 2.4375,1.21875 3.75,3.32813 1.3125,2.08593 1.3125,4.73437 0,2.83594 -1.125,5.17969 -1.125,2.34375 -3.28125,4.64062 -2.13282,2.29688 -5.15625,5.08594 l -4.40625,4.14844 v 0.32812 h 14.92968 z" />
+  </g>
+</svg>

package/src/components/Logo/index.ts

@@ -1 +1 @@
-export { default } from './Logo';
+export { default } from './Logo.svg';

package/src/components/NavButtons/NavButtons.module.scss

@@ -1,25 +1,26 @@
-$size: 32px;
-
 .navButtons {
   display: flex;
   align-items: center;
+  gap: var(--spacing--l);
+  gap: calc(var(--spacing--l) - var(--spacing--xs));
 }
 
 .button,
 .separator {
-  margin-right: calc(var(--spacing--l) - 2 * var(--spacing--xs));
-
   &:last-child {
     margin-right: 0;
   }
 }
 
+.group {
+  display: flex;
+  gap: var(--spacing--l);
+}
+
 .separator {
-  margin-right: calc(var(--spacing--l) - var(--spacing--xs));
-  margin-left: var(--spacing--xs);
   border-right: var(--border);
   border-color: var(--color--inactive);
-  height: calc(#{$size} - 2 * var(--spacing--xs));
+  height: 32px;
 }
 
 .error {

package/src/components/NavButtons/NavButtons.tsx

@@ -30,44 +30,51 @@ const NavButtons: FunctionComponent<Props> = ({
 
   return (
     <div className={styles.navButtons}>
-      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+      <div className={styles.group}>
+        <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+      </div>
 
       <div className={styles.separator} />
 
-      <SquareButton
-        className={classNames(styles.button, {
-          [styles.error]: hasOverusedTiles,
-        })}
-        Icon={Sack}
-        tooltip={translate('remaining-tiles')}
-        onClick={onShowRemainingTiles}
-      />
+      <div className={styles.group}>
+        <SquareButton
+          className={classNames(styles.button, {
+            [styles.error]: hasOverusedTiles,
+          })}
+          Icon={Sack}
+          tooltip={translate('remaining-tiles')}
+          onClick={onShowRemainingTiles}
+        />
 
-      <SquareButton
-        className={classNames(styles.button, {
-          [styles.error]: hasInvalidWords,
-        })}
-        Icon={BookHalf}
-        tooltip={translate('words')}
-        onClick={onShowWords}
-      />
+        <SquareButton
+          className={classNames(styles.button, {
+            [styles.error]: hasInvalidWords,
+          })}
+          Icon={BookHalf}
+          tooltip={translate('words')}
+          onClick={onShowWords}
+        />
+      </div>
 
       <div className={styles.separator} />
 
-      <SquareButton.Link
-        className={styles.button}
-        href={GITHUB_PROJECT_URL}
-        Icon={Github}
-        rel="noopener noreferrer"
-        target="_blank"
-        tooltip={translate('github')}
-      />
+      <div className={styles.group}>
+        <SquareButton.Link
+          className={styles.button}
+          href={GITHUB_PROJECT_URL}
+          Icon={Github}
+          rel="noopener noreferrer"
+          target="_blank"
+          tooltip={translate('github')}
+        />
+      </div>
 
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
-
-      <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
+      <div className={styles.group}>
+        <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
+        <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
+      </div>
     </div>
   );
 };

package/src/components/PlainTiles/PlainTiles.tsx

@@ -1,6 +1,9 @@
 import classNames from 'classnames';
 import { CSSProperties, FunctionComponent, useMemo } from 'react';
 
+import { LOCALE_FEATURES } from 'i18n';
+import { selectLocale, useTypedSelector } from 'state';
+
 import SvgFontCss from '../SvgFontCss';
 
 import { createPlainTiles, getViewbox } from './lib';
@@ -18,6 +21,8 @@ interface Props {
 }
 
 const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropShadow, showPoints, style, wave }) => {
+  const locale = useTypedSelector(selectLocale);
+  const { fontFamily } = LOCALE_FEATURES[locale];
   const tiles = useMemo(() => createPlainTiles({ color, content, showPoints }), [color, content, showPoints]);
 
   return (
@@ -30,13 +35,14 @@ const PlainTiles: FunctionComponent<Props> = ({ className, color, content, dropS
       viewBox={getViewbox(content)}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <SvgFontCss />
+      <SvgFontCss fontFamily={fontFamily} />
 
       {tiles.map((tile, index) => (
         <Tile
           character={tile.character}
           className={styles.tile}
           color={tile.color}
+          fontFamily={fontFamily}
           key={index}
           points={tile.points}
           size={tile.size}

package/src/components/PlainTiles/Tile.tsx

@@ -4,6 +4,7 @@ interface Props {
   character: string;
   className?: string;
   color: string;
+  fontFamily: string;
   points?: number;
   size: number;
   transform?: string;
@@ -11,13 +12,13 @@ interface Props {
   y: number;
 }
 
-const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
+const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
     <rect fill={color} height={size} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
-      fontFamily="Open Sans"
+      fontFamily={fontFamily}
       fontSize={0.6 * size}
       fontWeight="bold"
       textAnchor="middle"
@@ -30,7 +31,7 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, points, s
     {typeof points === 'number' && (
       <text
         dominantBaseline="text-after-edge"
-        fontFamily="Open Sans"
+        fontFamily={fontFamily}
         fontSize={0.25 * size}
         fontWeight="bold"
         textAnchor="end"

package/src/components/Rack/Rack.tsx

@@ -73,11 +73,13 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
     return createKeyboardNavigation({
       onArrowLeft: (event) => {
         event.preventDefault();
-        changeActiveIndex(-1);
+        const direction = document.body.parentElement?.dir || 'ltr';
+        changeActiveIndex(direction === 'ltr' ? -1 : 1);
       },
       onArrowRight: (event) => {
         event.preventDefault();
-        changeActiveIndex(1);
+        const direction = document.body.parentElement?.dir || 'ltr';
+        changeActiveIndex(direction === 'ltr' ? 1 : -1);
       },
       onBackspace: (event) => {
         event.preventDefault();

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

@@ -10,6 +10,7 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 
   display: flex;
   align-items: center;
+  gap: var(--spacing--l);
   padding: var(--spacing--m);
   transition: var(--transition);
   cursor: pointer;
@@ -65,5 +66,4 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
 
 .content {
   flex: 1;
-  margin-left: var(--spacing--l);
 }

package/src/components/RemainingTiles/Character.tsx

@@ -2,8 +2,9 @@ import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
+import { LOCALE_FEATURES } from 'i18n';
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
-import { selectCharacterPoints, useTypedSelector } from 'state';
+import { selectCharacterPoints, selectLocale, useTypedSelector } from 'state';
 import { RemainingTile } from 'types';
 
 import Tile from '../Tile';
@@ -15,9 +16,13 @@ interface Props {
 }
 
 const Character: FunctionComponent<Props> = ({ tile }) => {
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
   const { character, count, usedCount } = tile;
   const remainingCount = count - usedCount;
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
+  const current = direction === 'ltr' ? remainingCount : count;
+  const total = direction === 'ltr' ? count : remainingCount;
 
   return (
     <div
@@ -37,7 +42,7 @@ const Character: FunctionComponent<Props> = ({ tile }) => {
         size={REMAINING_TILES_TILE_SIZE}
       />
       <div className={styles.count}>
-        {remainingCount} / {count}
+        {current.toLocaleString(locale)} / {total.toLocaleString(locale)}
       </div>
     </div>
   );

package/src/components/RemainingTiles/RemainingTiles.tsx

@@ -1,6 +1,7 @@
 import { FunctionComponent } from 'react';
 
-import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { selectLocale, selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
 import Badge from '../Badge';
 import Sidebar from '../Sidebar';
@@ -16,29 +17,36 @@ interface Props {
 
 const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const groups = useTypedSelector(selectRemainingTilesGroups);
+  const { direction } = LOCALE_FEATURES[locale];
 
   return (
     <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
-      {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => (
-        <Sidebar.Section
-          key={translationKey}
-          title={
-            <span className={styles.title}>
-              <span>{translate(translationKey)}</span>
-              <Badge className={styles.badge}>
-                {remainingCount} / {totalCount}
-              </Badge>
-            </span>
-          }
-        >
-          <div className={styles.content}>
-            {tiles.map((tile) => {
-              return <Character key={tile.character} tile={tile} />;
-            })}
-          </div>
-        </Sidebar.Section>
-      ))}
+      {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => {
+        const current = direction === 'ltr' ? remainingCount : totalCount;
+        const total = direction === 'ltr' ? totalCount : remainingCount;
+
+        return (
+          <Sidebar.Section
+            key={translationKey}
+            title={
+              <span className={styles.title}>
+                <span>{translate(translationKey)}</span>
+                <Badge className={styles.badge}>
+                  {current.toLocaleString(locale)} / {total.toLocaleString(locale)}
+                </Badge>
+              </span>
+            }
+          >
+            <div className={styles.content}>
+              {tiles.map((tile) => {
+                return <Character key={tile.character} tile={tile} />;
+              })}
+            </div>
+          </Sidebar.Section>
+        );
+      })}
     </Sidebar>
   );
 };

package/src/components/Results/Cell.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useTranslate } from 'state';
+import { selectLocale, useTranslate, useTypedSelector } from 'state';
 import { TranslationKey } from 'types';
 
 import { useTooltip } from '../Tooltip';
@@ -17,11 +17,13 @@ interface Props {
 
 const Cell: FunctionComponent<Props> = ({ className, translationKey, tooltip, value }) => {
   const translate = useTranslate();
-  const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || value}`);
+  const locale = useTypedSelector(selectLocale);
+  const formattedValue = value.toLocaleString(locale);
+  const triggerProps = useTooltip(`${translate(translationKey)}: ${tooltip || formattedValue}`);
 
   return (
     <span className={classNames(styles.cell, className)} {...triggerProps}>
-      {value}
+      {formattedValue}
     </span>
   );
 };