@scrabble-solver/scrabble-solver 2.10.11 → 2.11.1

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

@@ -3,6 +3,7 @@
 .rack {
   display: flex;
   box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 }
 
 .tile {
@@ -15,3 +16,27 @@
     z-index: 2;
   }
 }
+
+.sharpLeft {
+  [dir='ltr'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.sharpRight {
+  [dir='ltr'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/src/components/Rack/Rack.tsx

@@ -8,7 +8,6 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
-  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -99,9 +98,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          changeActiveIndex(1);
-        } else if (event.currentTarget.value === event.key) {
+        if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();
@@ -118,6 +115,10 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         <RackTile
           activeIndexRef={activeIndexRef}
           character={character}
+          className={classNames({
+            [styles.sharpLeft]: index !== 0,
+            [styles.sharpRight]: index !== tiles.length - 1,
+          })}
           index={index}
           inputRef={tilesRefs[index]}
           key={index}

package/src/components/Rack/RackTile.tsx

@@ -1,5 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
+import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
@@ -12,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -30,6 +31,7 @@ import styles from './Rack.module.scss';
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
   character: string | null;
+  className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
   size: number;
@@ -41,6 +43,7 @@ interface Props {
 const RackTile: FunctionComponent<Props> = ({
   activeIndexRef,
   character,
+  className,
   index,
   inputRef,
   size,
@@ -77,17 +80,7 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          event.preventDefault();
-          event.stopPropagation();
-          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
-        }
-
-        onKeyDown(event);
-      },
+      onKeyDown,
     });
   }, [index, onKeyDown]);
 
@@ -97,7 +90,7 @@ const RackTile: FunctionComponent<Props> = ({
         index: (index + 1).toLocaleString(locale),
       })}
       autoFocus={index === 0}
-      className={styles.tile}
+      className={classNames(styles.tile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}

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

@@ -9,6 +9,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   height: 100%;
   background: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--title);
 }
@@ -21,8 +22,6 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   flex: 1;
   position: relative;
   height: 100%;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 .listContainer {
@@ -31,6 +30,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 }
 
 .list {
+  @include scrollbars;
+
+  scrollbar-gutter: stable;
   transition: var(--transition);
 
   &.outdated {
@@ -45,6 +47,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   align-items: center;
   justify-content: space-between;
   font-weight: 700;
+  border-bottom: var(--border);
+  border-top-left-radius: inherit;
+  border-top-right-radius: inherit;
 }
 
 .headerButton {
@@ -61,6 +66,26 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
     background-color: var(--color--primary);
     color: var(--color--primary--opposite);
   }
+
+  &:first-child {
+    [dir='ltr'] & {
+      border-top-left-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: inherit;
+    }
+  }
+
+  &:last-child {
+    [dir='ltr'] & {
+      border-top-right-radius: inherit;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: inherit;
+    }
+  }
 }
 
 .headerButtonLabel {
@@ -173,3 +198,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   width: $size;
   height: $size;
 }
+
+.input {
+  border-top: var(--border);
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
+}

package/src/components/Results/Results.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import { FunctionComponent, useEffect, useMemo, useState } from 'react';
-import { useMeasure } from 'react-use';
+import { useLatest, useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
 
 import { LOCALE_FEATURES } from 'i18n';
@@ -30,10 +30,11 @@ import useColumns from './useColumns';
 
 interface Props {
   callbacks: ResultCallbacks;
+  className?: string;
   highlightedIndex?: number;
 }
 
-const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
+const Results: FunctionComponent<Props> = ({ callbacks, className, highlightedIndex }) => {
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const { direction } = LOCALE_FEATURES[locale];
@@ -48,23 +49,26 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
   const [listRef, setListRef] = useState<FixedSizeList<ResultData> | null>(null);
   const columns = useColumns();
   const scrollToIndex = typeof highlightedIndex === 'number' ? highlightedIndex : 0;
+  const scrollToIndexRef = useLatest(scrollToIndex);
+  const hasResults =
+    typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined';
 
   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');
+        listRef.scrollToItem(scrollToIndexRef.current, 'center');
       }
     }, 0);
 
     return () => {
       globalThis.clearTimeout(timeout);
     };
