@scrabble-solver/scrabble-solver 2.11.0 → 2.11.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -30,15 +30,14 @@
   "dependencies": {
     "@floating-ui/react": "^0.20.1",
     "@kamilmielnik/trie": "^2.0.1",
-    "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.9.3",
-    "@scrabble-solver/configs": "^2.11.0",
-    "@scrabble-solver/constants": "^2.11.0",
-    "@scrabble-solver/dictionaries": "^2.11.0",
-    "@scrabble-solver/logger": "^2.11.0",
-    "@scrabble-solver/solver": "^2.11.0",
-    "@scrabble-solver/types": "^2.11.0",
-    "@scrabble-solver/word-definitions": "^2.11.0",
+    "@scrabble-solver/configs": "^2.11.2",
+    "@scrabble-solver/constants": "^2.11.2",
+    "@scrabble-solver/dictionaries": "^2.11.2",
+    "@scrabble-solver/logger": "^2.11.2",
+    "@scrabble-solver/solver": "^2.11.2",
+    "@scrabble-solver/types": "^2.11.2",
+    "@scrabble-solver/word-definitions": "^2.11.2",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
@@ -47,15 +46,12 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-modal": "^3.16.1",
-    "react-popper": "^2.3.0",
     "react-portal": "^4.2.2",
     "react-redux": "^8.0.5",
     "react-use": "^17.4.0",
     "react-window": "^1.8.8",
-    "redux": "^4.2.1",
     "redux-saga": "^1.2.2",
     "store2": "^2.14.2",
-    "uuid": "^9.0.0",
     "workbox-expiration": "^6.5.4",
     "workbox-precaching": "^6.5.4",
     "workbox-routing": "^6.5.4",
@@ -72,10 +68,9 @@
     "@types/react-window": "^1.8.5",
     "@types/redux": "^3.6.31",
     "@types/redux-saga": "^0.10.5",
-    "@types/uuid": "^9.0.1",
     "env-cmd": "^10.1.0",
     "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "493dd931e7f16c34c425295a0f048756d6c192c8"
+  "gitHead": "b7ac80ab2a6c0af218756953e354d1e0c7f1e58a"
 }

package/src/components/{Solver/components/EmptyState/EmptyState.module.scss → Alert/Alert.module.scss}

