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

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

@@ -0,0 +1,135 @@
+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,
+  type MouseEventHandler,
+  type RefObject,
+  type TouchEventHandler,
+  memo,
+  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')}`,
+      })}
+      character={isEmpty ? undefined : tile.character}
+      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,
+      })}
+      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

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

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

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

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

@@ -0,0 +1,87 @@
+import classNames from 'classnames';
+import {
+  type HTMLProps,
+  type MouseEventHandler,
+  type SubmitEventHandler,
+  forwardRef,
+  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')}
+            ref={setInputRef}
+            spellCheck={false}
+            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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+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,
+  });
+};