scrabble-solver 2.8.8 → 2.8.10

package/packages/scrabble-solver/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.8",
+  "version": "2.8.10",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -29,20 +29,20 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@reduxjs/toolkit": "^1.8.5",
-    "@scrabble-solver/configs": "^2.8.8",
-    "@scrabble-solver/constants": "^2.8.8",
-    "@scrabble-solver/dictionaries": "^2.8.8",
-    "@scrabble-solver/logger": "^2.8.8",
-    "@scrabble-solver/solver": "^2.8.8",
-    "@scrabble-solver/types": "^2.8.8",
-    "@scrabble-solver/word-definitions": "^2.8.8",
+    "@reduxjs/toolkit": "^1.8.6",
+    "@scrabble-solver/configs": "^2.8.10",
+    "@scrabble-solver/constants": "^2.8.10",
+    "@scrabble-solver/dictionaries": "^2.8.10",
+    "@scrabble-solver/logger": "^2.8.10",
+    "@scrabble-solver/solver": "^2.8.10",
+    "@scrabble-solver/types": "^2.8.10",
+    "@scrabble-solver/word-definitions": "^2.8.10",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-modal": "^3.15.1",
+    "react-modal": "^3.16.1",
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-redux": "^8.0.4",
@@ -54,7 +54,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.4.0",
+    "@svgr/webpack": "^6.5.0",
     "@types/classnames": "^2.3.0",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",

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

@@ -0,0 +1,13 @@
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing--xs) var(--spacing--s);
+  border-radius: var(--border--radius);
+  background-color: var(--color--foreground--secondary);
+  box-shadow: va(--box-shadow);
+  line-height: var(--line-height);
+  font-size: var(--font--size--s);
+  font-weight: bold;
+  color: white;
+}

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

@@ -0,0 +1,15 @@
+import classNames from 'classnames';
+import { FunctionComponent, ReactNode } from 'react';
+
+import styles from './Badge.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  className?: string;
+}
+
+const Badge: FunctionComponent<Props> = ({ children, className }) => (
+  <div className={classNames(styles.badge, className)}>{children}</div>
+);
+
+export default Badge;

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

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

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