@@ -1,4 +1,4 @@
-.emptyState {
+.alert {
   display: flex;
   min-width: 0;
   width: 100%;
@@ -11,7 +11,6 @@
 .iconContainer {
   flex: 0 0 auto;
   display: flex;
-  align-items: center;
   justify-content: center;
   padding: var(--spacing--m);
   color: var(--color--foreground--secondary);
@@ -33,15 +32,20 @@
     color: var(--color--error);
   }
 
-  .warning & {
-    background-color: var(--color--yellow--light);
-    color: var(--color--warning);
-  }
-
   .info & {
     background-color: var(--color--blue--light);
     color: var(--color--info);
   }
+
+  .success & {
+    background-color: var(--color--green--light);
+    color: var(--color--success);
+  }
+
+  .warning & {
+    background-color: var(--color--yellow--light);
+    color: var(--color--warning);
+  }
 }
 
 .icon {

package/src/components/{Solver/components/EmptyState/EmptyState.tsx → Alert/Alert.tsx}

@@ -1,30 +1,32 @@
 import classNames from 'classnames';
 import { FunctionComponent, HTMLProps, ReactNode, SVGAttributes } from 'react';
 
-import { CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
+import { Check, CrossCircleFill, ExclamationTriangleFill, InfoCircleFill } from 'icons';
 
-import styles from './EmptyState.module.scss';
+import styles from './Alert.module.scss';
 
 interface Props extends HTMLProps<HTMLDivElement> {
   children: ReactNode;
   className?: string;
-  variant: 'error' | 'info' | 'warning';
+  variant: 'error' | 'info' | 'success' | 'warning';
 }
 
 const ICON_PER_TYPE: Record<Props['variant'], FunctionComponent<SVGAttributes<SVGElement>>> = {
   error: CrossCircleFill,
   info: InfoCircleFill,
+  success: Check,
   warning: ExclamationTriangleFill,
 };
 
-const EmptyState: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
+const Alert: FunctionComponent<Props> = ({ children, className, variant, ...props }) => {
   const Icon = ICON_PER_TYPE[variant];
 
   return (
     <div
-      className={classNames(styles.emptyState, className, {
+      className={classNames(styles.alert, className, {
         [styles.error]: variant === 'error',
         [styles.info]: variant === 'info',
+        [styles.success]: variant === 'success',
         [styles.warning]: variant === 'warning',
       })}
       {...props}
@@ -38,4 +40,4 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant, ..
   );
 };
 
-export default EmptyState;
+export default Alert;

package/src/components/Alert/index.ts

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

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

@@ -4,10 +4,65 @@
   display: table;
   box-shadow: var(--box-shadow);
   border: var(--border);
+  border-radius: var(--border--radius);
 }
 
 .row {
   display: table-row;
+
+  &:first-child {
+    border-top-left-radius: var(--border--radius);
+    border-top-right-radius: var(--border--radius);
+
+    .cell {
+      &:first-child {
+        [dir='ltr'] & {
+          border-top-left-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-top-right-radius: var(--border--radius);
+        }
+      }
+
+      &:last-child {
+        [dir='ltr'] & {
+          border-top-right-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-top-left-radius: var(--border--radius);
+        }
+      }
+    }
+  }
+
+  &:last-child {
+    border-bottom-left-radius: var(--border--radius);
+    border-bottom-right-radius: var(--border--radius);
+
+    .cell {
+      &:first-child {
+        [dir='ltr'] & {
+          border-bottom-left-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-bottom-right-radius: var(--border--radius);
+        }
+      }
+
+      &:last-child {
+        [dir='ltr'] & {
+          border-bottom-right-radius: var(--border--radius);
+        }
+
+        [dir='rtl'] & {
+          border-bottom-left-radius: var(--border--radius);
+        }
+      }
+    }
+  }
 }
 
 .actions {

package/src/components/Board/BoardPure.tsx

@@ -45,6 +45,10 @@ const BoardPure: FunctionComponent<Props> = ({
           <Cell
             className={styles.cell}
             cell={cell}
+            cellBottom={y < rows.length - 1 ? rows[y + 1][x] : undefined}
+            cellLeft={x > 0 ? rows[y][x - 1] : undefined}
+            cellRight={x < rows.length - 1 ? rows[y][x + 1] : undefined}
+            cellTop={y > 0 ? rows[y - 1][x] : undefined}
             inputRef={inputRefs[y][x]}
             isBottom={y === rows.length - 1}
             isCenter={center.x === x && center.y === y}

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

@@ -6,6 +6,7 @@
 
   position: relative;
   display: table-cell;
+  vertical-align: middle;
   background-color: var(--color--white);
   border-bottom: var(--border--width) dotted var(--border--color--light);
   transition: var(--transition);
@@ -35,42 +36,49 @@
 
   &.bonusStart {
     &::before {
+      content: '';
       background-color: var(--color--bonus--start);
     }
   }
 
   &.bonusCharacter1 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--1);
     }
   }
 
   &.bonusCharacter2 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--2);
     }
   }
 
   &.bonusCharacter3 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--3);
     }
   }
 
   &.bonusCharacter5 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character--5);
     }
   }
 
   &.bonusCharacterMultiplier2 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character-multiplier--2);
     }
   }
 
   &.bonusCharacterMultiplier3 {
     &::before {
+      content: '';
       background-color: var(--color--bonus--character-multiplier--3);
     }
   }
@@ -91,7 +99,7 @@
 
   &.filtered {
     &::before {
-      content: ' ';
+      content: '';
       background-color: var(--color--foreground--secondary);
     }
   }
@@ -113,7 +121,6 @@
     font-weight: bold;
     color: var(--color--white);
     transition: var(--transition);
-    content: ' ';
 
     [lang='fa-IR'] & {
       font-family: var(--font--family--latin);
@@ -125,6 +132,48 @@
   }
 }
 
