@scrabble-solver/scrabble-solver 2.10.8 → 2.10.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.8",
+  "version": "2.10.10",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -21,28 +21,29 @@
   "homepage": "https://github.com/kamilmielnik/scrabble-solver#readme",
   "scripts": {
     "build": "env-cmd next build",
-    "clean": "rimraf .next/ node_modules/ scrabble-solver-all.log scrabble-solver-error.log",
+    "clean": "rimraf .next/ node_modules/",
     "clean:force": "npm run clean && rimraf package-lock.json",
     "debug": "NODE_OPTIONS='--inspect' next dev",
     "dev": "env-cmd next dev",
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.19.2",
     "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.10.8",
-    "@scrabble-solver/constants": "^2.10.8",
-    "@scrabble-solver/dictionaries": "^2.10.8",
-    "@scrabble-solver/logger": "^2.10.8",
-    "@scrabble-solver/solver": "^2.10.8",
-    "@scrabble-solver/types": "^2.10.8",
-    "@scrabble-solver/word-definitions": "^2.10.8",
+    "@scrabble-solver/configs": "^2.10.10",
+    "@scrabble-solver/constants": "^2.10.10",
+    "@scrabble-solver/dictionaries": "^2.10.10",
+    "@scrabble-solver/logger": "^2.10.10",
+    "@scrabble-solver/solver": "^2.10.10",
+    "@scrabble-solver/types": "^2.10.10",
+    "@scrabble-solver/word-definitions": "^2.10.10",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
     "merge-refs": "^1.1.2",
-    "next": "^13.1.6",
+    "next": "^13.2.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -77,5 +78,5 @@
     "sass": "^1.58.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "faa8a69c239fd14a2b07fe18744580e8713e93ea"
+  "gitHead": "42551ac84b78ed24543230c19b861e1543f7a50a"
 }

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

