scrabble-solver 2.18.9 → 2.18.10-alpha.1

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

@@ -1,127 +0,0 @@
-import classNames from 'classnames';
-import { type FunctionComponent, memo } from 'react';
-
-import CardChecklist from '@/icons/CardChecklist.svg';
-import Cog from '@/icons/Cog.svg';
-import Eraser from '@/icons/Eraser.svg';
-import Github from '@/icons/Github.svg';
-import KeyboardFill from '@/icons/KeyboardFill.svg';
-import List from '@/icons/List.svg';
-import Sack from '@/icons/Sack.svg';
-import { GITHUB_PROJECT_URL } from '@/parameters';
-import { selectConfig, useTranslate, useTypedSelector } from '@/state';
-
-import { IconButton } from '../IconButton';
-
-import styles from './NavButtons.module.scss';
-import { selectHasInvalidWords, selectHasOverusedTiles } from './selectors';
-
-interface Props {
-  onClear: () => void;
-  onShowKeyMap: () => void;
-  onShowMenu: () => void;
-  onShowRemainingTiles: () => void;
-  onShowSettings: () => void;
-  onShowWords: () => void;
-}
-
-const NavButtonsBase: FunctionComponent<Props> = ({
-  onClear,
-  onShowKeyMap,
-  onShowMenu,
-  onShowRemainingTiles,
-  onShowSettings,
-  onShowWords,
-}) => {
-  const translate = useTranslate();
-  const config = useTypedSelector(selectConfig);
-  const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
-  const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
-
-  return (
-    <div className={styles.navButtons}>
-      <div className={styles.group}>
-        <IconButton
-          aria-label={translate('common.clear')}
-          className={styles.button}
-          Icon={Eraser}
-          tooltip={translate('common.clear')}
-          onClick={onClear}
-        />
-      </div>
-
-      <div className={styles.separator} />
-
-      <div className={classNames(styles.group, styles.fullNav)}>
-        {config.supportsRemainingTiles && (
-          <IconButton
-            aria-label={translate('remaining-tiles')}
-            className={classNames(styles.button, {
-              [styles.error]: hasOverusedTiles,
-            })}
-            Icon={Sack}
-            tooltip={translate('remaining-tiles')}
-            onClick={onShowRemainingTiles}
-          />
-        )}
-
-        <IconButton
-          aria-label={translate('words')}
-          className={classNames(styles.button, {
-            [styles.error]: hasInvalidWords,
-          })}
-          Icon={CardChecklist}
-          tooltip={translate('words')}
-          onClick={onShowWords}
-        />
-      </div>
-
-      <div className={classNames(styles.separator, styles.fullNav)} />
-
-      <div className={classNames(styles.group, styles.fullNav)}>
-        <IconButton.Link
-          aria-label={translate('github')}
-          className={styles.button}
-          href={GITHUB_PROJECT_URL}
-          Icon={Github}
-          rel="noopener noreferrer"
-          target="_blank"
-          tooltip={translate('github')}
-        />
-      </div>
-
-      <div className={classNames(styles.separator, styles.fullNav)} />
-
-      <div className={classNames(styles.group, styles.fullNav)}>
-        <IconButton
-          aria-label={translate('keyMap')}
-          className={classNames(styles.button, styles.keyMapButton)}
-          Icon={KeyboardFill}
-          tooltip={translate('keyMap')}
-          onClick={onShowKeyMap}
-        />
-
-        <IconButton
-          aria-label={translate('settings')}
-          data-testid="settings-button"
-          className={styles.button}
-          Icon={Cog}
-          tooltip={translate('settings')}
-          onClick={onShowSettings}
-        />
-      </div>
-
-      <div className={classNames(styles.group, styles.shortNav)}>
-        <IconButton
-          aria-label={translate('menu')}
-          className={styles.button}
-          Icon={List}
-          tooltip={translate('menu')}
-          onClick={onShowMenu}
-        />
-      </div>
-    </div>
-  );
-};
-
-export const NavButtons = memo(NavButtonsBase);

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

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

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

