@scrabble-solver/scrabble-solver 2.10.3 → 2.10.4

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+
+import { PROGRESS_COLOR_BACKGROUND, PROGRESS_COLOR_VALUE } from 'parameters';
+import { selectLocale, useTypedSelector } from 'state';
+
+import styles from './Progress.module.scss';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  max: number;
+  min?: number;
+  value: number;
+}
+
+const getGradient = (progress: number, color: string, background: string) => {
+  const percent = 100 * progress;
+  return `linear-gradient(90deg, ${color} 0%, ${color} ${percent}%, ${background} ${percent}%, ${background} 100%)`;
+};
+
+const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
+  const locale = useTypedSelector(selectLocale);
+  const progress = value / (max - min);
+  const percent = Math.round(100 * progress);
+
+  return (
+    <div
+      {...props}
+      className={classNames(styles.progress, className)}
+      style={{
+        ...style,
+        backgroundImage: getGradient(progress, PROGRESS_COLOR_VALUE, PROGRESS_COLOR_BACKGROUND),
+      }}
+      title={`${percent.toLocaleString(locale)}%`}
+    />
+  );
+};
+
+export default Progress;

package/src/components/Progress/index.ts

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

package/src/components/Rack/Rack.module.scss

@@ -7,4 +7,6 @@
 
 .tile {
   @include focus-effect;
+
+  --background-color: var(--color--background);
 }

package/src/components/Rack/Rack.tsx

@@ -18,9 +18,10 @@ import RackTile from './RackTile';
 
 interface Props {
   className?: string;
+  tileSize: number;
 }
 
