@scrabble-solver/scrabble-solver 2.9.3 → 2.10.1

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}

package/src/components/Results/Results.module.scss

@@ -54,6 +54,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 
   flex: 0 1 auto;
   text-align: left;
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
 }
 
 .result {
@@ -78,6 +82,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
 
+  [dir='rtl'] & {
+    flex-direction: row-reverse;
+  }
+
   .word {
     @include ellipsis;
   }
@@ -88,17 +96,32 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: center;
   padding: var(--spacing--s);
+  gap: var(--spacing--s);
 
   .result &:first-child,
   .headerButton:first-child & {
-    padding-left: $row-padding-horizontal;
     justify-content: flex-start;
-    text-align: left;
+
+    [dir='ltr'] & {
+      padding-left: $row-padding-horizontal;
+      text-align: left;
+    }
+
+    [dir='rtl'] & {
+      padding-right: $row-padding-horizontal;
+      text-align: right;
+    }
   }
 
   .result &:last-child,
   .headerButton:last-child & {
-    padding-right: $row-padding-horizontal;
+    [dir='ltr'] & {
+      padding-right: $row-padding-horizontal;
+    }
+
+    [dir='rtl'] & {
+      padding-left: $row-padding-horizontal;
+    }
   }
 
   &:last-child {
@@ -107,10 +130,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .word {
-  $width: 180px;
-
-  flex: 0 0 $width;
-  max-width: $width;
+  flex: 1 0 180px;
   text-transform: uppercase;
 }
 
@@ -123,7 +143,10 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .points {
-  flex: 1 0 80px;
+  $width: 80px;
+
+  flex: 1 0 $width;
+  max-width: $width;
   font-weight: bold;
 }
 
@@ -143,7 +166,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex: 0 0 auto;
   width: $size;
   height: $size;
-  margin-left: var(--spacing--s);
 }
 
 .input {

package/src/components/Results/Results.tsx

@@ -2,10 +2,12 @@ import classNames from 'classnames';
 import { FunctionComponent, useLayoutEffect, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
 
+import { LOCALE_FEATURES } from 'i18n';
 import { RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
+  selectLocale,
   selectSolveError,
   selectSortedFilteredResults,
   selectSortedResults,
@@ -17,7 +19,7 @@ import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
 
-import { COLUMNS } from './constants';
+import getColumns from './getColumns';
 import HeaderButton from './HeaderButton';
 import Result from './Result';
 import styles from './Results.module.scss';
@@ -29,6 +31,7 @@ interface Props {
 }
 
 const Results: FunctionComponent<Props> = ({ height, width }) => {
+  const locale = useTypedSelector(selectLocale);
   const translate = useTranslate();
   const allResults = useTypedSelector(selectSortedResults);
   const results = useTypedSelector(selectSortedFilteredResults);
@@ -36,6 +39,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
   const listRef = useRef<HTMLElement>();
+  const columns = getColumns(LOCALE_FEATURES[locale]);
 
   useLayoutEffect(() => {
     if (listRef.current) {
@@ -46,7 +50,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
   return (
     <div className={styles.results}>
       <div className={styles.header}>
-        {COLUMNS.map((column) => (
+        {columns.map((column) => (
           <HeaderButton column={column} key={column.id} />
         ))}
       </div>
@@ -57,7 +61,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         </EmptyState>
       )}
 
-      {typeof results === 'undefined' && typeof error === 'undefined' && (
+      {typeof error === 'undefined' && typeof results === 'undefined' && (
         <EmptyState className={styles.emptyState} type="info">
           {translate('results.empty-state.uninitialized')}
 
@@ -65,7 +69,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         </EmptyState>
       )}
 
-      {typeof results !== 'undefined' && typeof allResults !== 'undefined' && typeof error === 'undefined' && (
+      {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
         <>
           {isOutdated && (
             <EmptyState className={styles.emptyState} type="info">

package/src/components/Results/getColumns.ts

@@ -0,0 +1,58 @@
+import { ResultColumn } from 'types';
+
+import styles from './Results.module.scss';
+import { Column } from './types';
+
+const getColumns = (options: { consonants: boolean; vowels: boolean }): Column[] => {
+  const { consonants, vowels } = options;
+  const columns: Column[] = [
+    {
+      className: styles.word,
+      id: ResultColumn.Word,
+      translationKey: 'common.word',
+    },
+    {
+      className: styles.stat,
+      id: ResultColumn.TilesCount,
+      translationKey: 'common.tiles',
+    },
+  ];
+
+  if (consonants) {
+    columns.push({
+      className: styles.stat,
+      id: ResultColumn.ConsonantsCount,
+      translationKey: 'common.consonants',
+    });
+  }
+
+  if (vowels) {
+    columns.push({
+      className: styles.stat,
+      id: ResultColumn.VowelsCount,
+      translationKey: 'common.vowels',
+    });
+  }
+
+  columns.push(
+    {
+      className: styles.stat,
+      id: ResultColumn.BlanksCount,
+      translationKey: 'common.blanks',
+    },
+    {
+      className: styles.stat,
+      id: ResultColumn.WordsCount,
+      translationKey: 'common.words',
+    },
+    {
+      className: styles.points,
+      id: ResultColumn.Points,
+      translationKey: 'common.points',
+    },
+  );
+
+  return columns;
+};
+
+export default getColumns;

package/src/components/Settings/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -17,7 +17,7 @@ interface Props {
 const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
-  const configId = useTypedSelector(selectAutoGroupTiles);
+  const value = useTypedSelector(selectAutoGroupTiles);
 
   const options = [
     {
@@ -43,7 +43,7 @@ const AutoGroupTilesSetting: FunctionComponent<Props> = ({ className, disabled }
     <div className={className}>
       {options.map((option) => (
         <Radio
-          checked={configId === parseValue(option.value)}
+          checked={value === parseValue(option.value)}
           className={styles.option}
           disabled={disabled}
           id="autoGroupTiles"

package/src/components/Settings/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,4 +9,5 @@
 .label {
   display: flex;
   align-items: center;
+  font-family: 'Open Sans', sans-serif;
 }

package/src/components/Settings/components/LocaleSetting/LocaleSetting.module.scss

@@ -18,13 +18,18 @@
 .label {
   display: flex;
   align-items: center;
+  gap: var(--spacing--l);
+  font-family: 'Open Sans', sans-serif;
+
+  &.fa {
+    font-family: 'Vazirmatn', 'Open Sans', sans-serif;
+  }
 }
 
 .flag {
   $height: 32px;
 
   height: $height;
-  margin-right: var(--spacing--l);
   box-shadow: var(--box-shadow--null);
   transition: var(--transition);
 
@@ -40,6 +45,12 @@
     width: $height * $aspect-ratio;
   }
 
+  &.fa {
+    $aspect-ratio: 1.75;
+
+    width: $height * $aspect-ratio;
+  }
+
   &.gb {
     $aspect-ratio: 2;
 

package/src/components/Settings/components/LocaleSetting/LocaleSetting.tsx

@@ -39,7 +39,7 @@ const LocaleSetting: FunctionComponent<Props> = ({ className, disabled }) => {
           value={option.value}
           onChange={handleChange}
         >
-          <span className={styles.label}>
+          <span className={classNames(styles.label, option.className)}>
             <Icon className={classNames(styles.flag, option.className)} />
 
             <span>{option.label}</span>

package/src/components/Settings/components/LocaleSetting/options.ts

@@ -1,7 +1,7 @@
 import { Locale } from '@scrabble-solver/types';
 import { FunctionComponent, SVGAttributes } from 'react';
 
-import { FlagEs, FlagFr, FlagGb, FlagPl, FlagUs, FlagDe } from 'icons';
+import { FlagEs, FlagFa, FlagFr, FlagGb, FlagPl, FlagUs, FlagDe } from 'icons';
 
 import styles from './LocaleSetting.module.scss';
 
@@ -9,6 +9,7 @@ interface Option {
   className: string;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
   label: string;
+  name: string;
   value: Locale;
 }
 
@@ -17,38 +18,51 @@ const options: Option[] = [
     className: styles.gb,
     Icon: FlagGb,
     label: 'English (GB)',
+    name: 'English (GB)',
     value: Locale.EN_GB,
   },
   {
     className: styles.us,
     Icon: FlagUs,
     label: 'English (US)',
+    name: 'English (US)',
     value: Locale.EN_US,
   },
+  {
+    className: styles.fa,
+    Icon: FlagFa,
+    label: 'فارسی',
+    name: 'Persian',
+    value: Locale.FA_IR,
+  },
   {
     className: styles.fr,
     Icon: FlagFr,
     label: 'Français',
+    name: 'French',
     value: Locale.FR_FR,
   },
   {
     className: styles.de,
     Icon: FlagDe,
     label: 'Deutsch',
+    name: 'German',
     value: Locale.DE_DE,
   },
   {
     className: styles.pl,
     Icon: FlagPl,
     label: 'Polski',
+    name: 'Polish',
     value: Locale.PL_PL,
   },
   {
     className: styles.es,
     Icon: FlagEs,
     label: 'Español',
+    name: 'Spanish',
     value: Locale.ES_ES,
   },
-];
+].sort((a, b) => a.name.localeCompare(b.name));
 
 export default options;

package/src/components/Sidebar/Sidebar.module.scss

@@ -3,10 +3,21 @@
 $z-index: 100;
 $width: 370px;
 
+.modal,
+.closeButton {
+  top: 0;
+
+  [dir='ltr'] & {
+    right: 0;
+  }
+
+  [dir='rtl'] & {
+    left: 0;
+  }
+}
+
 .modal {
   position: fixed;
-  top: 0;
-  right: 0;
   z-index: $z-index;
   height: 100vh;
   width: $width;
@@ -21,15 +32,25 @@ $width: 370px;
 
 .afterOpen {
   .sidebar {
-    transform: translateX(0);
-    opacity: 1;
+    [dir='ltr'] &,
+    [dir='rtl'] & {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
 }
 
 .beforeClose {
   .sidebar {
-    transform: translateX($width);
     opacity: 0;
+
+    [dir='ltr'] & {
+      transform: translateX($width);
+    }
+
+    [dir='rtl'] & {
+      transform: translateX(-$width);
+    }
   }
 }
 
@@ -47,6 +68,14 @@ $width: 370px;
   transition-duration: var(--transition--duration--long);
   transform: translateX($width);
   opacity: 0;
+
+  [dir='ltr'] & {
+    transform: translateX($width);
+  }
+
+  [dir='rtl'] & {
+    transform: translateX(-$width);
+  }
 }
 
 .header {
@@ -56,15 +85,20 @@ $width: 370px;
 }
 
 .title {
-  padding-right: calc(var(--square-button-size) + var(--spacing--s));
   font-size: var(--font--size--h1);
   font-weight: 300;
+
+  [dir='ltr'] & {
+    padding-right: calc(var(--square-button-size) + var(--spacing--s));
+  }
+
+  [dir='rtl'] & {
+    padding-left: calc(var(--square-button-size) + var(--spacing--s));
+  }
 }
 
 .closeButton {
   position: absolute !important;
-  top: 0;
-  right: 0;
   z-index: $z-index + 1;
   margin: var(--spacing--l);
 }

package/src/components/SvgFontCss/SvgFontCss.tsx

@@ -1,13 +1,14 @@
 import { FunctionComponent } from 'react';
 
-// eslint-disable-next-line max-len
-const CSS = `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;700&family=Roboto+Mono&display=swap');
+import createCss from './createCss';
 
-text {
-  font-family: 'Open Sans';
-}`;
+interface Props {
+  fontFamily: string;
+}
 
-// eslint-disable-next-line react/no-danger
-const SvgFontCss: FunctionComponent = () => <style type="text/css" dangerouslySetInnerHTML={{ __html: CSS }} />;
+const SvgFontCss: FunctionComponent<Props> = ({ fontFamily }) => {
+  // eslint-disable-next-line react/no-danger
+  return <style type="text/css" dangerouslySetInnerHTML={{ __html: createCss(fontFamily) }} />;
+};
 
 export default SvgFontCss;

package/src/components/SvgFontCss/createCss.ts

@@ -0,0 +1,11 @@
+const importUrl =
+  // eslint-disable-next-line max-len
+  'https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;700&family=Vazirmatn:wght@300;400;700&family=Roboto+Mono&display=swap';
+
+const createCss = (fontFamily: string): string => `@import url('${importUrl}');
+
+text {
+  font-family: '${fontFamily}';
+}`;
+
+export default createCss;

package/src/components/SvgFontCss/createStyle.ts

@@ -0,0 +1,9 @@
+import createCss from './createCss';
+
+const createStyle = (fontFamily: string) => {
+  const style = document.createElement('style');
+  style.innerHTML = createCss(fontFamily);
+  return style;
+};
+
+export default createStyle;

package/src/components/SvgFontCss/createSvg.ts

@@ -0,0 +1,10 @@
+import createStyle from './createStyle';
+
+const createSvg = (fontFamily: string) => {
+  const svg = document.createElement('svg');
+  svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  svg.appendChild(createStyle(fontFamily));
+  return svg;
+};
+
+export default createSvg;

package/src/components/SvgFontFix/SvgFontFix.module.scss

@@ -0,0 +1,5 @@
+.svgFontFix {
+  width: 0;
+  height: 0;
+  position: absolute;
+}

package/src/components/SvgFontFix/SvgFontFix.tsx

@@ -0,0 +1,21 @@
+import { FunctionComponent } from 'react';
+
+import { LOCALE_FEATURES } from 'i18n';
+
+import SvgFontCss from '../SvgFontCss';
+
+import styles from './SvgFontFix.module.scss';
+
+const SvgFontFix: FunctionComponent = () => {
+  const fontFamilies = Array.from(new Set(Object.values(LOCALE_FEATURES).map(({ fontFamily }) => fontFamily)));
+
+  return (
+    <svg className={styles.svgFontFix} xmlns="http://www.w3.org/2000/svg">
+      {fontFamilies.map((fontFamily) => (
+        <SvgFontCss fontFamily={fontFamily} key={fontFamily} />
+      ))}
+    </svg>
+  );
+};
+
+export default SvgFontFix;

package/src/components/SvgFontFix/index.ts

@@ -0,0 +1 @@
+export { default } from './SvgFontFix';

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

@@ -73,10 +73,18 @@
 
 .points {
   position: absolute;
-  right: 9%;
-  bottom: 1%;
   font-weight: bold;
   user-select: none;
   pointer-events: none;
   letter-spacing: -1px;
+
+  [dir='ltr'] & {
+    bottom: 1%;
+    right: 9%;
+  }
+
+  [dir='rtl'] & {
+    top: 1%;
+    left: 9%;
+  }
 }

package/src/components/Tile/Tile.tsx

@@ -11,6 +11,7 @@ import {
 } from 'react';
 
 import { getTileSizes, noop } from 'lib';
+import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
 
@@ -49,6 +50,7 @@ const Tile: FunctionComponent<Props> = ({
   onFocus = noop,
   onKeyDown = noop,
 }) => {
+  const locale = useTypedSelector(selectLocale);
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const inputStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
@@ -56,6 +58,7 @@ const Tile: FunctionComponent<Props> = ({
   const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
   const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
+  const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
     inputRef.current?.select();
@@ -81,6 +84,7 @@ const Tile: FunctionComponent<Props> = ({
       isBlank={isBlank}
       placeholder={placeholder}
       points={points}
+      pointsFormatted={pointsFormatted}
       pointsStyle={pointsStyle}
       raised={raised}
       style={style}

package/src/components/Tile/TilePure.tsx

@@ -23,6 +23,7 @@ interface Props {
   isBlank?: boolean;
   placeholder?: string;
   points?: number;
+  pointsFormatted?: string;
   pointsStyle?: CSSProperties;
   raised?: boolean;
   style?: CSSProperties;
@@ -44,6 +45,7 @@ const TilePure: FunctionComponent<Props> = ({
   isBlank,
   placeholder,
   points,
+  pointsFormatted,
   pointsStyle,
   raised,
   style,
@@ -85,7 +87,7 @@ const TilePure: FunctionComponent<Props> = ({
 
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
-        {points}
+        {pointsFormatted}
       </span>
     )}
   </div>

package/src/components/Words/Words.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
 import { Check, Cross } from 'icons';
-import { selectVerify, useTranslate, useTypedSelector } from 'state';
+import { selectLocale, selectVerify, useTranslate, useTypedSelector } from 'state';
 
 import Badge from '../Badge';
 import Sidebar from '../Sidebar';
@@ -17,6 +17,7 @@ interface Props {
 
 const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
   const { invalidWords, validWords } = useTypedSelector(selectVerify);
 
   return (
@@ -25,7 +26,7 @@ const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
         title={
           <span className={styles.title}>
             <span>{translate('words.invalid')}</span>
-            <Badge className={styles.badge}>{invalidWords.length}</Badge>
+            <Badge className={styles.badge}>{invalidWords.length.toLocaleString(locale)}</Badge>
           </span>
         }
       >
@@ -40,7 +41,7 @@ const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
         title={
           <span className={styles.title}>
             <span>{translate('words.valid')}</span>
-            <Badge className={styles.badge}>{validWords.length}</Badge>
+            <Badge className={styles.badge}>{validWords.length.toLocaleString(locale)}</Badge>
           </span>
         }
       >

package/src/components/index.ts

@@ -23,6 +23,7 @@ export { default as Sidebar } from './Sidebar';
 export { default as Splash } from './Splash';
 export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
+export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';