@scrabble-solver/scrabble-solver 2.16.7 → 2.18.0

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

@@ -1,33 +1,23 @@
 import { type CSSProperties, useMemo } from 'react';
 
-import { useAppLayout } from '@/app-layout';
-import { getTileSizes } from '@/lib';
-import { BORDER_WIDTH } from '@/parameters';
-import { selectConfig, selectShowCoordinates, useTypedSelector } from '@/state';
+import { LOCALE_FEATURES } from '@/i18n/constants';
+import { selectConfig, selectLocale, useTypedSelector } from '@/state';
 
-import { useBackgroundImage } from './useBackgroundImage';
+import { getBoardBackground } from '../getBoardBackground';
 
+/**
+ * Everything here is derived from Redux state only, so the style on the server matches the client
+ */
 export const useBoardStyle = () => {
   const config = useTypedSelector(selectConfig);
-  const { cellSize } = useAppLayout();
-  const { tileFontSize } = getTileSizes(cellSize);
-  const showCoordinates = useTypedSelector(selectShowCoordinates);
-  const backgroundImage = useBackgroundImage();
-  const coordinatesSize = 0.5 * cellSize - BORDER_WIDTH;
+  const locale = useTypedSelector(selectLocale);
+  const { direction } = LOCALE_FEATURES[locale];
+  const backgroundImage = getBoardBackground({ config, direction });
   const boardStyle = useMemo<CSSProperties>(
     () => ({
       backgroundImage: `url(${backgroundImage})`,
-      fontSize: tileFontSize,
-      gridTemplateColumns:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardWidth}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardWidth}, 1fr)`,
-      gridTemplateRows:
-        showCoordinates === 'hidden'
-          ? `repeat(${config.boardHeight}, 1fr)`
-          : `${coordinatesSize}px repeat(${config.boardHeight}, 1fr)`,
     }),
-    [backgroundImage, config.boardHeight, config.boardWidth, coordinatesSize, showCoordinates, tileFontSize],
+    [backgroundImage],
   );
 
   return boardStyle;

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';
 
@@ -53,6 +56,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
   const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
   const [direction, setLastDirection] = useState<Direction>('horizontal');
   const directionRef = useLatest(direction);
+  const rowsRef = useLatest(rows);
 
   const safeActiveIndex = useMemo(
     () => ({
@@ -94,7 +98,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
       const actions: PayloadAction<unknown>[] = [];
-      let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
+      let board = new Board({ rows: rowsRef.current.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
       const scheduleMoveFocus = () => {
@@ -188,7 +192,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
       moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
       actions.forEach(dispatch);
     },
-    [config, directionRef, dispatch, height, moveFocus, rows, width],
+    [config, directionRef, dispatch, height, moveFocus, rowsRef, width],
   );
 
   const onChange = useCallback(
@@ -209,7 +213,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       if (value === EMPTY_CELL) {
         const { x, y } = position;
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (cell.hasTile()) {
           dispatch(boardSlice.actions.toggleCellIsBlank(position));
@@ -219,7 +223,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
 
       insertValue(position, value);
     },
-    [dispatch, insertValue, moveFocus, rows, getInputRefPosition],
+    [dispatch, insertValue, moveFocus, rowsRef, getInputRefPosition],
   );
 
   const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
@@ -308,7 +312,7 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
-        const cell = rows[y][x];
+        const cell = rowsRef.current[y][x];
 
         if (isCtrl(event) && character === 'g') {
           event.preventDefault();
@@ -347,7 +351,17 @@ export const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, direction, dispatch, getInputRefPosition, locale, moveFocus, onDirectionToggle, rows]);
+  }, [
+    changeActiveIndex,
+    config,
+    direction,
+    dispatch,
+    getInputRefPosition,
+    locale,
+    moveFocus,
+    onDirectionToggle,
+    rowsRef,
+  ]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

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,17 +2,9 @@
 
 .dictionary {
   position: relative;
-  transition: var(--transition);
+  min-height: 0;
   word-break: break-word;
 
-  &.isAllowed {
-    background-color: var(--color--green--light);
-  }
-
-  &.isNotAllowed {
-    background-color: var(--color--red--light);
-  }
-
   &:focus-within {
     @include focus-effect;
   }
@@ -21,6 +13,8 @@
 .content {
   @include scrollbars;
 
+  display: flex;
+  flex-direction: column;
   height: 100%;
   overflow-y: auto;
   border-radius: inherit;
@@ -31,26 +25,18 @@
 }
 
 .result {
-  transition: var(--transition);
+  flex-shrink: 0;
+
+  &:last-child {
+    flex-grow: 1;
+  }
 
   &.isAllowed {
     background-color: var(--color--green--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 
   &.isNotAllowed {
     background-color: var(--color--red--light);
-
-    & + & {
-      .content {
-        padding-top: 0;
-      }
-    }
   }
 }
 

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,20 +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);
-  const isLastAllowed = results.at(-1)?.isAllowed;
 
   return (
-    <div
-      className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isLastAllowed === true,
-        [styles.isNotAllowed]: isLastAllowed === false,
-      })}
-      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;