scrabble-solver 2.18.10-alpha.2 → 2.19.0-alpha.0

package/packages/scrabble-solver/src/modals/DictionaryModal/DictionaryModal.tsx

@@ -1,29 +0,0 @@
-import { type FunctionComponent, memo } from 'react';
-
-import { Dictionary } from '@/components/Dictionary';
-import { DictionaryInput } from '@/components/DictionaryInput';
-import { Modal } from '@/components/Modal';
-import { useTranslate } from '@/state';
-
-import styles from './DictionaryModal.module.scss';
-
-interface Props {
-  className?: string;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const DictionaryModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
-  const translate = useTranslate();
-
-  return (
-    <Modal className={className} isOpen={isOpen} title={translate('dictionary')} onClose={onClose}>
-      <div className={styles.content}>
-        <Dictionary className={styles.dictionary} />
-        <DictionaryInput className={styles.dictionaryInput} />
-      </div>
-    </Modal>
-  );
-};
-
-export const DictionaryModal = memo(DictionaryModalBase);

package/packages/scrabble-solver/src/modals/DictionaryModal/index.ts

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

package/packages/scrabble-solver/src/modals/KeyMapModal/KeyMapModal.tsx

@@ -1,65 +0,0 @@
-import { type FunctionComponent, memo } from 'react';
-
-import { Key } from '@/components/Key';
-import { Arrows, Backspace, Ctrl, Del, Enter, Space } from '@/components/Keys';
-import { Modal } from '@/components/Modal';
-import { selectConfig, useTranslate, useTypedSelector } from '@/state';
-
-import { Mapping } from './components';
-
-interface Props {
-  className?: string;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const KeyMapModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
-  const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
-
-  return (
-    <Modal className={className} isOpen={isOpen} title={translate('keyMap')} onClose={onClose}>
-      <Modal.Section label={translate('keyMap.board-and-rack')} title={translate('keyMap.board-and-rack')}>
-        <Mapping description={translate('keyMap.board-and-rack.navigate')} mapping={[<Arrows key="arrows" />]} />
-
-        <Mapping
-          description={translate('keyMap.board-and-rack.remove-tile')}
-          mapping={[<Del key="del" />, <Backspace key="backspace" />]}
-        />
-
-        <Mapping description={translate('keyMap.board-and-rack.submit')} mapping={[<Enter key="del" />]} />
-
-        {config.twoCharacterTiles.length > 0 && (
-          <Mapping
-            description={translate('keyMap.board-and-rack.insert-two-letter-tile')}
-            mapping={[
-              [
-                <Ctrl key="ctrl" />,
-                <>
-                  {config.twoCharacterTiles.map(([firstLetter]) => (
-                    <Key key={firstLetter}>{firstLetter.toUpperCase()}</Key>
-                  ))}
-                </>,
-              ],
-            ]}
-          />
-        )}
-      </Modal.Section>
-
-      <Modal.Section label={translate('keyMap.board')} title={translate('keyMap.board')}>
-        <Mapping description={translate('keyMap.board.toggle-direction')} mapping={[<Arrows key="arrows" />]} />
-        <Mapping description={translate('keyMap.board.toggle-blank')} mapping={[<Space key="space" />]} />
-        <Mapping
-          description={translate('keyMap.board.toggle-cell-filter')}
-          mapping={[[<Ctrl key="ctrl" />, <Key key="g">G</Key>]]}
-        />
-      </Modal.Section>
-
-      <Modal.Section label={translate('keyMap.rack')} title={translate('keyMap.rack')}>
-        <Mapping description={translate('keyMap.rack.insert-blank')} mapping={[<Space key="space" />]} />
-      </Modal.Section>
-    </Modal>
-  );
-};
-
-export const KeyMapModal = memo(KeyMapModalBase);

package/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss

@@ -1,48 +0,0 @@
-.mapping {
-  margin-bottom: var(--spacing--l);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.description {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h3);
-  font-weight: 300;
-}
-
-.keys,
-.group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.group {
-  margin: 0 var(--spacing--s);
-}
-
-.slash,
-.plus {
-  min-width: var(--key--height);
-  height: var(--key--height);
-  padding: var(--spacing--s) var(--spacing--m);
-  font-family: var(--font--family--monospace);
-  line-height: calc(var(--key--height) - 2 * (var(--spacing--s) + var(--border--width)));
-  vertical-align: middle;
-  text-align: center;
-}
-
-.group {
-  [dir='rtl'] & {
-    flex-direction: row-reverse;
-  }
-
-  &:first-child {
-    margin-inline-start: 0;
-  }
-
-  &:last-child {
-    margin-inline-end: 0;
-  }
-}

