@scrabble-solver/scrabble-solver 2.11.8 → 2.12.0

package/src/components/Board/components/Cell/Cell.tsx

@@ -1,9 +1,24 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { ChangeEventHandler, FunctionComponent, RefObject, useCallback } from 'react';
+import {
+  ChangeEventHandler,
+  FocusEventHandler,
+  FunctionComponent,
+  MouseEventHandler,
+  RefObject,
+  TouchEventHandler,
+  useCallback,
+} from 'react';
 
-import { selectCellIsValid, selectLocale, selectTilePoints, useTranslate, useTypedSelector } from 'state';
+import {
+  selectCellIsValid,
+  selectInputMode,
+  selectLocale,
+  selectTilePoints,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
 
 import Tile from '../../../Tile';
 
@@ -37,11 +52,44 @@ const Cell: FunctionComponent<Props> = ({
   const { tile, x, y } = cell;
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
+  const inputMode = useTypedSelector(selectInputMode);
   const points = useTypedSelector((state) => selectTilePoints(state, cell.tile));
   const isValid = useTypedSelector((state) => selectCellIsValid(state, cell));
   const isEmpty = tile.character === EMPTY_CELL;
 
-  const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
+  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+        event.target.blur();
+      }
+
+      onFocus(x, y);
+    },
+    [inputMode, onFocus, x, y],
+  );
+
+  const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus(x, y);
+    },
+    [inputMode, onFocus, x, y],
+  );
+
+  const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
+    (event) => {
+      if (inputMode === 'touchscreen') {
+        event.preventDefault();
+      }
+
+      onFocus(x, y);
+    },
+    [inputMode, onFocus, x, y],
+  );
 
   return (
     <Tile
@@ -66,6 +114,8 @@ const Cell: FunctionComponent<Props> = ({
       tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
       onChange={onChange}
       onFocus={handleFocus}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
     />
   );
 };

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

@@ -0,0 +1,48 @@
+@import 'styles/mixins';
+
+.inputPrompt {
+  display: flex;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
+  transition: var(--transition);
+  transition-property: opacity;
+}
+
+.toggleDirection {
+  [dir='ltr'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.input {
+  @include text-input;
+
+  height: 100%;
+  max-width: 200px;
+  border: none;
+  border-top: var(--border);
+  border-bottom: var(--border);
+  border-radius: 0;
+}
+
+.insert {
+  [dir='ltr'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.insertIcon {
+  transform: scale(1.5);
+}

package/src/components/Board/components/InputPrompt/InputPrompt.tsx

@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import { FormEventHandler, forwardRef, HTMLProps, MouseEventHandler, useEffect, useState } from 'react';
+
+import { Check } from 'icons';
+import { useTranslate } from 'state';
+import { Direction } from 'types';
+
+import Button from '../../../Button';
+import ToggleDirectionButton from '../ToggleDirectionButton';
+
+import styles from './InputPrompt.module.scss';
+
+interface Props extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
+  className?: string;
+  direction: Direction;
+  initialValue: string;
+  onDirectionToggle: MouseEventHandler<HTMLButtonElement>;
+  onSubmit: (input: string) => void;
+}
+
+const InputPrompt = forwardRef<HTMLFormElement, Props>(
+  ({ className, direction, initialValue, onDirectionToggle, onSubmit, ...props }, ref) => {
+    const translate = useTranslate();
+    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
+    const [input, setInput] = useState(initialValue.trim());
+
+    // On iOS it helps with losing focus too early which makes Actions disappear
+    const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
+
+    const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      onSubmit(input);
+    };
+
+    useEffect(() => {
+      if (inputRef) {
+        inputRef.focus();
+        inputRef.select();
+      }
+    }, [inputRef]);
+
+    return (
+      <form className={classNames(styles.inputPrompt, className)} ref={ref} onSubmit={handleSubmit} {...props}>
+        <ToggleDirectionButton
+          className={styles.toggleDirection}
+          direction={direction}
+          onClick={onDirectionToggle}
+          onMouseDown={handleMouseDown}
+        />
+
+        <div>
+          <input
+            autoCapitalize="none"
+            autoComplete="off"
+            autoCorrect="off"
+            className={styles.input}
+            placeholder={translate('rack.placeholder')}
+            spellCheck={false}
+            ref={setInputRef}
+            value={input}
+            onChange={(event) => setInput(event.target.value)}
+          />
+        </div>
+
+        <Button
+          aria-label={translate('results.insert')}
+          className={styles.insert}
+          Icon={Check}
+          iconClassName={styles.insertIcon}
+          tooltip={translate('results.insert')}
+          type="submit"
+          variant="primary"
+          onMouseDown={handleMouseDown}
+        />
+      </form>
+    );
+  },
+);
+
+export default InputPrompt;

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

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

package/src/components/Board/components/ToggleDirectionButton/ToggleDirectionButton.module.scss

@@ -0,0 +1,21 @@
+.button {
+  padding: var(--spacing--m);
+  box-shadow: none !important;
+
+  &:active,
+  &:hover {
+    color: var(--color--foreground);
+  }
+}
+
+.icon {
+  transition: var(--transition);
+
+  &.right {
+    transform: rotate(-90deg);
+
+    [dir='rtl'] & {
+      transform: rotate(90deg);
+    }
+  }
+}

package/src/components/Board/components/ToggleDirectionButton/ToggleDirectionButton.tsx

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { ButtonHTMLAttributes, FunctionComponent } from 'react';
+
+import { ArrowDown } from 'icons';
+import { useTranslate } from 'state';
+import { Direction } from 'types';
+
+import Button from '../../../Button';
+
+import styles from './ToggleDirectionButton.module.scss';
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  className?: string;
+  direction: Direction;
+}
+
+const ToggleDirectionButton: FunctionComponent<Props> = ({ className, direction, ...props }) => {
+  const translate = useTranslate();
+
+  return (
+    <Button
+      aria-label={translate('cell.toggle-direction')}
+      className={classNames(styles.button, className)}
+      Icon={ArrowDown}
+      iconClassName={classNames(styles.icon, {
+        [styles.right]: direction === 'horizontal',
+      })}
+      tooltip={translate('cell.toggle-direction')}
+      {...props}
+    />
+  );
+};
+
+export default ToggleDirectionButton;

package/src/components/Board/components/ToggleDirectionButton/index.ts

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

package/src/components/Board/components/index.ts

@@ -1,2 +1,4 @@
 export { default as Actions } from './Actions';
 export { default as Cell } from './Cell';
+export { default as InputPrompt } from './InputPrompt';
+export { default as ToggleDirectionButton } from './ToggleDirectionButton';

package/src/components/Board/hooks/index.ts

@@ -1,2 +1,6 @@
 export { default as useBackgroundImage } from './useBackgroundImage';
+export { default as useBoardStyle } from './useBoardStyle';
+export { default as useFloatingActions } from './useFloatingActions';
+export { default as useFloatingFocus } from './useFloatingFocus';
+export { default as useFloatingInputPrompt } from './useFloatingInputPrompt';
 export { default as useGrid } from './useGrid';

package/src/components/Board/hooks/useBoardStyle.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, useMemo } from 'react';
+
+import { useAppLayout } from 'hooks';
+import { getTileSizes } from 'lib';
+import { selectConfig, useTypedSelector } from 'state';
+
+import useBackgroundImage from './useBackgroundImage';
+
+const useBoardStyle = () => {
+  const config = useTypedSelector(selectConfig);
+  const { cellSize } = useAppLayout();
+  const { tileFontSize } = getTileSizes(cellSize);
+  const backgroundImage = useBackgroundImage();
+  const boardStyle = useMemo<CSSProperties>(
+    () => ({
+      backgroundImage,
+      fontSize: tileFontSize,
+      gridTemplateColumns: `repeat(${config.boardWidth}, 1fr)`,
+      gridTemplateRows: `repeat(${config.boardHeight}, 1fr)`,
+    }),
+    [backgroundImage, config.boardHeight, config.boardWidth, tileFontSize],
+  );
+
+  return boardStyle;
+};
+
+export default useBoardStyle;

package/src/components/Board/hooks/useFloatingActions.ts

@@ -0,0 +1,22 @@
+import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
+
+import { useAppLayout } from 'hooks';
+import { BOARD_CELL_ACTIONS_OFFSET } from 'parameters';
+
+const useFloatingActions = () => {
+  const { actionsWidth } = useAppLayout();
+
+  return useFloating({
+    middleware: [
+      offset({
+        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
+        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - actionsWidth,
+      }),
+      shift(),
+    ],
+    placement: 'top-end',
+    whileElementsMounted: autoUpdate,
+  });
+};
+
+export default useFloatingActions;

package/src/components/Board/hooks/useFloatingFocus.ts

@@ -0,0 +1,10 @@
+import { autoUpdate, useFloating } from '@floating-ui/react';
+
+const useFloatingFocus = () => {
+  return useFloating({
+    placement: 'top-start',
+    whileElementsMounted: autoUpdate,
+  });
+};
+
+export default useFloatingFocus;

package/src/components/Board/hooks/useFloatingInputPrompt.ts

@@ -0,0 +1,19 @@
+import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
+
+import { BOARD_CELL_ACTIONS_OFFSET } from 'parameters';
+
+const useFloatingInputPrompt = () => {
+  return useFloating({
+    middleware: [
+      offset({
+        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
+        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET,
+      }),
+      shift(),
+    ],
+    placement: 'top',
+    whileElementsMounted: autoUpdate,
+  });
+};
+
+export default useFloatingInputPrompt;

package/src/components/Board/hooks/useGrid.ts

@@ -32,6 +32,7 @@ interface State {
 }
 
 interface Actions {
+  insertValue: (position: Point, value: string) => void;
   onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
@@ -358,7 +359,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
   return [
     { activeIndex, direction, inputRefs },
-    { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
+    { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
   ];
 };
 

package/src/components/NavButtons/NavButtons.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FunctionComponent, memo } from 'react';
 
 import { useAppLayout } from 'hooks';
-import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
+import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
@@ -117,7 +117,7 @@ const NavButtons: FunctionComponent<Props> = ({
           <IconButton
             aria-label={translate('keyMap')}
             className={styles.button}
-            Icon={Keyboard}
+            Icon={KeyboardFill}
             tooltip={translate('keyMap')}
             onClick={onShowKeyMap}
           />

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

@@ -60,20 +60,20 @@
 }
 
 .rack {
+  position: relative;
   display: flex;
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
+  transition: var(--transition);
+  opacity: 1;
 }
 
 .tile {
-  @include focus-effect;
   @include lighthouse-input-size-hack;
+}
 
-  --background-color: var(--color--background);
-
-  &:focus-within {
-    z-index: 2;
-  }
+.hidden {
+  opacity: 0;
 }
 
 .sharpLeft {

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,
@@ -12,10 +26,18 @@ import {
   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;
@@ -27,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) => {
@@ -75,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) => {
@@ -114,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);
+}