scrabble-solver 2.10.4 → 2.10.6

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -1,6 +1,6 @@
 import { Result } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FormEvent, FunctionComponent, useEffect, useMemo } from 'react';
+import { FunctionComponent, SyntheticEvent, useEffect, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { useMeasure } from 'react-use';
 
@@ -17,14 +17,10 @@ import {
 } from 'parameters';
 import {
   resultsSlice,
-  selectAreResultsOutdated,
   selectConfig,
   selectResultCandidate,
-  selectSolveError,
   selectSortedFilteredResults,
-  selectSortedResults,
   solveSlice,
-  useTranslate,
   useTypedSelector,
 } from 'state';
 
@@ -32,11 +28,10 @@ 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 { MobileControls, SolveButton } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -49,20 +44,21 @@ interface Props {
 // eslint-disable-next-line max-statements
 const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResults }) => {
   const dispatch = useDispatch();
-  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 isLessThanM = useMediaQuery('<m');
   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 maxBoardHeight = Math.max(
+    height - bottomContainerHeight,
+    isLessThanL ? 0 : COLUMN_MIN_HEIGHT,
+    isLessThanM ? Number.POSITIVE_INFINITY : 0,
+  );
   const config = useTypedSelector(selectConfig);
   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;
@@ -109,9 +105,13 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
   );
   const callbacks = isTouchDevice ? touchCallbacks : mouseCallbacks;
 
-  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+  const handleSubmit = (event: SyntheticEvent) => {
     event.preventDefault();
-    onShowResults();
+
+    if (isLessThanL) {
+      onShowResults();
+    }
+
     dispatch(solveSlice.actions.submit());
   };
 
@@ -155,52 +155,16 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
           </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>
+            <MobileControls
+              className={styles.controls}
+              style={{ maxWidth: maxControlsWidth }}
+              onShowResults={onShowResults}
+            />
           )}
         </div>
       </div>
 
