scrabble-solver 2.18.9 → 2.18.10-alpha.1

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

@@ -1,199 +0,0 @@
-/* eslint-disable max-lines, max-statements */
-
-import { FloatingPortal, autoUpdate, useFloating } from '@floating-ui/react';
-import classNames from 'classnames';
-import {
-  type ChangeEvent,
-  type ClipboardEvent,
-  type FunctionComponent,
-  type RefObject,
-  createRef,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import useOnclickOutside from 'react-cool-onclickoutside';
-import { useDispatch } from 'react-redux';
-
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
-import { extractCharacters } from '@/lib/extractCharacters';
-import { extractInputValue } from '@/lib/extractInputValue';
-import { isCtrl } from '@/lib/isCtrl';
-import { rackSlice, selectConfig, selectInputMode, selectLocale, selectRack, useTypedSelector } from '@/state';
-
-import { InputPrompt, RackTile } from './components';
-import styles from './Rack.module.scss';
-import { selectRemainingTilesGroups } from './selectors';
-
-interface Props {
-  className?: string;
-}
-
-export const Rack: FunctionComponent<Props> = ({ className }) => {
-  const dispatch = useDispatch();
-  const config = useTypedSelector(selectConfig);
-  const locale = useTypedSelector(selectLocale);
-  const rack = useTypedSelector(selectRack);
-  const inputMode = useTypedSelector(selectInputMode);
-  const tiles = useTypedSelector(selectRemainingTilesGroups);
-  const tilesCount = tiles.length;
-  const tilesRefs = useMemo(
-    () => Array.from({ length: tilesCount }).map(() => createRef<HTMLInputElement | null>()),
-    [tilesCount],
-  );
-  const activeIndexRef = useRef<number | undefined>(undefined);
-  const [hasFocus, setHasFocus] = useState(false);
-  const [input, setInput] = useState('');
-  const { direction } = LOCALE_FEATURES[locale];
-  const showInputPrompt = inputMode === 'touchscreen' && hasFocus;
-  const ref = useRef<HTMLDivElement>(null);
-
-  const floatingInputPrompt = useFloating({
-    placement: 'bottom-start',
-    whileElementsMounted: autoUpdate,
-  });
-
-  useOnclickOutside(() => setHasFocus(false), {
-    ignoreClass: [InputPrompt.styles.form, InputPrompt.styles.input],
-    refs: [ref as RefObject<HTMLDivElement>],
-  });
-
-  const changeActiveIndex = useCallback(
-    (offset: number) => {
-      const nextActiveIndex = Math.min(Math.max((activeIndexRef.current || 0) + offset, 0), tilesCount - 1);
-      const tileRef = tilesRefs[nextActiveIndex].current;
-
-      if (tileRef) {
-        tileRef.focus();
-      }
-
-      activeIndexRef.current = nextActiveIndex;
-    },
-    [activeIndexRef, tilesCount, tilesRefs],
-  );
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      const value = extractInputValue(event.target);
-      const characters = value ? extractCharacters(config, value) : [];
-      changeActiveIndex(value ? characters.length : -1);
-    },
-    [changeActiveIndex, config],
-  );
-
-  const handlePaste = useCallback(
-    (event: ClipboardEvent<HTMLInputElement>) => {
-      const index = activeIndexRef.current;
-
-      if (typeof index === 'undefined') {
-        return;
-      }
-
-      event.preventDefault();
-      const value = event.clipboardData.getData('text/plain').toLocaleLowerCase();
-      const characters = value ? extractCharacters(config, value) : [];
-      changeActiveIndex(value ? characters.length : -1);
-      dispatch(rackSlice.actions.changeCharacters({ characters, index }));
-    },
-    [changeActiveIndex, config, dispatch],
-  );
-
-  const handleFocus = useCallback(() => {
-    setHasFocus(true);
-    floatingInputPrompt.refs.setPositionReference(ref.current);
-    const characters = rack.filter((character) => character !== null);
-    const uppercasedDigraphs = characters.map((character) => {
-      return character.length > 1 ? character.toLocaleUpperCase(locale) : character;
-    });
-    setInput(uppercasedDigraphs.join(''));
-  }, [floatingInputPrompt.refs, locale, rack, ref]);
-
-  const handleKeyDown = useMemo(() => {
-    return createKeyboardNavigation({
-      onArrowLeft: (event) => {
-        event.preventDefault();
-        changeActiveIndex(direction === 'ltr' ? -1 : 1);
-      },
-      onArrowRight: (event) => {
-        event.preventDefault();
-        changeActiveIndex(direction === 'ltr' ? 1 : -1);
-      },
-      onBackspace: (event) => {
-        event.preventDefault();
-        changeActiveIndex(-1);
-      },
-      onDelete: (event) => {
-        const index = activeIndexRef.current;
-
-        if (typeof index === 'undefined') {
-          return;
-        }
-
-        event.preventDefault();
-        dispatch(rackSlice.actions.changeCharacters({ characters: [null], index }));
-        changeActiveIndex(1);
-      },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key.toLocaleLowerCase())) {
-          changeActiveIndex(1);
-        } else if (event.currentTarget.value.toLocaleLowerCase() === event.key.toLocaleLowerCase()) {
-          // change event did not fire because the same character was typed over the current one
-          // but we still want to move the caret
-          event.preventDefault();
-          event.stopPropagation();
-          changeActiveIndex(1);
-        }
-      },
-    });
-  }, [changeActiveIndex, config, direction, dispatch]);
-
-  return (
-    <>
-      <div
-        className={classNames(styles.rack, className, {
-          [styles.hidden]: showInputPrompt,
-        })}
-        data-testid="rack"
-        ref={ref}
-        onPaste={handlePaste}
-      >
-        {tiles.map(({ character, tile }, index) => (
-          <RackTile
-            activeIndexRef={activeIndexRef}
-            character={character}
-            className={classNames(styles.tile, {
-              [styles.sharpLeft]: index !== 0,
-              [styles.sharpRight]: index !== tiles.length - 1,
-            })}
-            index={index}
-            inputRef={tilesRefs[index]}
-            key={index}
-            tile={tile}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-          />
-        ))}
-      </div>
-
-      {showInputPrompt && (
-        <FloatingPortal>
-          <InputPrompt
-            ref={floatingInputPrompt.refs.setFloating}
-            style={{
-              position: floatingInputPrompt.strategy,
-              top: floatingInputPrompt.y ? `calc(${floatingInputPrompt.y}px - var(--rack-tile-size))` : 0,
-              left: floatingInputPrompt.x ?? 0,
-            }}
-            value={input}
-            onBlur={() => setHasFocus(false)}
-            onChange={(event) => setInput(event.target.value)}
-            onSubmit={() => setHasFocus(false)}
-          />
-        </FloatingPortal>
-      )}
-    </>
-  );
-};

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

