scrabble-solver 2.18.10-alpha.1 → 2.18.10-alpha.2

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

@@ -0,0 +1,221 @@
+/* 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

@@ -0,0 +1,166 @@
+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

@@ -0,0 +1,33 @@
+@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

@@ -0,0 +1,7 @@
+// 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

@@ -0,0 +1,103 @@
+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

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

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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,99 @@
+@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

@@ -0,0 +1,13 @@
+// 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;