@scrabble-solver/scrabble-solver 2.8.9 → 2.8.11

package/src/components/Rack/Rack.tsx

@@ -1,9 +1,16 @@
-import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import { createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
+import { ChangeEvent, ClipboardEvent, createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
+import { useDispatch } from 'react-redux';
 
-import { createArray, createKeyboardNavigation, zipCharactersAndTiles } from 'lib';
-import { selectConfig, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
+import {
+  createArray,
+  createKeyboardNavigation,
+  extractCharacters,
+  extractInputValue,
+  isCtrl,
+  zipCharactersAndTiles,
+} from 'lib';
+import { rackSlice, selectConfig, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
 
 import styles from './Rack.module.scss';
 import RackTile from './RackTile';
@@ -13,6 +20,7 @@ interface Props {
 }
 
 const Rack: FunctionComponent<Props> = ({ className }) => {
+  const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const rack = useTypedSelector(selectRack);
   const resultCandidateTiles = useTypedSelector(selectResultCandidateTiles);
@@ -35,7 +43,33 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
     [activeIndexRef, tilesCount, tilesRefs],
   );
 
-  const onKeyDown = useMemo(() => {
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = extractInputValue(event.target);
+      const characters = value ? extractCharacters(config, value) : [];
+      changeActiveIndex(value ? characters.length : -1);
+    },
+    [changeActiveIndex, config],
+  );
+
+  const handlePaste = useCallback(
+    (event: ClipboardEvent<HTMLInputElement>) => {
+      const index = activeIndexRef.current;
+
+      if (typeof index === 'undefined') {
+        return;
+      }
+
+      event.preventDefault();
+      const value = event.clipboardData.getData('text/plain').toLocaleLowerCase();
+      const characters = value ? extractCharacters(config, value) : [];
+      changeActiveIndex(value ? characters.length : -1);
+      dispatch(rackSlice.actions.changeCharacters({ characters, index }));
+    },
+    [changeActiveIndex, config, dispatch],
+  );
+
+  const handleKeyDown = useMemo(() => {
     return createKeyboardNavigation({
       onArrowLeft: (event) => {
         event.preventDefault();
@@ -45,13 +79,18 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
         event.preventDefault();
         changeActiveIndex(1);
       },
-      onBackspace: () => {
+      onBackspace: (event) => {
+        event.preventDefault();
         changeActiveIndex(-1);
       },
       onKeyDown: (event) => {
-        const character = event.key.toLowerCase();
-
-        if (config.hasCharacter(character) || character === BLANK) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
+          changeActiveIndex(1);
+        } else if (event.currentTarget.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();
+          event.stopPropagation();
           changeActiveIndex(1);
         }
       },
@@ -59,7 +98,7 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
   }, [changeActiveIndex, config]);
 
   return (
-    <div className={classNames(styles.rack, className)}>
+    <div className={classNames(styles.rack, className)} onPaste={handlePaste}>
       {tiles.map(({ character, tile }, index) => (
         <RackTile
           activeIndexRef={activeIndexRef}
@@ -68,7 +107,8 @@ const Rack: FunctionComponent<Props> = ({ className }) => {
           inputRef={tilesRefs[index]}
           key={index}
           tile={tile}
-          onKeyDown={onKeyDown}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
         />
       ))}
     </div>

package/src/components/Rack/RackTile.tsx

@@ -1,6 +1,8 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
 import {
+  ChangeEvent,
+  ChangeEventHandler,
   FunctionComponent,
   KeyboardEventHandler,
   MutableRefObject,
@@ -10,7 +12,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, isCtrl } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { TILE_SIZE } from 'parameters';
 import { rackSlice, selectCharacterPoints, selectConfig, useTranslate, useTypedSelector } from 'state';
 
@@ -24,10 +26,19 @@ interface Props {
   index: number;
   inputRef: RefObject<HTMLInputElement>;
   tile: TileModel | null;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onKeyDown: KeyboardEventHandler<HTMLInputElement>;
 }
 
-const RackTile: FunctionComponent<Props> = ({ activeIndexRef, character, index, inputRef, tile, onKeyDown }) => {
+const RackTile: FunctionComponent<Props> = ({
+  activeIndexRef,
+  character,
+  index,
+  inputRef,
+  tile,
+  onChange,
+  onKeyDown,
+}) => {
   const dispatch = useDispatch();
   const translate = useTranslate();
   const config = useTypedSelector(selectConfig);
@@ -37,32 +48,37 @@ const RackTile: FunctionComponent<Props> = ({ activeIndexRef, character, index,
     activeIndexRef.current = index;
   }, [index]);
 
-  const handleCharacterChange = useCallback(
-    (value: string | null) => {
-      dispatch(rackSlice.actions.changeCharacter({ character: value, index }));
+  const handleChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const value = extractInputValue(event.target);
+      const characters = value ? extractCharacters(config, value) : [null];
+      dispatch(rackSlice.actions.changeCharacters({ characters, index }));
+      onChange(event);
     },
-    [index],
+    [config, index, onChange],
   );
 
   const handleKeyDown = useMemo(() => {
     return createKeyboardNavigation({
-      onBackspace: () => handleCharacterChange(null),
-      onDelete: () => handleCharacterChange(null),
+      onBackspace: (event) => {
+        event.preventDefault();
+        dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
+      },
       onKeyDown: (event) => {
-        const newCharacter = event.key.toLowerCase();
-        const twoCharacterTile = config.getTwoCharacterTileByPrefix(newCharacter);
-
-        if (isCtrl(event) && twoCharacterTile) {
+        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
           event.preventDefault();
-          handleCharacterChange(twoCharacterTile);
-        } else if (config.hasCharacter(newCharacter) || newCharacter === BLANK) {
-          handleCharacterChange(newCharacter);
+          event.stopPropagation();
+          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
         }
 
         onKeyDown(event);
       },
     });
-  }, [config, handleCharacterChange, onKeyDown]);
+  }, [index, onKeyDown]);
 
   return (
     <Tile
@@ -78,6 +94,7 @@ const RackTile: FunctionComponent<Props> = ({ activeIndexRef, character, index,
       raised
       size={TILE_SIZE}
       tabIndex={index === 0 ? undefined : -1}
+      onChange={handleChange}
       onFocus={handleFocus}
       onKeyDown={handleKeyDown}
     />

package/src/components/Results/Results.tsx

@@ -1,11 +1,12 @@
 import classNames from 'classnames';
-import { FunctionComponent } from 'react';
+import { FunctionComponent, useLayoutEffect, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
 
 import { RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';
 import {
   selectAreResultsOutdated,
   selectIsLoading,
+  selectSolveError,
   selectSortedFilteredResults,
   selectSortedResults,
   useTranslate,
@@ -33,6 +34,14 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
   const results = useTypedSelector(selectSortedFilteredResults);
   const isLoading = useTypedSelector(selectIsLoading);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
+  const error = useTypedSelector(selectSolveError);
+  const listRef = useRef<HTMLElement>();
+
+  useLayoutEffect(() => {
+    if (listRef.current) {
+      listRef.current.scrollTo(0, 0);
+    }
+  }, [listRef, results]);
 
   return (
     <div className={styles.results}>
@@ -42,7 +51,13 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         ))}
       </div>
 
-      {typeof results === 'undefined' && (
+      {typeof error !== 'undefined' && (
+        <EmptyState className={styles.emptyState} type="error">
+          {error.message}
+        </EmptyState>
+      )}
+
+      {typeof results === 'undefined' && typeof error === 'undefined' && (
         <EmptyState className={styles.emptyState} type="info">
           {translate('results.empty-state.uninitialized')}
 
@@ -50,7 +65,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
         </EmptyState>
       )}
 
-      {typeof results !== 'undefined' && typeof allResults !== 'undefined' && (
+      {typeof results !== 'undefined' && typeof allResults !== 'undefined' && typeof error === 'undefined' && (
         <>
           {isOutdated && (
             <EmptyState className={styles.emptyState} type="info">
@@ -80,6 +95,7 @@ const Results: FunctionComponent<Props> = ({ height, width }) => {
                     [styles.outdated]: isOutdated,
                   })}
                   height={height - RESULTS_HEADER_HEIGHT - RESULTS_INPUT_HEIGHT}
+                  innerRef={listRef}
                   itemCount={results.length}
                   itemSize={RESULTS_ITEM_HEIGHT}
                   width={width}

package/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
 import Modal from 'react-modal';
+import { useKey } from 'react-use';
 
 import { CrossFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
@@ -21,6 +22,23 @@ export interface Props {
 
 const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
   const translate = useTranslate();
+  const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
+
+  useKey(
+    'Escape',
+    () => {
+      setShouldReturnFocusAfterClose(false);
+      onClose();
+    },
+    undefined,
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldReturnFocusAfterClose(true);
+    }
+  }, [isOpen]);
 
   return (
     <Modal
@@ -33,6 +51,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
       contentLabel={title}
       isOpen={isOpen}
       overlayClassName={styles.overlay}
+      shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
       onRequestClose={onClose}
     >
       <div className={classNames(styles.sidebar, className)}>

package/src/components/SquareButton/Link.tsx

@@ -16,7 +16,7 @@ const Link: FunctionComponent<Props> = ({ className, Icon, tooltip, ...props })
   const triggerProps = useTooltip(tooltip, props);
 
   return (
-    <a className={classNames(styles.squareButton, className)} type="button" {...props} {...triggerProps}>
+    <a className={classNames(styles.squareButton, className)} {...props} {...triggerProps}>
       <span className={styles.content}>
         <Icon className={styles.icon} />
       </span>

package/src/components/Tile/Tile.module.scss

@@ -62,6 +62,10 @@
     color: var(--color--inactive);
   }
 
+  &::selection {
+    background: transparent;
+  }
+
   &:disabled {
     color: inherit;
   }

package/src/components/Tile/Tile.tsx

@@ -1,5 +1,6 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import {
+  ChangeEventHandler,
   createRef,
   FocusEventHandler,
   FunctionComponent,
@@ -9,7 +10,7 @@ import {
   useMemo,
 } from 'react';
 
-import { getTileSizes } from 'lib';
+import { getTileSizes, noop } from 'lib';
 
 import TilePure from './TilePure';
 
@@ -26,6 +27,7 @@ interface Props {
   raised?: boolean;
   size: number;
   tabIndex?: number;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 }
@@ -43,8 +45,9 @@ const Tile: FunctionComponent<Props> = ({
   raised,
   size,
   tabIndex,
-  onFocus,
-  onKeyDown,
+  onChange,
+  onFocus = noop,
+  onKeyDown = noop,
 }) => {
   const { pointsFontSize, tileFontSize, tileSize } = getTileSizes(size);
   const style = useMemo(() => ({ height: tileSize, width: tileSize }), [tileSize]);
@@ -54,6 +57,11 @@ const Tile: FunctionComponent<Props> = ({
   const isEmpty = !character || character === EMPTY_CELL;
   const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
 
+  const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
+    inputRef.current?.select();
+    onKeyDown(event);
+  };
+
   useEffect(() => {
     if (autoFocus && inputRef.current) {
       inputRef.current.focus();
@@ -77,8 +85,9 @@ const Tile: FunctionComponent<Props> = ({
       raised={raised}
       style={style}
       tabIndex={tabIndex}
+      onChange={onChange}
       onFocus={onFocus}
-      onKeyDown={onKeyDown}
+      onKeyDown={handleKeyDown}
     />
   );
 };

package/src/components/Tile/TilePure.tsx

@@ -27,12 +27,11 @@ interface Props {
   raised?: boolean;
   style?: CSSProperties;
   tabIndex?: number;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
 }
 
-const handleChange: ChangeEventHandler = (event) => event.preventDefault();
-
 const TilePure: FunctionComponent<Props> = ({
   autoFocus,
   canShowPoints,
@@ -49,6 +48,7 @@ const TilePure: FunctionComponent<Props> = ({
   raised,
   style,
   tabIndex,
+  onChange,
   onFocus,
   onKeyDown,
 }) => (
@@ -72,14 +72,13 @@ const TilePure: FunctionComponent<Props> = ({
       autoFocus={autoFocus}
       className={styles.character}
       disabled={disabled}
-      maxLength={1}
       placeholder={placeholder}
       ref={inputRef}
       spellCheck={false}
       style={inputStyle}
       tabIndex={tabIndex}
       value={character || ''}
-      onChange={handleChange}
+      onChange={onChange}
       onFocus={onFocus}
       onKeyDown={onKeyDown}
     />

package/src/lib/extractCharacters.ts

@@ -0,0 +1,26 @@
+import { BLANK } from '@scrabble-solver/constants';
+import { Config } from '@scrabble-solver/types';
+
+const extractCharacters = (config: Config, value: string): string[] => {
+  let index = 0;
+  const characters: string[] = [];
+
+  while (index < value.length) {
+    const character = value[index];
+    const nextCharacter = value[index + 1];
+    const twoCharacterTileCandidate = `${character}${nextCharacter}`;
+
+    if (config.twoCharacterTiles.includes(twoCharacterTileCandidate)) {
+      characters.push(twoCharacterTileCandidate);
+      ++index;
+    } else if (config.hasCharacter(character) || character === BLANK) {
+      characters.push(character);
+    }
+
+    ++index;
+  }
+
+  return characters;
+};
+
+export default extractCharacters;

package/src/lib/extractInputValue.ts

@@ -0,0 +1,17 @@
+const extractInputValue = (input: HTMLInputElement) => {
+  const value = input.value.toLocaleLowerCase();
+
+  if (input.selectionStart === null || input.selectionEnd === null) {
+    return value;
+  }
+
+  const index = Math.min(input.selectionStart, input.selectionEnd);
+
+  if (index > 0) {
+    return value.substring(index - 1, index);
+  }
+
+  return value;
+};
+
+export default extractInputValue;

package/src/lib/index.ts

@@ -6,6 +6,8 @@ export { default as createKeyboardNavigation } from './createKeyboardNavigation'
 export { default as createKeyComparator } from './createKeyComparator';
 export { default as createNullMovingComparator } from './createNullMovingComparator';
 export { default as detectLocale } from './detectLocale';
+export { default as extractCharacters } from './extractCharacters';
+export { default as extractInputValue } from './extractInputValue';
 export { default as findCell } from './findCell';
 export { default as getCellSize } from './getCellSize';
 export { default as getRemainingTiles } from './getRemainingTiles';

package/src/lib/isCtrl.ts

@@ -1,6 +1,6 @@
 import { KeyboardEvent } from 'react';
 
-const isCtrl = <T>(event: KeyboardEvent<T>): boolean => {
+const isCtrl = <T>(event: KeyboardEvent<T> | globalThis.KeyboardEvent): boolean => {
   return event.ctrlKey || event.metaKey;
 };
 

package/src/lib/memoize.ts

@@ -1,5 +1,5 @@
 interface AnyFunction {
-  (...parameters: any[]): any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  (...parameters: any[]): any | Promise<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 interface AnyCachedFunction<T extends AnyFunction> extends AnyFunction {
@@ -20,6 +20,14 @@ const memoize = <T extends AnyFunction>(fn: T): AnyCachedFunction<T> => {
     return cache.find((entry) => parametersEqual(entry.parameters, parameters))?.result;
   };
 
+  const removeCache = (parameters: Parameters<T>): void => {
+    const index = cache.findIndex((entry) => parametersEqual(entry.parameters, parameters));
+
+    if (index >= 0) {
+      cache.splice(index, 1);
+    }
+  };
+
   const writeCache = (parameters: Parameters<T>, result: ReturnType<T>): void => {
     cache.push({ parameters, result });
   };
@@ -33,6 +41,12 @@ const memoize = <T extends AnyFunction>(fn: T): AnyCachedFunction<T> => {
 
     const result = fn(...parameters);
 
+    if (result instanceof Promise) {
+      result.catch(() => {
+        removeCache(parameters);
+      });
+    }
+
     writeCache(parameters, result);
 
     return result;

package/src/pages/api/solve.ts

@@ -37,7 +37,7 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
     const trie = await dictionaries.get(locale);
     const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
     const results = solveScrabble(trie, config, board, tiles);
-    response.status(200).send(results.map((result) => result.toJson()));
+    response.status(200).send(results);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('solve - error', { error, meta });

package/src/sdk/fetchJson.ts

@@ -0,0 +1,36 @@
+import { isError } from '@scrabble-solver/types';
+
+const fetchJson = async <T>(input: RequestInfo | URL, init?: RequestInit): Promise<T> => {
+  let response: Response;
+
+  try {
+    response = await fetch(input, {
+      ...init,
+      headers: {
+        'Content-Type': 'application/json',
+        ...init?.headers,
+      },
+    });
+  } catch (error) {
+    const message = isError(error) ? error.message : 'Unknown error';
+    throw new Error(`Network error: ${message}`);
+  }
+
+  if (response.ok) {
+    return response.json();
+  }
+
+  try {
+    const json = await response.json();
+
+    if (isError(json)) {
+      throw new Error(json.message);
+    }
+  } finally {
+    // do nothing
+  }
+
+  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+};
+
+export default fetchJson;

package/src/sdk/findWordDefinitions.ts

@@ -1,8 +1,9 @@
-import { Locale, WordDefinition } from '@scrabble-solver/types';
+import { Locale, WordDefinition, WordDefinitionJson } from '@scrabble-solver/types';
+
+import fetchJson from './fetchJson';
 
 const findWordDefinitions = async (locale: Locale, word: string): Promise<WordDefinition[]> => {
-  const url = `/api/dictionary/${locale}/${word}`;
-  const json = await fetch(url).then((response) => response.json());
+  const json = await fetchJson<WordDefinitionJson[]>(`/api/dictionary/${locale}/${word}`);
   return json.map(WordDefinition.fromJson);
 };
 

package/src/sdk/solve.ts

@@ -1,4 +1,6 @@
-import { BoardJson, Locale, ResultJson } from '@scrabble-solver/types';
+import { BoardJson, Locale, Result, ResultJson } from '@scrabble-solver/types';
+
+import fetchJson from './fetchJson';
 
 interface Payload {
   board: BoardJson;
@@ -7,14 +9,13 @@ interface Payload {
   locale: Locale;
 }
 
-const solve = ({ board, characters, configId, locale }: Payload): Promise<ResultJson[]> => {
-  return fetch('/api/solve', {
+const solve = async ({ board, characters, configId, locale }: Payload): Promise<Result[]> => {
+  const json = await fetchJson<ResultJson[]>('/api/solve', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
     body: JSON.stringify({ board, characters, configId, locale }),
-  }).then((response) => response.json());
+  });
+
+  return json.map(Result.fromJson);
 };
 
 export default solve;

package/src/sdk/verify.ts

@@ -1,5 +1,7 @@
 import { BoardJson, Locale } from '@scrabble-solver/types';
 
+import fetchJson from './fetchJson';
+
 interface Payload {
   board: BoardJson;
   configId: string;
@@ -11,14 +13,11 @@ interface Response {
   validWords: string[];
 }
 
-const verify = ({ board, configId, locale }: Payload): Promise<Response> => {
-  return fetch('/api/verify', {
+const verify = async ({ board, configId, locale }: Payload): Promise<Response> => {
+  return fetchJson<Response>('/api/verify', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
     body: JSON.stringify({ board, configId, locale }),
-  }).then((response) => response.json());
+  });
 };
 
 export default verify;