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

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

@@ -0,0 +1,199 @@
+/* eslint-disable max-lines, max-statements */
+
+import { autoUpdate, FloatingPortal, 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}
+            onFocus={handleFocus}
+            onKeyDown={handleKeyDown}
+          />
+        ))}
+      </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

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

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

@@ -0,0 +1,73 @@
+import classNames from 'classnames';
+import {
+  type ChangeEventHandler,
+  type CSSProperties,
+  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

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

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

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

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

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

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

@@ -0,0 +1,165 @@
+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}
+      character={character === null ? undefined : character}
+      className={classNames(styles.rackTile, className)}
+      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

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

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

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

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

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

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

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

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

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

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

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