@scrabble-solver/scrabble-solver 2.11.7 → 2.11.9

package/src/components/Rack/Rack.tsx

@@ -1,7 +1,21 @@
+/* eslint-disable max-lines, max-statements */
+
+import { FloatingPortal, autoUpdate, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
-import { ChangeEvent, ClipboardEvent, createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
+import {
+  ChangeEvent,
+  ClipboardEvent,
+  FunctionComponent,
+  createRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
+import { useAppLayout } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import {
   createArray,
@@ -9,12 +23,21 @@ import {
   extractCharacters,
   extractInputValue,
   getTileSizes,
+  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
-import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
-
+import {
+  rackSlice,
+  selectConfig,
+  selectInputMode,
+  selectLocale,
+  selectRack,
+  selectResultCandidateTiles,
+  useTypedSelector,
+} from 'state';
+
+import { InputPrompt, RackTile } from './components';
 import styles from './Rack.module.scss';
-import RackTile from './RackTile';
 
 interface Props {
   className?: string;
@@ -26,13 +49,24 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
   const rack = useTypedSelector(selectRack);
+  const inputMode = useTypedSelector(selectInputMode);
+  const { rackHeight } = useAppLayout();
   const resultCandidateTiles = useTypedSelector(selectResultCandidateTiles);
   const tiles = useMemo(() => zipCharactersAndTiles(rack, resultCandidateTiles), [rack, resultCandidateTiles]);
   const tilesCount = tiles.length;
   const tilesRefs = useMemo(() => createArray(tilesCount).map(() => createRef<HTMLInputElement>()), [tilesCount]);
   const activeIndexRef = useRef<number>();
+  const [hasFocus, setHasFocus] = useState(false);
+  const [input, setInput] = useState('');
   const { direction } = LOCALE_FEATURES[locale];
   const { tileFontSize } = getTileSizes(tileSize);
+  const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOnclickOutside(() => setHasFocus(false), {
+    ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
+    refs: [ref],
+  });
 
   const changeActiveIndex = useCallback(
     (offset: number) => {
@@ -74,6 +108,16 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
     [changeActiveIndex, config, dispatch],
   );
 
+  const handleFocus = useCallback(() => {
+    setHasFocus(true);
+    floatingInputPrompt.refs.setPositionReference(ref.current);
+    const characters: string[] = rack.filter((character) => character !== null) as string[];
+    const uppercasedDigraphs = characters.map((character) => {
+      return character.length > 1 ? character.toLocaleUpperCase(locale) : character;
+    });
+    setInput(uppercasedDigraphs.join(''));
+  }, [rack, ref]);
+
   const handleKeyDown = useMemo(() => {
     return createKeyboardNavigation({
       onArrowLeft: (event) => {
@@ -100,7 +144,9 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (event.currentTarget.value === event.key) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          changeActiveIndex(1);
+        } else 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();
@@ -111,26 +157,58 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
     });
   }, [changeActiveIndex, config, direction]);
 
+  const floatingInputPrompt = useFloating({
+    placement: 'bottom-start',
+    whileElementsMounted: autoUpdate,
+  });
+
   return (
-    <div className={classNames(styles.rack, className)} style={{ fontSize: tileFontSize }} onPaste={handlePaste}>
-      {tiles.map(({ character, tile }, index) => (
-        <RackTile
-          activeIndexRef={activeIndexRef}
-          character={character}
-          className={classNames({
-            [styles.sharpLeft]: index !== 0,
-            [styles.sharpRight]: index !== tiles.length - 1,
-          })}
-          index={index}
-          inputRef={tilesRefs[index]}
-          key={index}
-          size={tileSize}
-          tile={tile}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-        />
-      ))}
-    </div>
+    <>
+      <div
+        className={classNames(styles.rack, className, {
+          [styles.hidden]: showInputPrompt,
+        })}
+        ref={ref}
+        style={{ fontSize: tileFontSize }}
+        onPaste={handlePaste}
+      >
+        {tiles.map(({ character, tile }, index) => (
+          <RackTile
+            activeIndexRef={activeIndexRef}
+            character={character}
+            className={classNames(styles.tile, {
+              [styles.sharpLeft]: index !== 0,
+              [styles.sharpRight]: index !== tiles.length - 1,
+            })}
+            index={index}
+            inputRef={tilesRefs[index]}
+            key={index}
+            size={tileSize}
+            tile={tile}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onFocus={handleFocus}
+          />
+        ))}
+      </div>
+
+      {showInputPrompt && (
+        <FloatingPortal>
+          <InputPrompt
+            ref={floatingInputPrompt.refs.setFloating}
+            style={{
+              position: floatingInputPrompt.strategy,
+              top: floatingInputPrompt.y ? floatingInputPrompt.y - rackHeight : 0,
+              left: floatingInputPrompt.x ?? 0,
+            }}
+            value={input}
+            onBlur={() => setHasFocus(false)}
+            onChange={(event) => setInput(event.target.value)}
+            onSubmit={() => setHasFocus(false)}
+          />
+        </FloatingPortal>
+      )}
+    </>
   );
 };
 

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

@@ -0,0 +1,22 @@
+@import 'styles/mixins';
+
+.form {
+  @include focus-effect;
+
+  border-radius: var(--border--radius);
+}
+
+.input {
+  @include text-input;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border--radius);
+  border: none;
+  box-shadow: var(--box-shadow);
+}

package/src/components/Rack/components/InputPrompt/InputPrompt.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable max-lines, max-statements */
+
+import classNames from 'classnames';
+import {
+  CSSProperties,
+  ChangeEventHandler,
+  FormEventHandler,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
+import { useDispatch } from 'react-redux';
+
+import { useAppLayout } from 'hooks';
+import { extractCharactersByCase } from 'lib';
+import { rackSlice, selectConfig, useTranslate, useTypedSelector } from 'state';
+
+import styles from './InputPrompt.module.scss';
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+  value: string;
+  onBlur: () => void;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+}
+
+const InputPrompt = forwardRef<HTMLFormElement, Props>(
+  ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
+    const dispatch = useDispatch();
+    const translate = useTranslate();
+    const { rackHeight, rackWidth } = useAppLayout();
+    const config = useTypedSelector(selectConfig);
+    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
+
+    const handleSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+      (event) => {
+        event.preventDefault();
+        const charactersByCase = extractCharactersByCase(config, value);
+        const characters = Array.from({ length: config.maximumCharactersCount }, (_, index) => {
+          return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
+        });
+        dispatch(rackSlice.actions.changeCharacters({ characters, index: 0 }));
+        onSubmit(event);
+      },
+      [config, value, onSubmit],
+    );
+
+    useEffect(() => {
+      if (inputRef) {
+        inputRef.focus();
+        inputRef.select();
+      }
+    }, [inputRef]);
+
+    return (
+      <form
+        className={classNames(styles.form, className)}
+        ref={ref}
+        style={{
+          width: rackWidth,
+          height: rackHeight,
+          ...style,
+        }}
+        onSubmit={handleSubmit}
+        {...props}
+      >
+        <input
+          autoCapitalize="none"
+          autoComplete="off"
+          autoCorrect="off"
+          className={styles.input}
+          placeholder={translate('rack.touchscreen.placeholder')}
+          ref={setInputRef}
+          spellCheck={false}
+          value={value}
+          onBlur={onBlur}
+          onChange={onChange}
+        />
+      </form>
+    );
+  },
+);
+
+export default Object.assign(InputPrompt, {
+  styles,
+});

package/src/components/Rack/components/InputPrompt/index.ts

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

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

@@ -0,0 +1,11 @@
+@import 'styles/mixins';
+
+.rackTile {
+  @include focus-effect;
+
+  --background-color: var(--color--background);
+
+  &:focus-within {
+    z-index: 2;
+  }
+}

package/src/components/Rack/{RackTile.tsx → components/RackTile/RackTile.tsx}

@@ -4,29 +4,33 @@ import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
+  FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
+  MouseEventHandler,
   MutableRefObject,
   RefObject,
+  TouchEventHandler,
   useCallback,
   useMemo,
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
   selectCharacterPoints,
   selectConfig,
+  selectInputMode,
   selectLocale,
   useTranslate,
   useTypedSelector,
 } from 'state';
 
-import Tile from '../Tile';
+import Tile from '../../../Tile';
 
-import styles from './Rack.module.scss';
+import styles from './RackTile.module.scss';
 
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
@@ -38,6 +42,7 @@ interface Props {
   tile: TileModel | null;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  onFocus: () => void;
 }
 
 const RackTile: FunctionComponent<Props> = ({
@@ -50,17 +55,28 @@ const RackTile: FunctionComponent<Props> = ({
   tile,
   onChange,
   onKeyDown,
+  onFocus,
 }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const config = useTypedSelector(selectConfig);
+  const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectCharacterPoints(state, character));
   const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
 
-  const handleFocus = useCallback(() => {
-    activeIndexRef.current = index;
-  }, [index]);
+  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+        event.target.blur();
+        onFocus();
+      }
+
+      activeIndexRef.current = index;
+    },
+    [activeIndexRef, index, inputMode, onFocus],
+  );
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -80,17 +96,49 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown,
+      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);
+      },
     });
   }, [index, onKeyDown]);
 
