scrabble-solver 2.10.7 → 2.10.9

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

@@ -1,12 +1,9 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
 import { ChangeEventHandler, FunctionComponent, RefObject, useCallback, useMemo } from 'react';
-import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
 import {
-  boardSlice,
-  cellFilterSlice,
   selectCellBonus,
   selectCellIsFiltered,
   selectCellIsValid,
@@ -21,32 +18,27 @@ import CellPure from './CellPure';
 interface Props {
   cell: CellModel;
   className?: string;
-  direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
   isCenter: boolean;
   isRight: boolean;
   size: number;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
 }
 
 const Cell: FunctionComponent<Props> = ({
   cell,
   className,
-  direction,
   inputRef,
   isBottom,
   isCenter,
   isRight,
   size,
   onChange,
-  onDirectionToggle,
   onFocus,
 }) => {
   const { tile, x, y } = cell;
-  const dispatch = useDispatch();
   const translate = useTranslate();
   const locale = useTypedSelector(selectLocale);
   const bonus = useTypedSelector((state) => selectCellBonus(state, cell));
@@ -57,32 +49,8 @@ const Cell: FunctionComponent<Props> = ({
   const isEmpty = tile.character === EMPTY_CELL;
   const style = useMemo(() => ({ fontSize: tileFontSize }), [tileFontSize]);
 
-  const handleDirectionToggleClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    onDirectionToggle();
-  }, [onDirectionToggle]);
-
   const handleFocus = useCallback(() => onFocus(x, y), [x, y, onFocus]);
 
-  const handleToggleBlankClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    dispatch(boardSlice.actions.toggleCellIsBlank({ x, y }));
-  }, [dispatch, x, y]);
-
-  const handleToggleFilterCellClick = useCallback(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-    }
-
-    dispatch(cellFilterSlice.actions.toggle({ x, y }));
-  }, [dispatch, x, y]);
-
   return (
     <CellPure
       aria-label={translate('cell.tile.location', {
@@ -92,7 +60,6 @@ const Cell: FunctionComponent<Props> = ({
       bonus={bonus}
       cell={cell}
       className={className}
-      direction={direction}
       inputRef={inputRef}
       isBottom={isBottom}
       isCenter={isCenter}
@@ -104,12 +71,8 @@ const Cell: FunctionComponent<Props> = ({
       size={size}
       style={style}
       tile={tile}
-      translate={translate}
       onChange={onChange}
-      onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
-      onToggleBlankClick={handleToggleBlankClick}
-      onToggleFilterCellClick={handleToggleFilterCellClick}
     />
   );
 };

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

@@ -1,21 +1,11 @@
 import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import {
-  ChangeEventHandler,
-  CSSProperties,
-  FocusEventHandler,
-  FunctionComponent,
-  memo,
-  MouseEventHandler,
-  RefObject,
-} from 'react';
+import { ChangeEventHandler, CSSProperties, FocusEventHandler, FunctionComponent, memo, RefObject } from 'react';
 
-import { ArrowDown, Flag, Star } from 'icons';
-import { Translate } from 'types';
+import { FlagFill, Star } from 'icons';
 
 import Tile from '../../../Tile';
 
-import Button from './Button';
 import styles from './Cell.module.scss';
 import { getBonusClassname } from './lib';
 
@@ -24,7 +14,6 @@ interface Props {
   bonus: Bonus | undefined;
   cell: Cell;
   className?: string;
-  direction: 'horizontal' | 'vertical';
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
   isCenter: boolean;
@@ -36,12 +25,8 @@ interface Props {
   size: number;
   style?: CSSProperties;
   tile: TileModel;
-  translate: Translate;
   onChange: ChangeEventHandler<HTMLInputElement>;
-  onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
-  onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
-  onToggleFilterCellClick: MouseEventHandler<HTMLButtonElement>;
 }
 
 const CellPure: FunctionComponent<Props> = ({
@@ -49,7 +34,6 @@ const CellPure: FunctionComponent<Props> = ({
   bonus,
   cell,
   className,
-  direction,
   inputRef,
   isBottom,
   isCenter,
@@ -61,32 +45,20 @@ const CellPure: FunctionComponent<Props> = ({
   size,
   style,
   tile,
-  translate,
   onChange,
-  onDirectionToggleClick,
   onFocus,
-  onToggleBlankClick,
-  onToggleFilterCellClick,
 }) => (
   <div
     className={classNames(styles.cell, className, getBonusClassname(cell, bonus, isCenter), {
       [styles.bottom]: isBottom,
-      [styles.candidate]: cell.isCandidate(),
+      [styles.filtered]: isFiltered,
       [styles.right]: isRight,
     })}
     style={style}
   >
-    {isCenter && isEmpty && (
-      <div className={classNames(styles.iconContainer)}>
-        <Star className={styles.star} />
-      </div>
-    )}
+    {isCenter && isEmpty && !isFiltered && <Star className={styles.icon} />}
 
-    {isFiltered && (
-      <div className={classNames(styles.iconContainer, styles.flagContainer)}>
-        <Flag className={styles.flag} />
-      </div>
-    )}
+    {isFiltered && <FlagFill className={styles.icon} />}
 
     <Tile
       aria-label={ariaLabel}
@@ -103,48 +75,6 @@ const CellPure: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
     />
-
-    {!cell.isCandidate() && (
-      <div className={styles.actions}>
-        <Button
-          aria-label={translate('cell.toggle-direction')}
-          tooltip={translate('cell.toggle-direction')}
-          onClick={onDirectionToggleClick}
-        >
-          <ArrowDown
-            className={classNames(styles.toggleDirection, {
-              [styles.right]: direction === 'horizontal',
-            })}
-          />
-        </Button>
-
-        {isEmpty && (
-          <Button
-            aria-label={translate('cell.filter-cell')}
-            className={classNames(styles.filterCell, {
-              [styles.filtered]: isFiltered,
-            })}
-            tooltip={translate('cell.filter-cell')}
-            onClick={onToggleFilterCellClick}
-          >
-            <Flag />
-          </Button>
-        )}
-
-        {!isEmpty && (
-          <Button
-            aria-label={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-            className={classNames(styles.blank, {
-              [styles.active]: tile.isBlank,
-            })}
-            tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-            onClick={onToggleBlankClick}
-          >
-            B
-          </Button>
-        )}
-      </div>
-    )}
   </div>
 );
 

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

@@ -1 +1,2 @@
+export { default as Actions } from './Actions';
 export { default as Cell } from './Cell';

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

@@ -2,16 +2,15 @@
 import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
 import { Board, Cell } from '@scrabble-solver/types';
 import {
+  ChangeEvent,
+  ChangeEventHandler,
+  ClipboardEventHandler,
   createRef,
   KeyboardEventHandler,
   RefObject,
   useCallback,
   useMemo,
   useState,
-  useRef,
-  ChangeEventHandler,
-  ChangeEvent,
-  ClipboardEventHandler,
 } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
@@ -28,8 +27,9 @@ import { Point } from '../types';
 const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
 
 interface State {
+  activeIndex: Point;
   direction: Direction;
-  refs: RefObject<HTMLInputElement>[][];
+  inputRefs: RefObject<HTMLInputElement>[][];
 }
 
 interface Actions {
@@ -46,29 +46,29 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const dispatch = useDispatch();
   const config = useTypedSelector(selectConfig);
   const locale = useTypedSelector(selectLocale);
-  const refs = useMemo(
+  const inputRefs = useMemo(
     () => createGridOf<RefObject<HTMLInputElement>>(width, height, () => createRef()),
     [width, height],
   );
-  const activeIndexRef = useRef<Point>({ x: 0, y: 0 });
+  const [activeIndex, setActiveIndex] = useState<Point>({ x: 0, y: 0 });
   const [direction, setLastDirection] = useState<Direction>('horizontal');
   const directionRef = useLatest(direction);
 
   const changeActiveIndex = useCallback(
     (offsetX: number, offsetY: number) => {
-      const x = Math.min(Math.max(activeIndexRef.current.x + offsetX, 0), width - 1);
-      const y = Math.min(Math.max(activeIndexRef.current.y + offsetY, 0), height - 1);
-      activeIndexRef.current = { x, y };
-      refs[y][x].current?.focus();
+      const x = Math.min(Math.max(activeIndex.x + offsetX, 0), width - 1);
+      const y = Math.min(Math.max(activeIndex.y + offsetY, 0), height - 1);
+      setActiveIndex({ x, y });
+      inputRefs[y][x].current?.focus();
     },
-    [activeIndexRef, refs],
+    [activeIndex, inputRefs],
   );
 
   const getInputRefPosition = useCallback(
     (inputRef: HTMLInputElement): Point | undefined => {
-      return getPositionInGrid(refs, (ref) => ref.current === inputRef);
+      return getPositionInGrid(inputRefs, (ref) => ref.current === inputRef);
     },
-    [refs],
+    [inputRefs],
   );
 
   const moveFocus = useCallback(
@@ -217,7 +217,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const onDirectionToggle = useCallback(() => setLastDirection(toggleDirection), []);
 
   const onFocus = useCallback((x: number, y: number) => {
-    activeIndexRef.current = { x, y };
+    setActiveIndex({ x, y });
   }, []);
 
   const onKeyDown = useMemo(() => {
@@ -356,7 +356,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   );
 
   return [
-    { direction, refs },
+    { activeIndex, direction, inputRefs },
     { onChange, onDirectionToggle, onFocus, onKeyDown, onPaste },
   ];
 };

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

@@ -21,15 +21,15 @@
 
     &.primary {
       background-color: var(--color--primary);
-      color: white;
+      color: var(--color--primary--opposite);
     }
 
     &.default {
-      background-color: var(--color--background--overlay);
+      background-color: var(--color--background--element);
       color: var(--color--foreground);
 
       .icon {
-        color: var(--color--inactive);
+        color: var(--color--foreground--secondary);
       }
     }
   }

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

@@ -10,23 +10,20 @@ interface Props {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  id: string;
   name: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
-const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, onChange }) => (
+const Checkbox: FunctionComponent<Props> = ({ checked, children, className, disabled, name, onChange }) => (
   <label
     className={classNames(styles.checkbox, className, {
       [styles.checked]: checked,
     })}
-    htmlFor={id}
   >
     <input
       checked={checked}
       className={styles.input}
       disabled={disabled}
-      id={id}
       name={name}
       type="checkbox"
       onChange={onChange}

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

@@ -27,6 +27,10 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
     >
       {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
 
+      {results.length === 0 && (
+        <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
+      )}
+
       {results.map(({ definitions, exists, isAllowed, word }) => (
         <div
           className={classNames(styles.result, {
@@ -35,40 +39,34 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
           })}
           key={word}
         >
-          {typeof word === 'undefined' && (
-            <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
-          )}
-
-          {typeof word !== 'undefined' && (
-            <div className={styles.content}>
-              {word && <h2 className={styles.word}>{word}</h2>}
+          <div className={styles.content}>
+            {word && <h2 className={styles.word}>{word}</h2>}
 
-              {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
+            {isAllowed === false && <div>{translate('dictionary.empty-state.not-allowed')}</div>}
 
-              {isAllowed === true && (
-                <>
-                  {definitions.length === 0 && (
-                    <>
-                      {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
-                      {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
-                    </>
-                  )}
+            {isAllowed === true && (
+              <>
+                {definitions.length === 0 && (
+                  <>
+                    {exists && <div>{translate('dictionary.empty-state.no-definitions')}</div>}
+                    {!exists && <div>{translate('dictionary.empty-state.no-results')}</div>}
+                  </>
+                )}
 
-                  {definitions.length > 0 && (
-                    <ul className={styles.definitions}>
-                      {definitions.map((result, index) => (
-                        <li key={index} className={styles.definition}>
-                          {result}
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </>
-              )}
+                {definitions.length > 0 && (
+                  <ul className={styles.definitions}>
+                    {definitions.map((result, index) => (
+                      <li key={index} className={styles.definition}>
+                        {result}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
 
-              {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
-            </div>
-          )}
+            {!isLoading && isAllowed === null && <div>{translate('dictionary.empty-state.no-results')}</div>}
+          </div>
         </div>
       ))}
 

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

@@ -1,3 +1,4 @@
+import { COMMA_ARABIC, COMMA_LATIN } from '@scrabble-solver/constants';
 import classNames from 'classnames';
 import { ChangeEvent, FormEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
@@ -28,8 +29,10 @@ const DictionaryInput: FunctionComponent<Props> = ({ className }) => {
     <form className={classNames(styles.dictionaryInput, className)} onSubmit={handleSubmit}>
       <input
         className={styles.input}
+        pattern={`.*[^\\s${COMMA_ARABIC}${COMMA_LATIN}].*`}
         placeholder={translate('dictionary.input.placeholder')}
         required
+        title={translate('dictionary.input.title')}
         type="text"
         value={input}
         onChange={handleChange}

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

@@ -8,7 +8,7 @@ $icon-size: 15px;
   min-width: $key-size;
   height: $key-size;
   padding: var(--spacing--s) var(--spacing--m);
-  background-color: white;
+  background-color: var(--color--white);
   border: var(--border);
   border-radius: var(--border--radius);
   box-shadow: var(--box-shadow);

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

@@ -43,7 +43,7 @@ $hiding-duration: 200ms;
 
 .logoGrayscale {
   filter: grayscale(1);
-  opacity: 0.3;
+  opacity: var(--opacity--disabled);
 }
 
 .logoColor {

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

@@ -60,12 +60,14 @@
 }
 
 .container {
+  --box-shadow--offset: 1px;
+  --box-shadow--offset--negative: calc(-1 * var(--box-shadow--offset));
+
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--color--background);
-  transition: var(--transition);
-  transition-duration: var(--transition--duration--long);
+  transition: var(--transition--long);
   transform: translateX(var(--modal--width));
   opacity: 0;
 

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

@@ -7,6 +7,11 @@
 
 .tile {
   @include focus-effect;
+  @include lighthouse-input-size-hack;
 
   --background-color: var(--color--background);
+
+  &:focus-within {
+    z-index: 2;
+  }
 }

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

@@ -8,24 +8,21 @@ interface Props {
   children?: ReactNode;
   className?: string;
   disabled?: boolean;
-  id: string;
   name: string;
   value: string;
   onChange: ChangeEventHandler<HTMLInputElement>;
 }
 
-const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, id, name, value, onChange }) => (
+const Radio: FunctionComponent<Props> = ({ checked, children, className, disabled, name, value, onChange }) => (
   <label
     className={classNames(styles.radio, className, {
       [styles.checked]: checked,
     })}
-    htmlFor={id}
   >
     <input
       checked={checked}
       className={styles.input}
       disabled={disabled}
-      id={id}
       name={name}
       type="radio"
       value={value}

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

@@ -45,7 +45,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   &:focus,
   &:hover {
     background-color: var(--color--primary);
-    color: white;
+    color: var(--color--primary--opposite);
   }
 }
 
@@ -73,7 +73,7 @@ $row-padding-horizontal: calc(var(--spacing--m) + var(--spacing--s));
   &.highlighted {
     &:not(:disabled) {
       background-color: var(--color--primary);
-      color: white;
+      color: var(--color--primary--opposite);
     }
   }
 }

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

@@ -0,0 +1,19 @@
+import { CSSProperties, FunctionComponent } from 'react';
+
+const INVISIBLE_STYLE: CSSProperties = {
+  color: 'transparent',
+  pointerEvents: 'none',
+  position: 'absolute',
+  userSelect: 'none',
+  transform: 'translateY(-9999px)',
+};
+
+const SeoMessage: FunctionComponent = () => (
+  <p style={INVISIBLE_STYLE}>
+    Scrabble Solver 2 is a free and open-source analysis tool for Scrabble and Literaki. Quickly find top scoring words
+    using given letters and board state. Available in English, French, German, Polish & Spanish. Source code is
+    available on GitHub - contributions are welcome!
+  </p>
+);
+
+export default SeoMessage;

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

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

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

@@ -96,11 +96,6 @@
   min-width: 0;
 }
 
-.rackContainer {
-  display: flex;
-  justify-content: center;
-}
-
 .rack {
   border: var(--border);
 }

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

@@ -157,7 +157,7 @@ const Solver: FunctionComponent<Props> = ({ className, height, width, onShowResu
 
       <div className={styles.bottomContainer} ref={bottomContainerRef}>
         <div className={styles.bottomContent}>
-          <form className={styles.rackContainer} onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit}>
             <Rack className={styles.rack} tileSize={tileSize} />
             <input className={styles.submitInput} tabIndex={-1} type="submit" />
           </form>

package/packages/scrabble-solver/src/components/Solver/components/EmptyState/EmptyState.module.scss

@@ -4,7 +4,7 @@
   width: 100%;
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: white;
+  background-color: var(--color--white);
   text-align: center;
 }
 

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.module.scss

@@ -2,7 +2,6 @@
 
 .resultCandidatePicker {
   display: flex;
-  align-items: center;
   gap: var(--spacing--l);
 
   @include media('<xs') {
@@ -14,6 +13,14 @@
   flex: 0 0 auto;
   display: flex;
   border-radius: var(--border--radius);
+
+  &.bothEnabled {
+    box-shadow: var(--box-shadow);
+
+    .button {
+      box-shadow: none;
+    }
+  }
 }
 
 .button {
@@ -50,7 +57,7 @@
   width: 100%;
   border: var(--border);
   border-radius: var(--border--radius);
-  background-color: white;
+  background-color: var(--color--white);
   box-shadow: var(--box-shadow);
   cursor: pointer;
 

package/packages/scrabble-solver/src/components/Solver/components/ResultCandidatePicker/ResultCandidatePicker.tsx

@@ -34,6 +34,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
   const disabled = isOutdated || !resultCandidate;
   const isPreviousDisabled = index <= 0 || disabled;
   const isNextDisabled = index >= results.length - 1 || disabled;
+  const bothEnabled = !isPreviousDisabled && !isNextDisabled;
 
   const handleNextClick = () => {
     if (!isNextDisabled) {
@@ -51,7 +52,7 @@ const ResultCandidatePicker: FunctionComponent<Props> = ({ className, onResultCl
 
   return (
     <div className={classNames(styles.resultCandidatePicker, className)} {...props}>
-      <div className={styles.buttons}>
+      <div className={classNames(styles.buttons, { [styles.bothEnabled]: bothEnabled })}>
         <Button
           aria-label={translate('common.previous')}
           className={styles.button}