@@ -14,20 +14,22 @@ interface Props {
 const Board: FunctionComponent<Props> = ({ cellSize, className, innerRef }) => {
   const rows = useTypedSelector(selectRowsWithCandidate);
   const board = useTypedSelector(selectBoard);
-  const [{ lastDirection, refs }, { onDirectionToggle, onFocus, onKeyDown }] = useGrid(rows);
+  const [{ direction, refs }, { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste }] = useGrid(rows);
 
   return (
     <BoardPure
       className={className}
       cellSize={cellSize}
       center={board.center}
+      direction={direction}
       innerRef={innerRef}
-      lastDirection={lastDirection}
       refs={refs}
       rows={rows}
+      onChange={onChange}
       onDirectionToggle={onDirectionToggle}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
+      onPaste={onPaste}
     />
   );
 };

package/packages/scrabble-solver/src/components/Board/BoardPure.tsx

@@ -1,6 +1,16 @@
 import { Cell } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { FunctionComponent, KeyboardEventHandler, memo, Ref, RefObject } from 'react';
+import {
+  ChangeEventHandler,
+  ClipboardEventHandler,
+  FunctionComponent,
+  KeyboardEventHandler,
+  memo,
+  Ref,
+  RefObject,
+} from 'react';
+
+import { Direction } from 'types';
 
 import styles from './Board.module.scss';
 import { Cell as CellComponent } from './components';
@@ -9,35 +19,45 @@ interface Props {
   className?: string;
   cellSize: number;
   center: Cell;
+  direction: Direction;
   innerRef?: Ref<HTMLDivElement>;
-  lastDirection: 'horizontal' | 'vertical';
   refs: RefObject<HTMLInputElement>[][];
   rows: Cell[][];
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  onPaste: ClipboardEventHandler<HTMLInputElement>;
 }
 
 const BoardPure: FunctionComponent<Props> = ({
   className,
   cellSize,
   center,
+  direction,
   innerRef,
-  lastDirection,
   refs,
   rows,
+  onChange,
   onDirectionToggle,
   onFocus,
   onKeyDown,
+  onPaste,
 }) => (
-  <div className={classNames(styles.board, className)} ref={innerRef} onKeyDown={onKeyDown}>
+  <div
+    className={classNames(styles.board, className)}
+    ref={innerRef}
+    onChange={onChange}
+    onKeyDown={onKeyDown}
+    onPaste={onPaste}
+  >
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
           <CellComponent
             className={styles.cell}
             cell={cell}
-            direction={lastDirection}
+            direction={direction}
             inputRef={refs[y][x]}
             isCenter={center.x === x && center.y === y}
             key={x}

package/packages/scrabble-solver/src/components/Board/hooks/useGrid.ts

@@ -1,25 +1,41 @@
 /* eslint-disable max-lines, max-statements */
-import { EMPTY_CELL } from '@scrabble-solver/constants';
-import { Cell } from '@scrabble-solver/types';
-import { createRef, KeyboardEventHandler, RefObject, useCallback, useMemo, useState, useRef } from 'react';
+import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
+import { Board, Cell } from '@scrabble-solver/types';
+import {
+  createRef,
+  KeyboardEventHandler,
+  RefObject,
+  useCallback,
+  useMemo,
+  useState,
+  useRef,
+  ChangeEventHandler,
+  ChangeEvent,
+  ClipboardEventHandler,
+} from 'react';
 import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
 
-import { createGridOf, createKeyboardNavigation, isCtrl } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, useTypedSelector } from 'state';
+import { Direction } from 'types';
 
 import { getPositionInGrid } from '../lib';
 import { Point } from '../types';
 
+const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
+
 interface State {
-  lastDirection: 'horizontal' | 'vertical';
+  direction: Direction;
   refs: RefObject<HTMLInputElement>[][];
 }
 
 interface Actions {
-  onFocus: (x: number, y: number) => void;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
+  onFocus: (x: number, y: number) => void;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
+  onPaste: ClipboardEventHandler<HTMLInputElement>;
 }
 
 const useGrid = (rows: Cell[][]): [State, Actions] => {
@@ -32,8 +48,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
     [width, height],
   );
   const activeIndexRef = useRef<Point>({ x: 0, y: 0 });
-  const [lastDirection, setLastDirection] = useState<'horizontal' | 'vertical'>('horizontal');
-  const lastDirectionRef = useLatest(lastDirection);
+  const [direction, setLastDirection] = useState<Direction>('horizontal');
+  const directionRef = useLatest(direction);
 
   const changeActiveIndex = useCallback(
     (offsetX: number, offsetY: number) => {
@@ -52,32 +68,156 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
     [refs],
   );
 
-  const onDirectionToggle = useCallback(() => {
-    setLastDirection((direction) => {
-      return direction === 'vertical' ? 'horizontal' : 'vertical';
-    });
-  }, []);
-
-  const onFocus = useCallback((x: number, y: number) => {
-    activeIndexRef.current = { x, y };
-  }, []);
-
-  const onMoveFocus = useCallback(
-    (direction: 'backward' | 'forward') => {
-      const offset = direction === 'forward' ? 1 : -1;
-
-      if (lastDirectionRef.current === 'horizontal') {
+  const moveFocus = useCallback(
+    (offset: number) => {
+      if (directionRef.current === 'horizontal') {
         changeActiveIndex(offset, 0);
       } else {
         changeActiveIndex(0, offset);
       }
     },
-    [changeActiveIndex, lastDirectionRef],
+    [changeActiveIndex, directionRef],
+  );
+
+  const insertValue = useCallback(
+    (position: Point, value: string) => {
+      const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
+      let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
+      let { x, y } = position;
+
+      const scheduleMoveFocus = () => {
+        if (directionRef.current === 'horizontal') {
+          ++x;
+        } else {
+          ++y;
+        }
+      };
+
+      characters.forEach((character) => {
+        if (x >= config.boardWidth || y >= config.boardHeight) {
+          return;
+        }
+
+        const canCheckUp = y - 1 > 0;
+        const canCheckLeft = x > 0;
+        const canCheckRight = x + 1 < width;
+        const canCheckDown = y + 1 < height;
+
+        if (canCheckUp) {
+          const cellUp = board.rows[y - 1][x];
+          const twoCharacterCandidate = cellUp.tile.character + character;
+
+          if (!cellUp.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            board = boardSlice.reducer(
+              board,
+              boardSlice.actions.changeCellValue({ x, y: y - 1, value: twoCharacterCandidate }),
+            );
+            return;
+          }
+        }
+
+        if (canCheckDown) {
+          const cellDown = board.rows[y + 1][x];
+          const twoCharacterCandidate = character + cellDown.tile.character;
+
+          if (!cellDown.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
+            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y: y + 1, value: EMPTY_CELL }));
+            scheduleMoveFocus();
+            return;
+          }
+        }
+
+        if (canCheckLeft) {
+          const cellLeft = board.rows[y][x - 1];
+          const twoCharacterCandidate = cellLeft.tile.character + character;
+
+          if (!cellLeft.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            board = boardSlice.reducer(
+              board,
+              boardSlice.actions.changeCellValue({ x: x - 1, y, value: twoCharacterCandidate }),
+            );
+            return;
+          }
+        }
+
+        if (canCheckRight) {
+          const cellRight = board.rows[y][x + 1];
+          const twoCharacterCandidate = character + cellRight.tile.character;
+
+          if (!cellRight.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
+            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x: x + 1, y, value: EMPTY_CELL }));
+            scheduleMoveFocus();
+            return;
+          }
+        }
+
+        if (!canCheckDown || !canCheckRight) {
+          const cell = board.rows[y][x];
+          const twoCharacterCandidate = cell.tile.character + character;
+
+          if (!cell.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+            board = boardSlice.reducer(
+              board,
+              boardSlice.actions.changeCellValue({ x, y, value: twoCharacterCandidate }),
+            );
+            return;
+          }
+        }
+
+        board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
+        scheduleMoveFocus();
+      });
+
+      moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
+      dispatch(boardSlice.actions.change(board));
+    },
+    [config, directionRef, dispatch, moveFocus, rows],
+  );
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const position = getInputRefPosition(event.target);
+
+      if (!position) {
+        return;
+      }
+
+      const value = extractInputValue(event.target);
+
+      if (!value) {
+        dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
+        moveFocus(-1);
+        return;
+      }
+
+      if (value === EMPTY_CELL) {
+        const { x, y } = position;
+        const cell = rows[y][x];
+
+        if (cell.hasTile()) {
+          dispatch(boardSlice.actions.toggleCellIsBlank(position));
+          return;
+        }
+      }
+
+      insertValue(position, value);
+    },
+    [dispatch, insertValue, moveFocus, rows],
   );
 
