@scrabble-solver/scrabble-solver 2.11.3 → 2.11.5

package/next.config.js

@@ -35,6 +35,7 @@ module.exports = {
         ...config.module.rules,
         {
           test: /\.svg$/,
+          include: [path.resolve(__dirname, 'src/icons')],
           issuer: /\.tsx?$/,
           use: ['@svgr/webpack'],
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.3",
+  "version": "2.11.5",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,16 +28,16 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.20.1",
+    "@floating-ui/react": "^0.21.1",
     "@kamilmielnik/trie": "^2.0.1",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.3",
-    "@scrabble-solver/constants": "^2.11.3",
-    "@scrabble-solver/dictionaries": "^2.11.3",
-    "@scrabble-solver/logger": "^2.11.3",
-    "@scrabble-solver/solver": "^2.11.3",
-    "@scrabble-solver/types": "^2.11.3",
-    "@scrabble-solver/word-definitions": "^2.11.3",
+    "@scrabble-solver/configs": "^2.11.5",
+    "@scrabble-solver/constants": "^2.11.5",
+    "@scrabble-solver/dictionaries": "^2.11.5",
+    "@scrabble-solver/logger": "^2.11.5",
+    "@scrabble-solver/solver": "^2.11.5",
+    "@scrabble-solver/types": "^2.11.5",
+    "@scrabble-solver/word-definitions": "^2.11.5",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -48,9 +48,8 @@
     "react-modal": "^3.16.1",
     "react-portal": "^4.2.2",
     "react-redux": "^8.0.5",
-    "react-use": "^17.4.0",
     "react-window": "^1.8.8",
-    "redux-saga": "^1.2.2",
+    "redux-saga": "^1.2.3",
     "store2": "^2.14.2",
     "workbox-expiration": "^6.5.4",
     "workbox-precaching": "^6.5.4",
@@ -69,8 +68,8 @@
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
     "env-cmd": "^10.1.0",
-    "sass": "^1.59.2",
+    "sass": "^1.59.3",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "693e06a0f1375268d31d12c1a24924bf5ca3c267"
+  "gitHead": "6b881cf1208c9d8ea93d61086179bd813f4d2788"
 }

package/src/@types/svg.d.ts

@@ -1,4 +1,4 @@
-declare module '*.svg' {
+declare module 'icons/*.svg' {
   import { FunctionComponent, SVGAttributes } from 'react';
 
   const component: FunctionComponent<SVGAttributes<SVGElement>>;

package/src/components/Board/Board.tsx

@@ -1,9 +1,9 @@
-import { autoUpdate, FloatingPortal, offset, shift, useFloating, useMergeRefs } from '@floating-ui/react';
+import { autoUpdate, FloatingPortal, offset, shift, useFloating } from '@floating-ui/react';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, useState } from 'react';
+import { CSSProperties, FocusEventHandler, FunctionComponent, useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useMeasure } from 'react-use';
 
+import { useAppLayout } from 'hooks';
 import { BOARD_CELL_ACTIONS_OFFSET, TRANSITION } from 'parameters';
 import { boardSlice, cellFilterSlice, selectBoard, selectRowsWithCandidate, useTypedSelector } from 'state';
 
@@ -21,7 +21,7 @@ const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
   const dispatch = useDispatch();
   const rows = useTypedSelector(selectRowsWithCandidate);
   const board = useTypedSelector(selectBoard);
-  const [actionsMeasureRef, { width: actionsWidth }] = useMeasure<HTMLDivElement>();
+  const { actionsWidth } = useAppLayout();
   const [{ activeIndex, direction, inputRefs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] =
     useGrid(rows);
   const inputRef = inputRefs[activeIndex.y][activeIndex.x];
@@ -41,53 +41,57 @@ const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
     whileElementsMounted: autoUpdate,
   });
 
-  const actionsRef = useMergeRefs([actionsMeasureRef, refs.setFloating]);
-
-  const handleBlur: FocusEventHandler = (event) => {
-    const eventComesFromActions = refs.floating.current?.contains(event.relatedTarget);
-    const eventComesFromBoard = event.currentTarget.contains(event.relatedTarget);
-    const isLocalEvent = eventComesFromActions || eventComesFromBoard;
-
-    if (!isLocalEvent) {
-      setShowActions(false);
-    }
-  };
+  const handleBlur: FocusEventHandler = useCallback(
+    (event) => {
+      const eventComesFromActions = refs.floating.current?.contains(event.relatedTarget);
+      const eventComesFromBoard = event.currentTarget.contains(event.relatedTarget);
+      const isLocalEvent = eventComesFromActions || eventComesFromBoard;
+
+      if (!isLocalEvent) {
+        setShowActions(false);
+      }
+    },
+    [refs.floating],
+  );
 
-  const handleDirectionToggle = () => {
+  const handleDirectionToggle = useCallback(() => {
     inputRef.current?.focus();
     onDirectionToggle();
-  };
-
-  const handleFocus: typeof onFocus = (newX, newY) => {
-    const isFirstFocus = !showActions;
-    const originalTransition = refs.floating.current?.style.transition || '';
-    const newInputRef = inputRefs[newY][newX].current;
-    const newTileElement = newInputRef?.parentElement || null;
-
-    if (isFirstFocus) {
-      setTransition('none');
-    }
-
-    refs.setReference(newTileElement);
-    onFocus(newX, newY);
-    setShowActions(true);
-
-    if (isFirstFocus) {
-      setTimeout(() => {
-        setTransition(originalTransition);
-      }, 0);
-    }
-  };
-
-  const handleToggleBlank = () => {
+  }, [inputRef, onDirectionToggle]);
+
+  const handleFocus: typeof onFocus = useCallback(
+    (newX, newY) => {
+      const isFirstFocus = !showActions;
+      const originalTransition = refs.floating.current?.style.transition || '';
+      const newInputRef = inputRefs[newY][newX].current;
+      const newTileElement = newInputRef?.parentElement || null;
+
+      if (isFirstFocus) {
+        setTransition('none');
+      }
+
+      refs.setReference(newTileElement);
+      onFocus(newX, newY);
+      setShowActions(true);
+
+      if (isFirstFocus) {
+        setTimeout(() => {
+          setTransition(originalTransition);
+        }, 0);
+      }
+    },
+    [inputRefs, onFocus, refs.floating, refs.setReference, showActions],
+  );
+
+  const handleToggleBlank = useCallback(() => {
     inputRef.current?.focus();
     dispatch(boardSlice.actions.toggleCellIsBlank(cell));
-  };
+  }, [cell, dispatch, inputRef]);
 
-  const handleToggleFilterCell = () => {
+  const handleToggleFilterCell = useCallback(() => {
     inputRef.current?.focus();
     dispatch(cellFilterSlice.actions.toggle(cell));
-  };
+  }, [cell, dispatch, inputRef]);
 
   return (
     <>
@@ -112,7 +116,7 @@ const Board: FunctionComponent<Props> = ({ cellSize, className }) => {
           })}
           disabled={!showActions}
           direction={direction}
