@scrabble-solver/scrabble-solver 2.10.7 → 2.10.9

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

@@ -1,13 +1,12 @@
 @import 'styles/mixins';
 
-$icon-size: 16px;
-
 .cell {
   @include focus-effect;
+  @include lighthouse-input-size-hack;
 
   position: relative;
   display: table-cell;
-  background-color: white;
+  background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
   background-clip: padding-box;
@@ -36,64 +35,64 @@ $icon-size: 16px;
 
   &.bonusStart {
     &::before {
-      background-color: var(--color--violet--light);
+      background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
-      background-color: var(--color--yellow--light);
+      background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
-      background-color: var(--color--green--light);
+      background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
-      background-color: var(--color--blue--light);
+      background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
-      background-color: var(--color--red--light);
+      background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
-      background-color: var(--color--light-blue--light);
+      background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
-      background-color: var(--color--dark-blue--light);
+      background-color: var(--color--bonus--character-multiplier--3);
     }
   }
 
   &.bonusWord2 {
     &::before {
       content: 'x2';
-      background-color: var(--color--orange);
+      background-color: var(--color--bonus--word-multiplier--2);
     }
   }
 
   &.bonusWord3 {
     &::before {
       content: 'x3';
-      background-color: var(--color--pink);
+      background-color: var(--color--bonus--word-multiplier--3);
     }
   }
 
-  &.candidate {
+  &.filtered {
     &::before {
       content: ' ';
-      background-color: var(--color--primary);
+      background-color: var(--color--foreground--secondary);
     }
   }
 
@@ -112,169 +111,27 @@ $icon-size: 16px;
     pointer-events: none;
     font-size: 60%;
     font-weight: bold;
-    color: white;
+    color: var(--color--white);
     content: ' ';
 
     [lang='fa-IR'] & {
-      font-family: 'Open Sans', sans-serif;
+      font-family: var(--font--family--latin);
     }
   }
 
   &:focus-within {
-    z-index: 1;
-
-    .actions {
-      display: flex;
-    }
-
-    .action {
-      user-select: initial;
-      pointer-events: auto;
-    }
-  }
-}
-
-.actions {
-  display: none;
-  position: absolute;
-  top: -$icon-size;
-  z-index: 2;
-  transition: var(--transition);
-  pointer-events: none;
-  box-shadow: var(--box-shadow);
-  border-radius: var(--border--radius);
-
-  [dir='ltr'] & {
-    left: calc(100% + var(--spacing--s) - #{$icon-size});
-  }
-
-  [dir='rtl'] & {
-    right: calc(100% + var(--spacing--s) - #{$icon-size});
+    z-index: 2;
   }
 }
 
-.action {
-  @include button-reset;
-
-  display: flex;
-  justify-content: center;
-  padding: var(--spacing--s);
-  user-select: none;
-  pointer-events: none;
-  box-sizing: content-box;
-  background-color: white;
-  border: var(--border);
-  font-size: var(--font--size--m);
-  line-height: $icon-size;
-  color: var(--color--foreground--secondary);
-  transition: var(--transition);
-  cursor: pointer;
-
-  & + & {
-    [dir='ltr'] & {
-      border-left: none;
-    }
-
-    [dir='rtl'] & {
-      border-right: none;
-    }
-  }
-
-  [dir='ltr'] & {
-    &:first-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
-    }
-
-    &:last-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
-    }
-  }
-
-  [dir='rtl'] & {
-    &:first-child {
-      border-top-right-radius: var(--border--radius);
-      border-bottom-right-radius: var(--border--radius);
-    }
-
-    &:last-child {
-      border-top-left-radius: var(--border--radius);
-      border-bottom-left-radius: var(--border--radius);
-    }
-  }
-
-  &,
-  .filterCell,
-  .toggleDirection {
-    width: $icon-size;
-    height: $icon-size;
-  }
-
-  &:active,
-  &:hover {
-    color: var(--color--foreground);
-  }
-}
-
-.toggleDirection {
-  transition: var(--transition);
-
-  &.right {
-    transform: rotate(-90deg);
-
-    [dir='rtl'] & {
-      transform: rotate(90deg);
-    }
-  }
-}
-
-.blank {
-  user-select: none;
-
-  &.active {
-    font-weight: bold;
-  }
-}
-
-.filterCell {
-  color: var(--color--inactive);
-
-  &.filtered {
-    color: var(--color--foreground--secondary);
-  }
-}
-
-.iconContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.flagContainer {
-  background-color: var(--color--primary);
-}
-
-.flag,
-.star {
-  color: white;
-}
-
-.star {
+.icon {
   $size: 40%;
 
+  position: absolute;
+  top: 50%;
+  left: 50%;
   width: $size;
   height: $size;
-}
-
-.flag {
-  $size: 50%;
-
-  width: $size;
-  height: $size;
+  transform: translate(-50%, -50%);
+  color: var(--color--white);
 }

package/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/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/src/components/Board/components/index.ts

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

package/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/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/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}