scrabble-solver 2.18.10-alpha.2 → 2.19.0-alpha.0

package/packages/scrabble-solver/src/components/Board/Board.tsx

@@ -1,221 +0,0 @@
-/* eslint-disable max-lines, max-statements */
-
-import { type ReferenceType, FloatingPortal } from '@floating-ui/react';
-import { EMPTY_CELL } from '@scrabble-solver/constants';
-import classNames from 'classnames';
-import { type FocusEventHandler, type FunctionComponent, useCallback, useState } from 'react';
-import useOnclickOutside from 'react-cool-onclickoutside';
-import { useDispatch } from 'react-redux';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import {
-  boardSlice,
-  cellFiltersSlice,
-  selectCellFilters,
-  selectConfig,
-  selectHoveredCharacter,
-  selectInputMode,
-  selectLocale,
-  selectShowCoordinates,
-  solveSlice,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import styles from './Board.module.scss';
-import { BoardPure } from './BoardPure';
-import { Actions, InputPrompt } from './components';
-import { useBoardStyle, useFloatingActions, useFloatingFocus, useFloatingInputPrompt, useGrid } from './hooks';
-import { selectHoveredWordCells, selectReachableCells, selectRowsWithCandidate } from './selectors';
-
-interface Props {
-  className?: string;
-}
-
-export const Board: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const config = useTypedSelector(selectConfig);
-  const rows = useTypedSelector(selectRowsWithCandidate);
-  const reachableCells = useTypedSelector(selectReachableCells);
-  const hoveredWordCells = useTypedSelector(selectHoveredWordCells);
-  const inputMode = useTypedSelector(selectInputMode);
-  const cellFilters = useTypedSelector(selectCellFilters);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
-  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 inputRef = inputRefs[activeIndex.y][activeIndex.x];
-  const cell = rows[activeIndex.y][activeIndex.x];
-  const floatingActions = useFloatingActions();
-  const floatingInputPrompt = useFloatingInputPrompt();
-  const floatingFocus = useFloatingFocus();
-
-  const handleBlur: FocusEventHandler = useCallback(
-    (event) => {
-      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) {
-        setHasFocus(false);
-      }
-    },
-    [floatingActions.refs.floating, floatingFocus.refs.floating, floatingInputPrompt.refs.floating],
-  );
-
-  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 newInputRef = inputRefs[newY][newX].current;
-      const newTileElement = newInputRef?.parentElement || null;
-
-      updateFloatingReference(newTileElement);
-      onFocus(newX, newY);
-      setHasFocus(true);
-      setShowInputPrompt(false);
-    },
-    [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, insertValue, locale],
-  );
-
-  const handleToggleBlank = useCallback(() => {
-    if (inputMode === 'keyboard') {
-      inputRef.current?.focus();
-    }
-
-    dispatch(boardSlice.actions.toggleCellIsBlank(cell));
-  }, [cell, dispatch, inputMode, inputRef]);
-
-  const handleToggleDirection = useCallback(() => {
-    if (inputMode === 'keyboard') {
-      inputRef.current?.focus();
-    }
-
-    onDirectionToggle();
-  }, [inputMode, inputRef, onDirectionToggle]);
-
-  const handleToggleFilterCell = useCallback(() => {
-    if (inputMode === 'keyboard') {
-      inputRef.current?.focus();
-    }
-
-    dispatch(cellFiltersSlice.actions.toggle(cell));
-  }, [cell, dispatch, inputMode, inputRef]);
-
-  const ref = useOnclickOutside(() => setHasFocus(false), {
-    ignoreClass: [styles.floating],
-  });
-
-  return (
-    <>
-      <BoardPure
-        cellFilters={cellFilters}
-        className={className}
-        config={config}
-        direction={LOCALE_FEATURES[locale].direction}
-        hoveredCharacter={hoveredCharacter}
-        hoveredWordCells={hoveredWordCells}
-        inputRefs={inputRefs}
-        locale={locale}
-        reachableCells={reachableCells}
-        ref={ref}
-        rows={rows}
-        showCoordinates={showCoordinates}
-        style={boardStyle}
-        translate={translate}
-        onBlur={handleBlur}
-        onChange={onChange}
-        onFocus={handleFocus}
-        onKeyDown={onKeyDown}
-        onPaste={onPaste}
-      />
-
-      <FloatingPortal>
-        <div
-          className={classNames(styles.floating, styles.focus, {
-            [styles.hidden]: !hasFocus,
-          })}
-          ref={floatingFocus.refs.setFloating}
-          style={{
-            position: floatingFocus.strategy,
-            top: `calc(${floatingFocus.y ?? 0}px + var(--cell-size))`,
-            left: floatingFocus.x,
-            display: floatingFocus.isPositioned ? 'block' : 'none',
-            opacity: hasFocus ? 1 : 0,
-            visibility: floatingFocus.x === null || floatingFocus.y === null ? 'hidden' : 'visible',
-          }}
-          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,
-            }}
-            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,
-            }}
-            onDirectionToggle={handleToggleDirection}
-            onSubmit={handleInsertWord}
-          />
-        )}
-      </FloatingPortal>
-    </>
-  );
-};

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -1,166 +0,0 @@
-import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
-import {
-  type Cell as CellModel,
-  type Config,
-  type Locale,
-  type ShowCoordinates,
-  type TextDirection,
-} from '@scrabble-solver/types';
-import classNames from 'classnames';
-import {
-  type ChangeEventHandler,
-  type ClipboardEventHandler,
-  type CSSProperties,
-  type FocusEventHandler,
-  type KeyboardEventHandler,
-  type RefObject,
-  forwardRef,
-  Fragment,
-  memo,
-} from 'react';
-
-import Ban from '@/icons/Ban.svg';
-import FlagFill from '@/icons/FlagFill.svg';
-import { getCoordinate } from '@/lib/getCoordinate';
-import { type CellFilter, type Translate } from '@/types';
-
-import styles from './Board.module.scss';
-import { Cell } from './components';
-
-interface Props {
-  className?: string;
-  cellFilters: CellFilter[];
-  config: Config;
-  direction: TextDirection;
-  hoveredCharacter: string | null;
-  hoveredWordCells: boolean[][] | null;
-  inputRefs: RefObject<HTMLInputElement | null>[][];
-  locale: Locale;
-  reachableCells: boolean[][] | null;
-  rows: CellModel[][];
-  showCoordinates: ShowCoordinates;
-  style?: CSSProperties;
-  translate: Translate;
-  onBlur: FocusEventHandler;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  onFocus: (x: number, y: number) => void;
-  onKeyDown: KeyboardEventHandler<HTMLInputElement>;
-  onPaste: ClipboardEventHandler<HTMLInputElement>;
-}
-
-const BoardPureBase = forwardRef<HTMLDivElement, Props>(
-  (
-    {
-      className,
-      config,
-      direction,
-      cellFilters,
-      hoveredCharacter,
-      hoveredWordCells,
-      inputRefs,
-      locale,
-      reachableCells,
-      rows,
-      showCoordinates,
-      style,
-      translate,
-      onBlur,
-      onChange,
-      onFocus,
-      onKeyDown,
-      onPaste,
-    },
-    ref,
-  ) => (
-    <div
-      className={classNames(styles.board, className)}
-      data-testid="board"
-      ref={ref}
-      style={style}
-      onBlur={onBlur}
-      onKeyDown={onKeyDown}
-      onPaste={onPaste}
-    >
-      <div />
-
-      {rows[0].map((_column, index) => (
-        <div className={styles.coordinate} key={index}>
-          {getCoordinate(index, showCoordinates === 'original' ? 'letter' : 'number')}
-        </div>
-      ))}
-
-      {/* The dynamic changes to the board presentation need to be outside of useBackgroundImage
-        to prevent flickering on blob URL change (i.e. when flagging a field,
-        but not when changing game type since user's attention is not on the board
-        when that happens)*/}
-      {cellFilters.map(({ x, y, type }) => {
-        const Icon = type === 'exclude' ? Ban : FlagFill;
-
-        return (
-          <div
-            className={styles.iconContainer}
-            key={[x, y].join('-')}
-            style={{
-              height: 'var(--cell-size)',
-              width: 'var(--cell-size)',
-              left: direction === 'ltr' ? inlineOffset(x) : undefined,
-              right: direction === 'rtl' ? inlineOffset(x) : undefined,
-              top: inlineOffset(y),
-            }}
-          >
-            <div className={styles.iconBackground} />
-            <Icon aria-hidden="true" className={styles.icon} role="img" />
-          </div>
-        );
-      })}
-
-      {rows.map((cells, y) => (
-        <Fragment key={y}>
-          <div className={styles.coordinate}>
-            {getCoordinate(y, showCoordinates === 'original' ? 'number' : 'letter')}
-          </div>
-
-          {cells.map((cell, x) => {
-            const isHoveredWord = hoveredWordCells ? hoveredWordCells[y][x] : false;
-
-            return (
-              <Cell
-                cell={cell}
-                cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
-                cellLeft={x > 0 ? rows[y][x - 1] : undefined}
-                cellRight={x < rows[y].length - 1 ? rows[y][x + 1] : undefined}
-                cellTop={y > 0 ? rows[y - 1][x] : undefined}
-                config={config}
-                highlighted={cell.isCandidate() || isHoverCharacter(cell, hoveredCharacter) || isHoveredWord}
-                inputRef={inputRefs[y][x]}
-                isReachable={reachableCells ? reachableCells[y][x] : true}
-                key={x}
-                locale={locale}
-                showCoordinates={showCoordinates}
-                translate={translate}
-                onChange={onChange}
-                onFocus={onFocus}
-              />
-            );
-          })}
-        </Fragment>
-      ))}
-    </div>
-  ),
-);
-
-export const BoardPure = memo(BoardPureBase);
-
-function isHoverCharacter(cell: CellModel, hoveredCharacter: string | null): boolean {
-  if (cell.tile.character === EMPTY_CELL || hoveredCharacter === null) {
-    return false;
-  }
-
-  return hoveredCharacter === BLANK
-    ? cell.tile.isBlank
-    : !cell.tile.isBlank && cell.tile.character === hoveredCharacter;
-}
-
-function inlineOffset(index: number) {
-  return `calc(var(--coordinate-size) + var(--border--width) + ${index} * (var(--cell-size) + var(--border--width)))`;
-}

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