@@ -1,21 +0,0 @@
-@use 'styles/mixins' as *;
-
-.form {
-  @include focus-effect;
-
-  width: calc(var(--rack-size) * var(--rack-tile-size));
-  height: var(--rack-tile-size);
-  border-radius: var(--border--radius);
-}
-
-.input {
-  @include text-input;
-
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: var(--border--radius);
-  border: none;
-  box-shadow: var(--box-shadow);
-}

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

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

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

@@ -1,73 +0,0 @@
-import classNames from 'classnames';
-import {
-  type CSSProperties,
-  type ChangeEventHandler,
-  type SubmitEventHandler,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useState,
-} from 'react';
-import { useDispatch } from 'react-redux';
-
-import { rackSlice, selectConfig, useTranslate, useTypedSelector } from '@/state';
-
-import styles from './InputPrompt.module.scss';
-import { extractRack } from './lib';
-
-interface Props {
-  className?: string;
-  style?: CSSProperties;
-  value: string;
-  onBlur: () => void;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  onSubmit: SubmitEventHandler<HTMLFormElement>;
-}
-
-const InputPromptBase = forwardRef<HTMLFormElement, Props>(
-  ({ className, style, value, onBlur, onChange, onSubmit, ...props }, ref) => {
-    const dispatch = useDispatch();
-    const translate = useTranslate();
-    const config = useTypedSelector(selectConfig);
-    const [inputRef, setInputRef] = useState<HTMLInputElement | null>(null);
-
-    const handleSubmit: SubmitEventHandler<HTMLFormElement> = useCallback(
-      (event) => {
-        event.preventDefault();
-        const characters = extractRack(config, value);
-        dispatch(rackSlice.actions.changeCharacters({ characters, index: 0 }));
-        onSubmit(event);
-      },
-      [config, dispatch, value, onSubmit],
-    );
-
-    useEffect(() => {
-      if (inputRef) {
-        inputRef.focus();
-        inputRef.select();
-        inputRef.scrollIntoView({ block: 'end', inline: 'center' });
-      }
-    }, [inputRef]);
-
-    return (
-      <form className={classNames(styles.form, className)} ref={ref} style={style} onSubmit={handleSubmit} {...props}>
-        <input
-          autoCapitalize="none"
-          autoComplete="off"
-          autoCorrect="off"
-          className={styles.input}
-          placeholder={translate('rack.touchscreen.placeholder')}
-          ref={setInputRef}
-          spellCheck={false}
-          value={value}
-          onBlur={onBlur}
-          onChange={onChange}
-        />
-      </form>
-    );
-  },
-);
-
-export const InputPrompt = Object.assign(InputPromptBase, {
-  styles,
-});

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

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

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/lib.test.ts

