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

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

@@ -0,0 +1,127 @@
+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')}
+          className={styles.button}
+          data-testid="settings-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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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