@scrabble-solver/scrabble-solver 2.11.8 → 2.11.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.8",
+  "version": "2.11.9",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,22 +28,23 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.21.1",
+    "@floating-ui/react": "^0.22.2",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.8",
-    "@scrabble-solver/constants": "^2.11.8",
-    "@scrabble-solver/dictionaries": "^2.11.8",
-    "@scrabble-solver/logger": "^2.11.8",
-    "@scrabble-solver/solver": "^2.11.8",
-    "@scrabble-solver/types": "^2.11.8",
-    "@scrabble-solver/word-definitions": "^2.11.8",
+    "@scrabble-solver/configs": "^2.11.9",
+    "@scrabble-solver/constants": "^2.11.9",
+    "@scrabble-solver/dictionaries": "^2.11.9",
+    "@scrabble-solver/logger": "^2.11.9",
+    "@scrabble-solver/solver": "^2.11.9",
+    "@scrabble-solver/types": "^2.11.9",
+    "@scrabble-solver/word-definitions": "^2.11.9",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
     "next": "^13.2.4",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
+    "react-cool-onclickoutside": "^1.7.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
     "react-portal": "^4.2.2",
@@ -57,9 +58,9 @@
     "workbox-window": "^6.5.4"
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.5.1",
+    "@svgr/webpack": "^7.0.0",
     "@types/classnames": "^2.3.0",
-    "@types/react": "^18.0.28",
+    "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.13.1",
     "@types/react-portal": "^4.0.4",
@@ -68,8 +69,8 @@
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
     "env-cmd": "^10.1.0",
-    "sass": "^1.59.3",
+    "sass": "^1.60.0",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "fa0c31d85a98ce5704ff8e57741204a50071bdc6"
+  "gitHead": "ff5376346ee2ff7d0db2cbcbe98a47de1c96bea2"
 }

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

@@ -1,4 +1,5 @@
 @import 'styles/animations';
+@import 'styles/mixins';
 
 .board {
   display: grid;
@@ -8,14 +9,27 @@
   border-radius: var(--border--radius);
 }
 