+  const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus();
+    },
+    [inputMode, onFocus],
+  );
+
+  const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus();
+    },
+    [inputMode, onFocus],
+  );
+
   return (
     <Tile
       aria-label={translate('rack.tile.location', {
         index: (index + 1).toLocaleString(locale),
       })}
-      autoFocus={index === 0}
-      className={classNames(styles.tile, className)}
+      autoFocus={inputMode === 'keyboard' && index === 0}
+      className={classNames(styles.rackTile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}
@@ -105,6 +153,8 @@ const RackTile: FunctionComponent<Props> = ({
       onChange={handleChange}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
     />
   );
 };

package/src/components/Rack/components/RackTile/index.ts

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

package/src/components/Rack/components/index.ts

@@ -0,0 +1,2 @@
+export { default as InputPrompt } from './InputPrompt';
+export { default as RackTile } from './RackTile';

package/src/components/Radio/Radio.module.scss

@@ -15,13 +15,6 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   transition: var(--transition);
   cursor: pointer;
 
-  &:hover,
-  &.checked {
-    .icon {
-      box-shadow: var(--box-shadow);
-    }
-  }
-
   &.checked {
     .icon {
       &::after {
@@ -48,7 +41,6 @@ $radio-box-size: $radio-size + 2 * $radio-inner-border;
   height: $radio-box-size;
   border-radius: 50%;
   border: $radio-inner-border solid var(--color--primary);
-  box-shadow: var(--box-shadow--null);
   pointer-events: none;
 
   &::after {

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

@@ -113,23 +113,3 @@
 .emptyState {
   margin-top: var(--spacing);
 }
-
-.solve {
-  --spacing: var(--spacing--l);
-
-  position: fixed;
-  bottom: var(--spacing);
-  z-index: 1;
-
-  @include media('<xs') {
-    --spacing: var(--spacing--m);
-  }
-
-  [dir='ltr'] & {
-    right: var(--spacing);
-  }
-
-  [dir='rtl'] & {
-    left: var(--spacing);
-  }
-}

package/src/components/Solver/Solver.tsx

@@ -22,7 +22,7 @@ import DictionaryInput from '../DictionaryInput';
 import Rack from '../Rack';
 import Results from '../Results';
 
-import { FloatingSolveButton, ResultCandidatePicker } from './components';
+import { ResultCandidatePicker } from './components';
 import styles from './Solver.module.scss';
 
 interface Props {
@@ -34,7 +34,7 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const isTouchDevice = useIsTouchDevice();
-  const { maxControlsWidth, showCompactControls, showFloatingSolveButton, tileSize } = useAppLayout();
+  const { maxControlsWidth, showCompactControls, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
   const resultCandidate = useTypedSelector(selectResultCandidate);
@@ -134,8 +134,6 @@ const Solver: FunctionComponent<Props> = ({ className, onShowResults }) => {
           )}
         </div>
       </div>
-
-      {showFloatingSolveButton && <FloatingSolveButton className={styles.solve} onClick={handleSubmit} />}
     </div>
   );
 };

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

@@ -2,7 +2,6 @@ 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,
@@ -38,7 +37,6 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const isPreviousDisabled = !results || index <= 0 || disabled;
   const isNextDisabled = !results || index >= results.length - 1 || disabled;
   const bothEnabled = !isPreviousDisabled && !isNextDisabled;
-  const { showFloatingSolveButton } = useAppLayout();
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -91,14 +89,8 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
         {!resultCandidate && <div className={styles.word}> </div>}
 
         <div className={styles.iconContainer}>
-          {showFloatingSolveButton && <ChevronDown className={styles.icon} />}
-
-          {!showFloatingSolveButton && (
-            <>
-              {isLoading && <Spinner className={styles.loading} />}
-              {!isLoading && <ChevronDown className={styles.icon} />}
-            </>
-          )}
+          {isLoading && <Spinner className={styles.loading} />}
+          {!isLoading && <ChevronDown className={styles.icon} />}
         </div>
       </button>
 

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

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

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

@@ -17,6 +17,10 @@
   transition-property: background-color, color, box-shadow;
   user-select: none;
 
+  @include media('<xs') {
+    --border--radius: 3px;
+  }
+
   &.points1 {
     --background-color: var(--color--yellow);
   }
@@ -83,6 +87,7 @@
   color: transparent;
   caret-color: transparent;
   font-size: 16px; // prevent iOS from automatically zooming in on focus
+  outline: none;
 
   &::selection {
     --background--color: transparent;

package/src/components/Tile/Tile.tsx

@@ -5,7 +5,9 @@ import {
   FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
+  MouseEventHandler,
   Ref,
+  TouchEventHandler,
   useCallback,
   useEffect,
   useMemo,
@@ -37,6 +39,8 @@ interface Props {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
 }
 
 const Tile: FunctionComponent<Props> = ({
@@ -57,6 +61,8 @@ const Tile: FunctionComponent<Props> = ({
   onChange,
   onFocus = noop,
   onKeyDown = noop,
+  onMouseDown = noop,
+  onTouchStart = noop,
 }) => {
   const locale = useTypedSelector(selectLocale);
   const { animateTile, showTilePoints } = useAppLayout();
@@ -77,12 +83,6 @@ const Tile: FunctionComponent<Props> = ({
     [onKeyDown],
   );
 
-  useEffect(() => {
-    if (autoFocus && ref.current) {
-      ref.current.focus();
-    }
-  }, [autoFocus, ref]);
-
   useEffect(() => {
     if (!ref.current?.parentElement || !character || !animateTile) {
       return;
@@ -117,6 +117,8 @@ const Tile: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
       onKeyDown={handleKeyDown}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
     />
   );
 };

package/src/components/Tile/TilePure.tsx

@@ -6,7 +6,9 @@ import {
   FunctionComponent,
   KeyboardEventHandler,
   memo,
+  MouseEventHandler,
   Ref,
+  TouchEventHandler,
 } from 'react';
 
 import { ExclamationSquareFill } from 'icons';
@@ -34,6 +36,8 @@ interface Props {
   onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onMouseDown?: MouseEventHandler<HTMLInputElement>;
+  onTouchStart?: TouchEventHandler<HTMLInputElement>;
 }
 
 const TilePure: FunctionComponent<Props> = ({
@@ -57,6 +61,8 @@ const TilePure: FunctionComponent<Props> = ({
   onChange,
   onFocus,
   onKeyDown,
+  onMouseDown,
+  onTouchStart,
 }) => (
   <div
     className={classNames(styles.tile, className, {
@@ -90,6 +96,8 @@ const TilePure: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
     />
 
     {canShowPoints && (

package/src/hooks/useAppLayout.ts

@@ -56,6 +56,7 @@ const useAppLayout = () => {
   const resultsHeight = isLessThanL
     ? viewportHeight - dictionaryHeight - BUTTON_HEIGHT - MODAL_HEADER_HEIGHT - 5 * componentsSpacing
     : boardSize - componentsSpacing - dictionaryHeight;
+  const rackWidth = tileSize * config.maximumCharactersCount;
 
   return {
     actionsWidth: 2 * BUTTON_HEIGHT - BORDER_WIDTH,
@@ -67,10 +68,11 @@ const useAppLayout = () => {
     logoHeight,
     logoWidth: logoHeight * LOGO_ASPECT_RATIO,
     maxControlsWidth,
+    rackHeight: tileSize,
+    rackWidth,
     resultsHeight,
     resultsWidth: isLessThanL ? modalWidth - 2 * componentsSpacing : SOLVER_COLUMN_WIDTH,
     showCompactControls: !showColumn,
-    showFloatingSolveButton: isTouchDevice,
     showKeyMap: !isTouchDevice,
     showResultsInModal,
     showShortNav: isLessThanS,