@scrabble-solver/scrabble-solver 2.11.7 → 2.11.9

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,47 @@
+@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);
+}
+
+.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/useBackgroundImage.tsx

@@ -5,7 +5,7 @@ import { useMemo } from 'react';
 import { renderToString } from 'react-dom/server';
 import { Provider } from 'react-redux';
 
-import { useAppLayout } from 'hooks';
+import { useAppLayout, useMediaQueries } from 'hooks';
 import { FlagFill, Star } from 'icons';
 import { dataUrlToBlob, getTileSizes } from 'lib';
 import { BORDER_COLOR_LIGHT, BORDER_RADIUS, BORDER_WIDTH, COLOR_BONUS_START, COLOR_FILTERED } from 'parameters';
@@ -14,6 +14,8 @@ import { Point } from 'types';
 
 import { getBonusColor } from '../lib';
 
+const BORDER_RADIUS_XS = 3;
+const GRID_LINE_SIZE = 1;
 const HORIZONTAL_LINE = 'h';
 const VERTICAL_LINE = 'v';
 const BONUS = 'b';
@@ -23,6 +25,8 @@ const CELL_FILTER = 'c';
 
 const useBackgroundImage = () => {
   const { boardSize, cellSize } = useAppLayout();
+  const { isLessThanXs } = useMediaQueries();
+  const borderRadius = isLessThanXs ? BORDER_RADIUS_XS : BORDER_RADIUS;
   const config = useTypedSelector(selectConfig);
   const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
   const cellFilter = useTypedSelector(selectCellFilter);
@@ -53,19 +57,19 @@ const useBackgroundImage = () => {
       >
         <defs>
           <symbol id={HORIZONTAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={1} width={viewBoxWidth} />
+            <rect fill={BORDER_COLOR_LIGHT} height={GRID_LINE_SIZE} width={viewBoxWidth} />
           </symbol>
 
           <symbol id={VERTICAL_LINE}>
-            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={1} />
+            <rect fill={BORDER_COLOR_LIGHT} height={viewBoxHeight} width={GRID_LINE_SIZE} />
           </symbol>
 
           <symbol id={BONUS}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
           </symbol>
 
           <symbol id={BONUS_WORD_2}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
 
             <text
               dominantBaseline="central"
@@ -82,7 +86,7 @@ const useBackgroundImage = () => {
           </symbol>
 
           <symbol id={BONUS_WORD_3}>
-            <rect height={bonusSize} rx={BORDER_RADIUS} width={bonusSize} x={bonusOffset} y={bonusOffset} />
+            <rect height={bonusSize} rx={borderRadius} width={bonusSize} x={bonusOffset} y={bonusOffset} />
 
             <text
               dominantBaseline="central"
@@ -102,7 +106,7 @@ const useBackgroundImage = () => {
             <rect
               fill={COLOR_FILTERED}
               height={bonusSize}
-              rx={BORDER_RADIUS}
+              rx={borderRadius}
               width={bonusSize}
               x={bonusOffset}
               y={bonusOffset}
@@ -112,7 +116,7 @@ const useBackgroundImage = () => {
           </symbol>
         </defs>
 
-        <rect fill="white" height={viewBoxHeight} rx={BORDER_RADIUS} width={viewBoxWidth} x="0" y="0" />
+        <rect fill="white" height={viewBoxHeight} rx={borderRadius} width={viewBoxWidth} x="0" y="0" />
 
         {Array.from({ length: config.boardHeight - 1 }).map((_value, index) => (
           <use key={index} href={`#${HORIZONTAL_LINE}`} y={(index + 1) * (cellSize + BORDER_WIDTH) - BORDER_WIDTH} />
@@ -137,7 +141,7 @@ const useBackgroundImage = () => {
         <rect
           fill={COLOR_BONUS_START}
           height={bonusSize}
-          rx={BORDER_RADIUS}
+          rx={borderRadius}
           width={bonusSize}
           x={getX(center) + bonusOffset}
           y={getY(center) + bonusOffset}

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

@@ -17,7 +17,7 @@ import { useDispatch } from 'react-redux';
 
 import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
 import { Direction, Point } from 'types';
 
@@ -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;
@@ -290,6 +291,22 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
+        const isTogglingBlank = isCtrl(event) && character === 'b';
+        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
+
+        if (isTogglingBlank) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.toggleCellIsBlank(position));
+          return;
+        }
+
+        if (isCtrl(event) && twoCharacterTile) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
+          moveFocus(1);
+          return;
+        }
+
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 
@@ -342,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/Key/Key.module.scss

@@ -1,19 +1,15 @@
-$key-size: 36px;
-$icon-size: 15px;
-
 .key {
   position: relative;
-  top: calc(0px - 2 * var(--border--width));
   display: inline-block;
-  min-width: $key-size;
-  height: $key-size;
+  min-width: var(--key--height);
+  height: var(--key--height);
   padding: var(--spacing--s) var(--spacing--m);
   background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);
   font-family: var(--font--family--monospace);
-  line-height: calc(#{$key-size} - 2 * (var(--spacing--s) + var(--border--width)));
+  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
   vertical-align: middle;
   text-align: center;
   white-space: nowrap;
@@ -24,9 +20,9 @@ $icon-size: 15px;
 
   :global(svg) {
     position: absolute;
-    top: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    left: calc(#{($key-size - $icon-size) / 2} - var(--border--width));
-    width: $icon-size;
-    height: $icon-size;
+    top: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    left: calc((var(--key--height) - var(--key--icon--size)) / 2 - var(--border--width));
+    width: var(--key--icon--size);
+    height: var(--key--icon--size);
   }
 }

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 {