+.tile {
+  .sharpTopLeft & {
+    [dir='ltr'] & {
+      border-top-left-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-top-right-radius: 0;
+    }
+  }
+
+  .sharpTopRight & {
+    [dir='ltr'] & {
+      border-top-right-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-top-left-radius: 0;
+    }
+  }
+
+  .sharpBottomLeft & {
+    [dir='ltr'] & {
+      border-bottom-left-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-bottom-right-radius: 0;
+    }
+  }
+
+  .sharpBottomRight & {
+    [dir='ltr'] & {
+      border-bottom-right-radius: 0;
+    }
+
+    [dir='rtl'] & {
+      border-bottom-left-radius: 0;
+    }
+  }
+}
+
 .icon {
   $size: 40%;
 

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

@@ -17,6 +17,10 @@ import CellPure from './CellPure';
 
 interface Props {
   cell: CellModel;
+  cellBottom?: CellModel;
+  cellLeft?: CellModel;
+  cellRight?: CellModel;
+  cellTop?: CellModel;
   className?: string;
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
@@ -29,6 +33,10 @@ interface Props {
 
 const Cell: FunctionComponent<Props> = ({
   cell,
+  cellBottom,
+  cellLeft,
+  cellRight,
+  cellTop,
   className,
   inputRef,
   isBottom,
@@ -59,6 +67,10 @@ const Cell: FunctionComponent<Props> = ({
       })}
       bonus={bonus}
       cell={cell}
+      cellBottom={cellBottom}
+      cellLeft={cellLeft}
+      cellRight={cellRight}
+      cellTop={cellTop}
       className={className}
       inputRef={inputRef}
       isBottom={isBottom}

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

@@ -13,6 +13,10 @@ interface Props {
   'aria-label': string;
   bonus: Bonus | undefined;
   cell: Cell;
+  cellBottom?: Cell;
+  cellLeft?: Cell;
+  cellRight?: Cell;
+  cellTop?: Cell;
   className?: string;
   inputRef: RefObject<HTMLInputElement>;
   isBottom: boolean;
@@ -33,6 +37,10 @@ const CellPure: FunctionComponent<Props> = ({
   'aria-label': ariaLabel,
   bonus,
   cell,
+  cellBottom,
+  cellLeft,
+  cellRight,
+  cellTop,
   className,
   inputRef,
   isBottom,
@@ -53,6 +61,10 @@ const CellPure: FunctionComponent<Props> = ({
       [styles.bottom]: isBottom,
       [styles.filtered]: isFiltered,
       [styles.right]: isRight,
+      [styles.sharpTopLeft]: cellTop?.hasTile() || cellLeft?.hasTile(),
+      [styles.sharpTopRight]: cellTop?.hasTile() || cellRight?.hasTile(),
+      [styles.sharpBottomLeft]: cellBottom?.hasTile() || cellLeft?.hasTile(),
+      [styles.sharpBottomRight]: cellBottom?.hasTile() || cellRight?.hasTile(),
     })}
     style={style}
   >

package/src/components/Board/hooks/useGrid.ts

@@ -1,4 +1,5 @@
 /* eslint-disable max-lines, max-statements */
+import { PayloadAction } from '@reduxjs/toolkit';
 import { BLANK, EMPTY_CELL } from '@scrabble-solver/constants';
 import { Board, Cell } from '@scrabble-solver/types';
 import {
@@ -14,15 +15,13 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
-import { AnyAction } from 'redux';
 
 import { LOCALE_FEATURES } from 'i18n';
-import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import { boardSlice, selectConfig, selectLocale, useTypedSelector } from 'state';
-import { Direction } from 'types';
+import { Direction, Point } from 'types';
 
 import { getPositionInGrid } from '../lib';
-import { Point } from '../types';
 
 const toggleDirection = (direction: Direction) => (direction === 'vertical' ? 'horizontal' : 'vertical');
 
@@ -85,7 +84,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const insertValue = useCallback(
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
-      const actions: AnyAction[] = [];
+      const actions: PayloadAction<unknown>[] = [];
       let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
@@ -225,7 +224,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowDown: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, 1);
@@ -234,7 +233,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowLeft: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'vertical') {
           onDirectionToggle();
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? -1 : 1, 0);
@@ -243,7 +242,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowRight: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'vertical') {
           onDirectionToggle();
         } else {
           changeActiveIndex(LOCALE_FEATURES[locale].direction === 'ltr' ? 1 : -1, 0);
@@ -252,7 +251,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowUp: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, -1);
@@ -289,22 +288,6 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
 
         const { x, y } = position;
         const character = event.key.toLowerCase();
-        const isTogglingBlank = isCtrl(event) && character === 'b';
-        const twoCharacterTile = config.getTwoCharacterTileByPrefix(character);
-
-        if (isTogglingBlank) {
-          event.preventDefault();
-          dispatch(boardSlice.actions.toggleCellIsBlank(position));
-          return;
-        }
-
-        if (isCtrl(event) && twoCharacterTile) {
-          event.preventDefault();
-          dispatch(boardSlice.actions.changeCellValue({ x, y, value: twoCharacterTile }));
-          moveFocus(1);
-          return;
-        }
-
         const cell = rows[y][x];
         const twoCharacterCandidate = cell.tile.character + character;
 
@@ -333,7 +316,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, locale, moveFocus, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, direction, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

package/src/components/Board/lib/getPositionInGrid.ts

@@ -1,4 +1,4 @@
-import { Point } from '../types';
+import { Point } from 'types';
 
 const getPositionInGrid = <T>(grid: T[][], constraint: (value: T) => boolean): Point | undefined => {
   for (let y = 0; y < grid.length; ++y) {

package/src/components/Dictionary/Dictionary.module.scss

@@ -1,4 +1,8 @@
+@import 'styles/mixins';
+
 .dictionary {
+  @include scrollbars;
+
   position: relative;
   max-height: var(--dictionary--height);
   height: var(--dictionary--height);

package/src/components/DictionaryInput/DictionaryInput.module.scss

@@ -8,4 +8,5 @@
   @include text-input;
 
   border: none;
+  border-radius: inherit;
 }

package/src/components/EmptyState/EmptyState.module.scss

@@ -8,7 +8,8 @@
 
 .tiles {
   display: inline-block;
+  max-width: 100%;
   margin-bottom: var(--spacing--m);
-  height: 40px;
+  height: 48px;
   overflow: visible;
 }

package/src/components/EmptyState/EmptyState.tsx

@@ -41,8 +41,7 @@ const EmptyState: FunctionComponent<Props> = ({ children, className, variant })
   return (
     <div className={classNames(styles.emptyState, className)}>
       <PlainTiles className={styles.tiles} color={COLORS_PER_TYPE[variant]} content={content} />
-
-      <div className={styles.content}>{children}</div>
+      <div>{children}</div>
     </div>
   );
 };

package/src/components/Loading/Loading.module.scss

@@ -30,6 +30,6 @@
 }
 
 .tiles {
-  width: 298px;
+  width: 100% * 2 / 3;
   height: 100%;
 }

package/src/components/Logo/Logo.tsx

@@ -1,3 +1,8 @@
+/**
+ * This component is unused, but it serves as a blueprint for the Logo.svg.
+ * Logo.svg is what this component generates with all the text nodes transformed
+ * into paths (manually with Inkscape), and corner radius removed from tiles.
+ */
 import { CSSProperties, FunctionComponent } from 'react';
 
 import PlainTiles from '../PlainTiles';

package/src/components/LogoSplashScreen/LogoSplashScreen.module.scss

@@ -2,7 +2,7 @@
 
 $loading-duration: 250ms;
 $loaded-duration: 100ms;
-$hiding-duration: 200ms;
+$hiding-duration: 150ms;
 
 .logoSplashScreen {
   display: flex;
@@ -16,18 +16,21 @@ $hiding-duration: 200ms;
     animation-delay: $loading-duration + $loaded-duration;
     animation-duration: $hiding-duration;
     animation-fill-mode: forwards;
+    animation-timing-function: linear;
 
     .logos {
       animation: pulse;
       animation-delay: $loading-duration + $loaded-duration;
       animation-duration: $hiding-duration;
       animation-fill-mode: forwards;
+      animation-timing-function: linear;
     }
 
     .logoColor {
       animation: progress;
       animation-duration: $loading-duration;
       animation-fill-mode: forwards;
+      animation-timing-function: linear;
     }
   }
 }

package/src/components/Modal/Modal.module.scss

@@ -112,9 +112,23 @@
 }
 
 .content {
+  @include scrollbars;
+
   position: relative;
   flex: 1;
   min-height: 0;
   padding: var(--spacing--l);
   overflow: auto;
 }
+
+.footer {
+  flex: 0 0 auto;
+  display: flex;
+  justify-content: flex-end;
+  padding: var(--spacing--l);
+  box-shadow: var(--box-shadow);
+
+  @include media('>s') {
+    display: none;
+  }
+}

package/src/components/Modal/Modal.tsx

@@ -15,12 +15,13 @@ import styles from './Modal.module.scss';
 export interface Props {
   children: ReactNode;
   className?: string;
+  footer?: ReactNode;
   isOpen: boolean;
   title: string;
   onClose: () => void;
 }
 
-const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
+const Modal: FunctionComponent<Props> = ({ children, className, footer, isOpen, title, onClose }) => {
   const translate = useTranslate();
   const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
 
@@ -68,6 +69,8 @@ const Modal: FunctionComponent<Props> = ({ children, className, isOpen, title, o
         </div>
 
         <div className={styles.content}>{children}</div>
+
+        {footer && <div className={styles.footer}>{footer}</div>}
       </div>
     </ReactModal>
   );

package/src/components/PlainTiles/PlainTiles.module.scss

@@ -20,5 +20,5 @@ $duration: 750ms;
 }
 
 .dropShadow {
-  filter: drop-shadow(0 0 4px rgba(#000, 0.4));
+  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
 }