+  const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
+
+  const onFocus = useCallback((x: number, y: number) => {
+    activeIndexRef.current = { x, y };
+  }, []);
+
   const onKeyDown = useMemo(() => {
     return createKeyboardNavigation({
       onArrowDown: (event) => {
+        event.preventDefault();
+
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
@@ -85,6 +225,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         }
       },
       onArrowLeft: (event) => {
+        event.preventDefault();
+
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
@@ -92,6 +234,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         }
       },
       onArrowRight: (event) => {
+        event.preventDefault();
+
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
@@ -99,6 +243,8 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         }
       },
       onArrowUp: (event) => {
+        event.preventDefault();
+
         if (isCtrl(event)) {
           onDirectionToggle();
         } else {
@@ -112,8 +258,9 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
+        event.preventDefault();
         dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
-        onMoveFocus('backward');
+        moveFocus(-1);
       },
       onDelete: (event) => {
         const position = getInputRefPosition(event.target as HTMLInputElement);
@@ -122,8 +269,9 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
+        event.preventDefault();
         dispatch(boardSlice.actions.changeCellValue({ ...position, value: EMPTY_CELL }));
-        onMoveFocus('forward');
+        moveFocus(1);
       },
       onKeyDown: (event) => {
         const position = getInputRefPosition(event.target as HTMLInputElement);
@@ -138,6 +286,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
 
         if (isTogglingBlank) {
+          event.preventDefault();
           dispatch(boardSlice.actions.toggleCellIsBlank(position));
           return;
         }
@@ -145,75 +294,26 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         if (isCtrl(event) && twoCharacterTile) {
           event.preventDefault();
           dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
-          onMoveFocus('forward');
+          moveFocus(1);
           return;
         }
 
-        if (!config.hasCharacter(character)) {
-          return;
-        }
-
-        const canCheckUp = y - 1 > 0;
-        const canCheckLeft = x > 0;
-        const canCheckRight = x + 1 < width;
-        const canCheckDown = y + 1 < height;
-
-        if (canCheckUp) {
-          const cellUp = rows[y - 1][x];
-          const twoCharacterCandidate = cellUp.tile.character + character;
-
-          if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            dispatch(boardSlice.actions.changeCellValue({ ...position, y: y - 1, value: twoCharacterCandidate }));
-            return;
-          }
-        }
-
-        if (canCheckDown) {
-          const cellDown = rows[y + 1][x];
-          const twoCharacterCandidate = character + cellDown.tile.character;
-
-          if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            dispatch(boardSlice.actions.changeCellValue({ ...position, value: character }));
-            dispatch(boardSlice.actions.changeCellValue({ ...position, y: y + 1, value: EMPTY_CELL }));
-            onMoveFocus('forward');
-            return;
-          }
-        }
-
-        if (canCheckLeft) {
-          const cellLeft = rows[y][x - 1];
-          const twoCharacterCandidate = cellLeft.tile.character + character;
-
-          if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            dispatch(boardSlice.actions.changeCellValue({ ...position, x: x - 1, value: twoCharacterCandidate }));
-            return;
-          }
-        }
-
-        if (canCheckRight) {
-          const cellRight = rows[y][x + 1];
-          const twoCharacterCandidate = character + cellRight.tile.character;
+        const cell = rows[y][x];
+        const twoCharacterCandidate = cell.tile.character + character;
 
-          if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            dispatch(boardSlice.actions.changeCellValue({ ...position, value: character }));
-            dispatch(boardSlice.actions.changeCellValue({ ...position, x: x + 1, value: EMPTY_CELL }));
-            onMoveFocus('forward');
-            return;
-          }
+        if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
+          event.preventDefault();
+          dispatch(boardSlice.actions.changeCellValue({ ...position, value: twoCharacterCandidate }));
+          moveFocus(1);
+          return;
         }
 