-  }, [listRef, scrollToIndex]);
+  }, [allResults, listRef, scrollToIndexRef]);
 
   return (
-    <div className={styles.results}>
+    <div className={classNames(styles.results, className)}>
       <div className={styles.header}>
         {columns.map((column) => (
           <HeaderButton column={column} key={column.id} />
@@ -88,9 +92,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
           </EmptyState>
         )}
 
-        {typeof error === 'undefined' &&
-          typeof filteredResults !== 'undefined' &&
-          typeof allResults !== 'undefined' && (
+        {hasResults && (
           <>
             {isOutdated && (
               <EmptyState className={styles.emptyState} variant="info">
@@ -138,9 +140,7 @@ const Results: FunctionComponent<Props> = ({ callbacks, highlightedIndex }) => {
         )}
       </div>
 
-      {typeof error === 'undefined' && typeof filteredResults !== 'undefined' && typeof allResults !== 'undefined' && (
-        <>{allResults.length > 0 && !isOutdated && <ResultsInput />}</>
-      )}
+      {hasResults && allResults.length > 0 && !isOutdated && <ResultsInput className={styles.input} />}
 
       {isLoading && <Loading />}
     </div>

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

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

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

@@ -70,16 +70,21 @@
   flex-direction: column;
   background-color: var(--color--background--element);
   border: var(--border);
+  border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
 }
 
 .dictionary {
   flex: 1;
   border-bottom: var(--border);
+  border-top-left-radius: var(--border--radius);
+  border-top-right-radius: var(--border--radius);
 }
 
 .dictionaryInput {
   flex: 0 0 auto;
+  border-bottom-left-radius: var(--border--radius);
+  border-bottom-right-radius: var(--border--radius);
 }
 
 .bottomContainer {
@@ -97,10 +102,6 @@
   min-width: 0;
 }
 
-.rack {
-  border: var(--border);
-}
-
 .controls {
   width: 100%;
 }
@@ -114,6 +115,7 @@
 
   position: fixed;
   bottom: var(--spacing);
+  z-index: 1;
 
   @include media('<xs') {
     --spacing: var(--spacing--m);

package/src/components/Solver/Solver.tsx

@@ -4,15 +4,8 @@ import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
-import {
-  BOARD_TILE_SIZE_MAX,
-  BOARD_TILE_SIZE_MIN,
-  BORDER_WIDTH,
-  COMPONENTS_SPACING,
-  COMPONENTS_SPACING_SMALL,
-  RACK_TILE_SIZE_MAX,
-} from 'parameters';
+import { useAppLayout, useIsTouchDevice } from 'hooks';
+import { BOARD_TILE_SIZE_MAX, BOARD_TILE_SIZE_MIN, BORDER_WIDTH, RACK_TILE_SIZE_MAX } from 'parameters';
 import {
   resultsSlice,
   selectAreResultsOutdated,
@@ -26,13 +19,14 @@ import {
   useTypedSelector,
 } from 'state';
 
+import Alert from '../Alert';
 import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { EmptyState, ResultCandidatePicker, SolveButton } from './components';
+import { FloatingSolveButton, ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -47,14 +41,12 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
+  const { componentsSpacing, isBoardFullWidth, showColumn, showCompactControls, showFloatingSolveButton } =
+    useAppLayout();
   const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
   const [columnRef, { width: columnWidth }] = useMeasure<HTMLDivElement>();
-  const isLessThanXl = useMediaQuery('<xl');
-  const isLessThanL = useMediaQuery('<l');
-  const isLessThanM = useMediaQuery('<m');
-  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
-  const maxBoardWidth = width - columnWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
-  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanM ? Number.POSITIVE_INFINITY : 0);
+  const maxBoardWidth = width - columnWidth - (showColumn ? componentsSpacing : 0) - 2 * componentsSpacing;
+  const maxBoardHeight = isBoardFullWidth ? Number.POSITIVE_INFINITY : Math.max(height - bottomContainerHeight, 0);
   const config = useTypedSelector(selectConfig);
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
@@ -107,18 +99,14 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
 
-    if (isLessThanL) {
-      onShowResults();
-    }
-
     dispatch(solveSlice.actions.submit());
   };
 
   useEffect(() => {
-    if (isLessThanL && bestResult && !isOutdated) {
+    if (showCompactControls && bestResult && !isOutdated) {
       dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
     }
-  }, [bestResult, dispatch, isLessThanL, isOutdated]);
+  }, [bestResult, dispatch, showCompactControls, isOutdated]);
 
   return (
     <div className={classNames(styles.solver, className)}>
@@ -147,27 +135,27 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          {isLessThanL && (
+          {showCompactControls && (
             <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
               <ResultCandidatePicker onResultClick={onShowResults} />
 
               {error && (
-                <EmptyState className={styles.emptyState} variant="error">
+                <Alert className={styles.emptyState} variant="error">
                   {error.message}
-                </EmptyState>
+                </Alert>
               )}
 
               {allResults && allResults.length === 0 && !isOutdated && (
-                <EmptyState className={styles.emptyState} variant="warning">
+                <Alert className={styles.emptyState} variant="warning">
                   {translate('results.empty-state.no-results')}
-                </EmptyState>
+                </Alert>
               )}
             </div>
           )}
         </div>
       </div>
 
-      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
+      {showFloatingSolveButton && <FloatingSolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

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

@@ -0,0 +1,7 @@
+@import 'styles/animations';
+
+.floatingSolveButton {
+  padding: var(--spacing--l);
+  border-radius: 50%;
+  box-shadow: var(--box-shadow) !important;
+}

package/src/components/Solver/components/{SolveButton/SolveButton.tsx → FloatingSolveButton/FloatingSolveButton.tsx}

@@ -14,15 +14,16 @@ import {
 } from 'state';
 
 import Button from '../../../Button';
+import Spinner from '../../../Spinner';
 
-import styles from './SolveButton.module.scss';
+import styles from './FloatingSolveButton.module.scss';
 
 interface Props {
   className?: string;
   onClick?: MouseEventHandler;
 }
 
-const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
+const FloatingSolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isLoading = useTypedSelector(selectIsLoading);
@@ -38,10 +39,9 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
   return (
     <Button
       aria-label={translate('results.solve')}
-      className={classNames(styles.solveButton, className)}
+      className={classNames(styles.floatingSolveButton, className)}
       disabled={isLoading || !isOutdated || !hasTiles}
-      Icon={Search}
-      iconClassName={styles.icon}
+      Icon={isLoading ? Spinner : Search}
       tooltip={translate('results.solve')}
       type="submit"
       variant="primary"
@@ -50,4 +50,4 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
   );
 };
 
-export default SolveButton;
+export default FloatingSolveButton;

package/src/components/Solver/components/FloatingSolveButton/index.ts

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

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

@@ -1,6 +1,7 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  position: relative;
   display: flex;
   gap: var(--spacing--l);
 
@@ -137,14 +138,28 @@
   }
 }
 
-.icon {
-  $size: 20px;
+.spinnerContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
-  width: $size;
-  height: $size;
+.loading,
+.icon {
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
   color: var(--color--inactive);
 }
 
+.loading {
+  border-color: var(--color--inactive);
+}
+
 .insert {
   flex: 0 0 auto;
 }

package/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -2,10 +2,12 @@ import classNames from 'classnames';
 import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'hooks';
 import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
 import {
   resultsSlice,
   selectAreResultsOutdated,
+  selectIsLoading,
   selectLocale,
   selectResultCandidate,
   selectSortedResults,
@@ -14,6 +16,7 @@ import {
 } from 'state';
 
 import Button from '../../../Button';
+import Spinner from '../../../Spinner';
 import InsertButton from '../InsertButton';
 
 import styles from './ResultCandidatePicker.module.scss';
@@ -26,6 +29,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const sortedResults = useTypedSelector(selectSortedResults);
   const results = sortedResults || [];
@@ -35,6 +39,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const isPreviousDisabled = index <= 0 || disabled;
   const isNextDisabled = index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
+  const { showFloatingSolveButton } = useAppLayout();
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -87,7 +92,14 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
         {!resultCandidate && <div className={styles.word}> </div>}
 
         <div className={styles.iconContainer}>
-          <ChevronDown className={styles.icon} />
+          {showFloatingSolveButton && <ChevronDown className={styles.icon} />}
+
+          {!showFloatingSolveButton && (
+            <>
+              {isLoading && <Spinner className={styles.loading} />}
+              {!isLoading && <ChevronDown className={styles.icon} />}
+            </>
+          )}
         </div>
       </button>
 

package/src/components/Solver/components/index.ts

@@ -1,4 +1,3 @@
-export { default as EmptyState } from './EmptyState';
+export { default as FloatingSolveButton } from './FloatingSolveButton';
 export { default as InsertButton } from './InsertButton';
 export { default as ResultCandidatePicker } from './ResultCandidatePicker';
-export { default as SolveButton } from './SolveButton';

package/src/components/Spinner/Spinner.module.scss

@@ -0,0 +1,11 @@
+@import 'styles/animations';
+
+.spinner {
+  width: var(--button--icon--size);
+  height: var(--button--icon--size);
+  border: var(--border);
+  border-width: 2px;
+  border-radius: 50%;
+  border-right-color: transparent !important;
+  animation: 750ms linear infinite rotate;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,19 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { useTranslate } from 'state';
+
+import styles from './Spinner.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const Spinner: FunctionComponent<Props> = ({ className }) => {
+  const translate = useTranslate();
+  const translation = translate('common.loading');
+
+  return <div aria-label={translation} className={classNames(styles.spinner, className)} role="status" />;
+};
+
+export default Spinner;

package/src/components/Spinner/index.ts

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

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

@@ -5,6 +5,7 @@
 
   position: relative;
   transition: var(--transition);
+  border-radius: var(--border--radius);
 
   &.points1 {
     --background-color: var(--color--yellow);
@@ -85,6 +86,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--background-color);
+  border-radius: inherit;
   transition: var(--transition);
   pointer-events: none;
   user-select: none;
@@ -94,10 +96,18 @@
   }
 
   .raised & {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+    --shadow--size: 2px;
+    --shadow--blur: 2px;
+    --shadow--spread: -1px;
+    --shadow--color: rgba(34, 34, 34, 0.8);
+
+    box-shadow: inset calc(-1 * var(--shadow--size)) calc(-1 * var(--shadow--size)) var(--shadow--blur)
+      var(--shadow--spread) var(--shadow--color);
 
     @include media('<xs') {
-      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+      --shadow--size: 1px;
+      --shadow--spread: 0;
+      --shadow--blur: 1px;
     }
   }
 }
@@ -146,10 +156,12 @@
   [dir='ltr'] & {
     top: 0;
     right: 0;
+    border-top-right-radius: inherit;
   }
 
   [dir='rtl'] & {
     bottom: 0;
     right: 0;
+    border-bottom-right-radius: inherit;
   }
 }