scrabble-solver 2.10.7 → 2.10.9

package/packages/scrabble-solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.7",
+  "version": "2.10.9",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,20 +28,22 @@
     "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.7",
-    "@scrabble-solver/constants": "^2.10.7",
-    "@scrabble-solver/dictionaries": "^2.10.7",
-    "@scrabble-solver/logger": "^2.10.7",
-    "@scrabble-solver/solver": "^2.10.7",
-    "@scrabble-solver/types": "^2.10.7",
-    "@scrabble-solver/word-definitions": "^2.10.7",
+    "@scrabble-solver/configs": "^2.10.9",
+    "@scrabble-solver/constants": "^2.10.9",
+    "@scrabble-solver/dictionaries": "^2.10.9",
+    "@scrabble-solver/logger": "^2.10.9",
+    "@scrabble-solver/solver": "^2.10.9",
+    "@scrabble-solver/types": "^2.10.9",
+    "@scrabble-solver/word-definitions": "^2.10.9",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^13.1.6",
+    "merge-refs": "^1.1.2",
+    "next": "^13.2.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

package/packages/scrabble-solver/src/components/Badge/Badge.module.scss

@@ -5,7 +5,7 @@
   padding: var(--spacing--xs) var(--spacing--m);
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: var(--color--background--overlay);
+  background-color: var(--color--background--element);
   line-height: var(--line-height);
   font-size: var(--font--size--m);
   font-weight: bold;

package/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/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/packages/scrabble-solver/src/components/Board/components/Actions/Actions.tsx

@@ -0,0 +1,68 @@
+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;
+
+    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}
+        />
+
+        {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}
+          />
+        )}
+
+        {!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}
+          />
+        )}
+      </div>
+    );
+  },
+);
+
+export default Actions;

package/packages/scrabble-solver/src/components/Board/components/Actions/index.ts

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

package/packages/scrabble-solver/src/components/Board/components/Cell/Cell.module.scss

@@ -1,13 +1,12 @@
 @import 'styles/mixins';
 
-$icon-size: 16px;
-
 .cell {
   @include focus-effect;
+  @include lighthouse-input-size-hack;
 
   position: relative;
   display: table-cell;
-  background-color: white;
+  background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
@@ -36,64 +35,64 @@ $icon-size: 16px;
 
   &.bonusStart {
     &::before {
-      background-color: var(--color--violet--light);
+      background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
-      background-color: var(--color--yellow--light);
+      background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
-      background-color: var(--color--green--light);
+      background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
-      background-color: var(--color--blue--light);
+      background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
-      background-color: var(--color--red--light);
+      background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
-      background-color: var(--color--light-blue--light);
+      background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
-      background-color: var(--color--dark-blue--light);
+      background-color: var(--color--bonus--character-multiplier--3);
     }
   }
 
   &.bonusWord2 {
     &::before {
       content: 'x2';
-      background-color: var(--color--orange);
+      background-color: var(--color--bonus--word-multiplier--2);
     }
   }
 
   &.bonusWord3 {
     &::before {
       content: 'x3';
-      background-color: var(--color--pink);
+      background-color: var(--color--bonus--word-multiplier--3);
     }
   }
 
-  &.candidate {
+  &.filtered {
     &::before {
       content: ' ';
-      background-color: var(--color--primary);
+      background-color: var(--color--foreground--secondary);
     }
   }
 
@@ -112,169 +111,27 @@ $icon-size: 16px;
     pointer-events: none;
     font-size: 60%;
     font-weight: bold;
-    color: white;
+    color: var(--color--white);
     content: ' ';
 
     [lang='fa-IR'] & {
-      font-family: 'Open Sans', sans-serif;
+      font-family: var(--font--family--latin);
     }
   }
 
   &:focus-within {
-    z-index: 1;
-
-    .actions {
-      display: flex;
-    }
-
-    .action {
-      user-select: initial;
-      pointer-events: auto;
-    }
-  }
-}
-
-.actions {
-  display: none;
-  position: absolute;
-  top: -$icon-size;
-  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(--spacing--s) - #{$icon-size});
-  }
-
-  [dir='rtl'] & {
-    right: calc(100% + var(--spacing--s) - #{$icon-size});
+    z-index: 2;
   }
 }
 
-.action {
-  @include button-reset;
-
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing--s);
-  user-select: none;
-  pointer-events: none;
-  box-sizing: content-box;
-  background-color: white;
-  border: var(--border);
-  font-size: var(--font--size--m);
-  line-height: $icon-size;
-  color: var(--color--foreground--secondary);
-  transition: var(--transition);
-  cursor: pointer;
-
-  & + & {
-    [dir='ltr'] & {
-      border-left: none;
-    }
-
-    [dir='rtl'] & {
-      border-right: none;
-    }
-  }
-
-  [dir='ltr'] & {
-    &:first-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
-    }
-
-    &:last-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
-    }
-  }
-
-  [dir='rtl'] & {
-    &:first-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
-    }
-
-    &:last-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
-    }
-  }
-
-  &,
-  .filterCell,
-  .toggleDirection {
-    width: $icon-size;
-    height: $icon-size;
-  }
-
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
-  }
-}
-
-.toggleDirection {
-  transition: var(--transition);
-
-  &.right {
-    transform: rotate(-90deg);
-
-    [dir='rtl'] & {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.blank {
-  user-select: none;
-
-  &.active {
-    font-weight: bold;
-  }
-}
-
-.filterCell {
-  color: var(--color--inactive);
-
-  &.filtered {
-    color: var(--color--foreground--secondary);
-  }
-}
-
-.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: 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);
 }