package/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/Mapping.module.scss.d.ts

@@ -1,11 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly description: string;
-  readonly group: string;
-  readonly keys: string;
-  readonly mapping: string;
-  readonly plus: string;
-  readonly slash: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/Mapping.tsx

@@ -1,36 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, type ReactNode, Fragment } from 'react';
-
-import styles from './Mapping.module.scss';
-
-interface Props {
-  className?: string;
-  description: string;
-  mapping: (ReactNode | ReactNode[])[];
-}
-
-export const Mapping: FunctionComponent<Props> = ({ className, description, mapping }) => (
-  <div className={classNames(styles.mapping, className)}>
-    <h3 className={styles.description}>{description}</h3>
-
-    <div className={styles.keys}>
-      {mapping.map((key, index) => (
-        <Fragment key={index}>
-          <div className={styles.group}>
-            {Array.isArray(key) ? (
-              <>
-                {key[0]}
-                <span className={styles.plus}>+</span>
-                {key[1]}
-              </>
-            ) : (
-              key
-            )}
-          </div>
-
-          {mapping.length > 1 && index < mapping.length - 1 && <span className={styles.slash}>/</span>}
-        </Fragment>
-      ))}
-    </div>
-  </div>
-);

package/packages/scrabble-solver/src/modals/KeyMapModal/components/Mapping/index.ts

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

package/packages/scrabble-solver/src/modals/KeyMapModal/components/index.ts

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

package/packages/scrabble-solver/src/modals/KeyMapModal/index.ts

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

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss

@@ -1,48 +0,0 @@
-@use 'styles/mixins' as *;
-
-.modal {
-  // on mobile, every modal opened from the menu must cover it
-  z-index: calc(var(--z-index--modal) - 1);
-}
-
-.button {
-  width: 100%;
-  text-transform: none;
-
-  &,
-  &:active,
-  &:focus,
-  &:hover {
-    box-shadow: 0 1px 1px 0 var(--box-shadow--color);
-  }
-
-  & + & {
-    margin-top: var(--spacing--l);
-  }
-}
-
-.settings {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.settingsLabel {
-  @include ellipsis;
-
-  --quatar-flag-aspect-ratio: 2.545;
-  --highest-flag-aspect-ratio: var(--quatar-flag-aspect-ratio);
-  --aspect-ratio: var(--highest-flag-aspect-ratio);
-  --padding: calc(var(--spacing--l) + var(--button--icon--size) * var(--aspect-ratio));
-
-  padding-inline-end: var(--padding);
-}
-
-.flag {
-  position: fixed;
-  height: var(--button--icon--size);
-  border-radius: var(--border--radius);
-  box-shadow: 0 0 0 1px var(--box-shadow--color);
-  inset-inline-end: calc(2 * var(--spacing--l));
-}

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.module.scss.d.ts

@@ -1,10 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly button: string;
-  readonly flag: string;
-  readonly modal: string;
-  readonly settings: string;
-  readonly settingsLabel: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/modals/MenuModal/MenuModal.tsx

@@ -1,93 +0,0 @@
-import { type FunctionComponent, memo } from 'react';
-
-import { Button } from '@/components/Button';
-import { Modal } from '@/components/Modal';
-import { LOCALE_ICONS } from '@/i18n/localeIcons';
-import BookHalf from '@/icons/BookHalf.svg';
-import CardChecklist from '@/icons/CardChecklist.svg';
-import Cog from '@/icons/Cog.svg';
-import Github from '@/icons/Github.svg';
-import Sack from '@/icons/Sack.svg';
-import { GITHUB_PROJECT_URL } from '@/parameters';
-import { selectLocale, useTranslate, useTypedSelector } from '@/state';
-
-import styles from './MenuModal.module.scss';
-
-interface Props {
-  className?: string;
-  isOpen: boolean;
-  onClose: () => void;
-  onShowDictionary: () => void;
-  onShowRemainingTiles: () => void;
-  onShowSettings: () => void;
-  onShowWords: () => void;
-}
-
-const MenuModalBase: FunctionComponent<Props> = ({
-  className,
-  isOpen,
-  onClose,
-  onShowDictionary,
-  onShowRemainingTiles,
-  onShowSettings,
-  onShowWords,
-}) => {
-  const translate = useTranslate();
-  const locale = useTypedSelector(selectLocale);
-  const Icon = LOCALE_ICONS[locale];
-
-  return (
-    <Modal
-      className={className}
-      isOpen={isOpen}
-      modalClassName={styles.modal}
-      title={translate('menu')}
-      onClose={onClose}
-    >
-      <Button
-        aria-label={translate('remaining-tiles')}
-        className={styles.button}
-        Icon={Sack}
-        wide
-        onClick={onShowRemainingTiles}
-      >
-        {translate('remaining-tiles')}
-      </Button>
-
-      <Button aria-label={translate('words')} className={styles.button} Icon={CardChecklist} wide onClick={onShowWords}>
-        {translate('words')}
-      </Button>
-
-      <Button
-        aria-label={translate('dictionary')}
-        className={styles.button}
-        Icon={BookHalf}
-        wide
-        onClick={onShowDictionary}
-      >
-        {translate('dictionary')}
-      </Button>
-
-      <Button.Link
-        aria-label={translate('github')}
-        className={styles.button}
-        href={GITHUB_PROJECT_URL}
-        Icon={Github}
-        rel="noopener noreferrer"
-        target="_blank"
-        wide
-      >
-        {translate('github')}
-      </Button.Link>
-
-      <Button aria-label={translate('settings')} className={styles.button} Icon={Cog} wide onClick={onShowSettings}>
-        <div className={styles.settings}>
-          <div className={styles.settingsLabel}>{translate('settings')}</div>
-          <Icon aria-hidden="true" className={styles.flag} role="img" />
-        </div>
-      </Button>
-    </Modal>
-  );
-};
-
-export const MenuModal = memo(MenuModalBase);

package/packages/scrabble-solver/src/modals/MenuModal/index.ts

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

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss

@@ -1,25 +0,0 @@
-.title {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-}
-
-.content {
-  --tile-size: 50px;
-
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing--l);
-  font-size: calc(var(--tile-size) * 0.6);
-}
-
-.badge {
-  margin-inline-start: var(--spacing--m);
-}
-
-.character {
-  display: flex;
-  flex: 0 1;
-  max-width: var(--tile-size);
-}

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.module.scss.d.ts

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

