@scrabble-solver/scrabble-solver 2.10.3 → 2.10.5

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,18 @@ 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}
+      variant="primary"
+      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[];
+}

package/src/components/Results/useColumns.ts

@@ -0,0 +1,44 @@
+import { useMediaQuery } from 'hooks';
+import { LOCALE_FEATURES } from 'i18n';
+import { selectLocale, useTypedSelector } from 'state';
+import { ResultColumn } from 'types';
+
+import getLocaleColumns from './getLocaleColumns';
+import { Column } from './types';
+
+const COLUMNS_XS = [ResultColumn.Word, ResultColumn.Points];
+
+const COLUMNS_S = [...COLUMNS_XS, ResultColumn.BlanksCount, ResultColumn.WordsCount];
+
+const COLUMNS_M = [...COLUMNS_XS];
+
+const COLUMNS_L = [...COLUMNS_XS];
+
+const useColumns = (): Column[] => {
+  const locale = useTypedSelector(selectLocale);
+  const localeColumns = getLocaleColumns(LOCALE_FEATURES[locale]);
+  const isLessThanXs = useMediaQuery('<xs');
+  const isLessThanS = useMediaQuery('<s');
+  const isLessThanM = useMediaQuery('<m');
+  const isLessThanL = useMediaQuery('<l');
+
+  if (isLessThanXs) {
+    return localeColumns.filter((column) => COLUMNS_XS.includes(column.id));
+  }
+
+  if (isLessThanS) {
+    return localeColumns.filter((column) => COLUMNS_S.includes(column.id));
+  }
+
+  if (isLessThanM) {
+    return localeColumns.filter((column) => COLUMNS_M.includes(column.id));
+  }
+
+  if (isLessThanL) {
+    return localeColumns.filter((column) => COLUMNS_L.includes(column.id));
+  }
+
+  return localeColumns;
+};
+
+export default useColumns;

package/src/components/ResultsInput/ResultsInput.module.scss

@@ -1,9 +1,7 @@
 @import 'styles/mixins';
 
 .resultsInput {
-  &:focus-within {
-    @include focus-effect;
-  }
+  @include focus-effect;
 }
 
 .input {

package/src/components/Sizer/Sizer.module.scss

@@ -0,0 +1,10 @@
+.sizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  visibility: hidden;
+}

package/src/components/Sizer/Sizer.tsx

@@ -0,0 +1,10 @@
+import classNames from 'classnames';
+import { forwardRef, HTMLProps } from 'react';
+
+import styles from './Sizer.module.scss';
+
+const Sizer = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div className={classNames(styles.sizer, className)} ref={ref} {...props} />
+));
+
+export default Sizer;

package/src/components/Sizer/index.ts

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

package/src/components/Solver/Solver.module.scss

@@ -1,46 +1,60 @@
 @import 'styles/mixins';
 
 .solver {
+  --spacing: var(--spacing--xl);
+
+  position: relative;
+  margin: 0 var(--spacing);
   display: flex;
   flex-direction: column;
-  height: 100%;
-}
 
-.contentWrapper {
-  $board-size: 15;
-  $tile-size-max: 60px;
-  $tile-border-size: 1px;
+  @include media('<xl') {
+    --spacing: var(--spacing--l);
+  }
 
-  flex: 1;
-  padding: 0 var(--spacing--xl);
-  max-height: $board-size * ($tile-size-max + $tile-border-size) + $tile-border-size;
+  @include media('<l', 'touch') {
+    margin-bottom: calc(3 * var(--spacing--l) + var(--button--icon--size));
+  }
+
+  @include media('<xs', 'touch') {
+    margin-bottom: calc(1 * var(--spacing--m) + 2 * var(--spacing--l) + var(--button--icon--size));
+  }
 }
 
-.content {
+.container {
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  gap: var(--spacing--xl);
+}
 
-  @include tablet {
-    gap: var(--spacing--l);
+.content {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--solver-column--width);
+  gap: var(--spacing);
+  margin: 0 auto;
+
+  @include media('<l') {
+    grid-template-columns: 1fr;
   }
 }
 
 .boardContainer {
-  display: flex;
   position: relative;
 }
 
-.sidebar {
+.board {
+  margin: 0 auto;
+}
+
+.column {
   display: flex;
   flex-direction: column;
-  flex: 0 0 var(--sidebar--width);
-  gap: var(--spacing--xl);
+  flex: 0 0 var(--solver-column--width);
+  gap: var(--spacing);
 
-  @include tablet {
-    gap: var(--spacing--l);
+  @include media('<l') {
+    display: none;
   }
 }
 
@@ -63,17 +77,24 @@
   position: relative;
 }
 
-.rackContainer {
-  position: relative;
-  z-index: 1;
+.bottomContainer {
   flex: 0 0 auto;
   display: flex;
   justify-content: center;
-  margin: var(--spacing--xl) var(--spacing--l);
+}
 
-  @include tablet {
-    margin: var(--spacing--l);
-  }
+.bottomContent {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing);
+  margin: var(--spacing) auto;
+  min-width: 0;
+}
+
+.rackContainer {
+  display: flex;
+  justify-content: center;
 }
 
 .rack {
@@ -83,3 +104,38 @@
 .submitInput {
   display: none;
 }
+
+.controls {
+  width: 100%;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  gap: var(--spacing--l);
+}
+
+.resultCandidatePicker {
+  flex: 1;
+}
+
+.apply {
+  flex: 0 0 auto;
+}
+
+.solve {
+  --spacing: var(--spacing--l);
+
+  position: fixed;
+  bottom: var(--spacing);
+
+  @include media('<xs') {
+    --spacing: var(--spacing--m);
+  }
+
+  [dir='ltr'] & {
+    right: var(--spacing);
+  }
+
+  [dir='rtl'] & {
+    left: var(--spacing);
+  }
+}