@scrabble-solver/scrabble-solver 2.10.11 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.10.11",
+  "version": "2.11.1",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,34 +28,30 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.19.2",
+    "@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.10.11",
-    "@scrabble-solver/constants": "^2.10.11",
-    "@scrabble-solver/dictionaries": "^2.10.11",
-    "@scrabble-solver/logger": "^2.10.11",
-    "@scrabble-solver/solver": "^2.10.11",
-    "@scrabble-solver/types": "^2.10.11",
-    "@scrabble-solver/word-definitions": "^2.10.11",
+    "@scrabble-solver/configs": "^2.11.1",
+    "@scrabble-solver/constants": "^2.11.1",
+    "@scrabble-solver/dictionaries": "^2.11.1",
+    "@scrabble-solver/logger": "^2.11.1",
+    "@scrabble-solver/solver": "^2.11.1",
+    "@scrabble-solver/types": "^2.11.1",
+    "@scrabble-solver/word-definitions": "^2.11.1",
     "classnames": "^2.3.2",
     "include-media": "^2.0.0",
     "include-media-query-builder": "^1.1.0",
-    "next": "^13.2.1",
+    "next": "^13.2.4",
     "normalize.css": "^8.0.1",
     "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.58.3",
+    "sass": "^1.59.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "b070bc7baa92d64a480fd457ad8cc757af51efc0"
+  "gitHead": "8dea3cee4e6f902ab8d1ae2339dd1e48b11db39d"
 }

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

@@ -112,6 +112,7 @@
     font-size: 60%;
     font-weight: bold;
     color: var(--color--white);
+    transition: var(--transition);
     content: ' ';
 
     [lang='fa-IR'] & {
@@ -124,6 +125,47 @@
   }
 }
 
+.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,10 +15,9 @@ 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';
 
@@ -85,7 +85,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 +225,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowDown: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, 1);
@@ -234,7 +234,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 +243,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 +252,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
       onArrowUp: (event) => {
         event.preventDefault();
 
-        if (isCtrl(event)) {
+        if (direction === 'horizontal') {
           onDirectionToggle();
         } else {
           changeActiveIndex(0, -1);
@@ -289,22 +289,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 +317,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
         dispatch(boardSlice.actions.toggleCellIsBlank(position));
       },
     });
