@scrabble-solver/scrabble-solver 2.9.3 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.9.3",
+  "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.3",
-    "@scrabble-solver/constants": "^2.9.3",
-    "@scrabble-solver/dictionaries": "^2.9.3",
-    "@scrabble-solver/logger": "^2.9.3",
-    "@scrabble-solver/solver": "^2.9.3",
-    "@scrabble-solver/types": "^2.9.3",
-    "@scrabble-solver/word-definitions": "^2.9.3",
+    "@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": "ef8d030cbb76256a377f747f7ebe4b85b7eba61e"
+  "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/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>
   );
 };

package/src/components/Results/Result.tsx

@@ -1,7 +1,8 @@
 import { CSSProperties, ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { resultsSlice, selectSortedFilteredResults, useTypedSelector } from 'state';
+import { LOCALE_FEATURES } from 'i18n';
+import { resultsSlice, selectLocale, selectSortedFilteredResults, useTypedSelector } from 'state';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
@@ -13,6 +14,8 @@ interface Props {
 
 const Result = ({ index, style }: Props): ReactElement => {
   const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
+  const { consonants, vowels } = LOCALE_FEATURES[locale];
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   const results = useTypedSelector(selectSortedFilteredResults)!;
   const result = results[index];
@@ -56,8 +59,10 @@ const Result = ({ index, style }: Props): ReactElement => {
           value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
         />
         <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
-        <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
-        <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        {consonants && (
+          <Cell className={styles.stat} translationKey="common.consonants" value={result.consonantsCount} />
+        )}
+        {vowels && <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />}
         <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
         <Cell
           className={styles.stat}