-.actions {
+.floating {
   position: absolute;
   z-index: var(--z-index--actions);
   width: max-content;
   height: max-content;
-  animation: var(--transition--duration) var(--transition--easing) hide;
+  animation: var(--transition--duration) var(--transition--easing) show;
+}
+
+.focus {
+  @include focus-effect;
+
+  cursor: text;
 
-  &.shown {
-    animation: var(--transition--duration) var(--transition--easing) show;
+  &::after {
+    content: '';
+    box-shadow: 0 0 0 var(--focus-effect--size) var(--color--focus);
   }
 }
+
+.hidden {
+  pointer-events: none;
+  user-select: none;
+  animation: var(--transition--duration) var(--transition--easing) hide;
+}

package/src/components/Board/Board.tsx

@@ -1,17 +1,28 @@
-import { autoUpdate, FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
+/* eslint-disable max-lines, max-statements */
+
+import { FloatingPortal, ReferenceType } from '@floating-ui/react';
+import { EMPTY_CELL } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useMemo, useState } from 'react';
+import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useState } from 'react';
+import useOnclickOutside from 'react-cool-onclickoutside';
 import { useDispatch } from 'react-redux';
 
 import { useAppLayout } from 'hooks';
-import { getTileSizes } from 'lib';
-import { BOARD_CELL_ACTIONS_OFFSET, TRANSITION } from 'parameters';
-import { boardSlice, cellFilterSlice, selectConfig, selectRowsWithCandidate, useTypedSelector } from 'state';
+import { TRANSITION } from 'parameters';
+import {
+  boardSlice,
+  cellFilterSlice,
+  selectInputMode,
+  selectLocale,
+  selectRowsWithCandidate,
+  solveSlice,
+  useTypedSelector,
+} from 'state';
 
 import styles from './Board.module.scss';
 import BoardPure from './BoardPure';
-import { Actions } from './components';
-import { useBackgroundImage, useGrid } from './hooks';
+import { Actions, InputPrompt } from './components';
+import { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
 
 interface Props {
   className?: string;
@@ -19,91 +30,117 @@ interface Props {
 
 const Board: FunctionComponent<Props> = ({ className }) => {
   const dispatch = useDispatch();
+  const locale = useTypedSelector(selectLocale);
   const rows = useTypedSelector(selectRowsWithCandidate);
-  const config = useTypedSelector(selectConfig);
-  const { actionsWidth, cellSize } = useAppLayout();
-  const { tileFontSize } = getTileSizes(cellSize);
-
-  const [{ activeIndex, direction, inputRefs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] =
-    useGrid(rows);
-  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],
-  );
-  const [showActions, setShowActions] = useState(false);
+  const inputMode = useTypedSelector(selectInputMode);
+  const { cellSize } = useAppLayout();
+  const [
+    { activeIndex, direction, inputRefs },
+    { insertValue, onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
+  ] = useGrid(rows);
+  const boardStyle = useBoardStyle();
+  const [hasFocus, setHasFocus] = useState(false);
+  const [showInputPrompt, setShowInputPrompt] = useState(false);
   const [transition, setTransition] = useState<CSSProperties['transition']>(TRANSITION);
   const inputRef = inputRefs[activeIndex.y][activeIndex.x];
   const cell = rows[activeIndex.y][activeIndex.x];
-
-  const { x, y, strategy, refs } = useFloating({
-    middleware: [
-      offset({
-        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
-        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - actionsWidth,
-      }),
-      shift(),
-    ],
-    placement: 'top-end',
-    whileElementsMounted: autoUpdate,
-  });
+  const floatingActions = useFloatingActions();
+  const floatingInputPrompt = useFloatingInputPrompt();
+  const floatingFocus = useFloatingFocus();
 
   const handleBlur: FocusEventHandler = useCallback(
     (event) => {
-      const eventComesFromActions = refs.floating.current?.contains(event.relatedTarget);
-      const eventComesFromBoard = event.currentTarget.contains(event.relatedTarget);
-      const isLocalEvent = eventComesFromActions || eventComesFromBoard;
+      const comesFromActions = floatingActions.refs.floating.current?.contains(event.relatedTarget);
+      const comesFromBoard = event.currentTarget.contains(event.relatedTarget);
+      const comesFromFocus = floatingFocus.refs.floating.current?.contains(event.relatedTarget);
+      const comesFromInputPrompt = floatingInputPrompt.refs.floating.current?.contains(event.relatedTarget);
+      const isLocalEvent = comesFromActions || comesFromBoard || comesFromFocus || comesFromInputPrompt;
 
       if (!isLocalEvent) {
-        setShowActions(false);
+        setHasFocus(false);
       }
     },
-    [refs.floating],
+    [floatingActions.refs.floating, floatingFocus.refs.floating, floatingInputPrompt.refs.floating],
   );
 
-  const handleDirectionToggle = useCallback(() => {
-    inputRef.current?.focus();
-    onDirectionToggle();
-  }, [inputRef, onDirectionToggle]);
+  const updateFloatingReference = useCallback(
+    (newReference: ReferenceType | null) => {
+      floatingActions.refs.setReference(newReference);
+      floatingFocus.refs.setReference(newReference);
+      floatingInputPrompt.refs.setReference(newReference);
+    },
+    [floatingActions.refs, floatingFocus.refs, floatingInputPrompt.refs],
+  );
 
   const handleFocus: typeof onFocus = useCallback(
     (newX, newY) => {
-      const isFirstFocus = !showActions;
-      const originalTransition = refs.floating.current?.style.transition || '';
+      const isFirstFocus = !hasFocus;
+      const originalTransition = floatingActions.refs.floating.current?.style.transition || '';
       const newInputRef = inputRefs[newY][newX].current;
       const newTileElement = newInputRef?.parentElement || null;
 
-      if (isFirstFocus) {
-        setTransition('none');
-      }
-
-      refs.setReference(newTileElement);
+      updateFloatingReference(newTileElement);
       onFocus(newX, newY);
-      setShowActions(true);
+      setHasFocus(true);
+      setShowInputPrompt(false);
 
       if (isFirstFocus) {
-        setTimeout(() => {
+        setTransition('none');
+
+        globalThis.setTimeout(() => {
           setTransition(originalTransition);
         }, 0);
       }
     },
-    [inputRefs, onFocus, refs.floating, refs.setReference, showActions],
+    [floatingActions.refs.floating, hasFocus, inputRefs, onFocus, updateFloatingReference],
+  );
+
+  const handleEnterWord = useCallback(() => {
+    setShowInputPrompt(true);
+  }, []);
+
+  const handleInsertWord = useCallback(
+    (word: string) => {
+      if (word.trim().length === 0) {
+        dispatch(boardSlice.actions.changeCellValue({ ...activeIndex, value: EMPTY_CELL }));
+      } else {
+        insertValue(activeIndex, word.toLocaleLowerCase(locale));
+      }
+
+      setShowInputPrompt(false);
+      dispatch(solveSlice.actions.submit());
+      setHasFocus(false);
+    },
+    [activeIndex, dispatch, locale],
   );
 
   const handleToggleBlank = useCallback(() => {
-    inputRef.current?.focus();
+    if (inputMode === 'keyboard') {
+      inputRef.current?.focus();
+    }
+
     dispatch(boardSlice.actions.toggleCellIsBlank(cell));
-  }, [cell, dispatch, inputRef]);
+  }, [cell, dispatch, inputMode, inputRef]);
+
+  const handleToggleDirection = useCallback(() => {
+    if (inputMode === 'keyboard') {
+      inputRef.current?.focus();
+    }
+
+    onDirectionToggle();
+  }, [inputMode, inputRef, onDirectionToggle]);
 
   const handleToggleFilterCell = useCallback(() => {
-    inputRef.current?.focus();
+    if (inputMode === 'keyboard') {
+      inputRef.current?.focus();
+    }
+
     dispatch(cellFilterSlice.actions.toggle(cell));
-  }, [cell, dispatch, inputRef]);
+  }, [cell, dispatch, inputMode, inputRef]);
+
+  const ref = useOnclickOutside(() => setHasFocus(false), {
+    ignoreClass: [styles.floating],
+  });
 
   return (
     <>
@@ -111,6 +148,7 @@ const Board: FunctionComponent<Props> = ({ className }) => {
         className={className}
         cellSize={cellSize}
         inputRefs={inputRefs}
+        ref={ref}
         rows={rows}
         style={boardStyle}
         onBlur={handleBlur}
@@ -121,28 +159,59 @@ const Board: FunctionComponent<Props> = ({ className }) => {
       />
 
       <FloatingPortal>
-        <Actions
-          cell={cell}
-          className={classNames(styles.actions, {
-            [styles.shown]: showActions,
+        <div
+          className={classNames(styles.floating, styles.focus, {
+            [styles.hidden]: !hasFocus,
           })}
-          disabled={!showActions}
-          direction={direction}
-          ref={refs.setFloating}
+          ref={floatingFocus.refs.setFloating}
           style={{
-            position: strategy,
-            top: y ?? 0,
-            left: x ?? 0,
+            position: floatingFocus.strategy,
+            top: floatingFocus.y ? floatingFocus.y + cellSize : 0,
+            left: floatingFocus.x ?? 0,
+            width: cellSize,
+            height: cellSize,
+            opacity: hasFocus ? 1 : 0,
+            visibility: floatingFocus.x === null || floatingFocus.y === null ? 'hidden' : 'visible',
             transition,
-            opacity: showActions ? 1 : 0,
-            pointerEvents: showActions ? 'auto' : 'none',
-            userSelect: showActions ? 'auto' : 'none',
-            visibility: x === null || y === null ? 'hidden' : 'visible',
           }}
-          onDirectionToggle={handleDirectionToggle}
-          onToggleBlank={handleToggleBlank}
-          onToggleFilterCell={handleToggleFilterCell}
+          tabIndex={0}
         />
+
+        {hasFocus && !showInputPrompt && (
+          <Actions
+            cell={cell}
+            className={styles.floating}
+            direction={direction}
+            ref={floatingActions.refs.setFloating}
+            style={{
+              position: floatingActions.strategy,
+              top: floatingActions.y ?? 0,
+              left: floatingActions.x ?? 0,
+              transition,
+            }}
+            onDirectionToggle={handleToggleDirection}
+            onEnterWord={handleEnterWord}
+            onToggleBlank={handleToggleBlank}
+            onToggleFilterCell={handleToggleFilterCell}
+          />
+        )}
+
+        {hasFocus && showInputPrompt && (
+          <InputPrompt
+            className={styles.floating}
+            direction={direction}
+            initialValue={cell.tile.character}
+            ref={floatingInputPrompt.refs.setFloating}
+            style={{
+              position: floatingInputPrompt.strategy,
+              top: floatingInputPrompt.y ?? 0,
+              left: floatingInputPrompt.x ?? 0,
+              transition,
+            }}
+            onDirectionToggle={handleToggleDirection}
+            onSubmit={handleInsertWord}
+          />
+        )}
       </FloatingPortal>
     </>
   );

package/src/components/Board/BoardPure.tsx

@@ -5,8 +5,8 @@ import {
   ClipboardEventHandler,
   CSSProperties,
   FocusEventHandler,
+  forwardRef,
   Fragment,
-  FunctionComponent,
   KeyboardEventHandler,
   memo,
   RefObject,
@@ -28,45 +28,37 @@ interface Props {
   onPaste: ClipboardEventHandler<HTMLInputElement>;
 }
 
-const BoardPure: FunctionComponent<Props> = ({
-  className,
-  cellSize,
-  inputRefs,
-  rows,
-  style,
-  onBlur,
-  onChange,
-  onFocus,
-  onKeyDown,
-  onPaste,
-}) => (
-  <div
-    className={classNames(styles.board, className)}
-    style={style}
-    onBlur={onBlur}
-    onKeyDown={onKeyDown}
-    onPaste={onPaste}
-  >
-    {rows.map((cells, y) => (
-      <Fragment key={y}>
-        {cells.map((cell, x) => (
-          <Cell
-            className={styles.cell}
-            cell={cell}
-            cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
-            cellLeft={x > 0 ? rows[y][x - 1] : undefined}
-            cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
-            cellTop={y > 0 ? rows[y - 1][x] : undefined}
-            inputRef={inputRefs[y][x]}
-            key={x}
-            size={cellSize}
-            onChange={onChange}
-            onFocus={onFocus}
-          />
-        ))}
-      </Fragment>
-    ))}
-  </div>
+const BoardPure = forwardRef<HTMLDivElement, Props>(
+  ({ className, cellSize, inputRefs, rows, style, onBlur, onChange, onFocus, onKeyDown, onPaste }, ref) => (
+    <div
+      className={classNames(styles.board, className)}
+      ref={ref}
+      style={style}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      onPaste={onPaste}
+    >
+      {rows.map((cells, y) => (
+        <Fragment key={y}>
+          {cells.map((cell, x) => (
+            <Cell
+              className={styles.cell}
+              cell={cell}
+              cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
+              cellLeft={x > 0 ? rows[y][x - 1] : undefined}
+              cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
+              cellTop={y > 0 ? rows[y - 1][x] : undefined}
+              inputRef={inputRefs[y][x]}
+              key={x}
+              size={cellSize}
+              onChange={onChange}
+              onFocus={onFocus}
+            />
+          ))}
+        </Fragment>
+      ))}
+    </div>
+  ),
 );
 
 export default memo(BoardPure);

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

@@ -5,12 +5,18 @@
   box-shadow: var(--box-shadow);
   border-radius: var(--border--radius);
   transition: var(--transition);
+  transition-property: opacity;
 }
 
 .action {
   padding: var(--spacing--m);
   box-shadow: none !important;
 
+  &:active,
+  &:hover {
+    color: var(--color--foreground);
+  }
+
   & + & {
     [dir='ltr'] & {
       border-left: none;
@@ -44,21 +50,4 @@
       border-bottom-right-radius: 0;
     }
   }
-
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
-  }
-}
-
-.toggleDirection {
-  transition: var(--transition);
-
-  &.right {
-    transform: rotate(-90deg);
-
-    [dir='rtl'] & {
-      transform: rotate(90deg);
-    }
-  }
 }

package/src/components/Board/components/Actions/Actions.tsx

@@ -3,25 +3,38 @@ import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
 import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
-import { ArrowDown, Flag, FlagFill, Square, SquareFill } from 'icons';
+import { Flag, FlagFill, Keyboard, Square, SquareFill } from 'icons';
 import { findCell } from 'lib';
-import { selectCellIsFiltered, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
+import {
+  selectCellIsFiltered,
+  selectInputMode,
+  selectResultCandidateCells,
+  useTranslate,
+  useTypedSelector,
+} from 'state';
+import { Direction } from 'types';
 
 import Button from '../../../Button';
+import ToggleDirectionButton from '../ToggleDirectionButton';
 
 import styles from './Actions.module.scss';
 
 interface Props extends HTMLProps<HTMLDivElement> {
   cell: Cell;
-  direction: 'horizontal' | 'vertical';
+  direction: Direction;
   onDirectionToggle: MouseEventHandler<HTMLButtonElement>;
+  onEnterWord: MouseEventHandler<HTMLButtonElement>;
   onToggleBlank: MouseEventHandler<HTMLButtonElement>;
   onToggleFilterCell: MouseEventHandler<HTMLButtonElement>;
 }
 
 const Actions = forwardRef<HTMLDivElement, Props>(
-  ({ cell, className, direction, disabled, onDirectionToggle, onToggleBlank, onToggleFilterCell, ...props }, ref) => {
+  (
+    { cell, className, direction, onDirectionToggle, onEnterWord, onToggleBlank, onToggleFilterCell, ...props },
+    ref,
+  ) => {
     const translate = useTranslate();
+    const inputMode = useTypedSelector(selectInputMode);
     const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
     const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
     const isBlank = cell.tile.isBlank;
@@ -32,25 +45,31 @@ const Actions = forwardRef<HTMLDivElement, Props>(
 
     return (
       <div className={classNames(styles.actions, className)} ref={ref} {...props}>
-        <Button
-          aria-label={translate('cell.toggle-direction')}
-          className={styles.action}
-          Icon={ArrowDown}
-          iconClassName={classNames(styles.toggleDirection, {
-            [styles.right]: direction === 'horizontal',
-          })}
-          tabIndex={disabled ? -1 : undefined}
-          tooltip={translate('cell.toggle-direction')}
-          onClick={onDirectionToggle}
-          onMouseDown={handleMouseDown}
-        />
+        {inputMode === 'touchscreen' && (
+          <Button
+            aria-label={translate('cell.enter-word')}
+            className={styles.action}
+            Icon={Keyboard}
+            tooltip={translate('cell.enter-word')}
+            onClick={onEnterWord}
+            onMouseDown={handleMouseDown}
+          />
+        )}
+
+        {inputMode === 'keyboard' && (
+          <ToggleDirectionButton
+            className={styles.action}
+            direction={direction}
+            onClick={onDirectionToggle}
+            onMouseDown={handleMouseDown}
+          />
+        )}
 
         {isEmpty && (
           <Button
             aria-label={translate('cell.filter-cell')}
             className={classNames(styles.action)}
             Icon={isFiltered ? Flag : FlagFill}
-            tabIndex={disabled ? -1 : undefined}
             tooltip={translate('cell.filter-cell')}
             onClick={onToggleFilterCell}
             onMouseDown={handleMouseDown}
@@ -62,7 +81,6 @@ const Actions = forwardRef<HTMLDivElement, Props>(
             aria-label={isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             className={styles.action}
             Icon={isBlank ? SquareFill : Square}
-            tabIndex={disabled ? -1 : undefined}
             tooltip={isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
             onClick={onToggleBlank}
             onMouseDown={handleMouseDown}

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

@@ -17,18 +17,18 @@
   }
 
   [dir='ltr'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
+    &:nth-child(15n + 1),
+    &:nth-child(15n + 2),
+    &:nth-child(15n + 3) {
       input {
         left: 0;
         clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
       }
     }
 
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
+    &:nth-last-child(15n + 1),
+    &:nth-last-child(15n + 2),
+    &:nth-last-child(15n + 3) {
       input {
         left: -200%;
         clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
@@ -37,9 +37,9 @@
   }
 
   [dir='rtl'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
+    &:nth-child(15n + 1),
+    &:nth-child(15n + 2),
+    &:nth-child(15n + 3) {
       input {
         left: -200%;
         right: 0;
@@ -47,9 +47,9 @@
       }
     }
 
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
+    &:nth-last-child(15n + 1),
+    &:nth-last-child(15n + 2),
+    &:nth-last-child(15n + 3) {
       input {
         left: 0;
         right: -200%;
@@ -60,7 +60,6 @@
 }
 
 .tile {
-  @include focus-effect;
   @include lighthouse-input-size-hack;
 
   &.sharpTopLeft {