-const Rack: FunctionComponent<Props> = ({ className }) => {
+const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
@@ -120,6 +121,7 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
           index={index}
           inputRef={tilesRefs[index]}
           key={index}
+          size={tileSize}
           tile={tile}
           onChange={handleChange}
           onKeyDown={handleKeyDown}

package/src/components/Rack/RackTile.tsx

@@ -13,7 +13,6 @@ import {
 import { useDispatch } from 'react-redux';
 
 import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
-import { TILE_SIZE } from 'parameters';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -32,6 +31,7 @@ interface Props {
   character: string | null;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
+  size: number;
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
@@ -42,6 +42,7 @@ const RackTile: FunctionComponent<Props> = ({
   character,
   index,
   inputRef,
+  size,
   tile,
   onChange,
   onKeyDown,
@@ -101,7 +102,7 @@ const RackTile: FunctionComponent<Props> = ({
       placeholder={translate('rack.placeholder')[index]}
       points={points}
       raised
-      size={TILE_SIZE}
+      size={size}
       tabIndex={index === 0 ? undefined : -1}
       onChange={handleChange}
       onFocus={handleFocus}

package/src/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -0,0 +1,76 @@
+@import 'styles/mixins';
+
+.resultCandidatePicker {
+  @include button-reset;
+  @include focus-effect;
+
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  width: 100%;
+  border: var(--border);
+  border-radius: var(--border--radius);
+  background-color: white;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+
+  &[disabled] {
+    opacity: var(--opacity--disabled);
+    box-shadow: none;
+    cursor: not-allowed;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
+}
+
+.points,
+.word {
+  padding: var(--spacing--m) var(--spacing--l);
+}
+
+.points {
+  flex: 0 0 auto;
+  font-weight: bold;
+
+  [dir='ltr'] & {
+    border-right: var(--border);
+  }
+
+  [dir='rtl'] & {
+    border-left: var(--border);
+  }
+}
+
+.word {
+  @include ellipsis;
+
+  flex: 1;
+  text-transform: uppercase;
+  text-align: center;
+}
+
+.iconContainer {
+  flex: 0 0 auto;
+  display: flex;
+
+  [dir='ltr'] & {
+    padding-right: var(--spacing--l);
+  }
+
+  [dir='rtl'] & {
+    padding-left: var(--spacing--l);
+  }
+}
+
+.icon {
+  $size: 20px;
+
+  width: $size;
+  height: $size;
+  color: var(--color--inactive);
+}

package/src/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -0,0 +1,38 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+
+import { ChevronDown } from 'icons';
+import { selectAreResultsOutdated, selectLocale, selectResultCandidate, useTypedSelector } from 'state';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+interface Props extends HTMLProps<HTMLButtonElement> {
+  type?: 'button' | 'submit' | 'reset' | undefined;
+}
+
+const ResultCandidatePicker: FunctionComponent<Props> = ({ className, ...props }) => {
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  return (
+    <button
+      className={classNames(styles.resultCandidatePicker, className)}
+      disabled={isOutdated}
+      type="button"
+      {...props}
+    >
+      <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+      <div className={styles.word}>{resultCandidate.word}</div>
+      <div className={styles.iconContainer}>
+        <ChevronDown className={styles.icon} />
+      </div>
+    </button>
+  );
+};
+
+export default ResultCandidatePicker;

package/src/components/ResultCandidatePicker/index.ts

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

package/src/components/Results/Result.tsx

@@ -1,49 +1,52 @@
-import { CSSProperties, ReactElement } from 'react';
-import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
+import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, useRef } from 'react';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { resultsSlice, selectLocale, selectSortedFilteredResults, useTypedSelector } from 'state';
+import { noop } from 'lib';
+import { selectLocale, useTypedSelector } from 'state';
+import { ResultColumn } from 'types';
 
 import Cell from './Cell';
 import styles from './Results.module.scss';
+import { ResultData } from './types';
+import useColumns from './useColumns';
 
 interface Props {
+  data: ResultData;
   index: number;
   style?: CSSProperties;
 }
 
-const Result = ({ index, style }: Props): ReactElement => {
-  const dispatch = useDispatch();
+const Result = ({ data, index, style }: Props): ReactElement => {
+  const {
+    highlightedIndex,
+    results,
+    onBlur = noop,
+    onClick = noop,
+    onFocus = noop,
+    onMouseEnter = noop,
+    onMouseLeave = noop,
+  } = data;
+  const ref = useRef<HTMLButtonElement>(null);
   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];
   const otherWords = result.words.slice(1).join(' / ').toLocaleUpperCase();
+  const columns = useColumns();
+  const enabledColumns = Object.fromEntries(columns.map((column) => [column.id, true]));
 
-  const handleClick = () => {
-    dispatch(resultsSlice.actions.applyResult(result));
-  };
-
-  const handleMouseEnter = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(result));
-  };
-
-  const handleMouseLeave = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(null));
-  };
-
-  const handleFocus = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(result));
-  };
-
-  const handleBlur = () => {
-    dispatch(resultsSlice.actions.changeResultCandidate(null));
-  };
+  const handleClick: MouseEventHandler = (event) => onClick(result, event);
+  const handleMouseEnter: MouseEventHandler = (event) => onMouseEnter(result, event);
+  const handleMouseLeave: MouseEventHandler = (event) => onMouseLeave(result, event);
+  const handleBlur: FocusEventHandler = (event) => onBlur(result, event);
+  const handleFocus: FocusEventHandler = (event) => onFocus(result, event);
 
   return (
     <button
-      className={styles.result}
+      className={classNames(styles.result, {
+        [styles.highlighted]: index === highlightedIndex,
+      })}
+      ref={ref}
       style={style}
       type="button"
       onBlur={handleBlur}
@@ -53,24 +56,42 @@ const Result = ({ index, style }: Props): ReactElement => {
       onMouseLeave={handleMouseLeave}
     >
       <span className={styles.resultContent}>
-        <Cell
-          className={styles.word}
-          translationKey="common.word"
-          value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
-        />
-        <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
-        {consonants && (
+        {enabledColumns[ResultColumn.Word] && (
+          <Cell
+            className={styles.word}
+            translationKey="common.word"
+            value={`${result.word.toLocaleUpperCase()}${otherWords.length > 0 ? ` (${otherWords})` : ''}`}
+          />
+        )}
+
+        {enabledColumns[ResultColumn.TilesCount] && (
+          <Cell className={styles.stat} translationKey="common.tiles" value={result.tilesCount} />
+        )}
+
+        {enabledColumns[ResultColumn.ConsonantsCount] && 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}
-          translationKey="common.words"
-          tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
-          value={result.wordsCount}
-        />
-        <Cell className={styles.points} translationKey="common.points" value={result.points} />
+
+        {enabledColumns[ResultColumn.VowelsCount] && vowels && (
+          <Cell className={styles.stat} translationKey="common.vowels" value={result.vowelsCount} />
+        )}
+
+        {enabledColumns[ResultColumn.BlanksCount] && (
+          <Cell className={styles.stat} translationKey="common.blanks" value={result.blanksCount} />
+        )}
+
+        {enabledColumns[ResultColumn.WordsCount] && (
+          <Cell
+            className={styles.stat}
+            translationKey="common.words"
+            tooltip={`${result.wordsCount} (${result.words.join(' / ').toLocaleUpperCase()})`}
+            value={result.wordsCount}
+          />
+        )}
+
+        {enabledColumns[ResultColumn.Points] && (
+          <Cell className={styles.points} translationKey="common.points" value={result.points} />
+        )}
       </span>
     </button>
   );

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

@@ -8,7 +8,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex-direction: column;
   height: 100%;
   font-family: var(--font--family--title);
-  font-size: var(--font--size--s);
 }
 
 .emptyState {
@@ -16,6 +15,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  flex: 1 1 auto;
   transition: var(--transition);
 
   &.outdated {
@@ -30,8 +30,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
   border-bottom: var(--border);
-  font-size: var(--font--size--s);
   font-weight: 700;
+  overflow: auto;
 }
 
 .headerButton {
@@ -41,6 +41,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   cursor: pointer;
   text-transform: uppercase;
   transition: var(--transition);
+  padding: var(--spacing--s) 0;
 
   &:focus,
   &:hover {
@@ -69,7 +70,8 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   font-weight: 400;
 
   &:focus,
-  &:hover {
+  &:hover,
+  &.highlighted {
     &:not(:disabled) {
       background-color: var(--color--primary);
       color: white;
@@ -82,10 +84,6 @@ $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;
   }
@@ -95,7 +93,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing--s);
+  padding: 0 var(--spacing--s);
   gap: var(--spacing--s);
 
   .result &:first-child,
@@ -150,18 +148,13 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   font-weight: bold;
 }
 
-.outdatedButton {
+.solveButton {
   display: block;
-  margin: 0 auto;
-  margin-top: var(--spacing--xxl);
-
-  @include tablet {
-    margin-top: var(--spacing--l);
-  }
+  margin: var(--spacing--xl) auto 0;
 }
 
 .sortIcon {
-  $size: 15px;
+  $size: 19px;
 
   flex: 0 0 auto;
   width: $size;

package/src/components/Results/Results.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
-import { FunctionComponent, useLayoutEffect, useRef } from 'react';
+import { FunctionComponent, useEffect, useMemo, useState } 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 { BORDER_WIDTH, RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -19,33 +19,48 @@ import EmptyState from '../EmptyState';
 import Loading from '../Loading';
 import ResultsInput from '../ResultsInput';
 
-import getColumns from './getColumns';
 import HeaderButton from './HeaderButton';
 import Result from './Result';
 import styles from './Results.module.scss';
 import SolveButton from './SolveButton';
+import { ResultCallbacks, ResultData } from './types';
+import useColumns from './useColumns';
 
 interface Props {
+  callbacks: ResultCallbacks;
   height: number;
+  highlightedIndex?: number;
   width: number;
 }
 
-const Results: FunctionComponent<Props> = ({ height, width }) => {
-  const locale = useTypedSelector(selectLocale);
+const Results: FunctionComponent<Props> = ({ callbacks, height, highlightedIndex, width }) => {
   const translate = useTranslate();
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
   const allResults = useTypedSelector(selectSortedResults);
-  const results = useTypedSelector(selectSortedFilteredResults);
+  const filteredResults = useTypedSelector(selectSortedFilteredResults);
+  const results = filteredResults || [];
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const error = useTypedSelector(selectSolveError);
-  const listRef = useRef<HTMLElement>();
-  const columns = getColumns(LOCALE_FEATURES[locale]);
-
-  useLayoutEffect(() => {
-    if (listRef.current) {
-      listRef.current.scrollTo(0, 0);
-    }
-  }, [listRef, results]);
+  const itemData = useMemo(() => ({ ...callbacks, highlightedIndex, results }), [callbacks, highlightedIndex, results]);
+  const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
+  const columns = useColumns();
+  const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
+
+  useEffect(() => {
+    // without setTimeout, the initial scrolling offset is calculated
+    // incorrectly, as the list is not fully rendered by the browser yet
+    const timeout = globalThis.setTimeout(() => {
+      if (listRef) {
+        listRef.scrollToItem(scrollToIndex, 'center');
+      }
+    }, 0);
+
+    return () => {
+      globalThis.clearTimeout(timeout);
+    };
+  }, [listRef, scrollToIndex]);
 
   return (
     <div className={styles.results}>
@@ -56,52 +71,54 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
       </div>
 
       {typeof error !== 'undefined' && (
-        <EmptyState className={styles.emptyState} type="error">
+        <EmptyState className={styles.emptyState} variant="error">
           {error.message}
         </EmptyState>
       )}
 
-      {typeof error === 'undefined' && typeof results === 'undefined' && (
-        <EmptyState className={styles.emptyState} type="info">
+      {typeof error === 'undefined' && typeof filteredResults === 'undefined' && (
+        <EmptyState className={styles.emptyState} variant="info">
           {translate('results.empty-state.uninitialized')}
 
-          <SolveButton />
+          <SolveButton className={styles.solveButton} />
         </EmptyState>
       )}
 
-      {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
+      {typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined' && (
         <>
           {isOutdated && (
-            <EmptyState className={styles.emptyState} type="info">
+            <EmptyState className={styles.emptyState} variant="info">
               {translate('results.empty-state.outdated')}
 
-              <SolveButton />
+              <SolveButton className={styles.solveButton} />
             </EmptyState>
           )}
 
           {!isOutdated && (
             <>
               {allResults.length === 0 && (
-                <EmptyState className={styles.emptyState} type="warning">
+                <EmptyState className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
                 </EmptyState>
               )}
 
-              {allResults.length > 0 && results.length === 0 && (
-                <EmptyState className={styles.emptyState} type="info">
+              {allResults.length > 0 && filteredResults.length === 0 && (
+                <EmptyState className={styles.emptyState} variant="info">
                   {translate('results.empty-state.no-filtered-results')}
                 </EmptyState>
               )}
 
-              {allResults.length > 0 && results.length > 0 && (
+              {allResults.length > 0 && filteredResults.length > 0 && (
                 <FixedSizeList
                   className={classNames(styles.list, {
                     [styles.outdated]: isOutdated,
                   })}
-                  height={height - RESULTS_HEADER_HEIGHT - RESULTS_INPUT_HEIGHT}
-                  innerRef={listRef}
-                  itemCount={results.length}
+                  direction={direction}
+                  height={height - RESULTS_HEADER_HEIGHT - RESULTS_INPUT_HEIGHT - 2 * BORDER_WIDTH}
+                  itemCount={filteredResults.length}
+                  itemData={itemData}
                   itemSize={RESULTS_ITEM_HEIGHT}
+                  ref={setListRef}
                   width={width}
                 >
                   {Result}

package/src/components/Results/SolveButton.tsx

@@ -1,7 +1,7 @@
 import { FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { Play } from 'icons';
+import { Search } from 'icons';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
@@ -13,9 +13,11 @@ import {
 
 import Button from '../Button';
 
-import styles from './Results.module.scss';
+interface Props {
+  className?: string;
+}
 
-const SolveButton: FunctionComponent = () => {
+const SolveButton: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isLoading = useTypedSelector(selectIsLoading);
@@ -23,17 +25,17 @@ const SolveButton: FunctionComponent = () => {
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const hasTiles = rack.some((tile) => tile !== null);
 
-  const handleRefresh = () => {
+  const handleClick = () => {
     dispatch(solveSlice.actions.submit());
   };
 
   return (
     <Button
-      className={styles.outdatedButton}
+      className={className}
       disabled={isLoading || !isOutdated || !hasTiles}
-      Icon={Play}
+      Icon={Search}
       type="submit"
-      onClick={handleRefresh}
+      onClick={handleClick}
     >
       {translate('results.solve')}
     </Button>

package/src/components/Results/{getColumns.ts → getLocaleColumns.ts}

@@ -3,7 +3,7 @@ import { ResultColumn } from 'types';
 import styles from './Results.module.scss';
 import { Column } from './types';
 
-const getColumns = (options: { consonants: boolean; vowels: boolean }): Column[] => {
+const getLocaleColumns = (options: { consonants: boolean; vowels: boolean }): Column[] => {
   const { consonants, vowels } = options;
   const columns: Column[] = [
     {
@@ -55,4 +55,4 @@ const getColumns = (options: { consonants: boolean; vowels: boolean }): Column[]
   return columns;
 };
 
-export default getColumns;
+export default getLocaleColumns;

package/src/components/Results/types.ts

@@ -1,3 +1,6 @@
+import { Result } from '@scrabble-solver/types';
+import { FocusEvent, MouseEvent } from 'react';
+
 import { ResultColumn, TranslationKey } from 'types';
 
 export interface Column {
@@ -5,3 +8,16 @@ export interface Column {
   id: ResultColumn;
   translationKey: TranslationKey;
 }
+
+export interface ResultCallbacks {
+  onBlur?: (result: Result, event: FocusEvent) => void;
+  onClick?: (result: Result, event: MouseEvent) => void;
+  onFocus?: (result: Result, event: FocusEvent) => void;
+  onMouseEnter?: (result: Result, event: MouseEvent) => void;
+  onMouseLeave?: (result: Result, event: MouseEvent) => void;
+}
+
+export interface ResultData extends ResultCallbacks {
+  highlightedIndex?: number;
+  results: Result[];
+}