@@ -1,33 +0,0 @@
-@use 'styles/mixins' as *;
-
-.actions {
-  display: flex;
-  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);
-    }
-
-    + .action {
-      border-inline-start: none;
-    }
-
-    &:first-child {
-      border-start-end-radius: 0;
-      border-end-end-radius: 0;
-    }
-
-    &:last-child {
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
-    }
-  }
-}

package/packages/scrabble-solver/src/components/Board/components/Actions/Actions.module.scss.d.ts

@@ -1,7 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly action: string;
-  readonly actions: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/components/Board/components/Actions/Actions.tsx

@@ -1,103 +0,0 @@
-import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { type Cell } from '@scrabble-solver/types';
-import classNames from 'classnames';
-import { type HTMLProps, type MouseEventHandler, forwardRef } from 'react';
-
-import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
-import Keyboard from '@/icons/Keyboard.svg';
-import Square from '@/icons/Square.svg';
-import SquareFill from '@/icons/SquareFill.svg';
-import { findCell } from '@/lib/findCell';
-import { isMac } from '@/lib/isMac';
-import { selectCellFilter, selectInputMode, selectResultCandidateCells, useTranslate, useTypedSelector } from '@/state';
-import { type Direction } from '@/types';
-
-import { Button } from '../../../Button';
-import { ToggleDirectionButton } from '../ToggleDirectionButton';
-
-import styles from './Actions.module.scss';
-import { getNextCellFilter } from './lib';
-
-interface Props extends HTMLProps<HTMLDivElement> {
-  cell: Cell;
-  direction: Direction;
-  onDirectionToggle: MouseEventHandler<HTMLButtonElement>;
-  onEnterWord: MouseEventHandler<HTMLButtonElement>;
-  onToggleBlank: MouseEventHandler<HTMLButtonElement>;
-  onToggleFilterCell: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const Actions = forwardRef<HTMLDivElement, Props>(
-  (
-    { cell, className, direction, onDirectionToggle, onEnterWord, onToggleBlank, onToggleFilterCell, ...props },
-    ref,
-  ) => {
-    const translate = useTranslate();
-    const isTouchDevice = useIsTouchDevice();
-    const inputMode = useTypedSelector(selectInputMode);
-    const filter = useTypedSelector((state) => selectCellFilter(state, cell));
-    const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
-    const isBlank = cell.tile.isBlank;
-    const isEmpty = cell.tile.character === EMPTY_CELL || Boolean(findCell(resultCandidateCells, cell.x, cell.y));
-    const { Icon, labelTranslationKey } = getNextCellFilter(filter);
-
-    // 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}>
-        {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(labelTranslationKey)}
-            className={classNames(styles.action)}
-            Icon={Icon}
-            tooltip={
-              <>
-                <span>{translate(labelTranslationKey)}</span>
-                {!isTouchDevice && <span> ({isMac() ? '⌘' : 'Ctrl'} + G)</span>}
-              </>
-            }
-            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}
-            tooltip={
-              <>
-                <span>{isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}</span>
-                {!isTouchDevice && <span> ({translate('common.space')})</span>}
-              </>
-            }
-            onClick={onToggleBlank}
-            onMouseDown={handleMouseDown}
-          />
-        )}
-      </div>
-    );
-  },
-);

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

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

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