@@ -1,3 +1,5 @@
+@import 'styles/animations';
+
 .board {
   display: table;
   box-shadow: var(--box-shadow);
@@ -7,3 +9,15 @@
 .row {
   display: table-row;
 }
+
+.actions {
+  position: absolute;
+  z-index: var(--z-index--actions);
+  width: max-content;
+  height: max-content;
+  animation: var(--transition--duration) var(--transition--easing) hide;
+
+  &.shown {
+    animation: var(--transition--duration) var(--transition--easing) show;
+  }
+}

package/src/components/Board/Board.tsx

@@ -1,36 +1,134 @@
-import { FunctionComponent, Ref } from 'react';
+import { autoUpdate, FloatingPortal, offset, shift, useFloating, useMergeRefs } from '@floating-ui/react';
+import classNames from 'classnames';
+import { CSSProperties, FocusEventHandler, FunctionComponent, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { useMeasure } from 'react-use';
 
-import { selectBoard, selectRowsWithCandidate, useTypedSelector } from 'state';
+import { BOARD_CELL_ACTIONS_OFFSET, TRANSITION } from 'parameters';
+import { boardSlice, cellFilterSlice, selectBoard, selectRowsWithCandidate, useTypedSelector } from 'state';
 
+import styles from './Board.module.scss';
 import BoardPure from './BoardPure';
+import { Actions } from './components';
 import { useGrid } from './hooks';
 
 interface Props {
   cellSize: number;
   className?: string;
-  innerRef?: Ref<HTMLDivElement>;
 }
 
-const Board: FunctionComponent<Props> = ({ cellSize, className, innerRef }) => {
+const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
+  const dispatch = useDispatch();
   const rows = useTypedSelector(selectRowsWithCandidate);
   const board = useTypedSelector(selectBoard);
-  const [{ direction, refs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] = useGrid(rows);
+  const [actionsMeasureRef, { width: actionsWidth }] = useMeasure<HTMLDivElement>();
+  const [{ activeIndex, direction, inputRefs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] =
+    useGrid(rows);
+  const inputRef = inputRefs[activeIndex.y][activeIndex.x];
+  const cell = rows[activeIndex.y][activeIndex.x];
+  const [showActions, setShowActions] = useState(false);
+  const [transition, setTransition] = useState<CSSProperties['transition']>(TRANSITION);
+
+  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 actionsRef = useMergeRefs([actionsMeasureRef, refs.setFloating]);
+
+  const handleBlur: FocusEventHandler = (event) => {
+    const eventComesFromActions = refs.floating.current?.contains(event.relatedTarget);
+    const eventComesFromBoard = event.currentTarget.contains(event.relatedTarget);
+    const isLocalEvent = eventComesFromActions || eventComesFromBoard;
+
+    if (!isLocalEvent) {
+      setShowActions(false);
+    }
+  };
+
+  const handleDirectionToggle = () => {
+    inputRef.current?.focus();
+    onDirectionToggle();
+  };
+
+  const handleFocus: typeof onFocus = (newX, newY) => {
+    const isFirstFocus = !showActions;
+    const originalTransition = refs.floating.current?.style.transition || '';
+    const newInputRef = inputRefs[newY][newX].current;
+    const newTileElement = newInputRef?.parentElement || null;
+
+    if (isFirstFocus) {
+      setTransition('none');
+    }
+
+    refs.setReference(newTileElement);
+    onFocus(newX, newY);
+    setShowActions(true);
+
+    if (isFirstFocus) {
+      setTimeout(() => {
+        setTransition(originalTransition);
+      }, 0);
+    }
+  };
+
+  const handleToggleBlank = () => {
+    inputRef.current?.focus();
+    dispatch(boardSlice.actions.toggleCellIsBlank(cell));
+  };
+
+  const handleToggleFilterCell = () => {
+    inputRef.current?.focus();
+    dispatch(cellFilterSlice.actions.toggle(cell));
+  };
 
   return (
-    <BoardPure
-      className={className}
-      cellSize={cellSize}
-      center={board.center}
-      direction={direction}
-      innerRef={innerRef}
-      refs={refs}
-      rows={rows}
-      onChange={onChange}
-      onDirectionToggle={onDirectionToggle}
-      onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      onPaste={onPaste}
-    />
+    <>
+      <BoardPure
+        className={className}
+        cellSize={cellSize}
+        center={board.center}
+        inputRefs={inputRefs}
+        rows={rows}
+        onBlur={handleBlur}
+        onChange={onChange}
+        onFocus={handleFocus}
+        onKeyDown={onKeyDown}
+        onPaste={onPaste}
+      />
+
+      <FloatingPortal>
+        <Actions
+          cell={cell}
+          className={classNames(styles.actions, {
+            [styles.shown]: showActions,
+          })}
+          disabled={!showActions}
+          direction={direction}
+          ref={actionsRef}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            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}
+        />
+      </FloatingPortal>
+    </>
   );
 };
 

package/src/components/Board/BoardPure.tsx

@@ -3,15 +3,13 @@ import classNames from 'classnames';
 import {
   ChangeEventHandler,
   ClipboardEventHandler,
+  FocusEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
   memo,
-  Ref,
   RefObject,
 } from 'react';
 
-import { Direction } from 'types';
-
 import styles from './Board.module.scss';
 import { Cell } from './components';
 
@@ -19,12 +17,10 @@ interface Props {
   className?: string;
   cellSize: number;
   center: CellModel;
-  direction: Direction;
-  innerRef?: Ref<HTMLDivElement>;
-  refs: RefObject<HTMLInputElement>[][];
+  inputRefs: RefObject<HTMLInputElement>[][];
   rows: CellModel[][];
+  onBlur: FocusEventHandler;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
   onPaste: ClipboardEventHandler<HTMLInputElement>;
@@ -34,32 +30,28 @@ const BoardPure: FunctionComponent<Props> = ({
   className,
   cellSize,
   center,
-  direction,
-  innerRef,
-  refs,
+  inputRefs,
   rows,
+  onBlur,
   onChange,
-  onDirectionToggle,
   onFocus,
   onKeyDown,
   onPaste,
 }) => (
-  <div className={classNames(styles.board, className)} ref={innerRef} onKeyDown={onKeyDown} onPaste={onPaste}>
+  <div className={classNames(styles.board, className)} onBlur={onBlur} onKeyDown={onKeyDown} onPaste={onPaste}>
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
           <Cell
             className={styles.cell}
             cell={cell}
-            direction={direction}
-            inputRef={refs[y][x]}
+            inputRef={inputRefs[y][x]}
             isBottom={y === rows.length - 1}
             isCenter={center.x === x && center.y === y}
             isRight={x === cells.length - 1}
             key={x}
             size={cellSize}
             onChange={onChange}
-            onDirectionToggle={onDirectionToggle}
             onFocus={onFocus}
           />
         ))}

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

@@ -0,0 +1,64 @@
+@import 'styles/mixins';
+
+.actions {
+  display: flex;
+  box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
+  transition: var(--transition);
+}
+
+.action {
+  padding: var(--spacing--m);
+  box-shadow: none !important;
+
+  & + & {
+    [dir='ltr'] & {
+      border-left: none;
+    }
+
+    [dir='rtl'] & {
+      border-right: none;
+    }
+  }
+
+  [dir='ltr'] & {
+    &:first-child {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &:last-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+  }
+
+  [dir='rtl'] & {
+    &:first-child {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &:last-child {
+      border-top-right-radius: 0;
+      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

@@ -0,0 +1,74 @@
+import { EMPTY_CELL } from '@scrabble-solver/constants';
+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 { selectCellIsFiltered, useTranslate, useTypedSelector } from 'state';
+
+import Button from '../../../Button';
+
+import styles from './Actions.module.scss';
+
+interface Props extends HTMLProps<HTMLDivElement> {
+  cell: Cell;
+  direction: 'horizontal' | 'vertical';
+  onDirectionToggle: MouseEventHandler<HTMLButtonElement>;
+  onToggleBlank: MouseEventHandler<HTMLButtonElement>;
+  onToggleFilterCell: MouseEventHandler<HTMLButtonElement>;
+}
+
+const Actions = forwardRef<HTMLDivElement, Props>(
+  ({ cell, className, direction, disabled, onDirectionToggle, onToggleBlank, onToggleFilterCell, ...props }, ref) => {
+    const translate = useTranslate();
+    const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+    const isBlank = cell.tile.isBlank;
+    const isEmpty = cell.tile.character === EMPTY_CELL;
+
+    // On iOS it helps with losing focus too early which makes Actions disappear
+    const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
+
+    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}
+        />
+
+        {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}
+          />
+        )}
+
+        {!isEmpty && (
+          <Button
+            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}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export default Actions;

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

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

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

@@ -2,6 +2,7 @@
 
 .cell {
   @include focus-effect;
+  @include lighthouse-input-size-hack;
 
   position: relative;
   display: table-cell;
@@ -88,10 +89,10 @@
     }
   }
 
-  &.candidate {
+  &.filtered {
     &::before {
       content: ' ';
-      background-color: var(--color--primary);
+      background-color: var(--color--foreground--secondary);
     }
   }
 
@@ -114,135 +115,23 @@
     content: ' ';
 
     [lang='fa-IR'] & {
-      font-family: 'Open Sans', sans-serif;
+      font-family: var(--font--family--latin);
     }
   }
 
   &:focus-within {
     z-index: 2;
-
-    .actions {
-      display: flex;
-    }
-
-    .action {
-      user-select: initial;
-      pointer-events: auto;
-    }
-  }
-}
-
-.actions {
-  --offset: var(--spacing--m);
-
-  @include media('<xs') {
-    --offset: var(--spacing--s);
-  }
-
-  display: none;
-  position: absolute;
-  bottom: calc(100% - var(--offset));
-  z-index: 2;
-  transition: var(--transition);
-  pointer-events: none;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border--radius);
-
-  [dir='ltr'] & {
-    left: calc(100% - var(--offset));
-  }
-
-  [dir='rtl'] & {
-    right: calc(100% - var(--offset));
-  }
-}
-
-.action {
-  padding: var(--spacing--m);
-  box-shadow: none !important;
-
-  & + & {
-    [dir='ltr'] & {
-      border-left: none;
-    }
-
-    [dir='rtl'] & {
-      border-right: none;
-    }
-  }
-
-  [dir='ltr'] & {
-    &:first-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:last-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-  }
-
-  [dir='rtl'] & {
-    &:first-child {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:last-child {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
   }
 }
 
-.toggleDirection {
-  transition: var(--transition);
-
-  &.right {
-    transform: rotate(-90deg);
-
-    [dir='rtl'] & {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.iconContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flagContainer {
-  background-color: var(--color--primary);
-}
-
-.flag,
-.star {
-  color: var(--color--white);
-}
-
-.star {
+.icon {
   $size: 40%;
 
+  position: absolute;
+  top: 50%;
+  left: 50%;
   width: $size;
   height: $size;
-}
-
-.flag {
-  $size: 50%;
-
-  width: $size;
-  height: $size;
+  transform: translate(-50%, -50%);
+  color: var(--color--white);
 }

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

@@ -1,12 +1,9 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
 import { ChangeEventHandler, FunctionComponent, RefObject, useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
 import {
-  boardSlice,
-  cellFilterSlice,
   selectCellBonus,
   selectCellIsFiltered,
   selectCellIsValid,
@@ -21,32 +18,27 @@ import CellPure from './CellPure';
 interface Props {
   cell: CellModel;
   className?: string;
-  direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
   isCenter: boolean;
   isRight: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
 }
 
 const Cell: FunctionComponent<Props> = ({
   cell,
   className,
-  direction,
   inputRef,
   isBottom,
   isCenter,
   isRight,
   size,
   onChange,
-  onDirectionToggle,
   onFocus,
 }) => {
   const { tile, x, y } = cell;
-  const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
@@ -57,32 +49,8 @@ const Cell: FunctionComponent<Props> = ({
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
-  const handleDirectionToggleClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    onDirectionToggle();
-  }, [onDirectionToggle]);
-
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
-  const handleToggleBlankClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    dispatch(boardSlice.actions.toggleCellIsBlank({ x, y }));
-  }, [dispatch, x, y]);
-
-  const handleToggleFilterCellClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    dispatch(cellFilterSlice.actions.toggle({ x, y }));
-  }, [dispatch, x, y]);
-
   return (
     <CellPure
       aria-label={translate('cell.tile.location', {
@@ -92,7 +60,6 @@ const Cell: FunctionComponent<Props> = ({
       bonus={bonus}
       cell={cell}
       className={className}
-      direction={direction}
       inputRef={inputRef}
       isBottom={isBottom}
       isCenter={isCenter}
@@ -104,12 +71,8 @@ const Cell: FunctionComponent<Props> = ({
       size={size}
       style={style}
       tile={tile}
-      translate={translate}
       onChange={onChange}
-      onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
-      onToggleBlankClick={handleToggleBlankClick}
-      onToggleFilterCellClick={handleToggleFilterCellClick}
     />
   );
 };