scrabble-solver 2.18.9 → 2.18.10-alpha.1

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

@@ -1,135 +0,0 @@
-import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { type Cell as CellModel, type Config, type Locale, type ShowCoordinates } from '@scrabble-solver/types';
-import classNames from 'classnames';
-import {
-  type ChangeEventHandler,
-  type FocusEventHandler,
-  type FunctionComponent,
-  memo,
-  type MouseEventHandler,
-  type RefObject,
-  type TouchEventHandler,
-  useCallback,
-} from 'react';
-
-import { getCoordinate } from '@/lib/getCoordinate';
-import { selectInputMode, useTypedStore } from '@/state';
-import type { Translate } from '@/types';
-
-import { Tile } from '../../../Tile';
-
-import styles from './Cell.module.scss';
-
-interface Props {
-  cell: CellModel;
-  cellBottom?: CellModel;
-  cellLeft?: CellModel;
-  cellRight?: CellModel;
-  cellTop?: CellModel;
-  className?: string;
-  config: Config;
-  highlighted?: boolean;
-  inputRef: RefObject<HTMLInputElement | null>;
-  isReachable?: boolean;
-  locale: Locale;
-  showCoordinates: ShowCoordinates;
-  translate: Translate;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  onFocus: (x: number, y: number) => void;
-}
-
-/**
- * Must not subscribe to the store - it can read the store only in event handlers
- */
-const CellBase: FunctionComponent<Props> = ({
-  cell,
-  cellBottom,
-  cellLeft,
-  cellRight,
-  cellTop,
-  className,
-  config,
-  highlighted,
-  inputRef,
-  isReachable = true,
-  locale,
-  showCoordinates,
-  translate,
-  onChange,
-  onFocus,
-}) => {
-  const { tile, x, y } = cell;
-  const store = useTypedStore();
-  const isEmpty = tile.character === EMPTY_CELL;
-  const points = config.getTilePoints(tile);
-  const isValid = !cell.hasTile() || config.tiles.some(({ character }) => character === tile.character);
-
-  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (selectInputMode(store.getState()) === 'touchscreen') {
-        event.preventDefault();
-        event.target.blur();
-      }
-
-      onFocus(x, y);
-    },
-    [store, onFocus, x, y],
-  );
-
-  const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (selectInputMode(store.getState()) === 'touchscreen') {
-        event.preventDefault();
-      }
-
-      onFocus(x, y);
-    },
-    [store, onFocus, x, y],
-  );
-
-  const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (selectInputMode(store.getState()) === 'touchscreen') {
-        event.preventDefault();
-      }
-
-      onFocus(x, y);
-    },
-    [store, onFocus, x, y],
-  );
-
-  return (
-    <Tile
-      aria-label={translate('cell.tile.location', {
-        coordinates:
-          showCoordinates === 'alternative'
-            ? `${getCoordinate(x, 'number')}${getCoordinate(y, 'letter')}`
-            : `${getCoordinate(x, 'letter')}${getCoordinate(y, 'number')}`,
-      })}
-      className={classNames(styles.tile, className, {
-        [styles.first3]: x < 3,
-        [styles.last3]: config.boardWidth - x - 1 < 3,
-        [styles.sharpTopLeft]: cellTop?.hasTile() || cellLeft?.hasTile(),
-        [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
-        [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),
-        [styles.sharpBottomRight]: cellBottom?.hasTile() || cellRight?.hasTile(),
-        [styles.unreachable]: !isReachable,
-      })}
-      character={isEmpty ? undefined : tile.character}
-      highlighted={highlighted}
-      inputRef={inputRef}
-      isBlank={tile.isBlank}
-      isValid={isValid}
-      locale={locale}
-      points={points}
-      raised={!isEmpty}
-      tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
-      onChange={onChange}
-      onFocus={handleFocus}
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleTouchStart}
-    />
-  );
-};
-
-export const Cell = memo(CellBase);

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

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

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