@@ -1,27 +0,0 @@
-import { getConfig } from '@scrabble-solver/configs';
-import { BLANK } from '@scrabble-solver/constants';
-import { Game, Locale } from '@scrabble-solver/types';
-
-import { extractRack } from './lib';
-
-describe('extractRack', () => {
-  const locale = Locale.ES_ES;
-  const config = getConfig(Game.Scrabble, locale);
-
-  it.each([
-    { input: 'ab ', expected: ['a', 'b', BLANK, null, null, null, null] },
-    { input: 'śćźa', expected: ['s', 'c', 'z', 'a', null, null, null] },
-    { input: 'bueno', expected: ['b', 'u', 'e', 'n', 'o', null, null] },
-    { input: 'bellas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
-    { input: 'churro', expected: ['c', 'h', 'u', 'r', 'r', 'o', null] },
-    { input: 'challulla', expected: ['c', 'h', 'a', 'l', 'l', 'u', 'l'] },
-    { input: 'beLlas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
-    { input: 'belLas', expected: ['b', 'e', 'l', 'l', 'a', 's', null] },
-    { input: 'beLLas', expected: ['b', 'e', 'll', 'a', 's', null, null] },
-    { input: 'chuRRo', expected: ['c', 'h', 'u', 'rr', 'o', null, null] },
-    { input: 'CHuRRo', expected: ['ch', 'u', 'rr', 'o', null, null, null] },
-    { input: 'CHaLLuLLa', expected: ['ch', 'a', 'll', 'u', 'll', 'a', null] },
-  ])(`[${locale}] "$input"`, ({ input, expected }) => {
-    expect(extractRack(config, input)).toEqual(expected);
-  });
-});

package/packages/scrabble-solver/src/components/Rack/components/InputPrompt/lib.ts

@@ -1,17 +0,0 @@
-import { type Config } from '@scrabble-solver/types';
-
-import { extractCharacters } from '@/lib/extractCharacters';
-
-export const extractRack = (config: Config, value: string): (string | null)[] => {
-  const charactersByCase = extractCharacters(config, value, {
-    /**
-     * This is to allow inserting digraphs on the rack in touchscreen input mode.
-     * This is not necessary on the board.
-     */
-    upperCaseDigraphsOnly: true,
-  });
-  const characters = Array.from({ length: config.rackSize }, (_, index) => {
-    return typeof charactersByCase[index] === 'string' ? charactersByCase[index] : null;
-  });
-  return characters;
-};

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.module.scss

@@ -1,11 +0,0 @@
-@use 'styles/mixins' as *;
-
-.rackTile {
-  @include focus-effect;
-
-  --background-color: var(--color--background);
-
-  &:focus-within {
-    z-index: 2;
-  }
-}

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.module.scss.d.ts

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

package/packages/scrabble-solver/src/components/Rack/components/RackTile/RackTile.tsx

@@ -1,165 +0,0 @@
-import { BLANK } from '@scrabble-solver/constants';
-import { type Tile as TileModel } from '@scrabble-solver/types';
-import classNames from 'classnames';
-import {
-  type ChangeEvent,
-  type ChangeEventHandler,
-  type FocusEventHandler,
-  type FunctionComponent,
-  type KeyboardEventHandler,
-  type MouseEventHandler,
-  type RefObject,
-  type TouchEventHandler,
-  useCallback,
-  useMemo,
-} from 'react';
-import { useDispatch } from 'react-redux';
-
-import { createKeyboardNavigation } from '@/lib/createKeyboardNavigation';
-import { extractCharacters } from '@/lib/extractCharacters';
-import { extractInputValue } from '@/lib/extractInputValue';
-import { isCtrl } from '@/lib/isCtrl';
-import {
-  rackSlice,
-  selectCharacterIsValid,
-  selectCharacterPoints,
-  selectConfig,
-  selectHoveredCharacter,
-  selectInputMode,
-  selectLocale,
-  useTranslate,
-  useTypedSelector,
-} from '@/state';
-
-import { Tile } from '../../../Tile';
-
-import styles from './RackTile.module.scss';
-
-interface Props {
-  activeIndexRef: RefObject<number | undefined>;
-  character: string | null;
-  className?: string;
-  index: number;
-  inputRef: RefObject<HTMLInputElement | null>;
-  tile: TileModel | null;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  onKeyDown: KeyboardEventHandler<HTMLInputElement>;
-  onFocus: () => void;
-}
-
-export const RackTile: FunctionComponent<Props> = ({
-  activeIndexRef,
-  character,
-  className,
-  index,
-  inputRef,
-  tile,
-  onChange,
-  onKeyDown,
-  onFocus,
-}) => {
-  const dispatch = useDispatch();
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const config = useTypedSelector(selectConfig);
-  const inputMode = useTypedSelector(selectInputMode);
-  const points = useTypedSelector((state) => selectCharacterPoints(state, character));
-  const isValid = useTypedSelector((state) => selectCharacterIsValid(state, character));
-  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
-  const isHoverMatch = character !== null && hoveredCharacter !== null && hoveredCharacter === character;
-
-  const handleFocus: FocusEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (inputMode === 'touchscreen') {
-        event.preventDefault();
-        event.target.blur();
-        onFocus();
-      }
-
-      activeIndexRef.current = index;
-    },
-    [activeIndexRef, index, inputMode, onFocus],
-  );
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const value = extractInputValue(event.target);
-      const characters = value ? extractCharacters(config, value) : [null];
-      dispatch(rackSlice.actions.changeCharacters({ characters, index }));
-      onChange(event);
-    },
-    [config, dispatch, index, onChange],
-  );
-
-  const handleKeyDown = useMemo(() => {
-    return createKeyboardNavigation({
-      onBackspace: (event) => {
-        event.preventDefault();
-        dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
-      },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key.toLocaleLowerCase())) {
-          event.preventDefault();
-          event.stopPropagation();
-          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key.toLocaleLowerCase());
-
-          if (twoTilesCharacter) {
-            dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter, index }));
-          }
-        }
-
-        onKeyDown(event);
-      },
-    });
-  }, [config, dispatch, index, onKeyDown]);
-
-  const handleMouseDown: MouseEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (inputMode === 'touchscreen') {
-        event.preventDefault();
-      }
-
-      onFocus();
-    },
-    [inputMode, onFocus],
-  );
-
-  const handleTouchStart: TouchEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      if (inputMode === 'touchscreen') {
-        event.preventDefault();
-      }
-
-      onFocus();
-    },
-    [inputMode, onFocus],
-  );
-
-  return (
-    <Tile
-      aria-label={translate('rack.tile.location', {
-        index: (index + 1).toLocaleString(locale),
-      })}
-      autoFocus={inputMode === 'keyboard' && index === 0}
-      className={classNames(styles.rackTile, className)}
-      character={character === null ? undefined : character}
-      highlighted={tile !== null || isHoverMatch}
-      inputRef={inputRef}
-      isBlank={character === BLANK}
-      isValid={isValid}
-      key={index}
-      locale={locale}
-      placeholder={translate('rack.placeholder')[index]}
-      points={points}
-      raised
-      tabIndex={index === 0 ? undefined : -1}
-      onChange={handleChange}
-      onFocus={handleFocus}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleMouseDown}
-      onTouchStart={handleTouchStart}
-    />
-  );
-};