@@ -1,11 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-
-import { selectInvalidWords, selectRemainingTiles } from '@/state';
-
-export const selectHasInvalidWords = createSelector([selectInvalidWords], (invalidWords) => {
-  return invalidWords.length > 0;
-});
-
-export const selectHasOverusedTiles = createSelector([selectRemainingTiles], (remainingTiles) => {
-  return remainingTiles.some(({ count = 0, usedCount }) => usedCount > count);
-});

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

@@ -1,37 +0,0 @@
-@use 'styles/mixins' as *;
-
-.notFound {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--spacing--l);
-}
-
-.link {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  padding: var(--spacing--l);
-}
-
-.icon {
-  --size: 200px;
-
-  height: var(--size);
-  width: var(--size);
-  margin-bottom: var(--spacing--xxl);
-  color: var(--color--red);
-
-  @include media('<xs') {
-    --size: 50%;
-
-    margin-bottom: var(--spacing--xl);
-  }
-}
-
-.tiles {
-  max-width: 100%;
-  height: 60px;
-}

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

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

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

@@ -1,18 +0,0 @@
-import { type FunctionComponent } from 'react';
-
-import DashCircleFill from '@/icons/DashCircleFill.svg';
-
-import { PlainTiles } from '../PlainTiles';
-
-import styles from './NotFound.module.scss';
-
-const CONTENT = [['HTTP', '404']];
-
-export const NotFound: FunctionComponent = () => (
-  <div className={styles.notFound}>
-    <a className={styles.link} href="/">
-      <DashCircleFill aria-hidden="true" className={styles.icon} role="img" />
-      <PlainTiles className={styles.tiles} content={CONTENT} />
-    </a>
-  </div>
-);

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

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

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

@@ -1,24 +0,0 @@
-@use 'styles/animations';
-
-$delay: 150ms;
-$duration: 750ms;
-
-.tile {
-  .wave & {
-    $max: 20;
-    $max-delay: ($max - 1) * $delay;
-
-    animation: wave $duration infinite;
-    animation-timing-function: linear;
-
-    @for $i from 1 through $max {
-      &:nth-child(#{$i}) {
-        animation-delay: ($i - 1) * $delay - $max-delay;
-      }
-    }
-  }
-}
-
-.dropShadow {
-  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
-}

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

@@ -1,11 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly dropShadow: string;
-  readonly hide: string;
-  readonly rotate: string;
-  readonly show: string;
-  readonly tile: string;
-  readonly wave: string;
-};
-
-export default styles;

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

@@ -1,53 +0,0 @@
-import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, useMemo } from 'react';
-
-import { createPlainTiles, getViewbox } from './lib';
-import styles from './PlainTiles.module.scss';
-import { Tile } from './Tile';
-
-interface Props {
-  className?: string;
-  color?: string;
-  content: string[][];
-  dropShadow?: boolean;
-  showPoints?: boolean;
-  style?: CSSProperties;
-  wave?: boolean;
-}
-
-export const PlainTiles: FunctionComponent<Props> = ({
-  className,
-  color,
-  content,
-  dropShadow,
-  showPoints,
-  style,
-  wave,
-}) => {
-  const tiles = useMemo(() => createPlainTiles({ color, content, showPoints }), [color, content, showPoints]);
-
-  return (
-    <svg
-      className={classNames(className, {
-        [styles.dropShadow]: dropShadow,
-        [styles.wave]: wave,
-      })}
-      style={style}
-      viewBox={getViewbox(content)}
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      {tiles.map((tile, index) => (
-        <Tile
-          character={tile.character}
-          className={styles.tile}
-          color={tile.color}
-          key={index}
-          points={tile.points}
-          size={tile.size}
-          x={tile.x}
-          y={tile.y}
-        />
-      ))}
-    </svg>
-  );
-};

package/packages/scrabble-solver/src/components/PlainTiles/Tile.tsx

