@scrabble-solver/scrabble-solver 2.8.8 → 2.8.10

package/src/components/NavButtons/NavButtons.tsx

@@ -1,9 +1,9 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { Cog, Eraser, Github, Keyboard, Sack } from 'icons';
+import { BookHalf, Cog, Eraser, Github, Keyboard, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
-import { selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
+import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
 
 import SquareButton from '../SquareButton';
 
@@ -14,27 +14,26 @@ interface Props {
   onShowKeyMap: () => void;
   onShowRemainingTiles: () => void;
   onShowSettings: () => void;
+  onShowWords: () => void;
 }
 
-const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRemainingTiles, onShowSettings }) => {
+const NavButtons: FunctionComponent<Props> = ({
+  onClear,
+  onShowKeyMap,
+  onShowRemainingTiles,
+  onShowSettings,
+  onShowWords,
+}) => {
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
+  const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
 
   return (
     <div className={styles.navButtons}>
-      <SquareButton.Link
-        className={styles.button}
-        href={GITHUB_PROJECT_URL}
-        Icon={Github}
-        rel="noopener noreferrer"
-        target="_blank"
-        tooltip={translate('github')}
-      />
+      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
 
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
-
       <SquareButton
         className={classNames(styles.button, {
           [styles.error]: hasOverusedTiles,
@@ -44,9 +43,29 @@ const NavButtons: FunctionComponent<Props> = ({ onClear, onShowKeyMap, onShowRem
         onClick={onShowRemainingTiles}
       />
 
+      <SquareButton
+        className={classNames(styles.button, {
+          [styles.error]: hasInvalidWords,
+        })}
+        Icon={BookHalf}
+        tooltip={translate('words')}
+        onClick={onShowWords}
+      />
+
       <div className={styles.separator} />
 
-      <SquareButton className={styles.button} Icon={Eraser} tooltip={translate('common.clear')} onClick={onClear} />
+      <SquareButton.Link
+        className={styles.button}
+        href={GITHUB_PROJECT_URL}
+        Icon={Github}
+        rel="noopener noreferrer"
+        target="_blank"
+        tooltip={translate('github')}
+      />
+
+      <div className={styles.separator} />
+
+      <SquareButton className={styles.button} Icon={Keyboard} tooltip={translate('keyMap')} onClick={onShowKeyMap} />
 
       <SquareButton className={styles.button} Icon={Cog} tooltip={translate('settings')} onClick={onShowSettings} />
     </div>

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/RemainingTiles/RemainingTiles.module.scss

@@ -1,11 +1,8 @@
-.group {
-  margin-bottom: var(--spacing--l);
-}
-
 .title {
-  margin-bottom: var(--spacing--m);
-  font-size: var(--font--size--h2);
-  font-weight: 300;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .content {
@@ -13,3 +10,7 @@
   grid-template-columns: repeat(5, 1fr);
   gap: var(--spacing--m);
 }
+
+.badge {
+  margin-left: var(--spacing--m);
+}

package/src/components/RemainingTiles/RemainingTiles.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent } from 'react';
 
 import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 
+import Badge from '../Badge';
 import Sidebar from '../Sidebar';
 
 import Character from './Character';
@@ -20,15 +21,23 @@ const RemainingTiles: FunctionComponent<Props> = ({ className, isOpen, onClose }
   return (
     <Sidebar className={className} isOpen={isOpen} title={translate('remaining-tiles')} onClose={onClose}>
       {groups.map(({ remainingCount, tiles, translationKey, totalCount }) => (
-        <div className={styles.group} key={translationKey}>
-          <h2 className={styles.title}>{`${translate(translationKey)} (${remainingCount} / ${totalCount})`}</h2>
-
+        <Sidebar.Section
+          key={translationKey}
+          title={
+            <span className={styles.title}>
+              <span>{translate(translationKey)}</span>
+              <Badge className={styles.badge}>
+                {remainingCount} / {totalCount}
+              </Badge>
+            </span>
+          }
+        >
           <div className={styles.content}>
             {tiles.map((tile) => {
               return <Character key={tile.character} tile={tile} />;
             })}
           </div>
-        </div>
+        </Sidebar.Section>
       ))}
     </Sidebar>
   );

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

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { FunctionComponent, ReactNode } from 'react';
 import Modal from 'react-modal';
 
-import { Cross } from 'icons';
+import { CrossFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
 import { useTranslate } from 'state';
 
@@ -41,7 +41,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
 
           <SquareButton
             className={styles.closeButton}
-            Icon={Cross}
+            Icon={CrossFill}
             tooltip={translate('common.close')}
             onClick={onClose}
           />

package/src/components/Sidebar/components/Section/Section.module.scss

@@ -7,6 +7,5 @@
 .heading {
   margin-bottom: var(--spacing--m);
   font-size: var(--font--size--h2);
-  font-family: var(--font--family--title);
   font-weight: 300;
 }

package/src/components/Sidebar/components/Section/Section.tsx

@@ -6,7 +6,7 @@ import styles from './Section.module.scss';
 interface Props {
   children: ReactNode;
   className?: string;
-  title: string;
+  title: ReactNode;
 }
 
 const Section: FunctionComponent<Props> = ({ children, className, title }) => (

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/SquareButton/SquareButton.module.scss

@@ -18,6 +18,11 @@
   &:active {
     color: var(--color--foreground);
   }
+
+  &[disabled] {
+    pointer-events: none;
+    opacity: 0.25;
+  }
 }
 
 .content {

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/components/Words/Words.module.scss

@@ -0,0 +1,35 @@
+.title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.badge {
+  margin-left: var(--spacing--m);
+}
+
+.word {
+  display: flex;
+  align-items: center;
+
+  & + & {
+    margin-top: var(--spacing--s);
+  }
+}
+
+.invalid {
+  color: var(--color--error);
+}
+
+.valid {
+  color: var(--color--success);
+}
+
+.icon {
+  $size: 24px;
+
+  width: $size;
+  height: $size;
+  margin-right: var(--spacing--s);
+}

package/src/components/Words/Words.tsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import { FunctionComponent } from 'react';
+
+import { Check, Cross } from 'icons';
+import { selectVerify, useTranslate, useTypedSelector } from 'state';
+
+import Badge from '../Badge';
+import Sidebar from '../Sidebar';
+
+import styles from './Words.module.scss';
+
+interface Props {
+  className?: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const Words: FunctionComponent<Props> = ({ className, isOpen, onClose }) => {
+  const translate = useTranslate();
+  const { invalidWords, validWords } = useTypedSelector(selectVerify);
+
+  return (
+    <Sidebar className={className} isOpen={isOpen} title={translate('words')} onClose={onClose}>
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.invalid')}</span>
+            <Badge className={styles.badge}>{invalidWords.length}</Badge>
+          </span>
+        }
+      >
+        {invalidWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Cross className={classNames(styles.icon, styles.invalid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+
+      <Sidebar.Section
+        title={
+          <span className={styles.title}>
+            <span>{translate('words.valid')}</span>
+            <Badge className={styles.badge}>{validWords.length}</Badge>
+          </span>
+        }
+      >
+        {validWords.map((word, index) => (
+          <div className={styles.word} key={index}>
+            <Check className={classNames(styles.icon, styles.valid)} /> {word}
+          </div>
+        ))}
+      </Sidebar.Section>
+    </Sidebar>
+  );
+};
+
+export default Words;

package/src/components/Words/index.ts

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

package/src/components/index.ts

@@ -1,3 +1,4 @@
+export { default as Badge } from './Badge';
 export { default as Board } from './Board';
 export { default as Button } from './Button';
 export { default as Checkbox } from './Checkbox';
@@ -25,3 +26,4 @@ export { default as SvgFontCss } from './SvgFontCss';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';
+export { default as Words } from './Words';