@scrabble-solver/scrabble-solver 2.10.8 → 2.10.10

package/src/components/Board/components/Cell/CellPure.tsx

@@ -1,19 +1,9 @@
 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, FlagFill, Square, SquareFill, Star } from 'icons';
-import { Translate } from 'types';
+import { FlagFill, Star } from 'icons';
 
-import Button from '../../../Button';
 import Tile from '../../../Tile';
 
 import styles from './Cell.module.scss';
@@ -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)}>
-        <FlagFill className={styles.flag} />
-      </div>
-    )}
+    {isFiltered && <FlagFill className={styles.icon} />}
 
     <Tile
       aria-label={ariaLabel}
@@ -103,41 +75,6 @@ const CellPure: FunctionComponent<Props> = ({
       onChange={onChange}
       onFocus={onFocus}
     />
-
-    {!cell.isCandidate() && (
-      <div className={styles.actions}>
-        <Button
-          aria-label={translate('cell.toggle-direction')}
-          className={styles.action}
-          Icon={ArrowDown}
-          iconClassName={classNames(styles.toggleDirection, {
-            [styles.right]: direction === 'horizontal',
-          })}
-          tooltip={translate('cell.toggle-direction')}
-          onClick={onDirectionToggleClick}
-        />
-
-        {isEmpty && (
-          <Button
-            aria-label={translate('cell.filter-cell')}
-            className={classNames(styles.action)}
-            Icon={isFiltered ? Flag : FlagFill}
-            tooltip={translate('cell.filter-cell')}
-            onClick={onToggleFilterCellClick}
-          />
-        )}
-
-        {!isEmpty && (
-          <Button
-            aria-label={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-            className={styles.action}
-            Icon={tile.isBlank ? SquareFill : Square}
-            tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-            onClick={onToggleBlankClick}
-          />
-        )}
-      </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/Modal/Modal.module.scss

@@ -15,8 +15,8 @@
 
 .modal {
   position: fixed;
+  bottom: 0;
   z-index: var(--z-index--modal);
-  height: 100vh;
   width: var(--modal--width);
   padding: 0;
   border-radius: 0;
@@ -69,6 +69,7 @@
   background-color: var(--color--background);
   transition: var(--transition--long);
   transform: translateX(var(--modal--width));
+  overflow: hidden;
   opacity: 0;
 
   [dir='ltr'] & {
@@ -113,6 +114,7 @@
 .content {
   position: relative;
   flex: 1;
+  min-height: 0;
   margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
   overflow: auto;

package/src/components/Rack/Rack.module.scss

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

package/src/components/Solver/Solver.module.scss

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

package/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/src/components/Tile/Tile.module.scss

@@ -54,16 +54,6 @@
   }
 }
 
-.inputContainer {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  overflow: hidden;
-}
-
 .input,
 .character,
 .placeholder {
@@ -82,22 +72,6 @@
   color: transparent;
   border: none;
   font-size: 16px; // prevent iOS from automatically zooming in on focus
-
-  // Hack for this Lighthouse warning:
-  // > Interactive elements like buttons and links should be large enough (48x48px), and have
-  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
-  //
-  // .inputContainer exists only for the purpose of this hack
-  $min-tile-width: 20px;
-  $min-lighthouse-size: 48px;
-
-  position: absolute;
-  top: calc((100% - $min-lighthouse-size) / 2);
-  right: calc((100% - $min-lighthouse-size) / 2);
-  bottom: calc((100% - $min-lighthouse-size) / 2);
-  left: calc((100% - $min-lighthouse-size) / 2);
-  width: $min-lighthouse-size;
-  height: $min-lighthouse-size;
 }
 
 .character,

package/src/components/Tile/Tile.tsx

@@ -11,6 +11,7 @@ import {
   useRef,
 } from 'react';
 
+import { useMediaQuery } from 'hooks';
 import { getTileSizes, noop } from 'lib';
 import { EASE_OUT_CUBIC, TILE_APPEAR_DURATION, TILE_APPEAR_KEYFRAMES } from 'parameters';
 import { selectLocale, useTypedSelector } from 'state';
@@ -64,7 +65,8 @@ const Tile: FunctionComponent<Props> = ({
   const ref = useRef<HTMLInputElement>(null);
   const mergedRef = inputRef ? mergeRefs(ref, inputRef) : ref;
   const isEmpty = !character || character === EMPTY_CELL;
-  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined';
+  const isLessThanXs = useMediaQuery('<xs');
+  const canShowPoints = (isBlank || !isEmpty) && typeof points !== 'undefined' && !isLessThanXs;
   const pointsFormatted = typeof points === 'number' ? points.toLocaleString(locale) : '';
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
@@ -79,7 +81,7 @@ const Tile: FunctionComponent<Props> = ({
   }, [autoFocus, ref]);
 
   useEffect(() => {
-    if (!ref.current?.parentElement || !character) {
+    if (!ref.current?.parentElement || !character || isLessThanXs) {
       return;
     }
 
@@ -88,7 +90,7 @@ const Tile: FunctionComponent<Props> = ({
       easing: EASE_OUT_CUBIC,
       fill: 'forwards',
     });
-  }, [character]);
+  }, [character, isLessThanXs]);
 
   return (
     <TilePure

package/src/components/Tile/TilePure.tsx

@@ -75,24 +75,22 @@ const TilePure: FunctionComponent<Props> = ({
     })}
     style={style}
   >
-    <div className={styles.inputContainer}>
-      <input
-        aria-label={ariaLabel}
-        autoCapitalize="none"
-        autoComplete="off"
-        autoCorrect="off"
-        autoFocus={autoFocus}
-        className={styles.input}
-        disabled={disabled}
-        ref={inputRef}
-        spellCheck={false}
-        tabIndex={tabIndex}
-        value={character || ''}
-        onChange={onChange}
-        onFocus={onFocus}
-        onKeyDown={onKeyDown}
-      />
-    </div>
+    <input
+      aria-label={ariaLabel}
+      autoCapitalize="none"
+      autoComplete="off"
+      autoCorrect="off"
+      autoFocus={autoFocus}
+      className={styles.input}
+      disabled={disabled}
+      ref={inputRef}
+      spellCheck={false}
+      tabIndex={tabIndex}
+      value={character || ''}
+      onChange={onChange}
+      onFocus={onFocus}
+      onKeyDown={onKeyDown}
+    />
 
     {placeholder && (
       <div className={styles.placeholder} style={characterStyle} tabIndex={-1}>

package/src/hooks/useLocalStorage/useLocalStorageBoard.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { boardSlice, localStorage, selectBoard, useTypedSelector } from 'state';
 const useLocalStorageBoard = (): void => {
   const dispatch = useDispatch();
   const board = useTypedSelector(selectBoard);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedBoard = localStorage.getBoard();
@@ -14,13 +15,15 @@ const useLocalStorageBoard = (): void => {
     if (persistedBoard) {
       dispatch(boardSlice.actions.init(persistedBoard));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (board) {
+    if (board && isLoaded) {
       localStorage.setBoard(board);
     }
-  }, [board]);
+  }, [board, isLoaded]);
 };
 
 export default useLocalStorageBoard;

package/src/hooks/useLocalStorage/useLocalStorageConfigId.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, selectConfigId, settingsSlice, useTypedSelector } from 's
 const useLocalStorageConfigId = (): void => {
   const dispatch = useDispatch();
   const configId = useTypedSelector(selectConfigId);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedConfigId = localStorage.getConfigId();
@@ -14,13 +15,15 @@ const useLocalStorageConfigId = (): void => {
     if (persistedConfigId) {
       dispatch(settingsSlice.actions.init({ configId: persistedConfigId }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (configId) {
+    if (configId && isLoaded) {
       localStorage.setConfigId(configId);
     }
-  }, [configId]);
+  }, [configId, isLoaded]);
 };
 
 export default useLocalStorageConfigId;

package/src/hooks/useLocalStorage/useLocalStorageLocale.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -8,6 +8,7 @@ import { localStorage, selectLocale, settingsSlice, useTypedSelector } from 'sta
 const useLocalStorageLocale = (): void => {
   const dispatch = useDispatch();
   const locale = useTypedSelector(selectLocale);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedLocale = localStorage.getLocale();
@@ -17,13 +18,15 @@ const useLocalStorageLocale = (): void => {
     } else {
       dispatch(settingsSlice.actions.init({ locale: detectLocale() }));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (locale) {
+    if (locale && isLoaded) {
       localStorage.setLocale(locale);
     }
-  }, [locale]);
+  }, [locale, isLoaded]);
 };
 
 export default useLocalStorageLocale;

package/src/hooks/useLocalStorage/useLocalStorageRack.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce } from 'react-use';
 
@@ -7,6 +7,7 @@ import { localStorage, rackSlice, selectRack, useTypedSelector } from 'state';
 const useLocalStorageRack = (): void => {
   const dispatch = useDispatch();
   const rack = useTypedSelector(selectRack);
+  const [isLoaded, setIsLoaded] = useState(false);
 
   useEffectOnce(() => {
     const persistedRack = localStorage.getRack();
@@ -14,13 +15,15 @@ const useLocalStorageRack = (): void => {
     if (persistedRack) {
       dispatch(rackSlice.actions.init(persistedRack));
     }
+
+    setIsLoaded(true);
   });
 
   useEffect(() => {
-    if (rack) {
+    if (rack && isLoaded) {
       localStorage.setRack(rack);
     }
-  }, [rack]);
+  }, [isLoaded, rack]);
 };
 
 export default useLocalStorageRack;

package/src/modals/SettingsModal/components/ConfigSetting/ConfigSetting.module.scss

@@ -9,5 +9,5 @@
 .label {
   display: flex;
   align-items: center;
-  font-family: 'Open Sans', sans-serif;
+  font-family: var(--font--family--latin);
 }

package/src/modals/SettingsModal/components/LocaleSetting/LocaleSetting.module.scss

@@ -10,10 +10,10 @@
   display: flex;
   align-items: center;
   gap: var(--spacing--l);
-  font-family: var(--font--family), sans-serif;
+  font-family: var(--font--family--latin);
 
   &.fa {
-    font-family: var(--font--family--arabic), var(--font--family), sans-serif;
+    font-family: var(--font--family--arabic);
   }
 }
 

package/src/parameters/index.ts

@@ -7,6 +7,7 @@ export const BREAKPOINTS = {
 };
 
 export const EASE_OUT_CUBIC = 'cubic-bezier(0.33, 1, 0.68, 1)'; // https://easings.net/#easeOutCubic
+export const TRANSITION = 'var(--transition)';
 
 export const GITHUB_PROJECT_URL = 'https://github.com/kamilmielnik/scrabble-solver';
 
@@ -23,6 +24,7 @@ export const COLOR_YELLOW = '#efe3ae';
 export const COMPONENTS_SPACING = 40;
 export const COMPONENTS_SPACING_SMALL = 20;
 
+export const BOARD_CELL_ACTIONS_OFFSET = 3;
 export const BOARD_CELL_BORDER_WIDTH = 1;
 export const BOARD_TILE_FONT_SIZE_MIN = 14;
 export const BOARD_TILE_FONT_SIZE_POINTS_MIN = 10;
@@ -78,7 +80,7 @@ export const RESULTS_INPUT_HEIGHT = 40;
 export const TILE_APPEAR_DURATION = 200;
 
 export const TILE_APPEAR_KEYFRAMES = [
-  { transform: 'translateY(0)', zIndex: 2 },
-  { transform: 'translateY(10%)', offset: 0.5, zIndex: 2 },
-  { transform: 'translateY(0)', zIndex: 1 },
+  { transform: 'translateY(0)' },
+  { transform: 'translateY(10%)', offset: 0.5 },
+  { transform: 'translateY(0)' },
 ];

package/src/styles/animations.scss

@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes show {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes progress {
   0% {
     clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);

package/src/styles/global.scss

@@ -53,6 +53,6 @@ h4 {
 }
 
 [lang='fa-IR'] {
-  --font--family: 'Vazirmatn', 'Open Sans', sans-serif;
-  --font--family--title: 'Vazirmatn', 'Lato', sans-serif;
+  --font--family: 'Vazirmatn', sans-serif;
+  --font--family--title: 'Vazirmatn', sans-serif;
 }

package/src/styles/mixins.scss

@@ -27,7 +27,7 @@ $media-expressions: (
     right: 0;
     bottom: 0;
     left: 0;
-    z-index: 1;
+    z-index: var(--z-index--focus-effect);
     transition: var(--transition);
     border-radius: var(--border--radius);
     box-shadow: 0 0 0 var(--focus-effect--size) transparent;
@@ -88,3 +88,58 @@ $media-expressions: (
   text-shadow: $size 0 $color, (-$size) 0 $color, 0 $size $color, 0 (-$size) $color, (-$size) (-$size) $color,
     (-$size) $size $color, $size (-$size) $color, $size $size $color;
 }
+
+@mixin lighthouse-input-size-hack {
+  // Hack for this Lighthouse warning:
+  // > Interactive elements like buttons and links should be large enough (48x48px), and have
+  // > enough space around them, to be easy enough to tap without overlapping onto other elements.
+
+  input {
+    position: absolute;
+    top: -100%;
+    left: -100%;
+    width: 300%;
+    height: 300%;
+    clip-path: inset((100% / 3));
+  }
+
+  [dir='ltr'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+  }
+
+  [dir='rtl'] & {
+    &:nth-child(1),
+    &:nth-child(2),
+    &:nth-child(3) {
+      input {
+        left: -200%;
+        clip-path: polygon((200% / 3) (100% / 3), 100% (100% / 3), 100% (200% / 3), (200% / 3) (200% / 3));
+      }
+    }
+
+    &:nth-last-child(1),
+    &:nth-last-child(2),
+    &:nth-last-child(3) {
+      input {
+        left: 0;
+        clip-path: polygon(0 (100% / 3), (100% / 3) (100% / 3), (100% / 3) (200% / 3), 0 (200% / 3));
+      }
+    }
+  }
+}