@scrabble-solver/scrabble-solver 2.10.2 → 2.10.4

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);
+  }
+}

package/src/components/Solver/Solver.tsx

@@ -1,56 +1,139 @@
+import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FormEvent, FunctionComponent } from 'react';
+import { FormEvent, FunctionComponent, 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;
+
+        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: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
+    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 +147,60 @@ 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 && (
+                    <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>
+                      )}
+
+                      {allResults.length > 0 && resultCandidate && (
+                        <ResultCandidatePicker className={styles.resultCandidatePicker} onClick={onShowResults} />
+                      )}
+                    </>
+                  )}
+                </>
+              )}
+
+              {allResults && allResults.length > 0 && !isOutdated && (
+                <ApplyButton className={classNames(styles.submit, styles.apply)} />
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {isTouchDevice && <SolveButton className={styles.solve} onClick={onShowResults} />}
     </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,37 @@
+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"
+      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,42 @@
+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"
+      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';