@scrabble-solver/scrabble-solver 2.11.0 → 2.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "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.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",
@@ -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": "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

@@ -125,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, moveFocus, onDirectionToggle, rows]);
+  }, [changeActiveIndex, config, direction, dispatch, locale, moveFocus, onDirectionToggle, rows]);
 
   const onPaste = useCallback<ClipboardEventHandler>(
     (event) => {

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

@@ -112,6 +112,8 @@
 }
 
 .content {
+  @include scrollbars;
+
   position: relative;
   flex: 1;
   min-height: 0;

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}

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

@@ -3,6 +3,7 @@
 .rack {
   display: flex;
   box-shadow: var(--box-shadow);
+  border-radius: var(--border--radius);
 }
 
 .tile {
@@ -15,3 +16,27 @@
     z-index: 2;
   }
 }
+
+.sharpLeft {
+  [dir='ltr'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.sharpRight {
+  [dir='ltr'] & {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  [dir='rtl'] & {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}

package/src/components/Rack/Rack.tsx

@@ -8,7 +8,6 @@ import {
   createKeyboardNavigation,
   extractCharacters,
   extractInputValue,
-  isCtrl,
   zipCharactersAndTiles,
 } from 'lib';
 import { rackSlice, selectConfig, selectLocale, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';
@@ -99,9 +98,7 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         changeActiveIndex(1);
       },
       onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          changeActiveIndex(1);
-        } else if (event.currentTarget.value === event.key) {
+        if (event.currentTarget.value === event.key) {
           // change event did not fire because the same character was typed over the current one
           // but we still want to move the caret
           event.preventDefault();
@@ -118,6 +115,10 @@ const Rack: FunctionComponent<Props> = ({ className, tileSize }) => {
         <RackTile
           activeIndexRef={activeIndexRef}
           character={character}
+          className={classNames({
+            [styles.sharpLeft]: index !== 0,
+            [styles.sharpRight]: index !== tiles.length - 1,
+          })}
           index={index}
           inputRef={tilesRefs[index]}
           key={index}

package/src/components/Rack/RackTile.tsx

@@ -1,5 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
+import classNames from 'classnames';
 import {
   ChangeEvent,
   ChangeEventHandler,
@@ -12,7 +13,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 
-import { createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
+import { createKeyboardNavigation, extractCharacters, extractInputValue } from 'lib';
 import {
   rackSlice,
   selectCharacterIsValid,
@@ -30,6 +31,7 @@ import styles from './Rack.module.scss';
 interface Props {
   activeIndexRef: MutableRefObject<number | undefined>;
   character: string | null;
+  className?: string;
   index: number;
   inputRef: RefObject<HTMLInputElement>;
   size: number;
@@ -41,6 +43,7 @@ interface Props {
 const RackTile: FunctionComponent<Props> = ({
   activeIndexRef,
   character,
+  className,
   index,
   inputRef,
   size,
@@ -77,17 +80,7 @@ const RackTile: FunctionComponent<Props> = ({
         event.preventDefault();
         dispatch(rackSlice.actions.changeCharacter({ character: null, index }));
       },
-      onKeyDown: (event) => {
-        if (isCtrl(event) && config.isTwoCharacterTilePrefix(event.key)) {
-          event.preventDefault();
-          event.stopPropagation();
-          const twoTilesCharacter = config.getTwoCharacterTileByPrefix(event.key);
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          dispatch(rackSlice.actions.changeCharacter({ character: twoTilesCharacter!, index }));
-        }
-
-        onKeyDown(event);
-      },
+      onKeyDown,
     });
   }, [index, onKeyDown]);
 
@@ -97,7 +90,7 @@ const RackTile: FunctionComponent<Props> = ({
         index: (index + 1).toLocaleString(locale),
       })}
       autoFocus={index === 0}
-      className={styles.tile}
+      className={classNames(styles.tile, className)}
       character={character === null ? undefined : character}
       highlighted={tile !== null}
       inputRef={inputRef}