@@ -1,41 +0,0 @@
-import { type FunctionComponent } from 'react';
-
-interface Props {
-  character: string;
-  className?: string;
-  color: string;
-  points?: number;
-  size: number;
-  x: number;
-  y: number;
-}
-
-export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, x, y }) => (
-  <g className={className} style={{ fill: 'var(--color--foreground)' }}>
-    <rect height={size} rx={size * 0.15} style={{ fill: color }} width={size} x={x} y={y} />
-
-    <text
-      dominantBaseline="central"
-      fontSize={size * 0.6}
-      fontWeight="bold"
-      textAnchor="middle"
-      x={x + size / 2}
-      y={y + size / 2}
-    >
-      {character}
-    </text>
-
-    {typeof points === 'number' && (
-      <text
-        dominantBaseline="text-after-edge"
-        fontSize={size * 0.25}
-        fontWeight="bold"
-        textAnchor="end"
-        x={x + size * 0.9}
-        y={y + size * 0.95}
-      >
-        {points}
-      </text>
-    )}
-  </g>
-);

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

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

package/packages/scrabble-solver/src/components/PlainTiles/lib.ts

@@ -1,75 +0,0 @@
-import { getConfig } from '@scrabble-solver/configs';
-import { Game, Locale } from '@scrabble-solver/types';
-
-import {
-  PLAIN_TILES_COLOR_DEFAULT,
-  PLAIN_TILES_POINTS_COLORS,
-  PLAIN_TILES_TILE_MARGIN,
-  PLAIN_TILES_TILE_SIZE,
-} from '@/parameters';
-
-import type { CreatePlainTileOptions, CreatePlainTilesOptions, PlainTile } from './types';
-
-export const createPlainTiles = ({ color, content, showPoints }: CreatePlainTilesOptions): PlainTile[] => {
-  const rows = content.map((words, rowIndex) => {
-    return words.map((word, wordIndex) => {
-      const cellOffset = words.slice(0, wordIndex).reduce((result, { length }) => result + length + ' '.length, 0);
-      const characters = word.split('');
-
-      return characters.map((character, cellIndex) => {
-        return createPlainTile({
-          cellIndex: cellOffset + cellIndex,
-          character,
-          color,
-          rowIndex,
-          showPoints,
-        });
-      });
-    });
-  });
-
-  const tiles = rows.flat(2);
-  return tiles;
-};
-
-export const createPlainTile = ({
-  cellIndex,
-  character,
-  color,
-  rowIndex,
-  showPoints,
-}: CreatePlainTileOptions): PlainTile => {
-  const configPoints = getConfig(Game.Literaki, Locale.EN_US).getCharacterPoints(character.toLowerCase());
-  const points = showPoints ? configPoints : undefined;
-  const defaultColor =
-    typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;
-
-  return {
-    character,
-    color: color || defaultColor,
-    points,
-    size: PLAIN_TILES_TILE_SIZE,
-    x: getOffset(cellIndex),
-    y: getOffset(rowIndex),
-  };
-};
-
-export const getViewbox = (content: string[][]): string => {
-  const longestRowLength = content.reduce((result, words) => {
-    const wordsLength = words.reduce((sum, word) => sum + word.length, 0);
-    const rowLength = wordsLength + Math.max(words.length - 1, 0);
-    return Math.max(result, rowLength);
-  }, 0);
-  const width =
-    longestRowLength * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN) -
-    (longestRowLength === 0 ? 0 : PLAIN_TILES_TILE_MARGIN);
-  const height =
-    content.length * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN) -
-    (content.length === 0 ? 0 : PLAIN_TILES_TILE_MARGIN);
-
-  return `0 0 ${width} ${height}`;
-};
-
-const getOffset = (index: number): number => {
-  return index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};

package/packages/scrabble-solver/src/components/PlainTiles/types.ts

@@ -1,22 +0,0 @@
-export interface CreatePlainTileOptions {
-  cellIndex: number;
-  character: string;
-  color?: string;
-  rowIndex: number;
-  showPoints?: boolean;
-}
-
-export interface CreatePlainTilesOptions {
-  color?: string;
-  content: string[][];
-  showPoints?: boolean;
-}
-
-export interface PlainTile {
-  character: string;
-  color: string;
-  points?: number;
-  size: number;
-  x: number;
-  y: number;
-}

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

