@scrabble-solver/scrabble-solver 2.10.3 → 2.10.5

package/src/components/Solver/Solver.tsx

@@ -1,56 +1,143 @@
+import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FormEvent, FunctionComponent } from 'react';
+import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
-import { useIsTablet } from 'hooks';
-import { getCellSize } from 'lib';
-import { COMPONENTS_SPACING, COMPONENTS_SPACING_MOBILE, DICTIONARY_HEIGHT } from 'parameters';
-import { selectConfig, solveSlice, useTypedSelector } from 'state';
+import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import {
+  BOARD_TILE_SIZE_MAX,
+  BOARD_TILE_SIZE_MIN,
+  BORDER_WIDTH,
+  COLUMN_MIN_HEIGHT,
+  COMPONENTS_SPACING,
+  COMPONENTS_SPACING_SMALL,
+  DICTIONARY_HEIGHT,
+  RACK_TILE_SIZE_MAX,
+} from 'parameters';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectConfig,
+  selectResultCandidate,
+  selectSolveError,
+  selectSortedFilteredResults,
+  selectSortedResults,
+  solveSlice,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Board from '../Board';
 import Dictionary from '../Dictionary';
 import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
+import ResultCandidatePicker from '../ResultCandidatePicker';
 import Results from '../Results';
 import Well from '../Well';
 
+import { ApplyButton, EmptyState, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
   className?: string;
+  height: number;
+  width: number;
+  onShowResults: () => void;
 }
 
-const Solver: FunctionComponent<Props> = ({ className }) => {
+// eslint-disable-next-line max-statements
+const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
-  const isTablet = useIsTablet();
-  const [boardRef, { height: boardHeight }] = useMeasure<HTMLDivElement>();
-  const [contentRef, { height: contentHeight, width: contentWidth }] = useMeasure<HTMLDivElement>();
-  const [resultsContainerRef, { height: resultsContainerHeight, width: resultsContainerWidth }] =
-    useMeasure<HTMLDivElement>();
+  const translate = useTranslate();
+  const isTouchDevice = useIsTouchDevice();
+  const [bottomContainerRef, { height: bottomContainerHeight }] = useMeasure<HTMLDivElement>();
+  const [resultsContainerRef, { width: resultsContainerWidth }] = useMeasure<HTMLDivElement>();
+  const isLessThanXl = useMediaQuery('<xl');
+  const isLessThanL = useMediaQuery('<l');
+  const componentsSpacing = isLessThanXl ? COMPONENTS_SPACING_SMALL : COMPONENTS_SPACING;
+  const maxBoardWidth = width - resultsContainerWidth - (isLessThanL ? 0 : componentsSpacing) - 2 * componentsSpacing;
+  const maxBoardHeight = Math.max(height - bottomContainerHeight, isLessThanL ? 0 : COLUMN_MIN_HEIGHT);
   const config = useTypedSelector(selectConfig);
-  const cellSize = getCellSize(config, contentWidth - resultsContainerWidth, contentHeight);
-  const componentsSpacing = isTablet ? COMPONENTS_SPACING_MOBILE : COMPONENTS_SPACING;
-  const resultsHeight = boardHeight - DICTIONARY_HEIGHT - componentsSpacing;
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const allResults = useTypedSelector(selectSortedResults);
+  const error = useTypedSelector(selectSolveError);
+  const results = useTypedSelector(selectSortedFilteredResults);
+  const [bestResult] = results || [];
+  const cellWidth = (maxBoardWidth - (config.boardWidth + 1) * BORDER_WIDTH) / config.boardWidth;
+  const cellHeight = (maxBoardHeight - (config.boardHeight + 1) * BORDER_WIDTH) / config.boardHeight;
+  const cellSize = Math.min(cellWidth, cellHeight);
+  const cellSizeSafe = Math.min(Math.max(cellSize, BOARD_TILE_SIZE_MIN), BOARD_TILE_SIZE_MAX);
+  const tileSize = Math.min((maxBoardWidth - 2 * BORDER_WIDTH) / config.maximumCharactersCount, RACK_TILE_SIZE_MAX);
+  const boardSize = (cellSizeSafe + BORDER_WIDTH) * Math.max(config.boardWidth, config.boardHeight) + BORDER_WIDTH;
+  const resultsHeight = boardSize - DICTIONARY_HEIGHT - componentsSpacing - 4 * BORDER_WIDTH;
+  const maxControlsWidth = tileSize * config.maximumCharactersCount + 2 * BORDER_WIDTH;
+  const touchCallbacks = useMemo(
+    () => ({
+      onClick: (result: Result) => {
+        const isSelected = result === resultCandidate;
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+        if (isSelected) {
+          dispatch(resultsSlice.actions.applyResult(result));
+        } else {
+          dispatch(resultsSlice.actions.changeResultCandidate(result));
+        }
+      },
+    }),
+    [dispatch, resultCandidate],
+  );
+  const mouseCallbacks = useMemo(
+    () => ({
+      onBlur: () => {
+        dispatch(resultsSlice.actions.changeResultCandidate(null));
+      },
+      onClick: (result: Result) => {
+        dispatch(resultsSlice.actions.applyResult(result));
+      },
+      onFocus: (result: Result) => {
+        dispatch(resultsSlice.actions.changeResultCandidate(result));
+      },
+      onMouseEnter: (result: Result) => {
+        dispatch(resultsSlice.actions.changeResultCandidate(result));
+      },
+      onMouseLeave: () => {
+        dispatch(resultsSlice.actions.changeResultCandidate(null));
+      },
+    }),
+    [dispatch],
+  );
+  const callbacks = isTouchDevice ? touchCallbacks : mouseCallbacks;
+
+  const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
+
+    if (isLessThanL) {
+      onShowResults();
+    }
+
     dispatch(solveSlice.actions.submit());
   };
 