@@ -1,32 +0,0 @@
-import { type FunctionComponent, type SVGAttributes } from 'react';
-
-import Ban from '@/icons/Ban.svg';
-import Eraser from '@/icons/Eraser.svg';
-import FlagFill from '@/icons/FlagFill.svg';
-import { type CellFilter, type TranslationKey } from '@/types';
-
-export const getNextCellFilter = (
-  filter: CellFilter | undefined,
-): {
-  Icon: FunctionComponent<SVGAttributes<SVGElement>>;
-  labelTranslationKey: TranslationKey;
-} => {
-  if (filter?.type === 'exclude') {
-    return {
-      Icon: Eraser,
-      labelTranslationKey: 'common.clear',
-    };
-  }
-
-  if (filter?.type === 'include') {
-    return {
-      Icon: Ban,
-      labelTranslationKey: 'cell.filter-cell.exclude',
-    };
-  }
-
-  return {
-    Icon: FlagFill,
-    labelTranslationKey: 'cell.filter-cell.include',
-  };
-};

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

@@ -1,99 +0,0 @@
-@use 'styles/mixins' as *;
-
-@mixin lighthouse-input-size-hack {
-  // Hack for this Lighthouse warning:
-  // > Interactive elements like buttons and links should be large enough (48x48px), and have
-  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
-
-  input {
-    position: absolute;
-    inset: -100%;
-    width: 300%;
-    height: 300%;
-    clip-path: inset(calc(100% / 3));
-  }
-
-  [dir='ltr'] & {
-    &.first3 {
-      input {
-        left: 0;
-        clip-path: polygon(
-          0 calc(100% / 3),
-          calc(100% / 3) calc(100% / 3),
-          calc(100% / 3) calc(200% / 3),
-          0 calc(200% / 3)
-        );
-      }
-    }
-
-    &.last3 {
-      input {
-        left: -200%;
-        clip-path: polygon(
-          calc(200% / 3) calc(100% / 3),
-          100% calc(100% / 3),
-          100% calc(200% / 3),
-          calc(200% / 3) calc(200% / 3)
-        );
-      }
-    }
-  }
-
-  [dir='rtl'] & {
-    &.first3 {
-      input {
-        left: -200%;
-        right: 0;
-        clip-path: polygon(
-          calc(200% / 3) calc(100% / 3),
-          100% calc(100% / 3),
-          100% calc(200% / 3),
-          calc(200% / 3) calc(200% / 3)
-        );
-      }
-    }
-
-    &.last3 {
-      input {
-        left: 0;
-        right: -200%;
-        clip-path: polygon(
-          0 calc(100% / 3),
-          calc(100% / 3) calc(100% / 3),
-          calc(100% / 3) calc(200% / 3),
-          0 calc(200% / 3)
-        );
-      }
-    }
-  }
-}
-
-.tile {
-  @include lighthouse-input-size-hack;
-
-  &.sharpTopLeft {
-    border-start-start-radius: 0;
-  }
-
-  &.sharpTopRight {
-    border-start-end-radius: 0;
-  }
-
-  &.sharpBottomLeft {
-    border-end-start-radius: 0;
-  }
-
-  &.sharpBottomRight {
-    border-end-end-radius: 0;
-  }
-
-  &.unreachable {
-    background-color: var(--border--color);
-    opacity: 0.5;
-    border-radius: 0;
-  }
-
-  &:focus-within {
-    z-index: 2;
-  }
-}

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

@@ -1,13 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly first3: string;
-  readonly last3: string;
-  readonly sharpBottomLeft: string;
-  readonly sharpBottomRight: string;
-  readonly sharpTopLeft: string;
-  readonly sharpTopRight: string;
-  readonly tile: string;
-  readonly unreachable: string;
-};
-
-export default styles;