package/packages/scrabble-solver/src/modals/RemainingTilesModal/RemainingTilesModal.tsx

@@ -1,61 +0,0 @@
-import { type FunctionComponent, memo } from 'react';
-
-import { Badge } from '@/components/Badge';
-import { Modal } from '@/components/Modal';
-import { useMediaQuery } from '@/hooks/useMediaQuery';
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import { selectLocale, useTranslate, useTypedSelector } from '@/state';
-
-import { Character } from './components';
-import styles from './RemainingTilesModal.module.scss';
-import { selectRemainingTilesGroups } from './selectors';
-
-interface Props {
-  className?: string;
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-const RemainingTilesModalBase: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
-  const translate = useTranslate();
-  const coversViewport = useMediaQuery('<s');
-  const locale = useTypedSelector(selectLocale);
-  const groups = useTypedSelector(selectRemainingTilesGroups);
-  const { direction } = LOCALE_FEATURES[locale];
-
-  return (
-    <Modal className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
-      {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => {
-        const current = direction === 'ltr' ? remainingCount : totalCount;
-        const total = direction === 'ltr' ? totalCount : remainingCount;
-
-        return (
-          <Modal.Section
-            key={translationKey}
-            label={translate(translationKey)}
-            title={
-              <span className={styles.title}>
-                <span>{translate(translationKey)}</span>
-                <Badge className={styles.badge}>
-                  {current.toLocaleString(locale)} / {total.toLocaleString(locale)}
-                </Badge>
-              </span>
-            }
-          >
-            <div className={styles.content}>
-              {tiles.map((tile) => {
-                return (
-                  <div className={styles.character} key={tile.character}>
-                    <Character canHighlight={!coversViewport} tile={tile} />
-                  </div>
-                );
-              })}
-            </div>
-          </Modal.Section>
-        );
-      })}
-    </Modal>
-  );
-};
-
-export const RemainingTilesModal = memo(RemainingTilesModalBase);

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss

@@ -1,50 +0,0 @@
-@use 'styles/mixins' as *;
-
-.character {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  transition: var(--transition);
-
-  &.finished {
-    opacity: var(--opacity--disabled);
-  }
-
-  &.overused {
-    opacity: 1;
-
-    .tile {
-      &::after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        content: ' ';
-        border-radius: inherit;
-        box-shadow: var(--box-shadow--error);
-      }
-    }
-  }
-}
-
-.remaining {
-  width: var(--tile-size);
-  height: 6px;
-  margin-top: var(--spacing--m);
-  box-shadow: var(--box-shadow--raised);
-
-  @include media('<xs') {
-    box-shadow: var(--box-shadow--raised--subtle);
-  }
-}
-
-.count {
-  padding: var(--spacing--xs) 0;
-  font-size: var(--font--size--m);
-  white-space: nowrap;
-}
-
-.unused {
-  cursor: not-allowed;
-}

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.module.scss.d.ts

@@ -1,12 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly character: string;
-  readonly count: string;
-  readonly finished: string;
-  readonly overused: string;
-  readonly remaining: string;
-  readonly tile: string;
-  readonly unused: string;
-};
-
-export default styles;

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/Character.tsx

@@ -1,89 +0,0 @@
-import { BLANK } from '@scrabble-solver/constants';
-import classNames from 'classnames';
-import { type FunctionComponent, useCallback, useEffect } from 'react';
-import { useDispatch } from 'react-redux';
-
-import { Progress } from '@/components/Progress';
-import { Tile } from '@/components/Tile';
-import { LOCALE_FEATURES } from '@/i18n/constants';
-import {
-  hoveredTileSlice,
-  selectCharacterPoints,
-  selectHoveredCharacter,
-  selectLocale,
-  useTypedSelector,
-} from '@/state';
-import { type RemainingTile } from '@/types';
-
-import styles from './Character.module.scss';
-
-interface Props {
-  canHighlight: boolean;
-  tile: RemainingTile;
-}
-
-export const Character: FunctionComponent<Props> = ({ canHighlight, tile }) => {
-  const dispatch = useDispatch();
-  const locale = useTypedSelector(selectLocale);
-  const hoveredCharacter = useTypedSelector(selectHoveredCharacter);
-  const { direction } = LOCALE_FEATURES[locale];
-  const { character, count, usedCount } = tile;
-
-  if (typeof count === 'undefined') {
-    throw new Error('Remaining tiles not supported for this config');
-  }
-
-  const remainingCount = count - usedCount;
-  const points = useTypedSelector((state) => selectCharacterPoints(state, character));
-  const current = direction === 'ltr' ? remainingCount : count;
-  const total = direction === 'ltr' ? count : remainingCount;
-  const isUsed = usedCount > 0;
-  const isHighlightable = canHighlight && isUsed;
-  const isHighlighted = isHighlightable && hoveredCharacter === character;
-
-  const handleMouseEnter = useCallback(() => {
-    dispatch(hoveredTileSlice.actions.set(character));
-  }, [character, dispatch]);
-
-  const handleMouseLeave = useCallback(() => {
-    dispatch(hoveredTileSlice.actions.clear());
-  }, [dispatch]);
-
-  useEffect(() => {
-    return () => {
-      dispatch(hoveredTileSlice.actions.clear());
-    };
-  }, [dispatch]);
-
-  return (
-    <div
-      className={classNames(styles.character, {
-        [styles.finished]: remainingCount <= 0,
-        [styles.overused]: remainingCount < 0,
-        [styles.unused]: !isUsed,
-      })}
-      data-testid={character === BLANK ? 'remaining-tile-blank' : `remaining-tile-${character}`}
-      onMouseEnter={isHighlightable ? handleMouseEnter : undefined}
-      onMouseLeave={isHighlightable ? handleMouseLeave : undefined}
-    >
-      <Tile
-        aria-label={character}
-        character={character}
-        className={styles.tile}
-        disabled
-        highlighted={isHighlighted}
-        isBlank={character === BLANK}
-        isValid={remainingCount >= 0}
-        locale={locale}
-        points={points}
-        raised
-      />
-
-      <Progress className={styles.remaining} max={count} value={remainingCount} />
-
-      <div className={styles.count}>
-        {current.toLocaleString(locale)} / {total.toLocaleString(locale)}
-      </div>
-    </div>
-  );
-};

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/Character/index.ts

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

package/packages/scrabble-solver/src/modals/RemainingTilesModal/components/index.ts

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

package/packages/scrabble-solver/src/modals/RemainingTilesModal/index.ts

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