+  useEffect(() => {
+    if (bestResult) {
+      dispatch(resultsSlice.actions.changeResultCandidate(bestResult));
+    }
+  }, [bestResult, dispatch]);
+
   return (
     <div className={classNames(styles.solver, className)}>
-      <div className={styles.contentWrapper}>
-        <div className={styles.content} ref={contentRef}>
+      <div className={styles.container}>
+        <div className={styles.content}>
           <form className={styles.boardContainer} onSubmit={handleSubmit}>
-            {contentWidth > 0 && <Board cellSize={cellSize} innerRef={boardRef} />}
+            <Board cellSize={cellSizeSafe} className={styles.board} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>
 
-          <div className={styles.sidebar} style={{ height: boardHeight + 1 }}>
+          <div className={styles.column}>
             <Well className={styles.resultsContainer} ref={resultsContainerRef}>
-              {resultsContainerWidth > 0 && resultsContainerHeight > 0 && (
-                <Results height={resultsHeight} width={resultsContainerWidth} />
+              {resultsContainerWidth > 0 && resultsHeight > 0 && (
+                <Results callbacks={callbacks} height={resultsHeight} width={resultsContainerWidth} />
               )}
             </Well>
 
@@ -64,10 +151,56 @@ const Solver: FunctionComponent<Props> = ({ className }) => {
         </div>
       </div>
 
-      <form className={styles.rackContainer} onSubmit={handleSubmit}>
-        <Rack className={styles.rack} />
-        <input className={styles.submitInput} tabIndex={-1} type="submit" />
-      </form>
+      <div className={styles.bottomContainer} ref={bottomContainerRef}>
+        <div className={styles.bottomContent}>
+          <form className={styles.rackContainer} onSubmit={handleSubmit}>
+            <Rack className={styles.rack} tileSize={tileSize} />
+            <input className={styles.submitInput} tabIndex={-1} type="submit" />
+          </form>
+
+          {isLessThanL && (
+            <div className={styles.controls} style={{ maxWidth: maxControlsWidth }}>
+              {typeof error !== 'undefined' && (
+                <EmptyState variant="error" onClick={onShowResults}>
+                  {error.message}
+                </EmptyState>
+              )}
+
+              {typeof error === 'undefined' && typeof results === 'undefined' && (
+                <EmptyState variant="info" onClick={onShowResults}>
+                  {translate('results.empty-state.uninitialized')}
+                </EmptyState>
+              )}
+
+              {typeof error === 'undefined' && typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
+                <>
+                  {(isOutdated || !resultCandidate) && (
+                    <EmptyState variant="info" onClick={onShowResults}>
+                      {translate('results.empty-state.outdated')}
+                    </EmptyState>
+                  )}
+
+                  {!isOutdated && allResults.length === 0 && (
+                    <EmptyState variant="warning" onClick={onShowResults}>
+                      {translate('results.empty-state.no-results')}
+                    </EmptyState>
+                  )}
+
+                  {!isOutdated && allResults.length > 0 && resultCandidate && (
+                    <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
+                  )}
+                </>
+              )}
+
+              {allResults && allResults.length > 0 && !isOutdated && resultCandidate && (
+                <ApplyButton className={classNames(styles.submit, styles.apply)} />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

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

@@ -0,0 +1,5 @@
+@import 'styles/mixins';
+
+.icon {
+  transform: scale(1.5);
+}

package/src/components/Solver/components/ApplyButton/ApplyButton.tsx

@@ -0,0 +1,38 @@
+import { FunctionComponent } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Check } from 'icons';
+import { resultsSlice, selectResultCandidate, useTypedSelector } from 'state';
+
+import Button from '../../../Button';
+
+import styles from './ApplyButton.module.scss';
+
+interface Props {
+  className?: string;
+}
+
+const ApplyButton: FunctionComponent<Props> = ({ className }) => {
+  const dispatch = useDispatch();
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  const handleClick = () => {
+    if (resultCandidate) {
+      dispatch(resultsSlice.actions.applyResult(resultCandidate));
+    }
+  };
+
+  return (
+    <Button
+      className={className}
+      disabled={!resultCandidate}
+      Icon={Check}
+      iconClassName={styles.icon}
+      type="submit"
+      variant="primary"
+      onClick={handleClick}
+    />
+  );
+};
+
+export default ApplyButton;

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

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

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

@@ -0,0 +1,59 @@
+.emptyState {
+  display: flex;
+  min-width: 0;
+  width: 100%;
+  border: var(--border);
+  border-radius: var(--border--radius);
+  background-color: white;
+  box-shadow: var(--box-shadow);
+  cursor: pointer;
+  text-align: center;
+}
+
+.iconContainer {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing--m);
+  color: var(--color--foreground--secondary);
+
+  [dir='ltr'] & {
+    border-top-left-radius: var(--border--radius);
+    border-bottom-left-radius: var(--border--radius);
+    border-right: var(--border);
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: var(--border--radius);
+    border-bottom-right-radius: var(--border--radius);
+    border-left: var(--border);
+  }
+
+  .error & {
+    background-color: var(--color--red--light);
+    color: var(--color--error);
+  }
+
+  .warning & {
+    background-color: var(--color--yellow--light);
+    color: var(--color--warning);
+  }
+
+  .info & {
+    background-color: var(--color--blue--light);
+    color: var(--color--info);
+  }
+}
+
+.icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+}
+
+.content {
+  flex: 1;
+  padding: var(--spacing--m) var(--spacing--l);
+}

package/src/components/Solver/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,41 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps, ReactNode, SVGAttributes } from 'react';
+
+import { CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
+
+import styles from './EmptyState.module.scss';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  children: ReactNode;
+  className?: string;
+  variant: 'error' | 'info' | 'warning';
+}
+
+const ICON_PER_TYPE: Record<Props['variant'], FunctionComponent<SVGAttributes<SVGElement>>> = {
+  error: CrossCircleFill,
+  info: InfoCircleFill,
+  warning: ExclamationTriangleFill,
+};
+
+const EmptyState: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
+  const Icon = ICON_PER_TYPE[variant];
+
+  return (
+    <div
+      className={classNames(styles.emptyState, className, {
+        [styles.error]: variant === 'error',
+        [styles.info]: variant === 'info',
+        [styles.warning]: variant === 'warning',
+      })}
+      {...props}
+    >
+      <div className={styles.iconContainer}>
+        <Icon className={styles.icon} />
+      </div>
+
+      <div className={styles.content}>{children}</div>
+    </div>
+  );
+};
+
+export default EmptyState;

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

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

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

@@ -0,0 +1,4 @@
+.solveButton {
+  padding: var(--spacing--l);
+  border-radius: 50%;
+}

package/src/components/Solver/components/SolveButton/SolveButton.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+import { FunctionComponent, MouseEventHandler } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { Search } from 'icons';
+import { noop } from 'lib';
+import { selectAreResultsOutdated, selectIsLoading, selectRack, solveSlice, useTypedSelector } from 'state';
+
+import Button from '../../../Button';
+
+import styles from './SolveButton.module.scss';
+
+interface Props {
+  className?: string;
+  onClick?: MouseEventHandler;
+}
+
+const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
+  const dispatch = useDispatch();
+  const isLoading = useTypedSelector(selectIsLoading);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const rack = useTypedSelector(selectRack);
+  const hasTiles = rack.some((tile) => tile !== null);
+
+  const handleClick: MouseEventHandler = (event) => {
+    dispatch(solveSlice.actions.submit());
+    onClick(event);
+  };
+
+  return (
+    <Button
+      className={classNames(styles.solveButton, className)}
+      disabled={isLoading || !isOutdated || !hasTiles}
+      Icon={Search}
+      iconClassName={styles.icon}
+      type="submit"
+      variant="primary"
+      onClick={handleClick}
+    />
+  );
+};
+
+export default SolveButton;

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

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

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

@@ -0,0 +1,3 @@
+export { default as ApplyButton } from './ApplyButton';
+export { default as EmptyState } from './EmptyState';
+export { default as SolveButton } from './SolveButton';

package/src/components/{Screen/Screen.module.scss → SplashScreen/SplashScreen.module.scss}

@@ -1,6 +1,4 @@
-$z-index: 100;
-
-.screen {
+.splashScreen {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -8,15 +6,7 @@ $z-index: 100;
   right: 0;
   background-color: var(--color--background);
   opacity: 1;
-  z-index: $z-index;
-}
-
-.closeButton {
-  position: fixed;
-  top: 0;
-  right: 0;
-  z-index: $z-index + 1;
-  margin: var(--spacing--l);
+  z-index: var(--z-index--modal);
 }
 
 .content {

package/src/components/{Screen/Screen.tsx → SplashScreen/SplashScreen.tsx}

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { AnimationEventHandler, FunctionComponent, ReactNode } from 'react';
 
-import styles from './Screen.module.scss';
+import styles from './SplashScreen.module.scss';
 
 interface Props {
   children?: ReactNode;
@@ -10,10 +10,10 @@ interface Props {
   onAnimationEnd?: AnimationEventHandler<HTMLDivElement>;
 }
 
-const Screen: FunctionComponent<Props> = ({ children, className, contentClassName, onAnimationEnd }) => (
-  <div className={classNames(styles.screen, className)} onAnimationEnd={onAnimationEnd}>
+const SplashScreen: FunctionComponent<Props> = ({ children, className, contentClassName, onAnimationEnd }) => (
+  <div className={classNames(styles.splashScreen, className)} onAnimationEnd={onAnimationEnd}>
     <div className={classNames(styles.content, contentClassName)}>{children}</div>
   </div>
 );
 
-export default Screen;
+export default SplashScreen;

package/src/components/SplashScreen/index.ts

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

package/src/components/SquareButton/SquareButton.module.scss

@@ -21,7 +21,7 @@
 
   &[disabled] {
     pointer-events: none;
-    opacity: 0.25;
+    opacity: var(--opacity--disabled);
   }
 }
 
@@ -32,8 +32,8 @@
 }
 
 .icon {
-  width: var(--square-button-size);
-  height: var(--square-button-size);
+  width: var(--square-button--size);
+  height: var(--square-button--size);
   pointer-events: none;
   color: inherit;
   transition: var(--transition);

package/src/components/SquareButton/SquareButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, ReactNode, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 
@@ -9,7 +9,7 @@ import styles from './SquareButton.module.scss';
 interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   children?: never;
   Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  tooltip: string;
+  tooltip: ReactNode;
   onClick: MouseEventHandler<HTMLButtonElement>;
 }
 

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

@@ -4,43 +4,28 @@
   --background-color: transparent;
 
   position: relative;
-  background-color: var(--background-color);
   transition: var(--transition);
 
-  &.raised {
-    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
-  }
-
   &.points1 {
     --background-color: var(--color--yellow);
-
-    background-color: var(--background-color);
   }
 
   &.points2 {
     --background-color: var(--color--green);
-
-    background-color: var(--background-color);
   }
 
   &.points3,
   &.points4 {
     --background-color: var(--color--blue);
-
-    background-color: var(--background-color);
   }
 
   &.points5 {
     --background-color: var(--color--red);
-
-    background-color: var(--background-color);
   }
 
   &.blank {
     --background-color: white;
 
-    background-color: var(--background-color);
-
     .character {
       color: black;
     }
@@ -49,7 +34,6 @@
   &.highlighted {
     --background-color: var(--color--primary);
 
-    background-color: var(--background-color);
     color: white;
 
     .character {
@@ -64,34 +48,55 @@
   &.invalid {
     --background-color: var(--color--red--light);
 
-    background-color: var(--background-color);
     color: var(--color--error);
   }
+
+  &:not(.disabled) {
+    .input::selection {
+      --background--color: transparent;
+    }
+  }
 }
 
+.input,
 .character {
-  width: 100%;
-  height: 100%;
   padding: 0;
-  box-sizing: border-box;
-  background-color: transparent;
-  color: inherit;
-  border: none;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   caret-color: transparent;
+  box-sizing: border-box;
+}
 
-  &::placeholder {
-    color: var(--color--inactive);
-  }
+.input {
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  color: transparent;
+  border: none;
+  font-size: 16px; // prevent iOS from automatically zooming in on focus
+}
+
+.character {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--background-color);
+  transition: var(--transition);
+  pointer-events: none;
+  user-select: none;
 
-  &::selection {
-    background: transparent;
+  .empty & {
+    color: var(--color--inactive);
   }
 
-  &:disabled {
-    color: inherit;
+  .raised & {
+    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
   }
 }
 
@@ -104,6 +109,10 @@
   pointer-events: none;
   letter-spacing: -1px;
 
+  @include media('<xs') {
+    display: none;
+  }
+
   [dir='ltr'] & {
     bottom: 1%;
     right: 9%;

package/src/components/Tile/Tile.tsx

@@ -55,7 +55,7 @@ const Tile: FunctionComponent<Props> = ({
   const locale = useTypedSelector(selectLocale);
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
-  const inputStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
+  const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
   const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
   const isEmpty = !character || character === EMPTY_CELL;
@@ -78,11 +78,11 @@ const Tile: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
+      characterStyle={characterStyle}
       className={className}
       disabled={disabled}
       highlighted={highlighted}
       inputRef={inputRef}
-      inputStyle={inputStyle}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}