-      {isTouchDevice && <SolveButton className={styles.solve} onClick={onShowResults} />}
+      {isTouchDevice && <SolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

package/packages/scrabble-solver/src/components/Solver/components/ApplyButton/ApplyButton.tsx

@@ -29,6 +29,7 @@ const ApplyButton: FunctionComponent<Props> = ({ className }) => {
       Icon={Check}
       iconClassName={styles.icon}
       type="submit"
+      variant="primary"
       onClick={handleClick}
     />
   );

package/packages/scrabble-solver/src/components/Solver/components/MobileControls/MobileControls.tsx

@@ -0,0 +1,62 @@
+import { FunctionComponent, HTMLProps } from 'react';
+
+import {
+  selectAreResultsOutdated,
+  selectResultCandidate,
+  selectSolveError,
+  selectSortedResults,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+
+import EmptyState from '../EmptyState';
+import ResultCandidatePicker from '../ResultCandidatePicker';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  onShowResults: () => void;
+}
+
+// eslint-disable-next-line max-statements
+const MobileControls: FunctionComponent<Props> = ({ onShowResults, ...props }) => {
+  const translate = useTranslate();
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const allResults = useTypedSelector(selectSortedResults);
+  const error = useTypedSelector(selectSolveError);
+
+  return (
+    <div {...props}>
+      {typeof error !== 'undefined' && (
+        <EmptyState variant="error" onClick={onShowResults}>
+          {error.message}
+        </EmptyState>
+      )}
+
+      {typeof error === 'undefined' && typeof allResults === 'undefined' && (
+        <EmptyState variant="info" onClick={onShowResults}>
+          {translate('results.empty-state.uninitialized')}
+        </EmptyState>
+      )}
+
+      {typeof error === '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 onClick={onShowResults} />}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default MobileControls;

package/packages/scrabble-solver/src/components/Solver/components/MobileControls/index.ts

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

package/packages/scrabble-solver/src/components/{ResultCandidatePicker → Solver/components/ResultCandidatePicker}/ResultCandidatePicker.module.scss

@@ -1,9 +1,51 @@
 @import 'styles/mixins';
 
 .resultCandidatePicker {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing--l);
+}
+
+.buttons {
+  flex: 0 0 auto;
+  display: flex;
+  border-radius: var(--border--radius);
+  box-shadow: var(--box-shadow);
+
+  @include media('<xs') {
+    display: none;
+  }
+}
+
+.button {
+  padding: var(--spacing--m);
+  box-shadow: none;
+
+  &:focus-within {
+    z-index: 1;
+  }
+
+  &:first-child {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  &:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    transform: rotate(180deg);
+  }
+}
+
+.resultCandidate {
   @include button-reset;
   @include focus-effect;
 
+  flex: 1;
   display: flex;
   align-items: center;
   min-width: 0;
@@ -15,9 +57,7 @@
   cursor: pointer;
 
   &[disabled] {
-    opacity: var(--opacity--disabled);
-    box-shadow: none;
-    cursor: not-allowed;
+    @include disabled;
   }
 }
 
@@ -74,3 +114,7 @@
   height: $size;
   color: var(--color--inactive);
 }
+
+.apply {
+  flex: 0 0 auto;
+}

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -0,0 +1,75 @@
+import classNames from 'classnames';
+import { FunctionComponent, HTMLProps } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
+import {
+  resultsSlice,
+  selectAreResultsOutdated,
+  selectLocale,
+  selectResultCandidate,
+  selectSortedResults,
+  useTypedSelector,
+} from 'state';
+
+import Button from '../../../Button';
+import ApplyButton from '../ApplyButton';
+
+import styles from './ResultCandidatePicker.module.scss';
+
+const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ className, ...props }) => {
+  const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
+  const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const sortedResults = useTypedSelector(selectSortedResults);
+  const results = sortedResults || [];
+  const resultCandidate = useTypedSelector(selectResultCandidate);
+
+  if (!resultCandidate) {
+    return null;
+  }
+
+  const index = results.findIndex((result) => result.id === resultCandidate.id);
+  const isPreviousDisabled = index <= 0;
+  const isNextDisabled = index >= results.length - 1;
+
+  const handleNextClick = () => {
+    if (!isNextDisabled) {
+      const nextResult = results[index + 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(nextResult));
+    }
+  };
+
+  const handlePreviousClick = () => {
+    if (!isPreviousDisabled) {
+      const previousResult = results[index - 1];
+      dispatch(resultsSlice.actions.changeResultCandidate(previousResult));
+    }
+  };
+
+  return (
+    <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
+      <div className={styles.buttons}>
+        <Button
+          className={styles.button}
+          disabled={isPreviousDisabled}
+          Icon={ChevronLeft}
+          onClick={handlePreviousClick}
+        />
+        <Button className={styles.button} disabled={isNextDisabled} Icon={ChevronRight} onClick={handleNextClick} />
+      </div>
+
+      <button className={styles.resultCandidate} disabled={isOutdated} type="button">
+        <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>
+
+      <ApplyButton className={styles.apply} />
+    </div>
+  );
+};
+
+export default ResultCandidatePicker;

package/packages/scrabble-solver/src/components/Solver/components/SolveButton/SolveButton.tsx

@@ -34,6 +34,7 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
       Icon={Search}
       iconClassName={styles.icon}
       type="submit"
+      variant="primary"
       onClick={handleClick}
     />
   );

package/packages/scrabble-solver/src/components/Solver/components/index.ts

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

package/packages/scrabble-solver/src/components/SquareButton/SquareButton.module.scss

@@ -20,8 +20,7 @@
   }
 
   &[disabled] {
-    pointer-events: none;
-    opacity: var(--opacity--disabled);
+    @include disabled;
   }
 }
 

package/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Tile/Tile.module.scss

@@ -4,13 +4,8 @@
   --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);
   }
@@ -55,31 +50,53 @@
 
     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
+}
 
