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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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