@@ -1,34 +0,0 @@
-@use 'styles/mixins' as *;
-
-.inputPrompt {
-  display: flex;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border--radius);
-  transition: var(--transition);
-  transition-property: opacity;
-}
-
-.toggleDirection {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}
-
-.input {
-  @include text-input;
-
-  height: 100%;
-  max-width: 200px;
-  border: none;
-  border-top: var(--border);
-  border-bottom: var(--border);
-  border-radius: 0;
-}
-
-.insert {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.insertIcon {
-  transform: scale(1.5);
-}

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

@@ -1,10 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly input: string;
-  readonly inputPrompt: string;
-  readonly insert: string;
-  readonly insertIcon: string;
-  readonly toggleDirection: string;
-};
-
-export default styles;

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

@@ -1,87 +0,0 @@
-import classNames from 'classnames';
-import {
-  forwardRef,
-  type HTMLProps,
-  type MouseEventHandler,
-  type SubmitEventHandler,
-  useEffect,
-  useState,
-} from 'react';
-
-import Check from '@/icons/Check.svg';
-import { useTranslate } from '@/state';
-import { type Direction } from '@/types';
-
-import { Button } from '../../../Button';
-import { ToggleDirectionButton } from '../ToggleDirectionButton';
-
-import styles from './InputPrompt.module.scss';
-
-interface Props extends Omit<HTMLProps<HTMLFormElement>, 'onSubmit'> {
-  className?: string;
-  direction: Direction;
-  initialValue: string;
-  onDirectionToggle: MouseEventHandler<HTMLButtonElement>;
-  onSubmit: (input: string) => void;
-}
-
-export const InputPrompt = forwardRef<HTMLFormElement, Props>(
-  ({ className, direction, initialValue, onDirectionToggle, onSubmit, ...props }, ref) => {
-    const translate = useTranslate();
-    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-    const [input, setInput] = useState(initialValue.trim());
-
-    // On iOS it helps with losing focus too early which makes Actions disappear
-    const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();
-
-    const handleSubmit: SubmitEventHandler<HTMLFormElement> = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      onSubmit(input);
-    };
-
-    useEffect(() => {
-      if (inputRef) {
-        inputRef.focus();
-        inputRef.select();
-        inputRef.scrollIntoView({ block: 'start', inline: 'center' });
-      }
-    }, [inputRef]);
-
-    return (
-      <form className={classNames(styles.inputPrompt, className)} ref={ref} onSubmit={handleSubmit} {...props}>
-        <ToggleDirectionButton
-          className={styles.toggleDirection}
-          direction={direction}
-          onClick={onDirectionToggle}
-          onMouseDown={handleMouseDown}
-        />
-
-        <div>
-          <input
-            autoCapitalize="none"
-            autoComplete="off"
-            autoCorrect="off"
-            className={styles.input}
-            placeholder={translate('rack.placeholder')}
-            spellCheck={false}
-            ref={setInputRef}
-            value={input}
-            onChange={(event) => setInput(event.target.value)}
-          />
-        </div>
-
-        <Button
-          aria-label={translate('results.insert')}
-          className={styles.insert}
-          Icon={Check}
-          iconClassName={styles.insertIcon}
-          tooltip={translate('results.insert')}
-          type="submit"
-          variant="primary"
-          onMouseDown={handleMouseDown}
-        />
-      </form>
-    );
-  },
-);

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

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

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

@@ -1,21 +0,0 @@
-.button {
-  padding: var(--spacing--m);
-  box-shadow: none !important;
-
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
-  }
-}
-
-.icon {
-  transition: var(--transition);
-
-  &.right {
-    transform: rotate(-90deg);
-
-    [dir='rtl'] & {
-      transform: rotate(90deg);
-    }
-  }
-}

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

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

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

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import { type ButtonHTMLAttributes, type FunctionComponent } from 'react';
-
-import { useIsTouchDevice } from '@/hooks/useIsTouchDevice';
-import ArrowDown from '@/icons/ArrowDown.svg';
-import { useTranslate } from '@/state';
-import { type Direction } from '@/types';
-
-import { Button } from '../../../Button';
-
-import styles from './ToggleDirectionButton.module.scss';
-
-interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
-  className?: string;
-  direction: Direction;
-}
-
-export const ToggleDirectionButton: FunctionComponent<Props> = ({ className, direction, ...props }) => {
-  const translate = useTranslate();
-  const isTouchDevice = useIsTouchDevice();
-
-  return (
-    <Button
-      aria-label={translate('cell.toggle-direction')}
-      className={classNames(styles.button, className)}
-      data-direction={direction}
-      data-testid="toggle-direction-button"
-      Icon={ArrowDown}
-      iconClassName={classNames(styles.icon, {
-        [styles.right]: direction === 'horizontal',
-      })}
-      tooltip={
-        <>
-          <span>{translate('cell.toggle-direction')}</span>
-          {!isTouchDevice && <span> ({translate('common.arrows')})</span>}
-        </>
-      }
-      {...props}
-    />
-  );
-};

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

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

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

