@scrabble-solver/scrabble-solver 2.10.6 → 2.10.8

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

@@ -2,24 +2,29 @@
 
 .resultCandidatePicker {
   display: flex;
-  align-items: center;
   gap: var(--spacing--l);
+
+  @include media('<xs') {
+    gap: var(--spacing--m);
+  }
 }
 
 .buttons {
   flex: 0 0 auto;
   display: flex;
   border-radius: var(--border--radius);
-  box-shadow: var(--box-shadow);
 
-  @include media('<xs') {
-    display: none;
+  &.bothEnabled {
+    box-shadow: var(--box-shadow);
+
+    .button {
+      box-shadow: none;
+    }
   }
 }
 
 .button {
   padding: var(--spacing--m);
-  box-shadow: none;
 
   &:focus-within {
     z-index: 1;
@@ -52,7 +57,7 @@
   width: 100%;
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: white;
+  background-color: var(--color--white);
   box-shadow: var(--box-shadow);
   cursor: pointer;
 
@@ -79,10 +84,20 @@
 
   [dir='ltr'] & {
     border-right: var(--border);
+
+    @include media('<xs') {
+      border-right: none;
+      padding-right: var(--spacing--xs);
+    }
   }
 
   [dir='rtl'] & {
     border-left: var(--border);
+
+    @include media('<xs') {
+      border-left: none;
+      padding-left: var(--spacing--xs);
+    }
   }
 }
 
@@ -92,6 +107,21 @@
   flex: 1;
   text-transform: uppercase;
   text-align: center;
+  white-space: pre-wrap;
+
+  [dir='ltr'] & {
+    @include media('<xs') {
+      padding: var(--spacing--m);
+      text-align: left;
+    }
+  }
+
+  [dir='rtl'] & {
+    @include media('<xs') {
+      padding: var(--spacing--m);
+      text-align: right;
+    }
+  }
 }
 
 .iconContainer {
@@ -115,6 +145,6 @@
   color: var(--color--inactive);
 }
 
-.apply {
+.insert {
   flex: 0 0 auto;
 }

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent, HTMLProps } from 'react';
+import { FunctionComponent, HTMLProps, MouseEventHandler } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { ChevronDown, ChevronLeft, ChevronRight } from 'icons';
@@ -9,29 +9,32 @@ import {
   selectLocale,
   selectResultCandidate,
   selectSortedResults,
+  useTranslate,
   useTypedSelector,
 } from 'state';
 
 import Button from '../../../Button';
-import ApplyButton from '../ApplyButton';
+import InsertButton from '../InsertButton';
 
 import styles from './ResultCandidatePicker.module.scss';
 
-const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ className, ...props }) => {
+interface Props extends HTMLProps<HTMLDivElement> {
+  onResultClick: MouseEventHandler<HTMLButtonElement>;
+}
+
+const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultClick, ...props }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   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 index = resultCandidate ? results.findIndex((result) => result.id === resultCandidate.id) : -1;
+  const disabled = isOutdated || !resultCandidate;
+  const isPreviousDisabled = index <= 0 || disabled;
+  const isNextDisabled = index >= results.length - 1 || disabled;
+  const bothEnabled = !isPreviousDisabled && !isNextDisabled;
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -49,25 +52,46 @@ const ResultCandidatePicker: FunctionComponent<HTMLProps<HTMLDivElement>> = ({ c
 
   return (
     <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
-      <div className={styles.buttons}>
+      <div className={classNames(styles.buttons, { [styles.bothEnabled]: bothEnabled })}>
         <Button
+          aria-label={translate('common.previous')}
           className={styles.button}
           disabled={isPreviousDisabled}
           Icon={ChevronLeft}
           onClick={handlePreviousClick}
         />
-        <Button className={styles.button} disabled={isNextDisabled} Icon={ChevronRight} onClick={handleNextClick} />
+
+        <Button
+          aria-label={translate('common.next')}
+          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>
+      <button
+        aria-label={translate('results')}
+        className={styles.resultCandidate}
+        disabled={disabled}
+        type="button"
+        onClick={onResultClick}
+      >
+        {resultCandidate && (
+          <>
+            <div className={styles.points}>{resultCandidate.points.toLocaleString(locale)}</div>
+            <div className={styles.word}>{resultCandidate.word}</div>
+          </>
+        )}
+
+        {!resultCandidate && <div className={styles.word}> </div>}
+
         <div className={styles.iconContainer}>
           <ChevronDown className={styles.icon} />
         </div>
       </button>
 
-      <ApplyButton className={styles.apply} />
+      <InsertButton className={styles.insert} />
     </div>
   );
 };

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

@@ -4,7 +4,14 @@ import { useDispatch } from 'react-redux';
 
 import { Search } from 'icons';
 import { noop } from 'lib';
-import { selectAreResultsOutdated, selectIsLoading, selectRack, solveSlice, useTypedSelector } from 'state';
+import {
+  selectAreResultsOutdated,
+  selectIsLoading,
+  selectRack,
+  solveSlice,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Button from '../../../Button';
 
@@ -17,6 +24,7 @@ interface Props {
 
 const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) => {
   const dispatch = useDispatch();
+  const translate = useTranslate();
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const rack = useTypedSelector(selectRack);
@@ -29,10 +37,12 @@ const SolveButton: FunctionComponent<Props> = ({ className, onClick = noop }) =>
 
   return (
     <Button
+      aria-label={translate('results.solve')}
       className={classNames(styles.solveButton, className)}
       disabled={isLoading || !isOutdated || !hasTiles}
       Icon={Search}
       iconClassName={styles.icon}
+      tooltip={translate('results.solve')}
       type="submit"
       variant="primary"
       onClick={handleClick}

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

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

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

@@ -24,18 +24,20 @@
   }
 
   &.blank {
-    --background-color: white;
+    --background-color: var(--color--white);
 
+    .placeholder,
     .character {
-      color: black;
+      color: var(--color--foreground);
     }
   }
 
   &.highlighted {
     --background-color: var(--color--primary);
 
-    color: white;
+    color: var(--color--primary--opposite);
 
+    .placeholder,
     .character {
       color: inherit;
     }
@@ -45,12 +47,6 @@
     }
   }
 
-  &.invalid {
-    --background-color: var(--color--red--light);
-
-    color: var(--color--error);
-  }
-
   &:not(.disabled) {
     .input::selection {
       --background--color: transparent;
@@ -58,8 +54,19 @@
   }
 }
 
+.inputContainer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+}
+
 .input,
-.character {
+.character,
+.placeholder {
   padding: 0;
   font-weight: bold;
   text-transform: uppercase;
@@ -75,9 +82,26 @@
   color: transparent;
   border: none;
   font-size: 16px; // prevent iOS from automatically zooming in on focus
+
+  // Hack for this Lighthouse warning:
+  // > Interactive elements like buttons and links should be large enough (48x48px), and have
+  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
+  //
+  // .inputContainer exists only for the purpose of this hack
+  $min-tile-width: 20px;
+  $min-lighthouse-size: 48px;
+
+  position: absolute;
+  top: calc((100% - $min-lighthouse-size) / 2);
+  right: calc((100% - $min-lighthouse-size) / 2);
+  bottom: calc((100% - $min-lighthouse-size) / 2);
+  left: calc((100% - $min-lighthouse-size) / 2);
+  width: $min-lighthouse-size;
+  height: $min-lighthouse-size;
 }
 
-.character {
+.character,
+.placeholder {
   position: absolute;
   top: 0;
   right: 0;
@@ -97,6 +121,18 @@
 
   .raised & {
     box-shadow: inset -2px -2px 2px -1px rgba(34, 34, 34, 0.8);
+
+    @include media('<xs') {
+      box-shadow: inset -2px -2px 1px -1px rgba(34, 34, 34, 0.8);
+    }
+  }
+}
+
+.character {
+  opacity: 1;
+
+  .empty & {
+    opacity: 0;
   }
 }
 
@@ -130,6 +166,8 @@
   position: absolute;
   width: $size;
   height: $size;
+  background-color: var(--color--error--opposite);
+  color: var(--color--error);
 
   [dir='ltr'] & {
     top: 0;

package/src/components/Tile/Tile.tsx

@@ -1,21 +1,24 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
+import mergeRefs from 'merge-refs';
 import {
   ChangeEventHandler,
-  createRef,
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
   RefObject,
   useEffect,
   useMemo,
+  useRef,
 } from 'react';
 
 import { getTileSizes, noop } from 'lib';
+import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
 
 import TilePure from './TilePure';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   character?: string;
   className?: string;
@@ -35,12 +38,13 @@ interface Props {
 }
 
 const Tile: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   className,
   character = '',
   disabled,
   highlighted,
-  inputRef: ref,
+  inputRef,
   isBlank,
   isValid,
   placeholder,
@@ -57,24 +61,38 @@ const Tile: FunctionComponent<Props> = ({
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
   const characterStyle = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
   const pointsStyle = useMemo(() => ({ fontSize: pointsFontSize }), [pointsFontSize]);
-  const inputRef = useMemo<RefObject<HTMLInputElement>>(() => ref || createRef(), [ref]);
+  const ref = useRef<HTMLInputElement>(null);
+  const mergedRef = inputRef ? mergeRefs(ref, inputRef) : ref;
   const isEmpty = !character || character === EMPTY_CELL;
   const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    inputRef.current?.select();
+    ref.current?.select();
     onKeyDown(event);
   };
 
   useEffect(() => {
-    if (autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (autoFocus && ref.current) {
+      ref.current.focus();
     }
-  }, [autoFocus, inputRef]);
+  }, [autoFocus, ref]);
+
+  useEffect(() => {
+    if (!ref.current?.parentElement || !character) {
+      return;
+    }
+
+    ref.current.parentElement.animate(TILE_APPEAR_KEYFRAMES, {
+      duration: TILE_APPEAR_DURATION,
+      easing: EASE_OUT_CUBIC,
+      fill: 'forwards',
+    });
+  }, [character]);
 
   return (
     <TilePure
+      aria-label={ariaLabel}
       autoFocus={autoFocus}
       canShowPoints={canShowPoints}
       character={character}
@@ -82,7 +100,7 @@ const Tile: FunctionComponent<Props> = ({
       className={className}
       disabled={disabled}
       highlighted={highlighted}
-      inputRef={inputRef}
+      inputRef={mergedRef}
       isBlank={isBlank}
       isValid={isValid}
       placeholder={placeholder}

package/src/components/Tile/TilePure.tsx

@@ -6,7 +6,7 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   memo,
-  RefObject,
+  Ref,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';
@@ -14,6 +14,7 @@ import { ExclamationSquareFill } from 'icons';
 import styles from './Tile.module.scss';
 
 interface Props {
+  'aria-label': string;
   autoFocus?: boolean;
   canShowPoints?: boolean;
   character?: string;
@@ -21,7 +22,7 @@ interface Props {
   className?: string;
   disabled?: boolean;
   highlighted?: boolean;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: Ref<HTMLInputElement>;
   isBlank?: boolean;
   isValid?: boolean;
   placeholder?: string;
@@ -37,6 +38,7 @@ interface Props {
 }
 
 const TilePure: FunctionComponent<Props> = ({
+  'aria-label': ariaLabel,
   autoFocus,
   canShowPoints,
   character,
@@ -64,7 +66,6 @@ const TilePure: FunctionComponent<Props> = ({
       [styles.disabled]: disabled,
       [styles.empty]: !character,
       [styles.highlighted]: highlighted,
-      [styles.invalid]: !isValid,
       [styles.raised]: raised,
       [styles.points1]: points === 1,
       [styles.points2]: points === 2,
@@ -74,24 +75,33 @@ const TilePure: FunctionComponent<Props> = ({
     })}
     style={style}
   >
-    <input
-      autoCapitalize="none"
-      autoComplete="off"
-      autoCorrect="off"
-      autoFocus={autoFocus}
-      className={styles.input}
-      disabled={disabled}
-      ref={inputRef}
-      spellCheck={false}
-      tabIndex={tabIndex}
-      value={character || ''}
-      onChange={onChange}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-    />
+    <div className={styles.inputContainer}>
+      <input
+        aria-label={ariaLabel}
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        autoFocus={autoFocus}
+        className={styles.input}
+        disabled={disabled}
+        ref={inputRef}
+        spellCheck={false}
+        tabIndex={tabIndex}
+        value={character || ''}
+        onChange={onChange}
+        onFocus={onFocus}
+        onKeyDown={onKeyDown}
+      />
+    </div>
+
+    {placeholder && (
+      <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>
+        {placeholder}
+      </div>
+    )}
 
     <div className={styles.character} style={characterStyle} tabIndex={-1}>
-      {character || placeholder}
+      {character}
     </div>
 
     {canShowPoints && (

package/src/components/Tooltip/Tooltip.module.scss

@@ -10,9 +10,9 @@ $arrow-size: 4px;
   padding: var(--spacing--s) var(--spacing--m);
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
-  background-color: var(--tooltip--background);
-  color: var(--tooltip--foreground);
-  z-index: 200;
+  background-color: var(--color--tooltip--background);
+  color: var(--color--tooltip--foreground);
+  z-index: var(--z-index--tooltip);
 
   &.top {
     .arrow {
@@ -21,7 +21,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         bottom: 0;
-        border-top-color: var(--tooltip--background);
+        border-top-color: var(--color--tooltip--background);
         border-bottom: none;
       }
     }
@@ -34,7 +34,7 @@ $arrow-size: 4px;
       &::after {
         left: 0;
         top: 0;
-        border-right-color: var(--tooltip--background);
+        border-right-color: var(--color--tooltip--background);
         border-left: none;
       }
     }
@@ -47,7 +47,7 @@ $arrow-size: 4px;
       &::after {
         top: 0;
         left: 0;
-        border-bottom-color: var(--tooltip--background);
+        border-bottom-color: var(--color--tooltip--background);
         border-top: none;
       }
     }
@@ -60,7 +60,7 @@ $arrow-size: 4px;
       &::after {
         right: 0;
         top: 0;
-        border-left-color: var(--tooltip--background);
+        border-left-color: var(--color--tooltip--background);
         border-right: none;
       }
     }

package/src/components/Tooltip/useTooltip.tsx

@@ -12,7 +12,7 @@ import {
 import { usePopper } from 'react-popper';
 import { useMountedState, useRafLoop } from 'react-use';
 
-import { usePortal, useUniqueId } from 'hooks';
+import { useIsTouchDevice, usePortal, useUniqueId } from 'hooks';
 import { noop } from 'lib';
 
 import { MODIFIERS } from './constants';
@@ -36,11 +36,13 @@ interface TriggerProps {
   onMouseOver?: MouseEventHandler;
 }
 
+// eslint-disable-next-line max-statements
 const useTooltip = (
   tooltip: ReactNode,
   { className, placement = 'top', onBlur = noop, onFocus = noop, onMouseOut = noop, onMouseOver = noop }: Props = {},
 ): TriggerProps => {
   const id = useUniqueId();
+  const isTouchDevice = useIsTouchDevice();
   const isEnabled = Boolean(tooltip) || tooltip === 0;
   const isMounted = useMountedState();
   const [isShown, setIsShown] = useState<boolean>(false);
@@ -90,7 +92,7 @@ const useTooltip = (
     [onMouseOver],
   );
 
-  const triggerProps = useMemo(
+  const mouseTriggerProps = useMemo(
     () => ({
       ...ariaAttributes,
       ref: setReferenceElement,
@@ -102,6 +104,16 @@ const useTooltip = (
     [ariaAttributes, handleBlur, handleFocus, handleMouseOut, handleMouseOver],
   );
 
+  const touchTriggerProps = useMemo(
+    () => ({
+      ...ariaAttributes,
+      ref: setReferenceElement,
+    }),
+    [ariaAttributes],
+  );
+
+  const triggerProps = isTouchDevice ? touchTriggerProps : mouseTriggerProps;
+
   useRafLoop(() => {
     if (isMounted() && update) {
       update();

package/src/components/index.ts

@@ -5,6 +5,7 @@ export { default as Checkbox } from './Checkbox';
 export { default as Dictionary } from './Dictionary';
 export { default as DictionaryInput } from './DictionaryInput';
 export { default as EmptyState } from './EmptyState';
+export { default as IconButton } from './IconButton';
 export { default as Key } from './Key';
 export { default as Loading } from './Loading';
 export { default as Logo } from './Logo';
@@ -18,10 +19,10 @@ export { default as Rack } from './Rack';
 export { default as Radio } from './Radio';
 export { default as Results } from './Results';
 export { default as ResultsInput } from './ResultsInput';
+export { default as SeoMessage } from './SeoMessage';
 export { default as Sizer } from './Sizer';
 export { default as Solver } from './Solver';
 export { default as SplashScreen } from './SplashScreen';
-export { default as SquareButton } from './SquareButton';
 export { default as SvgFontCss } from './SvgFontCss';
 export { default as SvgFontFix } from './SvgFontFix';
 export { default as Tile } from './Tile';