package/packages/scrabble-solver/src/components/Rack/components/RackTile/index.ts

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

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

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

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

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

package/packages/scrabble-solver/src/components/Rack/selectors.ts

@@ -1,9 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-import { zipCharactersAndTiles } from '@/lib/zipCharactersAndTiles';
-import { selectRack, selectResultCandidateTiles } from '@/state';
-
-export const selectRemainingTilesGroups = createSelector(
-  [selectRack, selectResultCandidateTiles],
-  zipCharactersAndTiles,
-);

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

@@ -1,61 +0,0 @@
-@use 'styles/mixins' as *;
-
-$radio-size: 18px;
-$radio-inner-border: 2px;
-$radio-inner-size: $radio-size - 2 * $radio-inner-border;
-$radio-box-size: $radio-size + 2 * $radio-inner-border;
-
-.radio {
-  @include focus-effect;
-
-  display: flex;
-  align-items: center;
-  gap: var(--spacing--l);
-  padding: var(--spacing--m);
-  transition: var(--transition);
-  cursor: pointer;
-
-  &.checked {
-    .iconContent {
-      background-color: var(--color--primary);
-    }
-  }
-
-  &.disabled {
-    opacity: var(--opacity--disabled);
-    cursor: not-allowed;
-  }
-}
-
-.input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: inherit;
-}
-
-.icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 0 0 auto;
-  width: $radio-box-size;
-  height: $radio-box-size;
-  border: $radio-inner-border solid var(--color--primary);
-  border-radius: 50%;
-}
-
-.content {
-  flex: 1;
-}
-
-.iconContent {
-  width: $radio-inner-size;
-  height: $radio-inner-size;
-  background-color: transparent;
-  border-radius: 50%;
-  transition: var(--transition);
-}

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

@@ -1,12 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly checked: string;
-  readonly content: string;
-  readonly disabled: string;
-  readonly icon: string;
-  readonly iconContent: string;
-  readonly input: string;
-  readonly radio: string;
-};
-
-export default styles;

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

@@ -1,39 +0,0 @@
-import classNames from 'classnames';
-import { type ChangeEventHandler, type FunctionComponent, type ReactNode } from 'react';
-
-import styles from './Radio.module.scss';
-
-interface Props {
-  checked: boolean;
-  children?: ReactNode;
-  className?: string;
-  disabled?: boolean;
-  name: string;
-  value: string;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-}
-
-export const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, name, value, onChange }) => (
-  <label
-    className={classNames(styles.radio, className, {
-      [styles.checked]: checked,
-      [styles.disabled]: disabled,
-    })}
-  >
-    <input
-      checked={checked}
-      className={styles.input}
-      disabled={disabled}
-      name={name}
-      type="radio"
-      value={value}
-      onChange={onChange}
-    />
-
-    <div aria-hidden="true" className={styles.icon}>
-      <div className={styles.iconContent} />
-    </div>
-
-    <div className={styles.content}>{children}</div>
-  </label>
-);

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

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