@scrabble-solver/scrabble-solver 2.17.0 → 2.18.0

package/src/components/Board/hooks/useFloatingActions.ts

@@ -1,17 +1,14 @@
 import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react';
 
-import { useAppLayout } from '@/app-layout';
 import { BOARD_CELL_ACTIONS_OFFSET } from '@/parameters';
 
 export const useFloatingActions = () => {
-  const { actionsWidth } = useAppLayout();
-
   return useFloating({
     middleware: [
-      offset({
+      offset(({ rects }) => ({
         mainAxis: -BOARD_CELL_ACTIONS_OFFSET,
-        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - actionsWidth,
-      }),
+        alignmentAxis: BOARD_CELL_ACTIONS_OFFSET - rects.floating.width,
+      })),
       shift(),
     ],
     placement: 'top-end',

package/src/components/Board/hooks/useGrid.ts

@@ -15,9 +15,12 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { useLatest } from '@/hooks';
-import { LOCALE_FEATURES } from '@/i18n';
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from '@/lib';
+import { useLatest } from '@/hooks/useLatest';
+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 { boardSlice, cellFiltersSlice, selectConfig, selectLocale, useTypedSelector } from '@/state';
 import { type Direction, type Point } from '@/types';
 

package/src/components/Board/selectors.ts

@@ -1,6 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit';
 
-import { findCell } from '@/lib';
+import { findCell } from '@/lib/findCell';
 import {
   selectBoard,
   selectCharacters,

package/src/components/Button/Button.module.scss.d.ts

@@ -0,0 +1,12 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly content: string;
+  readonly default: string;
+  readonly icon: string;
+  readonly label: string;
+  readonly primary: string;
+  readonly wide: string;
+};
+
+export default styles;

package/src/components/Dictionary/Dictionary.module.scss

@@ -2,6 +2,7 @@
 
 .dictionary {
   position: relative;
+  min-height: 0;
   word-break: break-word;
 
   &:focus-within {

package/src/components/Dictionary/Dictionary.module.scss.d.ts

@@ -0,0 +1,14 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly content: string;
+  readonly definition: string;
+  readonly definitions: string;
+  readonly dictionary: string;
+  readonly isAllowed: string;
+  readonly isNotAllowed: string;
+  readonly result: string;
+  readonly resultContent: string;
+  readonly word: string;
+};
+
+export default styles;

package/src/components/Dictionary/Dictionary.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { useAppLayout } from '@/app-layout';
 import {
   selectDictionaryError,
   selectDictionaryIsLoading,
@@ -21,13 +20,12 @@ interface Props {
 
 export const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
-  const { dictionaryResultsHeight } = useAppLayout();
   const results = useTypedSelector(selectDictionaryResults);
   const isLoading = useTypedSelector(selectDictionaryIsLoading);
   const error = useTypedSelector(selectDictionaryError);
 
   return (
-    <div className={classNames(styles.dictionary, className)} style={{ height: dictionaryResultsHeight }}>
+    <div className={classNames(styles.dictionary, className)}>
       <div className={styles.content}>
         {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 

package/src/components/DictionaryInput/DictionaryInput.module.scss.d.ts

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

package/src/components/DictionaryInput/DictionaryInput.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type ChangeEvent, type FunctionComponent, type SubmitEvent } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { LOCALE_FEATURES } from '@/i18n';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { dictionarySlice, selectDictionary, selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import styles from './DictionaryInput.module.scss';

package/src/components/EmptyState/EmptyState.module.scss.d.ts

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

package/src/components/EmptyState/EmptyState.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from '@/i18n';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { COLOR_BLUE, COLOR_GREEN, COLOR_RED, COLOR_YELLOW } from '@/parameters';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 import { type Translations } from '@/types';

package/src/components/IconButton/IconButton.module.scss.d.ts

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

package/src/components/Key/Key.module.scss.d.ts

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

package/src/components/Keys/Arrows/Arrows.module.scss.d.ts

@@ -0,0 +1,11 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly arrow: string;
+  readonly arrows: string;
+  readonly down: string;
+  readonly left: string;
+  readonly right: string;
+  readonly up: string;
+};
+
+export default styles;

package/src/components/Keys/Arrows/Arrows.tsx

@@ -1,7 +1,10 @@
 import classNames from 'classnames';
 import { type FunctionComponent } from 'react';
 
-import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp } from '@/icons';
+import ArrowDown from '@/icons/ArrowDown.svg';
+import ArrowLeft from '@/icons/ArrowLeft.svg';
+import ArrowRight from '@/icons/ArrowRight.svg';
+import ArrowUp from '@/icons/ArrowUp.svg';
 
 import { Key } from '../../Key';
 

package/src/components/Keys/index.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent } from 'react';
 
-import { isMac } from '@/lib';
+import { isMac } from '@/lib/isMac';
 import { useTranslate } from '@/state';
 
 import { Key } from '../Key';

package/src/components/Loading/Loading.module.scss.d.ts

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

package/src/components/Loading/Loading.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { type FunctionComponent, useMemo } from 'react';
 
-import { LOCALE_FEATURES } from '@/i18n';
+import { LOCALE_FEATURES } from '@/i18n/constants';
 import { selectLocale, useTranslate, useTypedSelector } from '@/state';
 
 import { PlainTiles } from '../PlainTiles';

package/src/components/Logo/Logo.tsx

@@ -1,17 +1,12 @@
 import Image from 'next/image';
 import { forwardRef } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { LOGO_SRC } from '@/parameters';
+import { LOGO_HEIGHT, LOGO_SRC, LOGO_WIDTH } from '@/parameters';
 
 interface Props {
   className?: string;
 }
 
-export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => {
-  const { logoHeight, logoWidth } = useAppLayout();
-
-  return (
-    <Image {...props} alt="Scrabble Solver 2" height={logoHeight} priority ref={ref} src={LOGO_SRC} width={logoWidth} />
-  );
-});
+export const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => (
+  <Image {...props} alt="Scrabble Solver 2" height={LOGO_HEIGHT} priority ref={ref} src={LOGO_SRC} width={LOGO_WIDTH} />
+));

package/src/components/Logo/LogoBlueprint.tsx

@@ -4,6 +4,7 @@
  * - using font-family: Open Sans
  * - transformed into paths (manually with Inkscape)
  * - arranged (centered vertically against respective rows)
+ * - tile fills substituted with concrete colors
  */
 import { type CSSProperties, type FunctionComponent } from 'react';
 

package/src/components/Modal/Modal.module.scss.d.ts

@@ -0,0 +1,15 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly afterOpen: string;
+  readonly beforeClose: string;
+  readonly closeButton: string;
+  readonly container: string;
+  readonly content: string;
+  readonly footer: string;
+  readonly header: string;
+  readonly modal: string;
+  readonly overlay: string;
+  readonly title: string;
+};
+
+export default styles;

package/src/components/Modal/Modal.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { type FunctionComponent, type ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
 
-import { CrossSquareFill } from '@/icons';
+import CrossSquareFill from '@/icons/CrossSquareFill.svg';
 import { TRANSITION_DURATION_LONG } from '@/parameters';
 import { useTranslate } from '@/state';
 
@@ -11,16 +11,29 @@ import { IconButton } from '../IconButton';
 import { Section } from './components';
 import styles from './Modal.module.scss';
 
+if (typeof document !== 'undefined') {
+  ReactModal.setAppElement('#__next');
+}
+
 export interface Props {
   children: ReactNode;
   className?: string;
   footer?: ReactNode;
   isOpen: boolean;
+  modalClassName?: string;
   title: string;
   onClose: () => void;
 }
 
-const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
+const ModalBase: FunctionComponent<Props> = ({
+  children,
+  className,
+  footer,
+  isOpen,
+  modalClassName,
+  title,
+  onClose,
+}) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -55,7 +68,7 @@ const ModalBase: FunctionComponent<Props> = ({ children, className, footer, isOp
       aria={{ modal: true }}
       className={{
         afterOpen: styles.afterOpen,
-        base: styles.modal,
+        base: classNames(styles.modal, modalClassName),
         beforeClose: styles.beforeClose,
       }}
       closeTimeoutMS={TRANSITION_DURATION_LONG}

package/src/components/Modal/components/Section/Section.module.scss.d.ts

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

package/src/components/NavButtons/NavButtons.module.scss

@@ -1,3 +1,5 @@
+@use 'styles/mixins' as *;
+
 .navButtons {
   display: flex;
   align-items: center;
@@ -31,3 +33,21 @@
     color: var(--color--error);
   }
 }
+
+.fullNav {
+  @include media('<s') {
+    display: none;
+  }
+}
+
+.shortNav {
+  @include media('>=s') {
+    display: none;
+  }
+}
+
+.keyMapButton {
+  @include media('touch') {
+    display: none;
+  }
+}

package/src/components/NavButtons/NavButtons.module.scss.d.ts

@@ -0,0 +1,13 @@
+// Generated by scripts/generate-scss-types.ts - do not edit.
+declare const styles: {
+  readonly button: string;
+  readonly error: string;
+  readonly fullNav: string;
+  readonly group: string;
+  readonly keyMapButton: string;
+  readonly navButtons: string;
+  readonly separator: string;
+  readonly shortNav: string;
+};
+
+export default styles;

package/src/components/NavButtons/NavButtons.tsx

@@ -1,8 +1,13 @@
 import classNames from 'classnames';
 import { type FunctionComponent, memo } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { CardChecklist, Cog, Eraser, Github, KeyboardFill, List, Sack } from '@/icons';
+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';
 
@@ -32,35 +37,6 @@ const NavButtonsBase: FunctionComponent<Props> = ({
   const config = useTypedSelector(selectConfig);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
-  const { showKeyMap, showShortNav } = useAppLayout();
-
-  if (showShortNav) {
-    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={styles.group}>
-          <IconButton
-            aria-label={translate('menu')}
-            className={styles.button}
-            Icon={List}
-            tooltip={translate('menu')}
-            onClick={onShowMenu}
-          />
-        </div>
-      </div>
-    );
-  }
 
   return (
     <div className={styles.navButtons}>
@@ -76,7 +52,7 @@ const NavButtonsBase: FunctionComponent<Props> = ({
 
       <div className={styles.separator} />
 
-      <div className={styles.group}>
+      <div className={classNames(styles.group, styles.fullNav)}>
         {config.supportsRemainingTiles && (
           <IconButton
             aria-label={translate('remaining-tiles')}
@@ -100,9 +76,9 @@ const NavButtonsBase: FunctionComponent<Props> = ({
         />
       </div>
 
-      <div className={styles.separator} />
+      <div className={classNames(styles.separator, styles.fullNav)} />
 
-      <div className={styles.group}>
+      <div className={classNames(styles.group, styles.fullNav)}>
         <IconButton.Link
           aria-label={translate('github')}
           className={styles.button}
@@ -114,18 +90,16 @@ const NavButtonsBase: FunctionComponent<Props> = ({
         />
       </div>
 
-      <div className={styles.separator} />
+      <div className={classNames(styles.separator, styles.fullNav)} />
 
-      <div className={styles.group}>
-        {showKeyMap && (
-          <IconButton
-            aria-label={translate('keyMap')}
-            className={styles.button}
-            Icon={KeyboardFill}
-            tooltip={translate('keyMap')}
-            onClick={onShowKeyMap}
-          />
-        )}
+      <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')}
@@ -136,6 +110,16 @@ const NavButtonsBase: FunctionComponent<Props> = ({
           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>
   );
 };

package/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/src/components/NotFound/NotFound.tsx

@@ -1,6 +1,6 @@
 import { type FunctionComponent } from 'react';
 
-import { DashCircleFill } from '@/icons';
+import DashCircleFill from '@/icons/DashCircleFill.svg';
 
 import { PlainTiles } from '../PlainTiles';
 

package/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/src/components/PlainTiles/PlainTiles.tsx

@@ -44,7 +44,6 @@ export const PlainTiles: FunctionComponent<Props> = ({
           key={index}
           points={tile.points}
           size={tile.size}
-          transform={tile.transform}
           x={tile.x}
           y={tile.y}
         />

package/src/components/PlainTiles/Tile.tsx

@@ -6,14 +6,13 @@ interface Props {
   color: string;
   points?: number;
   size: number;
-  transform?: string;
   x: number;
   y: number;
 }
 
-export const Tile: FunctionComponent<Props> = ({ character, className, color, points, size, transform, x, y }) => (
-  <g className={className} fill="#222" transform={transform}>
-    <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
+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"

package/src/components/PlainTiles/lib.ts

@@ -3,12 +3,8 @@ import { Game, Locale } from '@scrabble-solver/types';
 
 import {
   PLAIN_TILES_COLOR_DEFAULT,
-  PLAIN_TILES_PADDING_HORIZONTAL,
-  PLAIN_TILES_PADDING_VERTICAL,
   PLAIN_TILES_POINTS_COLORS,
   PLAIN_TILES_TILE_MARGIN,
-  PLAIN_TILES_TILE_MAX_ROTATE,
-  PLAIN_TILES_TILE_MAX_SCATTER,
   PLAIN_TILES_TILE_SIZE,
 } from '@/parameters';
 
@@ -47,17 +43,14 @@ export const createPlainTile = ({
   const points = showPoints ? configPoints : undefined;
   const defaultColor =
     typeof configPoints === 'number' ? PLAIN_TILES_POINTS_COLORS[configPoints] : PLAIN_TILES_COLOR_DEFAULT;
-  const x = getX(cellIndex) + PLAIN_TILES_TILE_SIZE / 2;
-  const y = getY(0) + PLAIN_TILES_TILE_SIZE / 2;
 
   return {
     character,
     color: color || defaultColor,
     points,
     size: PLAIN_TILES_TILE_SIZE,
-    transform: `rotate(${randomize(0, PLAIN_TILES_TILE_MAX_ROTATE)}, ${x}, ${y})`,
-    x: randomize(getX(cellIndex), PLAIN_TILES_TILE_MAX_SCATTER),
-    y: randomize(getY(rowIndex), PLAIN_TILES_TILE_MAX_SCATTER),
+    x: getOffset(cellIndex),
+    y: getOffset(rowIndex),
   };
 };
 
@@ -77,14 +70,6 @@ export const getViewbox = (content: string[][]): string => {
   return `0 0 ${width} ${height}`;
 };
 
-export const getX = (index: number): number => {
-  return PLAIN_TILES_PADDING_HORIZONTAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const getY = (index: number): number => {
-  return PLAIN_TILES_PADDING_VERTICAL + index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
-};
-
-export const randomize = (value: number, maxChange: number): number => {
-  return value + maxChange * 2 * (0.5 - Math.random());
+const getOffset = (index: number): number => {
+  return index * (PLAIN_TILES_TILE_SIZE + PLAIN_TILES_TILE_MARGIN);
 };

package/src/components/PlainTiles/types.ts

@@ -17,7 +17,6 @@ export interface PlainTile {
   color: string;
   points?: number;
   size: number;
-  transform: string;
   x: number;
   y: number;
 }

package/src/components/Progress/Progress.module.scss

@@ -2,6 +2,13 @@
   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/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;