@@ -1,4 +0,0 @@
-export { Actions } from './Actions';
-export { Cell } from './Cell';
-export { InputPrompt } from './InputPrompt';
-export { ToggleDirectionButton } from './ToggleDirectionButton';

package/packages/scrabble-solver/src/components/Board/getBoardBackground.ts

@@ -1,175 +0,0 @@
-import { BONUS_WORD } from '@scrabble-solver/constants';
-import { type Bonus, type Config, type TextDirection } from '@scrabble-solver/types';
-
-import { BORDER_COLOR_LIGHT, BORDER_WIDTH, COLOR_BACKGROUND, COLOR_BONUS_START } from '@/parameters';
-import { type Point } from '@/types';
-
-import { getBonusColor } from './lib';
-
-interface BoardBackgroundOptions {
-  config: Config;
-  direction: TextDirection;
-}
-
-interface Frame {
-  width: number;
-  height: number;
-  direction: TextDirection;
-}
-
-interface BonusesOptions {
-  config: Config;
-  getX: (point: Point) => number;
-  getY: (point: Point) => number;
-}
-
-const CELL_SIZE = 80;
-const COORDINATES_SIZE = CELL_SIZE / 2;
-const BORDER_RADIUS = CELL_SIZE * 0.1;
-const BONUS_SIZE = CELL_SIZE * 0.8;
-const BONUS_OFFSET = CELL_SIZE * 0.1;
-const ICON_SIZE = CELL_SIZE * 0.4;
-const ICON_OFFSET = (CELL_SIZE - ICON_SIZE) / 2;
-const FONT_SIZE = CELL_SIZE * 0.6 * 0.6;
-const FONT_OFFSET = CELL_SIZE / 2;
-const GRID_LINE_SIZE = 1;
-
-const BONUS_SYMBOL_ID = 'b';
-const BONUS_X2_SYMBOL_ID = 'b2';
-const BONUS_X3_SYMBOL_ID = 'b3';
-const BONUS_X4_SYMBOL_ID = 'b4';
-
-// https://icons.getbootstrap.com/icons/star-fill/
-const STAR_PATH =
-  'M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z';
-
-const cache = new WeakMap<Config, Map<TextDirection, string>>();
-
-export function getBoardBackground({ config, direction }: BoardBackgroundOptions): string {
-  const cached = cache.get(config)?.get(direction);
-
-  if (cached) {
-    return cached;
-  }
-
-  const dataUrl = `data:image/svg+xml,${encodeURIComponent(buildSvg({ config, direction }))}`;
-  const byDirection = cache.get(config) ?? new Map<TextDirection, string>();
-  byDirection.set(direction, dataUrl);
-  cache.set(config, byDirection);
-
-  return dataUrl;
-}
-
-function buildSvg({ config, direction }: BoardBackgroundOptions): string {
-  const width = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardWidth - BORDER_WIDTH;
-  const height = COORDINATES_SIZE + (CELL_SIZE + BORDER_WIDTH) * config.boardHeight - BORDER_WIDTH;
-  const getX = (point: Point) => (direction === 'ltr' ? COORDINATES_SIZE : 0) + point.x * (CELL_SIZE + BORDER_WIDTH);
-  const getY = (point: Point) => COORDINATES_SIZE + point.y * (CELL_SIZE + BORDER_WIDTH);
-  const center = { x: Math.floor(config.boardWidth / 2), y: Math.floor(config.boardHeight / 2) };
-
-  const frame: Frame = { direction, height, width };
-
-  return [
-    `<svg height="${height}" viewBox="0 0 ${width} ${height}" width="${width}" xmlns="http://www.w3.org/2000/svg">`,
-    buildDefs(),
-    buildBackground(frame),
-    buildGridLines(config, frame),
-    buildBonuses({ config, getX, getY }),
-    buildStartCell(getX(center), getY(center)),
-    '</svg>',
-  ].join('');
-}
-
-function buildDefs(): string {
-  const bonusRect = `<rect height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${BONUS_OFFSET}" y="${BONUS_OFFSET}"/>`;
-
-  return [
-    '<defs>',
-    `<symbol id="${BONUS_SYMBOL_ID}">${bonusRect}</symbol>`,
-    `<symbol id="${BONUS_X2_SYMBOL_ID}">${bonusRect}${multiplierText(2)}</symbol>`,
-    `<symbol id="${BONUS_X3_SYMBOL_ID}">${bonusRect}${multiplierText(3)}</symbol>`,
-    `<symbol id="${BONUS_X4_SYMBOL_ID}">${bonusRect}${multiplierText(4)}</symbol>`,
-    '</defs>',
-  ].join('');
-}
-
-function multiplierText(multiplier: number): string {
-  return `<text dominant-baseline="central" fill="white" font-family="system-ui, sans-serif" font-size="${FONT_SIZE}" font-weight="bold" text-anchor="middle" x="${FONT_OFFSET}" y="${FONT_OFFSET}">×${multiplier}</text>`;
-}
-
-function buildBackground({ direction, height, width }: Frame): string {
-  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
-  const coordinatesColumnX = direction === 'ltr' ? 0 : width - COORDINATES_SIZE + BORDER_WIDTH;
-
-  return [
-    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
-    `<rect fill="white" height="${height - COORDINATES_SIZE}" width="${width - COORDINATES_SIZE}" x="${cellsX}" y="${COORDINATES_SIZE}"/>`,
-    `<rect fill="${COLOR_BACKGROUND}" height="${COORDINATES_SIZE}" rx="${BORDER_RADIUS}" width="${width}" x="0" y="0"/>`,
-    `<rect fill="${COLOR_BACKGROUND}" height="${height}" rx="${BORDER_RADIUS}" width="${COORDINATES_SIZE}" x="${coordinatesColumnX}" y="0"/>`,
-  ].join('');
-}
-
-function buildGridLines(config: Config, { direction, height, width }: Frame): string {
-  const lines: string[] = [];
-
-  lines.push(horizontalLine(COORDINATES_SIZE - BORDER_WIDTH / 2, width));
-  lines.push(
-    verticalLine(
-      direction === 'ltr' ? COORDINATES_SIZE - BORDER_WIDTH / 2 : width - COORDINATES_SIZE + BORDER_WIDTH / 2,
-      height,
-    ),
-  );
-
-  for (let index = 1; index < config.boardHeight; ++index) {
-    lines.push(horizontalLine(COORDINATES_SIZE + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, width));
-  }
-
-  const cellsX = direction === 'ltr' ? COORDINATES_SIZE : 0;
-
-  for (let index = 1; index < config.boardWidth; ++index) {
-    lines.push(verticalLine(cellsX + index * (CELL_SIZE + BORDER_WIDTH) - BORDER_WIDTH / 2, height));
-  }
-
-  return lines.join('');
-}
-
-function horizontalLine(y: number, width: number): string {
-  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="0" x2="${width}" y1="${y}" y2="${y}"/>`;
-}
-
-function verticalLine(x: number, height: number): string {
-  return `<line stroke="${BORDER_COLOR_LIGHT}" stroke-width="${GRID_LINE_SIZE}" vector-effect="non-scaling-stroke" x1="${x}" x2="${x}" y1="0" y2="${height}"/>`;
-}
-
-function buildBonuses({ config, getX, getY }: BonusesOptions): string {
-  return config.bonuses
-    .map(
-      (bonus) =>
-        `<use fill="${getBonusColor(bonus)}" href="#${getSymbolId(bonus)}" x="${getX(bonus)}" y="${getY(bonus)}"/>`,
-    )
-    .join('');
-}
-
-function getSymbolId(bonus: Bonus): string {
-  if (bonus.type !== BONUS_WORD) {
-    return BONUS_SYMBOL_ID;
-  }
-
-  switch (bonus.multiplier) {
-    case 2:
-      return BONUS_X2_SYMBOL_ID;
-    case 3:
-      return BONUS_X3_SYMBOL_ID;
-    case 4:
-      return BONUS_X4_SYMBOL_ID;
-    default:
-      return BONUS_SYMBOL_ID;
-  }
-}
-
-function buildStartCell(x: number, y: number): string {
-  return [
-    `<rect fill="${COLOR_BONUS_START}" height="${BONUS_SIZE}" rx="${BORDER_RADIUS}" width="${BONUS_SIZE}" x="${x + BONUS_OFFSET}" y="${y + BONUS_OFFSET}"/>`,
-    `<svg height="${ICON_SIZE}" viewBox="0 0 16 16" width="${ICON_SIZE}" x="${x + ICON_OFFSET}" y="${y + ICON_OFFSET}"><path d="${STAR_PATH}" fill="white"/></svg>`,
-  ].join('');
-}

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

@@ -1,5 +0,0 @@
-export { useBoardStyle } from './useBoardStyle';
-export { useFloatingActions } from './useFloatingActions';
-export { useFloatingFocus } from './useFloatingFocus';
-export { useFloatingInputPrompt } from './useFloatingInputPrompt';
-export { useGrid } from './useGrid';

package/packages/scrabble-solver/src/components/Board/hooks/useBoardStyle.ts

@@ -1,24 +0,0 @@
-import { type CSSProperties, useMemo } from 'react';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { selectConfig, selectLocale, useTypedSelector } from '@/state';
-
-import { getBoardBackground } from '../getBoardBackground';
-
-/**
- * Everything here is derived from Redux state only, so the style on the server matches the client
- */
-export const useBoardStyle = () => {
-  const config = useTypedSelector(selectConfig);
-  const locale = useTypedSelector(selectLocale);
-  const { direction } = LOCALE_FEATURES[locale];
-  const backgroundImage = getBoardBackground({ config, direction });
-  const boardStyle = useMemo<CSSProperties>(
-    () => ({
-      backgroundImage: `url(${backgroundImage})`,
-    }),
-    [backgroundImage],
-  );
-
-  return boardStyle;
-};

package/packages/scrabble-solver/src/components/Board/hooks/useFloatingActions.ts

@@ -1,17 +0,0 @@
-import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
-
-import { BOARD_CELL_ACTIONS_OFFSET } from '@/parameters';
-
-export const useFloatingActions = () => {
-  return useFloating({
-    middleware: [
-      offset(({ rects }) => ({
-        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
-        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - rects.floating.width,
-      })),
-      shift(),
-    ],
-    placement: 'top-end',
-    whileElementsMounted: autoUpdate,
-  });
-};

package/packages/scrabble-solver/src/components/Board/hooks/useFloatingFocus.ts

@@ -1,8 +0,0 @@
-import { autoUpdate, useFloating } from '@floating-ui/react';
-
-export const useFloatingFocus = () => {
-  return useFloating({
-    placement: 'top-start',
-    whileElementsMounted: autoUpdate,
-  });
-};

package/packages/scrabble-solver/src/components/Board/hooks/useFloatingInputPrompt.ts

@@ -1,17 +0,0 @@
-import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
-
-import { BOARD_CELL_ACTIONS_OFFSET } from '@/parameters';
-
-export const useFloatingInputPrompt = () => {
-  return useFloating({
-    middleware: [
-      offset({
-        mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
-        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET,
-      }),
-      shift(),
-    ],
-    placement: 'top',
-    whileElementsMounted: autoUpdate,
-  });
-};