-  &:not(:disabled)::selection {
-    --background--color: transparent;
+.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;
+
+  .empty & {
+    color: var(--color--inactive);
   }
 
-  &[disabled] {
-    color: inherit;
+  .raised & {
+    box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
   }
 }
 

package/packages/scrabble-solver/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}

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -17,11 +17,11 @@ interface Props {
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
+  characterStyle?: CSSProperties;
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
   inputRef: RefObject<HTMLInputElement>;
-  inputStyle?: CSSProperties;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -40,11 +40,11 @@ const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
   character,
+  characterStyle,
   className,
   disabled,
   highlighted,
   inputRef,
-  inputStyle,
   isBlank,
   isValid,
   placeholder,
@@ -61,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   <div
     className={classNames(styles.tile, className, {
       [styles.blank]: isBlank,
+      [styles.disabled]: disabled,
+      [styles.empty]: !character,
       [styles.highlighted]: highlighted,
       [styles.invalid]: !isValid,
       [styles.raised]: raised,
@@ -77,12 +79,10 @@ const TilePure: FunctionComponent<Props> = ({
       autoComplete="off"
       autoCorrect="off"
       autoFocus={autoFocus}
-      className={styles.character}
+      className={styles.input}
       disabled={disabled}
-      placeholder={placeholder}
       ref={inputRef}
       spellCheck={false}
-      style={inputStyle}
       tabIndex={tabIndex}
       value={character || ''}
       onChange={onChange}
@@ -90,6 +90,10 @@ const TilePure: FunctionComponent<Props> = ({
       onKeyDown={onKeyDown}
     />
 
+    <div className={styles.character} style={characterStyle} tabIndex={-1}>
+      {character || placeholder}
+    </div>
+
     {canShowPoints && (
       <span className={styles.points} style={pointsStyle}>
         {pointsFormatted}

package/packages/scrabble-solver/src/components/Tooltip/Tooltip.module.scss

@@ -18,7 +18,7 @@ $arrow-size: 4px;
     .arrow {
       bottom: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         bottom: 0;
         border-top-color: var(--tooltip--background);
@@ -31,7 +31,7 @@ $arrow-size: 4px;
     .arrow {
       left: -$arrow-size;
 
-      &:after {
+      &::after {
         left: 0;
         top: 0;
         border-right-color: var(--tooltip--background);
@@ -44,7 +44,7 @@ $arrow-size: 4px;
     .arrow {
       top: -$arrow-size;
 
-      &:after {
+      &::after {
         top: 0;
         left: 0;
         border-bottom-color: var(--tooltip--background);
@@ -57,7 +57,7 @@ $arrow-size: 4px;
     .arrow {
       right: -$arrow-size;
 
-      &:after {
+      &::after {
         right: 0;
         top: 0;
         border-left-color: var(--tooltip--background);
@@ -72,7 +72,7 @@ $arrow-size: 4px;
   width: 2 * $arrow-size;
   height: 2 * $arrow-size;
 
-  &:after {
+  &::after {
     content: ' ';
     position: absolute;
     height: 0;

package/packages/scrabble-solver/src/components/index.ts

@@ -16,7 +16,6 @@ export { default as PlainTiles } from './PlainTiles';
 export { default as Progress } from './Progress';
 export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
-export { default as ResultCandidatePicker } from './ResultCandidatePicker';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
 export { default as Sizer } from './Sizer';

package/packages/scrabble-solver/src/icons/ChevronLeft.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-left/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/packages/scrabble-solver/src/icons/ChevronRight.svg

@@ -0,0 +1,4 @@
+<!-- https://icons.getbootstrap.com/icons/chevron-right/ -->
+<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" fill="currentColor" fill-rule="evenodd" />
+</svg>

package/packages/scrabble-solver/src/icons/index.ts

@@ -8,6 +8,8 @@ export { default as Check } from './Check.svg';
 export { default as CheckboxChecked } from './CheckboxChecked.svg';
 export { default as CheckboxEmpty } from './CheckboxEmpty.svg';
 export { default as ChevronDown } from './ChevronDown.svg';
+export { default as ChevronLeft } from './ChevronLeft.svg';
+export { default as ChevronRight } from './ChevronRight.svg';
 export { default as Cog } from './Cog.svg';
 export { default as Cross } from './Cross.svg';
 export { default as CrossCircleFill } from './CrossCircleFill.svg';