@@ -1,16 +0,0 @@
-.progress {
-  width: 100%;
-  min-height: 1px;
-  border-radius: var(--border--radius);
-  background-image: linear-gradient(
-    90deg,
-    var(--color--progress) 0%,
-    var(--color--progress) var(--progress),
-    var(--color--progress--background) var(--progress),
-    var(--color--progress--background) 100%
-  );
-
-  [dir='rtl'] & {
-    transform: scaleX(-1);
-  }
-}

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

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

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

@@ -1,32 +0,0 @@
-import classNames from 'classnames';
-import { type CSSProperties, type FunctionComponent, type HTMLProps } from 'react';
-
-import { selectLocale, useTypedSelector } from '@/state';
-
-import styles from './Progress.module.scss';
-
-interface Props extends HTMLProps<HTMLDivElement> {
-  max: number;
-  min?: number;
-  value: number;
-}
-
-export const Progress: FunctionComponent<Props> = ({ className, max, min = 0, style, value, ...props }) => {
-  const locale = useTypedSelector(selectLocale);
-  const progress = value / (max - min);
-  const percent = Math.round(100 * progress);
-
-  return (
-    <div
-      {...props}
-      aria-valuemax={max}
-      aria-valuemin={min}
-      aria-valuenow={value}
-      aria-valuetext={`${percent.toLocaleString(locale)}%`}
-      className={classNames(styles.progress, className)}
-      role="progressbar"
-      style={{ ...style, '--progress': `${100 * progress}%` } as CSSProperties}
-      title={`${percent.toLocaleString(locale)}%`}
-    />
-  );
-};

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

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

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

@@ -1,95 +0,0 @@
-@use 'styles/mixins' as *;
-
-@mixin lighthouse-input-size-hack {
-  // Hack for this Lighthouse warning:
-  // > Interactive elements like buttons and links should be large enough (48x48px), and have
-  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
-
-  input {
-    position: absolute;
-    top: -200%;
-    right: -100%;
-    left: -100%;
-    bottom: 0;
-    width: 300%;
-    height: 300%;
-    clip-path: polygon(
-      calc(100% / 3) calc(200% / 3),
-      calc(200% / 3) calc(200% / 3),
-      calc(200% / 3) 100%,
-      calc(100% / 3) 100%
-    );
-  }
-
-  [dir='ltr'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
-      input {
-        left: 0;
-        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
-      }
-    }
-
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
-      input {
-        left: -200%;
-        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
-      }
-    }
-  }
-
-  [dir='rtl'] & {
-    &:nth-child(1),
-    &:nth-child(2),
-    &:nth-child(3) {
-      input {
-        left: -200%;
-        right: 0;
-        clip-path: polygon(calc(200% / 3) calc(200% / 3), 100% calc(200% / 3), 100% 100%, calc(200% / 3) 100%);
-      }
-    }
-
-    &:nth-last-child(1),
-    &:nth-last-child(2),
-    &:nth-last-child(3) {
-      input {
-        left: 0;
-        right: -200%;
-        clip-path: polygon(0 calc(200% / 3), calc(100% / 3) calc(200% / 3), calc(100% / 3) 100%, 0 100%);
-      }
-    }
-  }
-}
-
-.rack {
-  --tile-size: var(--rack-tile-size);
-
-  position: relative;
-  display: flex;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border--radius);
-  transition: var(--transition);
-  opacity: 1;
-  font-size: max(14px, calc(var(--rack-tile-size) * 0.6));
-}
-
-.tile {
-  @include lighthouse-input-size-hack;
-}
-
-.hidden {
-  opacity: 0;
-}
-
-.sharpLeft {
-  border-start-start-radius: 0;
-  border-end-start-radius: 0;
-}
-
-.sharpRight {
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
-}

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

@@ -1,10 +0,0 @@
-// Generated by scripts/generate-scss-types.ts - do not edit.
-declare const styles: {
-  readonly hidden: string;
-  readonly rack: string;
-  readonly sharpLeft: string;
-  readonly sharpRight: string;
-  readonly tile: string;
-};
-
-export default styles;