-        if (!canCheckDown || !canCheckRight) {
-          const cell = rows[y][x];
-          const twoCharacterCandidate = cell.tile.character + character;
-
-          if (config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            dispatch(boardSlice.actions.changeCellValue({ ...position, value: twoCharacterCandidate }));
-            return;
-          }
+        if (event.target instanceof HTMLInputElement && event.target.value === event.key) {
+          // change event did not fire because the same character was typed over the current one
+          // but we still want to move the caret
+          event.preventDefault();
+          moveFocus(1);
         }
-
-        dispatch(boardSlice.actions.changeCellValue({ ...position, value: character }));
-        onMoveFocus('forward');
       },
       onSpace: (event) => {
         const position = getInputRefPosition(event.target as HTMLInputElement);
@@ -222,14 +322,35 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           return;
         }
 
+        event.preventDefault();
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, lastDirectionRef, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, dispatch, onDirectionToggle, rows]);
+
+  const onPaste = useCallback<ClipboardEventHandler>(
+    (event) => {
+      if (!(event.target instanceof HTMLInputElement)) {
+        return;
+      }
+
+      const position = getInputRefPosition(event.target);
+
+      if (!position) {
+        return;
+      }
+
+      event.preventDefault();
+
+      const value = event.clipboardData.getData('text/plain').toLocaleLowerCase();
+      insertValue(position, value);
+    },
+    [insertValue],
+  );
 
   return [
-    { lastDirection, refs },
-    { onDirectionToggle, onFocus, onKeyDown },
+    { direction, refs },
+    { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
   ];
 };
 

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { selectDictionary, useTranslate, useTypedSelector } from 'state';
+import { selectDictionary, selectDictionaryError, useTranslate, useTypedSelector } from 'state';
 
 import EmptyState from '../EmptyState';
 import Loading from '../Loading';
@@ -15,6 +15,7 @@ interface Props {
 const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { results, isLoading } = useTypedSelector(selectDictionary);
+  const error = useTypedSelector(selectDictionaryError);
   const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
 
   return (
@@ -24,6 +25,12 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
         [styles.isNotAllowed]: isFirstAllowed === false,
       })}
     >
+      {typeof error !== 'undefined' && (
+        <EmptyState className={styles.emptyState} type="error">
+          {error.message}
+        </EmptyState>
+      )}
+
       {results.map(({ definitions, isAllowed, word }) => (
         <div
           className={classNames(styles.result, {