-          ref={actionsRef}
+          ref={refs.setFloating}
           style={{
             position: strategy,
             top: y ?? 0,

package/src/components/Board/components/Actions/Actions.tsx

@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import { forwardRef, HTMLProps, MouseEventHandler } from 'react';
 
 import { ArrowDown, Flag, FlagFill, Square, SquareFill } from 'icons';
-import { selectCellIsFiltered, useTranslate, useTypedSelector } from 'state';
+import { findCell } from 'lib';
+import { selectCellIsFiltered, selectResultCandidateCells, useTranslate, useTypedSelector } from 'state';
 
 import Button from '../../../Button';
 
@@ -22,8 +23,9 @@ const Actions = forwardRef<HTMLDivElement, Props>(
   ({ cell, className, direction, disabled, onDirectionToggle, onToggleBlank, onToggleFilterCell, ...props }, ref) => {
     const translate = useTranslate();
     const isFiltered = useTypedSelector((state) => selectCellIsFiltered(state, cell));
+    const resultCandidateCells = useTypedSelector(selectResultCandidateCells);
     const isBlank = cell.tile.isBlank;
-    const isEmpty = cell.tile.character === EMPTY_CELL;
+    const isEmpty = cell.tile.character === EMPTY_CELL || Boolean(findCell(resultCandidateCells, cell.x, cell.y));
 
     // On iOS it helps with losing focus too early which makes Actions disappear
     const handleMouseDown: MouseEventHandler = (event) => event.preventDefault();

package/src/components/Board/components/Cell/Cell.module.scss

@@ -1,5 +1,64 @@
 @import 'styles/mixins';
 
+@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: -100%;
+    right: -100%;
+    left: -100%;
+    bottom: -100%;
+    width: 300%;
+    height: 300%;
+    clip-path: inset((100% / 3));
+  }
+
+  [dir='ltr'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+  }
+
+  [dir='rtl'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: -200%;
+        right: 0;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: 0;
+        right: -200%;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+  }
+}
+
 .cell {
   @include focus-effect;
   @include lighthouse-input-size-hack;
@@ -9,7 +68,6 @@
   vertical-align: middle;
   background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
-  transition: var(--transition);
   background-clip: padding-box;
 
   [dir='ltr'] & {

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

@@ -14,8 +14,8 @@ import {
   useState,
 } from 'react';
 import { useDispatch } from 'react-redux';
-import { useLatest } from 'react-use';
 
+import { useLatest } from 'hooks';
 import { LOCALE_FEATURES } from 'i18n';
 import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
@@ -235,6 +235,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         if (direction === 'vertical') {
           onDirectionToggle();
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 0, 0);
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 1, 0);
         }
@@ -244,6 +245,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         if (direction === 'vertical') {
           onDirectionToggle();
+          changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 0 : -1, 0);
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 1 : -1, 0);
         }