-  }, [changeActiveIndex, config, dispatch, locale, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, direction, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

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

@@ -1,15 +1,30 @@
+@import 'styles/mixins';
+
 .dictionary {
+  @include scrollbars;
+
   position: relative;
+  max-height: var(--dictionary--height);
   height: var(--dictionary--height);
   overflow-y: auto;
   word-break: break-word;
   transition: var(--transition);
+
+  &.isAllowed {
+    background-color: var(--color--green--light);
+  }
+
+  &.isNotAllowed {
+    background-color: var(--color--red--light);
+  }
 }
 
 .result {
   transition: var(--transition);
 
   &.isAllowed {
+    background-color: var(--color--green--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -18,6 +33,8 @@
   }
 
   &.isNotAllowed {
+    background-color: var(--color--red--light);
+
     & + & {
       .content {
         padding-top: 0;
@@ -37,14 +54,6 @@
   text-transform: uppercase;
 }
 
-.isAllowed {
-  background-color: var(--color--green--light);
-}
-
-.isNotAllowed {
-  background-color: var(--color--red--light);
-}
-
 .definitions {
   margin: 0;
 

package/src/components/Dictionary/Dictionary.tsx

@@ -16,18 +16,18 @@ const Dictionary: FunctionComponent<Props> = ({ className }) => {
   const translate = useTranslate();
   const { results, isLoading } = useTypedSelector(selectDictionary);
   const error = useTypedSelector(selectDictionaryError);
-  const isFirstAllowed = results.length > 0 ? results[0].isAllowed : undefined;
+  const isLastAllowed = results.length > 0 ? results[results.length - 1].isAllowed : undefined;
 
   return (
     <div
       className={classNames(styles.dictionary, className, {
-        [styles.isAllowed]: isFirstAllowed === true,
-        [styles.isNotAllowed]: isFirstAllowed === false,
+        [styles.isAllowed]: isLastAllowed === true,
+        [styles.isNotAllowed]: isLastAllowed === false,
       })}
     >
-      {typeof error !== 'undefined' && <EmptyState variant="error">{error.message}</EmptyState>}
+      {typeof error !== 'undefined' && !isLoading && <EmptyState variant="error">{error.message}</EmptyState>}
 
-      {typeof error === 'undefined' && results.length === 0 && (
+      {typeof error === 'undefined' && !isLoading && results.length === 0 && (
         <EmptyState variant="info">{translate('dictionary.empty-state.uninitialized')}</EmptyState>
       )}
 

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/Loading/Loading.tsx

@@ -29,7 +29,7 @@ const Loading: FunctionComponent<Props> = ({ className, wave = true }) => {
   const content = useMemo(() => prepareContent(message), [message]);
 
   return (
-    <div className={classNames(styles.loading, className)}>
+    <div aria-label={translation} className={classNames(styles.loading, className)} role="status">
       <div className={styles.dim} />
       <div className={styles.logo}>
         <PlainTiles className={classNames(styles.tiles)} content={content} dropShadow wave={wave} />

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

@@ -112,10 +112,11 @@
 }
 
 .content {
+  @include scrollbars;
+
   position: relative;
   flex: 1;
   min-height: 0;
-  margin-top: calc(-1 * var(--spacing--l));
   padding: var(--spacing--l);
   overflow: auto;
 }

package/src/components/NavButtons/NavButtons.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { FunctionComponent } from 'react';
 
-import { useIsTouchDevice, useMediaQuery } from 'hooks';
+import { useAppLayout } from 'hooks';
 import { CardChecklist, Cog, Eraser, Github, Keyboard, List, Sack } from 'icons';
 import { GITHUB_PROJECT_URL } from 'parameters';
 import { selectHasInvalidWords, selectHasOverusedTiles, useTranslate, useTypedSelector } from 'state';
@@ -30,10 +30,9 @@ const NavButtons: FunctionComponent<Props> = ({
   const translate = useTranslate();
   const hasOverusedTiles = useTypedSelector(selectHasOverusedTiles);
   const hasInvalidWords = useTypedSelector(selectHasInvalidWords);
-  const isTouchDevice = useIsTouchDevice();
-  const isLessThanS = useMediaQuery('<s');
+  const { showKeyMap, showShortNav } = useAppLayout();
 
-  if (isLessThanS) {
+  if (showShortNav) {
     return (
       <div className={styles.navButtons}>
         <div className={styles.group}>
@@ -114,7 +113,7 @@ const NavButtons: FunctionComponent<Props> = ({
       <div className={styles.separator} />
 
       <div className={styles.group}>
-        {!isTouchDevice && (
+        {showKeyMap && (
           <IconButton
             aria-label={translate('keyMap')}
             className={styles.button}

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));
 }

package/src/components/PlainTiles/Tile.tsx

@@ -14,12 +14,12 @@ interface Props {
 
 const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamily, points, size, transform, x, y }) => (
   <g className={className} transform={transform}>
-    <rect fill={color} height={size} width={size} x={x} y={y} />
+    <rect fill={color} height={size} rx={size * 0.15} width={size} x={x} y={y} />
 
     <text
       dominantBaseline="central"
       fontFamily={fontFamily}
-      fontSize={0.6 * size}
+      fontSize={size * 0.6}
       fontWeight="bold"
       textAnchor="middle"
       x={x + size / 2}
@@ -32,7 +32,7 @@ const Tile: FunctionComponent<Props> = ({ character, className, color, fontFamil
       <text
         dominantBaseline="text-after-edge"
         fontFamily={fontFamily}
-        fontSize={0.25 * size}
+        fontSize={size * 0.25}
         fontWeight="bold"
         textAnchor="end"
         x={x + size * 0.9}