@@ -253,9 +255,9 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         if (direction === 'horizontal') {
           onDirectionToggle();
-        } else {
-          changeActiveIndex(0, -1);
         }
+
+        changeActiveIndex(0, -1);
       },
       onBackspace: (event) => {
         const position = getInputRefPosition(event.target as HTMLInputElement);

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

@@ -61,7 +61,7 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-
+  line-height: var(--button--icon--size);
 }
 
 .icon {

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

@@ -19,7 +19,7 @@
   backdrop-filter: blur(2px);
 }
 
-.logo {
+.text {
   position: relative;
   z-index: 2;
   width: 100%;

package/src/components/Loading/Loading.tsx

@@ -31,7 +31,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   return (
     <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
       <div className={styles.dim} />
-      <div className={styles.logo}>
+      <div className={styles.text}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />
       </div>
     </div>

package/src/components/Logo/Logo.tsx

@@ -1,21 +1,19 @@
-/**
- * This component is unused, but it serves as a blueprint for the Logo.svg.
- * Logo.svg is what this component generates with all the text nodes transformed
- * into paths (manually with Inkscape), and corner radius removed from tiles.
- */
-import { CSSProperties, FunctionComponent } from 'react';
+import Image from 'next/image';
+import { forwardRef } from 'react';
 
-import PlainTiles from '../PlainTiles';
+import { useAppLayout } from 'hooks';
+import { LOGO_SRC } from 'parameters';
 
 interface Props {
   className?: string;
-  style?: CSSProperties;
 }
 
-const CONTENT = [['SCRABBLE'], ['SOLVER', '2']];
+const Logo = forwardRef<HTMLImageElement, Props>((props, ref) => {
+  const { logoHeight, logoWidth } = useAppLayout();
 
-const Logo: FunctionComponent<Props> = ({ className, style }) => (
-  <PlainTiles className={className} content={CONTENT} style={style} />
-);
+  return (
+    <Image {...props} alt="Scrabble Solver 2" height={logoHeight} priority ref={ref} src={LOGO_SRC} width={logoWidth} />
+  );
+});
 
 export default Logo;

package/src/components/Logo/LogoBlueprint.tsx

@@ -0,0 +1,21 @@
+/**
+ * This component is unused, but it serves as a blueprint for the Logo.svg.
+ * Logo.svg is what this component generates with all the text nodes transformed
+ * into paths (manually with Inkscape), and corner radius removed from tiles.
+ */
+import { CSSProperties, FunctionComponent } from 'react';
+
+import PlainTiles from '../PlainTiles';
+
+interface Props {
+  className?: string;
+  style?: CSSProperties;
+}
+
+const CONTENT = [['SCRABBLE'], ['SOLVER', '2']];
+
+const LogoBlueprint: FunctionComponent<Props> = ({ className, style }) => (
+  <PlainTiles className={className} content={CONTENT} style={style} />
+);
+
+export default LogoBlueprint;

package/src/components/Logo/index.ts

@@ -1 +1 @@
-export { default } from './Logo.svg';
+export { default } from './Logo';

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

@@ -25,10 +25,6 @@
   &:focus {
     outline: none;
   }
-
-  @include media('<s') {
-    --modal--width: 100%;
-  }
 }
 
 .afterOpen {
@@ -126,12 +122,11 @@
   flex: 0 0 auto;
   display: flex;
   flex-direction: row-reverse;
-  justify-content: space-between;
   gap: var(--spacing--l);
   padding: var(--spacing--l);
   padding-top: 0;
 
-  @include media('>s') {
+  @include media('>l') {
     display: none;
   }
 

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,6 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
+import { FunctionComponent, ReactNode, useCallback, useEffect, useState } from 'react';
 import ReactModal from 'react-modal';
-import { useKey } from 'react-use';
 
 import { CrossSquareFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
@@ -25,16 +24,24 @@ const Modal: FunctionComponent<Props> = ({ children, className, footer, isOpen,
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
-  useKey(
-    'Escape',
-    () => {
-      setShouldReturnFocusAfterClose(false);
-      onClose();
+  const handleEscape = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setShouldReturnFocusAfterClose(false);
+        onClose();
+      }
     },
-    undefined,
     [onClose],
   );
 
+  useEffect(() => {
+    document.addEventListener('keydown', handleEscape);
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [handleEscape]);
+
   useEffect(() => {
     if (isOpen) {
       setShouldReturnFocusAfterClose(true);

package/src/components/NavButtons/NavButtons.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, memo } from 'react';
 
 import { useAppLayout } from 'hooks';
 import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
@@ -135,4 +135,4 @@ const NavButtons: FunctionComponent<Props> = ({
   );
 };
 
-export default NavButtons;
+export default memo(NavButtons);

package/src/components/Rack/Rack.module.scss

@@ -1,5 +1,64 @@
 @import 'styles/mixins';
 
+@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((100% / 3) (200% / 3), (200% / 3) (200% / 3), (200% / 3) 100%, (100% / 3) 100%);
+  }
+
+  [dir='ltr'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (200% / 3), (100% / 3) (200% / 3), (100% / 3) 100%, 0 100%);
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (200% / 3), 100% (200% / 3), 100% 100%, (200% / 3) 100%);
+      }
+    }
+  }
+
+  [dir='rtl'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: -200%;
+        right: 0;
+        clip-path: polygon((200% / 3) (200% / 3), 100% (200% / 3), 100% 100%, (200% / 3) 100%);
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: 0;
+        right: -200%;
+        clip-path: polygon(0 (200% / 3), (100% / 3) (200% / 3), (100% / 3) 100%, 0 100%);
+      }
+    }
+  }
+}
+
 .rack {
   display: flex;
   box-shadow: var(--box-shadow);

package/src/components/Results/HeaderButton.tsx

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import { ReactElement } from 'react';
+import { ReactElement, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';
 import { resultsSlice, selectResultsSort, useTranslate, useTypedSelector } from 'state';
-import { ResultColumn, SortDirection } from 'types';
+import { SortDirection } from 'types';
 
 import { useTooltip } from '../Tooltip';
 
@@ -21,9 +21,9 @@ const HeaderButton = ({ column }: Props): ReactElement => {
   const sort = useTypedSelector(selectResultsSort);
   const triggerProps = useTooltip(translate(column.translationKey));
 
-  const handleOrderChange = (columnId: ResultColumn) => {
-    dispatch(resultsSlice.actions.sort(columnId));
-  };
+  const handleClick = useCallback(() => {
+    dispatch(resultsSlice.actions.sort(column.id));
+  }, [column.id, dispatch]);
 
   return (
     <button
@@ -31,7 +31,7 @@ const HeaderButton = ({ column }: Props): ReactElement => {
       className={classNames(styles.headerButton, column.className)}
       key={column.id}
       type="button"
-      onClick={() => handleOrderChange(column.id)}
+      onClick={handleClick}
       {...triggerProps}
     >
       <span className={styles.cell}>

package/src/components/Results/Results.module.scss

@@ -26,6 +26,9 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
 .listContainer {
   position: absolute;
   top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
 }
 
 .list {